1# Stitch Design Skill
2 
3Teaches agents to generate high-fidelity, consistent UI designs and maintain project-level design systems using Stitch.
4 
5## Install
6 
7```bash
8npx skills add google-labs-code/stitch-skills --skill stitch-design --global
9```
10 
11## What It Does
12 
13Enables professional-grade UI/UX design workflows through Stitch MCP:
14 
151. **Prompt Enhancement**: Transforms rough intent into structured, high-fidelity prompts with professional terminology and design system context.
162. **Design System Synthesis**: Analyzes existing Stitch projects to create and maintain a `.stitch/DESIGN.md` "source of truth".
173. **Iterative Generation**: Selects the best generation or editing workflow (`edit_screens`, `generate_variants`) based on user intent.
184. **Asset Management**: Synchronizes remote designs by downloading HTML and screenshots to the project's `.stitch/designs` directory.
19 
20## Prerequisites
21 
22- Stitch MCP Server access
23- A project `projectId` (can be discovered via `list_projects`)
24 
25## Example Prompt
26 
27```text
28Design a premium landing page for a mountain resort with a focus on serene luxury and glassmorphism.
29```
30 
31## Skill Structure
32 
33```
34stitch-design/
35├── SKILL.md           — Core instructions & Prompt Pipeline
36├── README.md          — This file
37├── workflows/         — Specialized pipelines (Text-to-UI, Edit, MD)
38├── references/        — UI/UX keywords & Technical Mappings
39└── examples/          — Gold-standard references (Solace Mindfulness)
40```
41 
42## Works With
43 
44- **`react:components` skill**: Hand-off generated designs for frontend implementation.
45- **`stitch-loop` skill**: Provides the `DESIGN.md` context for autonomous building loops.
46- **Multi-agent workflows**: Refines prompts before passing design tasks to specialized agents.
47 
48## Learn More
49 
50See [SKILL.md](./SKILL.md) for complete instructions.
51