1---
2description: Analyze a Stitch project and synthesize its design system into a .stitch/DESIGN.md file.
3---
4 
5# Workflow: Generate .stitch/DESIGN.md
6 
7Create a "source of truth" for your project's design language to ensure consistency across all future screens.
8 
9## 📥 Retrieval
10 
11To analyze a Stitch project, you must retrieve metadata and assets using the Stitch MCP tools:
12 
131.  **Project lookup**: Use `list_projects` to find the target `projectId`.
142.  **Screen lookup**: Use `list_screens` for that `projectId` to find representative screens (e.g., "Home", "Main Dashboard").
153.  **Metadata fetch**: Call `get_screen` for the target screen to get `screenshot.downloadUrl` and `htmlCode.downloadUrl`.
164.  **Asset download**: Use `read_url_content` to fetch the HTML code.
17 
18## 🧠 Analysis & Synthesis
19 
20### 1. Identify Identity
21- Capture Project Title and Project ID.
22 
23### 2. Define Atmosphere
24- Analyze the HTML and screenshot to capture the "vibe" (e.g., "Airy," "Professional," "Vibrant").
25 
26### 3. Map Color Palette
27- Extract exact hex codes and assign functional roles (e.g., "Primary Action: #2563eb").
28 
29### 4. Translate Geometry
30- Convert Tailwind/CSS values into descriptive language (e.g., `rounded-full` → "Pill-shaped").
31 
32### 5. Document Depth
33- Describe shadow styles and layering (e.g., "Soft, diffused elevation").
34 
35## 📝 Output Structure
36 
37Create a `.stitch/DESIGN.md` file in the project directory with this structure:
38 
39```markdown
40# Design System: [Project Title]
41**Project ID:** [Insert Project ID Here]
42 
43## 1. Visual Theme & Atmosphere
44(Description of mood and aesthetic philosophy)
45 
46## 2. Color Palette & Roles
47(Descriptive Name + Hex Code + Role)
48 
49## 3. Typography Rules
50(Font families, weights, and usage)
51 
52## 4. Component Stylings
53* **Buttons:** Shape, color, behavior
54* **Containers:** Roundness, elevation
55 
56## 5. Layout Principles
57(Whitespace strategy and grid alignment)
58```
59 
60## 💡 Best Practices
61- **Be Precise**: Always include hex codes in parentheses.
62- **Be Descriptive**: Use natural language like "Deep Ocean Blue" instead of just "Blue".
63- **Be Functional**: Explain *why* an element is used.
64