From libref
Google Stitch MCP integration for AI-powered UI design generation. Auto-activates when user mentions Stitch, UI prototyping, screen generation, design systems, or wants to create/edit visual designs via MCP. Covers project management, screen generation from text, screen editing, design system CRUD, variant generation, and multi-screen workflows. Uses Gemini under the hood. Triggers: "stitch", "design screen", "generate UI", "create screen", "design system", "prototype", "mockup", "UI generation", "/stitch", "screen variant", "vibe design". Do NOT trigger for: general CSS/HTML coding, Figma workflows, non-MCP design tools, or manual UI implementation.
How this skill is triggered — by the user, by Claude, or both
Slash command
/libref:stitchThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Guide for using Google Stitch MCP tools to generate, edit, and manage UI designs programmatically through Claude Code. Stitch is a Google Labs experiment powered by Gemini that converts natural language into functional UI designs and frontend code.
Guide for using Google Stitch MCP tools to generate, edit, and manage UI designs programmatically through Claude Code. Stitch is a Google Labs experiment powered by Gemini that converts natural language into functional UI designs and frontend code.
Auto-activate when:
/stitch invocationDo NOT activate for:
Project (container)
├── Screen[] (generated UI pages)
│ ├── htmlCode (downloadable HTML)
│ └── screenshot (downloadable PNG)
├── ScreenInstance[] (positioned screen refs on canvas)
└── DesignSystem[] (theme/tokens applied to screens)
screen.name = full resource path: projects/{projectId}/screens/{screenId}screenInstance.id =/= screenId. Instance ID is for apply_design_system. Screen ID is for edit_screens and generate_variants.name = assets/{assetId} — extract assetId (without prefix) for apply/update operations1. create_project(title: "My App")
→ save projectId from response name: "projects/{projectId}"
2. generate_screen_from_text(projectId, prompt, deviceType: "DESKTOP")
→ wait 1-3 min. DO NOT RETRY on timeout.
3. get_project(name: "projects/{projectId}")
→ see all screenInstances with positions
1. create_design_system(projectId, designSystem: {...})
→ returns asset name: "assets/{assetId}"
2. IMMEDIATELY call update_design_system(name: "assets/{assetId}", projectId, designSystem)
→ required to persist and display
3. get_project → collect screenInstance IDs and sourceScreen paths
4. apply_design_system(projectId, assetId, selectedScreenInstances: [...])
1. list_screens(projectId) → extract screenIds from screen name paths
2. edit_screens(projectId, selectedScreenIds: [...], prompt: "Make header sticky, add search bar")
→ wait 1-3 min. DO NOT RETRY.
generate_variants(projectId, selectedScreenIds: [...],
prompt: "Explore different hero layouts",
variantOptions: { variantCount: 3, creativeRange: "EXPLORE", aspects: ["LAYOUT"] })
Reference: references/workflows.md for detailed multi-step flows.
Stitch responds best to prompts structured with three layers:
Anatomy — Physical layout and structure
Vibe — Emotional/aesthetic descriptors (adjectives drive styling)
Content — Domain-specific data context
Example combining all three:
"A minimalist and focused meditation app (vibe) with a card-based layout
and bottom navigation (anatomy) showing daily sessions, streak counter,
and guided meditation library (content)"
Reference: references/prompt-guide.md for detailed prompting strategies.
generate_screen_from_text and edit_screens take 1-3 minutes. Never retry on timeout — generation may still succeed server-side.get_screen or list_screens later to check.edit_screens and generate_variants use screen IDs (from list_screens or extracted from screen.name)apply_design_system uses screen instance objects with id (instance ID) and sourceScreen (full screen resource name) — get these from get_project responsecreate_design_system, you MUST call update_design_system immediately to persist and display it in the UIlist_design_systems requires projectId — calling without it may errorGEMINI_3_FLASH (fast), GEMINI_3_1_PRO (quality)GEMINI_3_PRO is deprecated — do not useedit_screens, make one or two changes per promptgenerate_screen_from_text may return output_components with text or suggestionsgenerate_screen_from_text again with suggestion as prompt4044680601076201931, not projects/4044680601076201931name field by splitting on /Follow shared/conventions/error-handling.md. Additionally:
projects/).get_screen/list_screens.list_screens.Follow shared/conventions/logging-convention.md with skill name libref:stitch.
npx claudepluginhub tdp1999/claude-code-ctx --plugin librefCreates Stitch UI screens, design systems, variants, and prototypes from briefs, mockups, or product context. Exports Tailwind HTML, screenshots, and local code artifacts. Use for screen exploration, editing Stitch projects, or multi-screen prototypes.
Generates high-fidelity UI screens or wireframes from structured text prompts using Stitch. Core tool for text-to-UI workflows; supports mobile/desktop prototyping.
Creates effective prompts for Google Stitch, an AI UI generator by Google Labs. Covers specific prompting principles, visual style definition, multi-screen flows, and platform targeting for web and mobile app designs.