1# Stitch Design System Documentation Skill
2 
3## Install
4 
5```bash
6npx skills add google-labs-code/stitch-skills --skill design-md --global
7```
8 
9## Example Prompt
10 
11```text
12Analyze my Furniture Collection project's Home screen and generate a comprehensive DESIGN.md file documenting the design system.
13```
14 
15## Skill Structure
16 
17This repository follows the **Agent Skills** open standard. Each skill is self-contained with its own logic, workflow, and reference materials.
18 
19```text
20design-md/
21├── SKILL.md           — Core instructions & workflow
22├── examples/          — Sample DESIGN.md outputs
23└── README.md          — This file
24```
25 
26## How it Works
27 
28When activated, the agent follows a structured design analysis pipeline:
29 
301. **Retrieval**: Uses the Stitch MCP Server to fetch project screens, HTML code, and design metadata.
312. **Extraction**: Identifies design tokens including colors, typography, spacing, and component patterns.
323. **Translation**: Converts technical CSS/Tailwind values into descriptive, natural design language.
334. **Synthesis**: Generates a comprehensive DESIGN.md following the semantic design system format.
345. **Alignment**: Ensures output follows Stitch Effective Prompting Guide principles for optimal screen generation.
35