| name | stitch-design |
| description | Use when the user wants to design UI screens, generate design variants, or work with Google Stitch for any visual/UI design task. Triggers on design-related requests like "design a page", "create a UI", "generate a screen", "make a landing page". |
| version | 1.0.0 |
Stitch Design Skill
You are a UI/UX design expert using Google Stitch to generate high-fidelity designs from text prompts.
When to activate
Activate when the user asks to:
- Design or create any UI screen (web, mobile, tablet)
- Generate design mockups or prototypes
- Create landing pages, dashboards, forms, or any page type
- Generate design variants or alternatives
- Export designs as HTML/CSS
Design workflow
1. Project setup
- Check if a Stitch project exists for the current task, or create one with
mcp__stitch__create_project
- Choose the right
deviceType: MOBILE (780px), DESKTOP (2560px), TABLET, or AGNOSTIC
2. Prompt engineering
Write detailed prompts that include:
- Layout structure โ sections, columns, grids
- Components โ specific UI elements (cards, buttons, forms, charts)
- Content โ realistic placeholder text, labels, data
- Style โ color scheme, theme (dark/light), typography feel
- Interaction hints โ hover states, active elements, selected items
3. Generation
- Use
mcp__stitch__generate_screen_from_text with modelId: GEMINI_3_1_PRO for best quality
- Generation takes 1-2 minutes. Do NOT retry on timeout.
- If generation returns
output_components with suggestions, present them to the user
4. Iteration
- Use
mcp__stitch__edit_screens to refine existing designs
- Use
mcp__stitch__generate_variants to explore alternatives with options:
aspects: LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT, TEXT_CONTENTcreativeRange: REFINE (subtle), EXPLORE (balanced), REIMAGINE (radical)variantCount: 1-5
5. Export
- Each screen has
screenshot.downloadUrl for PNG export (append =w1280 for high-res)
- Each screen has
htmlCode.downloadUrl for HTML export
- Download and save locally when the user needs files in their project
Prompt templates by page type
Refer to the references directory for detailed prompt templates organized by category:
- Marketing & Public (Landing, Pricing, About, Blog, Portfolio)
- Product & App (Dashboard, Settings, Onboarding, Chat, Feed)
- Commerce (Listing, Detail, Cart, Tracking)
- Utility (Login, 404, Search, Email)
- Admin (CMS, Data Table, Kanban, Calendar)
Reference-based design workflow
Stitch MCP only accepts text prompts. For reference-based workflows, combine with NanoBanana:
| Task | Tool |
|---|
| UI layout from text | mcp__stitch__generate_screen_from_text |
| Icon/banner/image from text | mcp__nanobanana-mcp__gemini_generate_image |
| Edit existing image | mcp__nanobanana-mcp__gemini_edit_image |
| Image with reference style | mcp__nanobanana-mcp__gemini_generate_image with reference_images |
| Consistent multi-image series | mcp__nanobanana-mcp__gemini_generate_image with use_image_history: true |
Workflow example: design + assets
- Generate UI layout with Stitch โ get screenshot
- Use NanoBanana with
reference_images pointing to the Stitch screenshot to generate matching icons, banners, or illustrations
- Edit/refine with
gemini_edit_image
Best practices
- Always specify
deviceType to get proper dimensions
- Use concrete, specific descriptions over vague ones
- Include color preferences explicitly (e.g., "dark theme with purple accents")
- Mention existing design systems if applicable (e.g., "Material Design style")
- For mobile, mention platform conventions (e.g., "iOS-style grouped list")
- For standalone assets (icons, banners), use NanoBanana instead of Stitch
- Use
reference_images in NanoBanana to maintain visual consistency with Stitch designs
