初始化项目版本
This commit is contained in:
Axhub Make
34
.agents/skills/enhance-prompt/README.md
Normal file
34
.agents/skills/enhance-prompt/README.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Stitch Enhance Prompt Skill
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global
|
||||
```
|
||||
|
||||
## Example Prompt
|
||||
|
||||
```text
|
||||
Enhance my prompt "make me a login page" for better Stitch generation results.
|
||||
```
|
||||
|
||||
## Skill Structure
|
||||
|
||||
This repository follows the **Agent Skills** open standard. Each skill is self-contained with its own logic, workflow, and reference materials.
|
||||
|
||||
```text
|
||||
enhance-prompt/
|
||||
├── SKILL.md — Core instructions & workflow
|
||||
├── references/ — UI/UX vocabulary and adjective palettes
|
||||
└── README.md — This file
|
||||
```
|
||||
|
||||
## How it Works
|
||||
|
||||
When activated, the agent follows a prompt enhancement pipeline:
|
||||
|
||||
1. **Assessment**: Evaluates the input for missing elements (platform, structure, visual style, colors).
|
||||
2. **DESIGN.md Check**: Looks for an existing design system to inject; recommends creating one if missing.
|
||||
3. **Enhancement**: Applies UI/UX keywords, vibe adjectives, and structured page sections.
|
||||
4. **Formatting**: Outputs a Stitch-optimized prompt with design system block and numbered structure.
|
||||
5. **Delivery**: Returns enhanced text for user review, with optional file output.
|
||||
204
.agents/skills/enhance-prompt/SKILL.md
Normal file
204
.agents/skills/enhance-prompt/SKILL.md
Normal file
@@ -0,0 +1,204 @@
|
||||
---
|
||||
name: enhance-prompt
|
||||
description: Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.
|
||||
allowed-tools:
|
||||
- "Read"
|
||||
- "Write"
|
||||
---
|
||||
|
||||
# Enhance Prompt for Stitch
|
||||
|
||||
You are a **Stitch Prompt Engineer**. Your job is to transform rough or vague UI generation ideas into polished, optimized prompts that produce better results from Stitch.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before enhancing prompts, consult the official Stitch documentation for the latest best practices:
|
||||
|
||||
- **Stitch Effective Prompting Guide**: https://stitch.withgoogle.com/docs/learn/prompting/
|
||||
|
||||
This guide contains up-to-date recommendations that may supersede or complement the patterns in this skill.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Activate when a user wants to:
|
||||
- Polish a UI prompt before sending to Stitch
|
||||
- Improve a prompt that produced poor results
|
||||
- Add design system consistency to a simple idea
|
||||
- Structure a vague concept into an actionable prompt
|
||||
|
||||
## Enhancement Pipeline
|
||||
|
||||
Follow these steps to enhance any prompt:
|
||||
|
||||
### Step 1: Assess the Input
|
||||
|
||||
Evaluate what's missing from the user's prompt:
|
||||
|
||||
| Element | Check for | If missing... |
|
||||
|---------|-----------|---------------|
|
||||
| **Platform** | "web", "mobile", "desktop" | Add based on context or ask |
|
||||
| **Page type** | "landing page", "dashboard", "form" | Infer from description |
|
||||
| **Structure** | Numbered sections/components | Create logical page structure |
|
||||
| **Visual style** | Adjectives, mood, vibe | Add appropriate descriptors |
|
||||
| **Colors** | Specific values or roles | Add design system or suggest |
|
||||
| **Components** | UI-specific terms | Translate to proper keywords |
|
||||
|
||||
### Step 2: Check for DESIGN.md
|
||||
|
||||
Look for a `DESIGN.md` file in the current project:
|
||||
|
||||
**If DESIGN.md exists:**
|
||||
1. Read the file to extract the design system block
|
||||
2. Include the color palette, typography, and component styles
|
||||
3. Format as a "DESIGN SYSTEM (REQUIRED)" section in the output
|
||||
|
||||
**If DESIGN.md does not exist:**
|
||||
1. Add this note at the end of the enhanced prompt:
|
||||
|
||||
```
|
||||
---
|
||||
💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md
|
||||
file using the `design-md` skill. This ensures all generated pages share the
|
||||
same visual language.
|
||||
```
|
||||
|
||||
### Step 3: Apply Enhancements
|
||||
|
||||
Transform the input using these techniques:
|
||||
|
||||
#### A. Add UI/UX Keywords
|
||||
|
||||
Replace vague terms with specific component names:
|
||||
|
||||
| Vague | Enhanced |
|
||||
|-------|----------|
|
||||
| "menu at the top" | "navigation bar with logo and menu items" |
|
||||
| "button" | "primary call-to-action button" |
|
||||
| "list of items" | "card grid layout" or "vertical list with thumbnails" |
|
||||
| "form" | "form with labeled input fields and submit button" |
|
||||
| "picture area" | "hero section with full-width image" |
|
||||
|
||||
#### B. Amplify the Vibe
|
||||
|
||||
Add descriptive adjectives to set the mood:
|
||||
|
||||
| Basic | Enhanced |
|
||||
|-------|----------|
|
||||
| "modern" | "clean, minimal, with generous whitespace" |
|
||||
| "professional" | "sophisticated, trustworthy, with subtle shadows" |
|
||||
| "fun" | "vibrant, playful, with rounded corners and bold colors" |
|
||||
| "dark mode" | "dark theme with high-contrast accents on deep backgrounds" |
|
||||
|
||||
#### C. Structure the Page
|
||||
|
||||
Organize content into numbered sections:
|
||||
|
||||
```markdown
|
||||
**Page Structure:**
|
||||
1. **Header:** Navigation with logo and menu items
|
||||
2. **Hero Section:** Headline, subtext, and primary CTA
|
||||
3. **Content Area:** [Describe the main content]
|
||||
4. **Footer:** Links, social icons, copyright
|
||||
```
|
||||
|
||||
#### D. Format Colors Properly
|
||||
|
||||
When colors are mentioned, format them as:
|
||||
```
|
||||
Descriptive Name (#hexcode) for functional role
|
||||
```
|
||||
|
||||
Examples:
|
||||
- "Deep Ocean Blue (#1a365d) for primary buttons and links"
|
||||
- "Warm Cream (#faf5f0) for page background"
|
||||
- "Soft Gray (#6b7280) for secondary text"
|
||||
|
||||
### Step 4: Format the Output
|
||||
|
||||
Structure the enhanced prompt in this order:
|
||||
|
||||
```markdown
|
||||
[One-line description of the page purpose and vibe]
|
||||
|
||||
**DESIGN SYSTEM (REQUIRED):**
|
||||
- Platform: [Web/Mobile], [Desktop/Mobile]-first
|
||||
- Theme: [Light/Dark], [style descriptors]
|
||||
- Background: [Color description] (#hex)
|
||||
- Primary Accent: [Color description] (#hex) for [role]
|
||||
- Text Primary: [Color description] (#hex)
|
||||
- [Additional design tokens...]
|
||||
|
||||
**Page Structure:**
|
||||
1. **[Section]:** [Description]
|
||||
2. **[Section]:** [Description]
|
||||
...
|
||||
```
|
||||
|
||||
## Output Options
|
||||
|
||||
**Default:** Return the enhanced prompt as text for the user to copy.
|
||||
|
||||
**Optional file output:** If the user requests, write to a file:
|
||||
- `next-prompt.md` — for use with the `stitch-loop` skill
|
||||
- Custom filename specified by user
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Vague Input → Structured Prompt
|
||||
|
||||
**User input:**
|
||||
> "make me a login page"
|
||||
|
||||
**Enhanced output:**
|
||||
```markdown
|
||||
A clean, trustworthy login page with a centered form and subtle branding.
|
||||
|
||||
**DESIGN SYSTEM (REQUIRED):**
|
||||
- Platform: Web, Desktop-first
|
||||
- Theme: Light, minimal, professional
|
||||
- Background: Clean White (#ffffff)
|
||||
- Surface: Soft Gray (#f9fafb) for form card
|
||||
- Primary Accent: Deep Blue (#2563eb) for submit button and links
|
||||
- Text Primary: Near Black (#111827) for headings
|
||||
- Text Secondary: Medium Gray (#6b7280) for labels
|
||||
- Buttons: Subtly rounded (8px), full-width on form
|
||||
- Cards: Gently rounded (12px), soft shadow for elevation
|
||||
|
||||
**Page Structure:**
|
||||
1. **Header:** Minimal logo, centered
|
||||
2. **Login Card:** Centered form with email, password fields, "Forgot password?" link
|
||||
3. **Submit Button:** Primary blue "Sign In" button
|
||||
4. **Footer:** "Don't have an account? Sign up" link
|
||||
|
||||
---
|
||||
💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md
|
||||
file using the `design-md` skill.
|
||||
```
|
||||
|
||||
### Example 2: Feature Request → Targeted Edit
|
||||
|
||||
**User input:**
|
||||
> "add a search bar"
|
||||
|
||||
**Enhanced output:**
|
||||
```markdown
|
||||
Add a search bar to the header navigation.
|
||||
|
||||
**Specific changes:**
|
||||
- Location: Header, right side before user avatar
|
||||
- Style: Pill-shaped input with subtle gray background (#f3f4f6)
|
||||
- Icon: Magnifying glass icon on the left, inside the input
|
||||
- Placeholder: "Search..." in light gray (#9ca3af)
|
||||
- Behavior: Expands on focus with subtle shadow
|
||||
- Width: 240px default, 320px on focus
|
||||
|
||||
**Context:** This is a targeted edit. Make only this change while preserving all existing elements.
|
||||
```
|
||||
|
||||
## Tips for Best Results
|
||||
|
||||
1. **Be specific early** — Vague inputs need more enhancement
|
||||
2. **Match the user's intent** — Don't over-design if they want simple
|
||||
3. **Keep it structured** — Numbered sections help Stitch understand hierarchy
|
||||
4. **Include the design system** — Consistency is key for multi-page projects
|
||||
5. **One change at a time for edits** — Don't bundle unrelated changes
|
||||
114
.agents/skills/enhance-prompt/references/KEYWORDS.md
Normal file
114
.agents/skills/enhance-prompt/references/KEYWORDS.md
Normal file
@@ -0,0 +1,114 @@
|
||||
# UI/UX Keywords Reference
|
||||
|
||||
Progressive disclosure reference for common UI terminology and adjective palettes.
|
||||
|
||||
## Component Keywords
|
||||
|
||||
### Navigation
|
||||
- navigation bar, nav menu, header
|
||||
- breadcrumbs, tabs, sidebar
|
||||
- hamburger menu, dropdown menu
|
||||
- back button, close button
|
||||
|
||||
### Content Containers
|
||||
- hero section, hero banner
|
||||
- card, card grid, tile
|
||||
- modal, dialog, popup
|
||||
- accordion, collapsible section
|
||||
- carousel, slider
|
||||
|
||||
### Forms
|
||||
- input field, text input
|
||||
- dropdown, select menu
|
||||
- checkbox, radio button
|
||||
- toggle switch
|
||||
- date picker, time picker
|
||||
- search bar, search input
|
||||
- submit button, form actions
|
||||
|
||||
### Calls to Action
|
||||
- primary button, secondary button
|
||||
- ghost button, text link
|
||||
- floating action button (FAB)
|
||||
- icon button
|
||||
|
||||
### Feedback
|
||||
- toast notification, snackbar
|
||||
- alert banner, warning message
|
||||
- loading spinner, skeleton loader
|
||||
- progress bar, step indicator
|
||||
|
||||
### Layout
|
||||
- grid layout, flexbox
|
||||
- sidebar layout, split view
|
||||
- sticky header, fixed footer
|
||||
- full-width, contained width
|
||||
- centered content, max-width container
|
||||
|
||||
## Adjective Palettes
|
||||
|
||||
### Minimal / Clean
|
||||
- minimal, clean, uncluttered
|
||||
- generous whitespace, breathing room
|
||||
- subtle, understated, refined
|
||||
- simple, focused, distraction-free
|
||||
|
||||
### Professional / Corporate
|
||||
- sophisticated, polished, trustworthy
|
||||
- corporate, business-like, formal
|
||||
- subtle shadows, clean lines
|
||||
- structured, organized, hierarchical
|
||||
|
||||
### Playful / Fun
|
||||
- vibrant, colorful, energetic
|
||||
- rounded corners, soft edges
|
||||
- bold, expressive, dynamic
|
||||
- friendly, approachable, warm
|
||||
|
||||
### Premium / Luxury
|
||||
- elegant, luxurious, high-end
|
||||
- dramatic, bold contrasts
|
||||
- sleek, modern, cutting-edge
|
||||
- exclusive, boutique, curated
|
||||
|
||||
### Dark Mode
|
||||
- dark theme, night mode
|
||||
- high-contrast accents
|
||||
- soft glows, subtle highlights
|
||||
- deep backgrounds, muted surfaces
|
||||
|
||||
### Organic / Natural
|
||||
- earthy tones, natural colors
|
||||
- warm, inviting, cozy
|
||||
- textured, tactile, handcrafted
|
||||
- flowing, organic shapes
|
||||
|
||||
## Color Role Terminology
|
||||
|
||||
### Backgrounds
|
||||
- page background, canvas
|
||||
- surface color, card background
|
||||
- overlay, scrim
|
||||
|
||||
### Text
|
||||
- primary text, heading color
|
||||
- secondary text, body copy
|
||||
- muted text, placeholder
|
||||
- inverse text (on dark backgrounds)
|
||||
|
||||
### Accents
|
||||
- primary accent, brand color
|
||||
- secondary accent, highlight
|
||||
- success, error, warning colors
|
||||
- hover state, active state
|
||||
|
||||
## Shape Descriptions
|
||||
|
||||
| Technical | Natural Language |
|
||||
|-----------|------------------|
|
||||
| `rounded-none` | sharp, squared-off edges |
|
||||
| `rounded-sm` | slightly softened corners |
|
||||
| `rounded-md` | gently rounded corners |
|
||||
| `rounded-lg` | generously rounded corners |
|
||||
| `rounded-xl` | very rounded, pillow-like |
|
||||
| `rounded-full` | pill-shaped, circular |
|
||||
Reference in New Issue
Block a user