stitch-design

Use when generating UI designs via Google Stitch MCP — creating new designs from prompts, editing existing designs, uploading reference images, managing projects, or exporting design outputs. Also use when the user says “stitch”, “google stitch”, “generate a design”, “design with AI”, or “stitch project”.

Model	Source
sonnet	pack: ux-ui

Full Reference

stitch-design

Google Stitch MCP reference — AI-powered UI design generation tool. Covers all 9 Stitch tools, project lifecycle, image upload workflow, and design export patterns.

Announcement

┏━ 🎨 stitch-design ━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ [one-line: what design task]                    ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Quick Reference

Item	Value
MCP package	`@google/stitch-mcp` (or local binary)
Auth	Google account / OAuth
Primary tool	`stitch_generate_ui`
Output format	HTML/CSS + component markup
Image support	Upload reference images for style matching
Project-based	Designs persist in Stitch projects

Reference Index

I want to…	File
Generate a new UI design from a prompt	reference/stitch-tools.md
Edit or iterate on an existing design	reference/stitch-tools.md
Upload a reference image for style matching	reference/stitch-tools.md
List, create, or delete Stitch projects	reference/stitch-tools.md
Export design output for implementation	reference/stitch-tools.md
Configure Stitch MCP and auth	reference/stitch-setup.md

Usage: Read the reference file matching your current task. Each file has exact tool signatures and required parameters.

Core Design Workflow

1. Create or select a Stitch project
2. Upload reference images (optional — for style matching)
3. Generate UI with stitch_generate_ui
4. Iterate with stitch_edit_ui
5. Export output → hand to Magic or implement directly

Iteration Pattern

Stitch is prompt-iterative — each edit builds on the last:

Generate: "Dashboard with sidebar nav, metric cards, and data table"
Edit:     "Make the sidebar collapsible and add dark mode support"
Edit:     "Replace the table with a chart using the brand color palette"

Each stitch_edit_ui call references the current design ID — always capture the ID from the generate response.

Skill Chains

After Stitch generates a design:

magic-21st — use design as visual spec for component generation
figma-sync — export Figma tokens to align with the design direction
generate-workflow — full design-to-code pipeline orchestration
ui-craft (frontend pack) — set aesthetic direction before generating

Completion Pattern

Design generated:   [design ID]
Project:            [project name]
Output:             [HTML/CSS artifact path or description]
Next:               iterate with stitch_edit_ui or hand to magic-21st