stitch-design

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_CONTENT
  • creativeRange: 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

1. Generate UI layout with Stitch → get screenshot
2. Use NanoBanana with reference_images pointing to the Stitch screenshot to generate matching icons, banners, or illustrations
3. 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