初始化项目版本
This commit is contained in:
Axhub Make
339
.agents/skills/stitch-generate-design/SKILL.md
Normal file
339
.agents/skills/stitch-generate-design/SKILL.md
Normal file
@@ -0,0 +1,339 @@
|
||||
---
|
||||
name: stitch::generate-design
|
||||
description: >-
|
||||
Generate new screens from text prompts or images, edit existing screens
|
||||
with prompts and design system tokens, and generate design variants using
|
||||
Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional
|
||||
UI/UX terminology, design tokens and theme system capabilities.
|
||||
allowed-tools:
|
||||
- "stitch*:*"
|
||||
- "Bash"
|
||||
- "Read"
|
||||
- "Write"
|
||||
- "web_fetch"
|
||||
---
|
||||
|
||||
# Generate Design
|
||||
|
||||
Create new design screens from text descriptions, images, or mockups, edit
|
||||
existing screens with prompts and design system tokens, and generate design
|
||||
variants using Stitch MCP.
|
||||
|
||||
> [!NOTE]
|
||||
> Refer to your system prompt for instruction on handling MCP tool prefixes for
|
||||
> all tools mentioned in this skill (e.g., `list_projects`,
|
||||
> `generate_screen_from_text`, `edit_screens`).
|
||||
|
||||
## 🎨 Prompt Enhancement Pipeline
|
||||
|
||||
Before calling any Stitch generation or editing tool, you MUST enhance the
|
||||
user's prompt.
|
||||
|
||||
### 1. Analyze Context
|
||||
|
||||
- **Project**: Use `list_projects` to find the correct `projectId`. If no
|
||||
suitable project exists, create one using `create_project`.
|
||||
- **Design System**: Check if a design system exists for the project via
|
||||
`list_design_systems`. If one exists, design tokens (colors, fonts, roundness)
|
||||
are already applied at the project level — do NOT include any color, font, or
|
||||
theme instructions in the generation prompt. If none exists, delegate to the
|
||||
**manage-design-system** skill first before generating screens.
|
||||
|
||||
### 2. Refine UI/UX Terminology
|
||||
|
||||
Consult [Design Mappings](references/design-mappings.md) to replace vague terms.
|
||||
|
||||
- Vague: "Make a nice header"
|
||||
- Professional: "Sticky navigation bar with glassmorphism effect and centered
|
||||
logo"
|
||||
|
||||
Use [Prompting Keywords](references/prompt-keywords.md) for component names,
|
||||
adjective palettes, color roles, and shape descriptions.
|
||||
|
||||
### 3. Structure the Final Prompt
|
||||
|
||||
Format the enhanced prompt for Stitch. Focus exclusively on **layout, content,
|
||||
and structure** — never include colors, fonts, or theme instructions (these are
|
||||
handled by the manage-design-system skill at the project level).
|
||||
|
||||
For **new screens**, use this template:
|
||||
|
||||
```markdown
|
||||
[Overall purpose and user intent of the page]
|
||||
|
||||
**PLATFORM:** [Web/Mobile], [Desktop/Mobile]-first
|
||||
|
||||
**PAGE STRUCTURE:**
|
||||
1. **Header:** [Description of navigation and branding]
|
||||
2. **Hero Section:** [Headline, subtext, and primary CTA]
|
||||
3. **Primary Content Area:** [Detailed component breakdown]
|
||||
4. **Footer:** [Links and copyright information]
|
||||
```
|
||||
|
||||
For **edits**, be specific about what to change:
|
||||
|
||||
- **Location**: "Change the [primary button] in the [hero section]..."
|
||||
- **Visuals**: "...to a darker blue (#004080) and add a subtle shadow."
|
||||
- **Structure**: "Add a secondary button next to the primary one with the text
|
||||
'Learn More'."
|
||||
|
||||
> [!CAUTION]
|
||||
> Do NOT include hex codes, font names, color palettes, roundness values, or
|
||||
> any design system tokens in a **generation** prompt. These are applied at the
|
||||
> project level by the manage-design-system skill and will conflict if
|
||||
> duplicated. (For **edit** prompts, hex codes are acceptable for precise
|
||||
> color adjustments.)
|
||||
|
||||
### 4. Present AI Insights
|
||||
|
||||
After any tool call, always surface the `outputComponents` (Text Description and
|
||||
Suggestions) to the user.
|
||||
|
||||
See [examples/enhanced-prompt.md](examples/enhanced-prompt.md) for a full
|
||||
before/after prompt enhancement example.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
## Steps
|
||||
|
||||
### Determine the Mode
|
||||
|
||||
Decide which flow to use based on the user's request:
|
||||
|
||||
- User wants to create from a text description → **Generate from Text** flow
|
||||
- User provides an image, screenshot, or mockup → **Generate from Image** flow
|
||||
- User wants to modify an existing screen → **Edit** flow
|
||||
- User wants layout/color/content variations → **Generate Variants** flow
|
||||
|
||||
---
|
||||
|
||||
### Generate from Text Flow (New Screen)
|
||||
|
||||
#### 1. Enhance the User Prompt
|
||||
|
||||
Apply the Prompt Enhancement Pipeline above.
|
||||
|
||||
#### 2. Identify the Project
|
||||
|
||||
Use `list_projects` to find the correct `projectId` if it is not already known.
|
||||
|
||||
#### 3. Generate the Screen
|
||||
|
||||
Call the `generate_screen_from_text` tool with the enhanced prompt and the
|
||||
`designSystem` ID (if found in Step 1).
|
||||
|
||||
```json
|
||||
{
|
||||
"projectId": "...",
|
||||
"prompt": "[Your Enhanced Prompt]",
|
||||
"designSystem": "assets/...", // Optional: Pass if found in Step 1
|
||||
"deviceType": "DESKTOP" // Options: MOBILE, DESKTOP, TABLET
|
||||
}
|
||||
```
|
||||
|
||||
#### 4. Present AI Feedback
|
||||
|
||||
Always show the text description and suggestions from `outputComponents` to the
|
||||
user.
|
||||
|
||||
#### 5. Download Design Assets
|
||||
|
||||
After generation, download the HTML and screenshot urls from `outputComponents`
|
||||
to the `.stitch/designs` directory.
|
||||
|
||||
- **Naming**: Use the screen ID or a descriptive slug for the filename.
|
||||
- **Tools**: Use `curl -o` via `run_command` or similar.
|
||||
- **Directory**: Ensure `.stitch/designs` exists.
|
||||
|
||||
#### 6. Review and Refine
|
||||
|
||||
- If the result is not exactly as expected, continue with the **Edit** flow
|
||||
to make targeted adjustments.
|
||||
- Do NOT re-generate from scratch unless the fundamental layout is wrong.
|
||||
|
||||
---
|
||||
|
||||
### Generate from Image Flow (Image/Mockup → Design)
|
||||
|
||||
Use this flow when the user provides an image, screenshot, or design mockup to
|
||||
recreate in Stitch.
|
||||
|
||||
#### 1. Identify the Project
|
||||
|
||||
Use `list_projects` to find the correct `projectId`. If no suitable project
|
||||
exists, create one using `create_project`.
|
||||
|
||||
#### 2. Upload the Image
|
||||
|
||||
Delegate to the **upload-to-stitch** skill to upload the image to the project.
|
||||
This creates a new screen with the image as its content.
|
||||
|
||||
#### 3. Refine with Edit
|
||||
|
||||
Once uploaded, use `list_screens` to find the newly created `screenId`, then
|
||||
call `edit_screens` with a descriptive prompt to refine the design:
|
||||
|
||||
```json
|
||||
{
|
||||
"projectId": "...",
|
||||
"selectedScreenIds": ["<uploaded-screen-id>"],
|
||||
"prompt": "[Describe what to adjust, enhance, or recreate from this mockup]"
|
||||
}
|
||||
```
|
||||
|
||||
> [!TIP]
|
||||
> For best results, describe the intent behind the image rather than just saying
|
||||
> "make it look like this". For example: "This is a dashboard mockup — recreate
|
||||
> it with a proper data table, sidebar navigation, and chart widgets."
|
||||
|
||||
#### 4. Present AI Feedback
|
||||
|
||||
Always show the text description and suggestions from `outputComponents` to the
|
||||
user.
|
||||
|
||||
#### 5. Download Design Assets
|
||||
|
||||
Download the HTML and screenshot urls from `outputComponents` to the
|
||||
`.stitch/designs` directory.
|
||||
|
||||
- **Naming**: Use the screen ID or a descriptive slug for the filename.
|
||||
- **Tools**: Use `curl -o` via `run_command` or similar.
|
||||
- **Directory**: Ensure `.stitch/designs` exists.
|
||||
|
||||
---
|
||||
|
||||
### Edit Flow (Modify Existing Screen)
|
||||
|
||||
#### 1. Identify the Screen
|
||||
|
||||
Use `list_screens` or `get_screen` to find the correct `projectId` and
|
||||
`screenId`.
|
||||
|
||||
#### 2. Formulate the Edit Prompt
|
||||
|
||||
Apply the Prompt Enhancement Pipeline, focusing on specificity:
|
||||
|
||||
- **Location**: "Change the color of the [primary button] in the [hero
|
||||
section]..."
|
||||
- **Visuals**: "...to a darker blue (#004080) and add a subtle shadow."
|
||||
- **Structure**: "Add a secondary button next to the primary one with the text
|
||||
'Learn More'."
|
||||
|
||||
#### 3. Apply the Edit
|
||||
|
||||
Call the `edit_screens` tool.
|
||||
|
||||
```json
|
||||
{
|
||||
"projectId": "...",
|
||||
"selectedScreenIds": ["..."],
|
||||
"prompt": "[Your targeted edit prompt]"
|
||||
}
|
||||
```
|
||||
|
||||
#### 4. Present AI Feedback
|
||||
|
||||
Always show the text description and suggestions from `outputComponents` to the
|
||||
user.
|
||||
|
||||
#### 5. Download Design Assets
|
||||
|
||||
After editing, download the updated HTML and screenshot urls from
|
||||
`outputComponents` to the `.stitch/designs` directory, overwriting previous
|
||||
versions to ensure the local files reflect the latest edits.
|
||||
|
||||
- **Naming**: Use the screen ID or a descriptive slug for the filename.
|
||||
- **Tools**: Use `curl -o` via `run_command` or similar.
|
||||
- **Directory**: Ensure `.stitch/designs` exists.
|
||||
|
||||
#### 6. Update Project Metadata
|
||||
|
||||
After downloading assets, update `.stitch/metadata.json` to reflect any changes
|
||||
(e.g., updated screen titles or new screen IDs from the edit). The metadata
|
||||
file tracks all screens, their device types, and design system info. See the
|
||||
**manage-design-system** skill's `examples/metadata.json` for the format.
|
||||
|
||||
#### 7. Verify and Repeat
|
||||
|
||||
- Check the output screen to see if the changes were applied correctly.
|
||||
- If more polish is needed, repeat the edit flow with a new specific prompt.
|
||||
|
||||
---
|
||||
|
||||
### Generate Variants Flow (Explore Variations)
|
||||
|
||||
Use this flow when the user wants to explore alternative layouts, color schemes,
|
||||
or content variations of an existing screen.
|
||||
|
||||
#### 1. Identify the Screen
|
||||
|
||||
Use `list_screens` or `get_screen` to find the correct `projectId` and
|
||||
`screenId`.
|
||||
|
||||
#### 2. Configure Variant Options
|
||||
|
||||
Call the `generate_variants` tool with the appropriate options:
|
||||
|
||||
```json
|
||||
{
|
||||
"projectId": "...",
|
||||
"selectedScreenIds": ["..."],
|
||||
"prompt": "[Describe the direction for variants]",
|
||||
"variantOptions": {
|
||||
"variantCount": 3,
|
||||
"creativeRange": "EXPLORE",
|
||||
"aspects": ["LAYOUT", "COLOR_SCHEME"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Variant Options:**
|
||||
- **`variantCount`**: 1–5 variants (default: 3)
|
||||
- **`creativeRange`**: `REFINE` (subtle), `EXPLORE` (balanced), or `REIMAGINE`
|
||||
(radical)
|
||||
- **`aspects`**: Focus on specific dimensions — `LAYOUT`, `COLOR_SCHEME`,
|
||||
`IMAGES`, `TEXT_FONT`, `TEXT_CONTENT`, or leave empty for all
|
||||
|
||||
#### 3. Present AI Feedback
|
||||
|
||||
Always show the text description and suggestions from `outputComponents` to the
|
||||
user.
|
||||
|
||||
#### 4. Download Design Assets
|
||||
|
||||
Download the variant HTML and screenshot urls from `outputComponents` to the
|
||||
`.stitch/designs` directory.
|
||||
|
||||
- **Naming**: Use the screen ID or a descriptive slug for the filename.
|
||||
- **Tools**: Use `curl -o` via `run_command` or similar.
|
||||
- **Directory**: Ensure `.stitch/designs` exists.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
## 💡 Tips
|
||||
|
||||
- **Be structural**: Break the page down into header, hero, features, and
|
||||
footer in your prompt.
|
||||
- **Content first**: Describe what each section contains (text, images, CTAs)
|
||||
rather than how it looks.
|
||||
- **Iterative Polish**: Prefer editing for targeted adjustments over full
|
||||
re-generation.
|
||||
- **No theme leakage**: Never put hex codes, font names, or color roles in a
|
||||
generation prompt — the design system handles all visual styling.
|
||||
- **Specify interactions**: Mention hover states, animations, and click behavior
|
||||
rather than visual styling.
|
||||
- **Keep edits focused**: One edit at a time is often better than a long list of
|
||||
changes.
|
||||
- **Reference components**: Use professional terms like "navigation bar", "hero
|
||||
section", "footer", "card grid".
|
||||
- **Precise colors in edits**: Use hex codes for exact color matching when
|
||||
editing existing screens.
|
||||
|
||||
## 📚 References
|
||||
|
||||
- [Design Mappings](references/design-mappings.md) — UI/UX keywords and
|
||||
atmosphere descriptors.
|
||||
- [Prompting Keywords](references/prompt-keywords.md) — Technical terms Stitch
|
||||
understands best.
|
||||
- [Enhanced Prompt Example](examples/enhanced-prompt.md) — Before/after prompt
|
||||
enhancement.
|
||||
@@ -0,0 +1,41 @@
|
||||
# Example: Prompt Enhancement
|
||||
|
||||
## User Input (Vague)
|
||||
> "Make a landing page for my fitness app called 'Pulse'. It should have a
|
||||
> place for features and a hero section."
|
||||
|
||||
---
|
||||
|
||||
## Enhanced Prompt (Stitch-Optimized)
|
||||
|
||||
> [!NOTE]
|
||||
> This prompt contains NO colors, fonts, or theme instructions — those are
|
||||
> handled by the project's design system. The prompt focuses exclusively on
|
||||
> layout, structure, and content.
|
||||
|
||||
**Overall Purpose**: A high-energy, modern landing page for 'Pulse', a fitness
|
||||
tracking application. The page should feel powerful, motivating, and
|
||||
high-performance.
|
||||
|
||||
**PLATFORM:** Web, Desktop-first
|
||||
|
||||
**PAGE STRUCTURE:**
|
||||
1. **Header**: Minimalist navigation with Pulse logo (left) and "Start Training"
|
||||
primary call-to-action button (right).
|
||||
2. **Hero Section**: Large, emotive fitness photography background. Headline:
|
||||
"Elevate Every Beat." Sub-headline: "Track, analyze, and crush your fitness
|
||||
goals with Pulse." Primary CTA button: "Get Started".
|
||||
3. **Feature Grid**: Three-column responsive card grid highlighting:
|
||||
- **Real-time Tracking**: Live stats from your wearable.
|
||||
- **AI Coaching**: Personalized workouts based on your performance.
|
||||
- **Community Challenges**: Compete with friends and stay motivated.
|
||||
4. **Social Proof Section**: Horizontal slider showing "Trusted by 500,000+
|
||||
athletes" with partner logos.
|
||||
5. **Footer**: Quick links (Training, Pricing, Support), social icons, and
|
||||
legal text.
|
||||
|
||||
---
|
||||
💡 **Tip**: Notice how the enhanced prompt describes **structure and content**
|
||||
without specifying hex codes, font families, or color roles. The design system
|
||||
(created via the manage-design-system skill) handles all visual theming at the project
|
||||
level.
|
||||
@@ -0,0 +1,46 @@
|
||||
# Design Mappings & Descriptors
|
||||
|
||||
Use these mappings to transform vague user requests into precise, high-fidelity
|
||||
design instructions.
|
||||
|
||||
## UI/UX Keyword Refinement
|
||||
|
||||
| Vague Term | Enhanced Professional Terminology |
|
||||
|:---|:---|
|
||||
| "menu at the top" | "sticky navigation bar with logo and list items" |
|
||||
| "big photo" | "high-impact hero section with full-width imagery" |
|
||||
| "list of things" | "responsive card grid with hover states and subtle elevations" |
|
||||
| "button" | "primary call-to-action button with micro-interactions" |
|
||||
| "form" | "clean form with labeled input fields, validation states, and submit button" |
|
||||
| "picture area" | "hero section with focal-point image or video background" |
|
||||
| "sidebar" | "collapsible side navigation with icon-label pairings" |
|
||||
| "popup" | "modal dialog with overlay and smooth entry animation" |
|
||||
|
||||
## Atmosphere & "Vibe" Descriptors
|
||||
|
||||
Add these adjectives to set the mood and aesthetic philosophy:
|
||||
|
||||
| Basic Vibe | Enhanced Design Description |
|
||||
|:---|:---|
|
||||
| "Modern" | "Clean, minimal, with generous whitespace and high-contrast typography." |
|
||||
| "Professional" | "Sophisticated, trustworthy, utilizing subtle shadows and a restricted, premium palette." |
|
||||
| "Fun / Playful" | "Vibrant, organic, with rounded corners, bold accent colors, and bouncy micro-animations." |
|
||||
| "Dark Mode" | "Electric, high-contrast accents on deep slate or near-black backgrounds." |
|
||||
| "Luxury" | "Elegant, spacious, with fine lines, serif headers, and a focus on high-fidelity photography." |
|
||||
| "Tech / Cyber" | "Futuristic, neon accents, glassmorphism effects, and technological monospaced typography." |
|
||||
|
||||
## Geometry & Shape Translation
|
||||
|
||||
Convert technical values into physical descriptions for Stitch:
|
||||
|
||||
- **Pill-shaped**: Used for `rounded-full` elements (buttons, tags).
|
||||
- **Softly rounded**: Used for `rounded-xl` (12px) or `rounded-2xl` (16px) containers.
|
||||
- **Sharp/Precise**: Used for `rounded-none` or `rounded-sm` elements.
|
||||
- **Glassmorphism**: Semi-transparent surfaces with background blur and thin borders.
|
||||
|
||||
## Depth & Elevation
|
||||
|
||||
- **Flat**: No shadows, focus on color blocking and borders.
|
||||
- **Whisper-soft**: Diffused, light shadows for subtle lift.
|
||||
- **Floating**: High-offset, soft shadows for elements that appear high above the surface.
|
||||
- **Inset**: Inner shadows for pressable or nested elements.
|
||||
@@ -0,0 +1,131 @@
|
||||
# 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
|
||||
|
||||
## Interaction & Behavior Keywords
|
||||
|
||||
### Animations
|
||||
|
||||
- smooth entry animation, slide-in
|
||||
- fade transition, cross-fade
|
||||
- micro-interaction, bounce effect
|
||||
- skeleton loader, shimmer effect
|
||||
|
||||
### Responsiveness
|
||||
|
||||
- responsive layout, adaptive grid
|
||||
- mobile-first, desktop-first
|
||||
- breakpoint, viewport
|
||||
- stacked layout, side-by-side
|
||||
|
||||
### User Flows
|
||||
|
||||
- progressive disclosure, step indicator
|
||||
- expandable section, collapsible panel
|
||||
- infinite scroll, pagination
|
||||
- drag and drop, swipe gesture
|
||||
|
||||
## 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