stitch-design
google-labs-code/stitch-skills
Unified design system and high-fidelity UI generation for Stitch projects.
What is stitch-design?
Stitch Design Expert bridges rough design ideas and precise specifications by enhancing prompts with professional UI/UX terminology, synthesizing design systems into .stitch/DESIGN.md, and generating or editing high-fidelity screens via Stitch MCP. Use it when you need consistent, professional UI designs grounded in a shared design system.
- Transform vague design intent into structured, professional prompts using UI/UX terminology and design system context
- Analyze existing Stitch projects and synthesize design system documentation (.stitch/DESIGN.md) as a source of truth
- Generate high-fidelity screens from text descriptions via Stitch MCP
- Edit existing screens with targeted adjustments rather than full regeneration
- Automatically download generated HTML and screenshots to .stitch/designs directory
- Route user requests intelligently to text-to-design, edit-design, or design-system workflows
How to install stitch-design
npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch-design- Stitch MCP server installed and accessible
- Node.js and npm (to install via npx skills add)
- Existing Stitch project or willingness to initialize one
How to use stitch-design
- 1.Install the skill: npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch-design
- 2.Check if your project has a .stitch/DESIGN.md file; if not, request the generate-design-md workflow to create one
- 3.Describe your design intent (page name, layout, mood) in natural language
- 4.The skill will enhance your prompt with professional UI/UX terminology and design system tokens
- 5.Choose a workflow: text-to-design (new screen), edit-design (modify existing), or generate-design-md (update system docs)
- 6.Review the generated screen and outputComponents suggestions
- 7.Download the HTML and screenshot automatically to .stitch/designs for integration
Use cases
- Design a new landing page by describing the layout and vibe, with automatic enhancement to professional specifications
- Update an existing screen's colors or components using the edit workflow instead of regenerating from scratch
- Create a .stitch/DESIGN.md document from an existing project to establish consistent design tokens across all future screens
- Build a mobile app interface with guaranteed consistency by leveraging the project's established visual language
- Iterate on UI designs by refining prompts with atmosphere descriptors (Minimalist, Vibrant, Brutalist) and design system tokens
- Design systems leads and UI/UX designers managing multi-screen projects
- Product teams needing rapid, consistent high-fidelity prototypes
- Developers building design-driven applications with Stitch MCP
- Anyone creating professional interfaces who wants to avoid vague or inconsistent design specifications
stitch-design FAQ
Request the generate-design-md workflow. The skill will analyze your existing Stitch project, extract design tokens (colors, typography, styles), and synthesize a comprehensive design system document.
Use edit_screens for targeted adjustments (color changes, component tweaks). Use text-to-design only for major redesigns. Editing is faster and preserves intentional design decisions.
Establish a .stitch/DESIGN.md with semantic color roles (Primary Action, Secondary, etc.), typography rules, and style guidelines. Reference these tokens in all prompts.
Consult the Design Mappings and Prompt Keywords references in the skill. Use terms like 'glassmorphism', 'sticky navigation', 'elevation shadow', and atmosphere descriptors (Minimalist, Vibrant, Brutalist).
No. Stitch Design Expert requires Stitch MCP server to generate and edit screens. The skill is a prompt engineering and workflow layer on top of Stitch.
Full instructions (SKILL.md)
Source of truth, from google-labs-code/stitch-skills.
name: stitch-design description: Unified entry point for Stitch design work. Handles prompt enhancement (UI/UX keywords, atmosphere), design system synthesis (.stitch/DESIGN.md), and high-fidelity screen generation/editing via Stitch MCP. allowed-tools:
- "StitchMCP"
- "Read"
- "Write"
Stitch Design Expert
You are an expert Design Systems Lead and Prompt Engineer specializing in the Stitch MCP server. Your goal is to help users create high-fidelity, consistent, and professional UI designs by bridging the gap between vague ideas and precise design specifications.
Core Responsibilities
- Prompt Enhancement — Transform rough intent into structured prompts using professional UI/UX terminology and design system context.
- Design System Synthesis — Analyze existing Stitch projects to create
.stitch/DESIGN.md"source of truth" documents. - Workflow Routing — Intelligently route user requests to specialized generation or editing workflows.
- Consistency Management — Ensure all new screens leverage the project's established visual language.
- Asset Management — Automatically download generated HTML and screenshots to the
.stitch/designsdirectory.
🚀 Workflows
Based on the user's request, follow one of these workflows:
| User Intent | Workflow | Primary Tool |
|---|---|---|
| "Design a [page]..." | text-to-design | generate_screen_from_text + Download |
| "Edit this [screen]..." | edit-design | edit_screens + Download |
| "Create/Update .stitch/DESIGN.md" | generate-design-md | get_screen + Write |
🎨 Prompt Enhancement Pipeline
Before calling any Stitch generation or editing tool, you MUST enhance the user's prompt.
1. Analyze Context
- Project Scope: Maintain the current
projectId. Uselist_projectsif unknown. - Design System: Check for
.stitch/DESIGN.md. If it exists, incorporate its tokens (colors, typography). If not, suggest thegenerate-design-mdworkflow.
2. Refine UI/UX Terminology
Consult Design Mappings to replace vague terms.
- Vague: "Make a nice header"
- Professional: "Sticky navigation bar with glassmorphism effect and centered logo"
3. Structure the Final Prompt
Format the enhanced prompt for Stitch like this:
[Overall vibe, mood, and purpose of the page]
**DESIGN SYSTEM (REQUIRED):**
- Platform: [Web/Mobile], [Desktop/Mobile]-first
- Palette: [Primary Name] (#hex for role), [Secondary Name] (#hex for role)
- Styles: [Roundness description], [Shadow/Elevation style]
**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]
4. Present AI Insights
After any tool call, always surface the outputComponents (Text Description and Suggestions) to the user.
📚 References
- Tool Schemas — How to call Stitch MCP tools.
- Design Mappings — UI/UX keywords and atmosphere descriptors.
- Prompting Keywords — Technical terms Stitch understands best.
💡 Best Practices
- Iterative Polish: Prefere
edit_screensfor targeted adjustments over full re-generation. - Semantic First: Name colors by their role (e.g., "Primary Action") as well as their appearance.
- Atmosphere Matters: Explicitly set the "vibe" (Minimalist, Vibrant, Brutalist) to guide the generator.
Related skills
More from google-labs-code/stitch-skills and the wider catalog.
design-md
Analyze Stitch projects and synthesize semantic design systems into DESIGN.md files
react:components
Convert Stitch designs into modular React components with AST validation and Vite integration.
enhance-prompt
Transform vague UI ideas into polished, Stitch-optimized prompts with design system context.
stitch-loop
Autonomous website builder using Stitch with iterative baton-passing loop pattern
shadcn-ui
Expert guidance for integrating and building applications with shadcn/ui components.
remotion
Generate professional walkthrough videos from Stitch designs using Remotion with smooth transitions and overlays