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.
Permissions
Files
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.
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, ).
Version history
edit_screensBefore calling any Stitch generation or editing tool, you MUST enhance the user's prompt.
list_projects to find the correct projectId. If no
suitable project exists, create one using create_project.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.Consult Design Mappings to replace vague terms.
Use Prompting Keywords for component names, adjective palettes, color roles, and shape descriptions.
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:
[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:
[!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.)
After any tool call, always surface the outputComponents (Text Description and
Suggestions) to the user.
See examples/enhanced-prompt.md for a full before/after prompt enhancement example.
Decide which flow to use based on the user's request:
Apply the Prompt Enhancement Pipeline above.
Use list_projects to find the correct projectId if it is not already known.
Call the generate_screen_from_text tool with the enhanced prompt and the
designSystem ID (if found in Step 1).
{
"projectId": "...",
"prompt": "[Your Enhanced Prompt]",
"designSystem": "assets/...", // Optional: Pass if found in Step 1
"deviceType": "DESKTOP" // Options: MOBILE, DESKTOP, TABLET
}
Always show the text description and suggestions from outputComponents to the
user.
After generation, download the HTML and screenshot urls from outputComponents
to the .stitch/designs directory.
curl -o via run_command or similar..stitch/designs exists.Use this flow when the user provides an image, screenshot, or design mockup to recreate in Stitch.
Use list_projects to find the correct projectId. If no suitable project
exists, create one using create_project.
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.
Once uploaded, use list_screens to find the newly created screenId, then
call edit_screens with a descriptive prompt to refine the design:
{
"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."
Always show the text description and suggestions from outputComponents to the
user.
Download the HTML and screenshot urls from outputComponents to the
.stitch/designs directory.
curl -o via run_command or similar..stitch/designs exists.Use list_screens or get_screen to find the correct projectId and
screenId.
Apply the Prompt Enhancement Pipeline, focusing on specificity:
Call the edit_screens tool.
{
"projectId": "...",
"selectedScreenIds": ["..."],
"prompt": "[Your targeted edit prompt]"
}
Always show the text description and suggestions from outputComponents to the
user.
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.
curl -o via run_command or similar..stitch/designs exists.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.
Use this flow when the user wants to explore alternative layouts, color schemes, or content variations of an existing screen.
Use list_screens or get_screen to find the correct projectId and
screenId.
Call the generate_variants tool with the appropriate options:
{
"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 allAlways show the text description and suggestions from outputComponents to the
user.
Download the variant HTML and screenshot urls from outputComponents to the
.stitch/designs directory.
curl -o via run_command or similar..stitch/designs exists.In these kits
Works with
Claude, Codex, Cursor & more