Stitch Design
Turn rough UI intent into Stitch-backed high-fidelity screens while keeping a project-level DESIGN.md and synced assets for solo builders iterating on product UI.
Overview
stitch-design is an agent skill most often used in Build (also Validate) that generates and iterates high-fidelity UI via Stitch MCP while keeping DESIGN.md and downloaded design assets in sync.
Install
npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch-designWhat is this skill?
- Four-pillar pipeline: prompt enhancement, design-system synthesis, iterative generation, and asset sync into `.stitch/de
- Maintains `.stitch/DESIGN.md` as project design source of truth synthesized from existing Stitch projects
- Chooses between `edit_screens` and `generate_variants` workflows based on whether the user is editing or exploring
- Downloads remote HTML and screenshots locally for versioned design artifacts
- Requires Stitch MCP access and a discoverable `projectId` via `list_projects`
- 4 documented capability pillars in the Stitch Design skill README
- Project artifacts paths: `.stitch/DESIGN.md` and `.stitch/designs`
Adoption & trust: 25.2k installs on skills.sh; 6k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent produces inconsistent screens because prompts are vague and there is no shared design-system file tying Stitch generations to the repo.
Who is it for?
Indie devs with Stitch MCP enabled who want landing pages, app shells, or variant explorations with a documented design system in-repo.
Skip if: Teams without Stitch MCP or a `projectId`, or anyone who only needs a one-off marketing banner without a UI system—use banner or image skills instead.
When should I use this skill?
User wants high-fidelity, consistent UI from Stitch, design-system maintenance, or structured prompt-to-screen generation with MCP.
What do I get? / Deliverables
You get enhanced prompts, updated `.stitch/DESIGN.md`, and synced HTML/screenshot artifacts ready for frontend implementation or stakeholder review.
- Enhanced structured UI prompts for Stitch generation
- Updated `.stitch/DESIGN.md` design-system document
- Synced HTML and screenshot files under `.stitch/designs`
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Implementation-grade UI generation and design-system maintenance belong on the Build shelf where frontend and product surfaces are actually shaped. Frontend is where Stitch outputs (screens, variants, HTML exports) plug into what users see and what agents implement next.
Where it fits
Mock a mountain-resort landing concept in Stitch before committing engineering time.
Generate variant hero layouts and sync HTML exports into `.stitch/designs` for implementation.
Refresh `.stitch/DESIGN.md` after stakeholder feedback so agents stop drifting from brand rules.
Compare downloaded screenshots against acceptance criteria before merge.
How it compares
MCP-backed UI design system skill, not a generic screenshot-to-code plugin or a marketing-only image generator.
Common Questions / FAQ
Who is stitch-design for?
Solo builders and small teams using Claude Code or similar agents with Google Stitch MCP who want repeatable, high-fidelity UI generation tied to a project design doc.
When should I use stitch-design?
Use it in Build when drafting or refining frontend screens and design systems; in Validate when you need a credible UI prototype before full build; whenever you ask for a premium landing page or consistent variants in Stitch.
Is stitch-design safe to install?
Confirm Stitch MCP credentials and scopes, then review the Security Audits panel on this Prism page and the google-labs-code/stitch-skills repository before installing globally via npx.
SKILL.md
READMESKILL.md - Stitch Design
# Stitch Design Skill Teaches agents to generate high-fidelity, consistent UI designs and maintain project-level design systems using Stitch. ## Install ```bash npx skills add google-labs-code/stitch-skills --skill stitch-design --global ``` ## What It Does Enables professional-grade UI/UX design workflows through Stitch MCP: 1. **Prompt Enhancement**: Transforms rough intent into structured, high-fidelity prompts with professional terminology and design system context. 2. **Design System Synthesis**: Analyzes existing Stitch projects to create and maintain a `.stitch/DESIGN.md` "source of truth". 3. **Iterative Generation**: Selects the best generation or editing workflow (`edit_screens`, `generate_variants`) based on user intent. 4. **Asset Management**: Synchronizes remote designs by downloading HTML and screenshots to the project's `.stitch/designs` directory. ## Prerequisites - Stitch MCP Server access - A project `projectId` (can be discovered via `list_projects`) ## Example Prompt ```text Design a premium landing page for a mountain resort with a focus on serene luxury and glassmorphism. ``` ## Skill Structure ``` stitch-design/ ├── SKILL.md — Core instructions & Prompt Pipeline ├── README.md — This file ├── workflows/ — Specialized pipelines (Text-to-UI, Edit, MD) ├── references/ — UI/UX keywords & Technical Mappings └── examples/ — Gold-standard references (Solace Mindfulness) ``` ## Works With - **`react:components` skill**: Hand-off generated designs for frontend implementation. - **`stitch-loop` skill**: Provides the `DESIGN.md` context for autonomous building loops. - **Multi-agent workflows**: Refines prompts before passing design tasks to specialized agents. ## Learn More See [SKILL.md](./SKILL.md) for complete instructions. --- 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 1. **Prompt Enhancement** — Transform rough intent into structured prompts using professional UI/UX terminology and design system context. 2. **Design System Synthesis** — Analyze existing Stitch projects to create `.stitch/DESIGN.md` "source of truth" documents. 3. **Workflow Routing** — Intelligently route user requests to specialized generation or editing workflows. 4. **Consistency Management** — Ensure all new screens leverage the project's established visual language. 5. **Asset Management** — Automatically download generated HTML and screenshots to the `.stitch/designs` directory. --- ## 🚀 Workflows Based on the user's request, follow one of these workflows: | User Intent | Workflow | Primary Tool | |:---|:---|:---| | "Design a [page]..." | [text-to-design](workflows/text-to-design.md) | `generate_screen_from_text` + `Download` | | "Edit this [screen]..." | [edit-design](workflows/edit-design.md) | `edit_screens` + `Download` | | "Create/Update .stitch/DESIGN.md" | [generate-design-md](workflows/generate-design-md.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`. Use `list_projects` if unknown. - **Design System**: Check for `.stitch/DESIGN.md`. If it exists, incorporate its tokens (colors, typography). If not, suggest the `generate-design-md` workflow. ### 2. Refine UI/UX Terminology Consult [Design Mappings](references