Design Md

1---
2name: design-md
3description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
4allowed-tools:
5  - "stitch*:*"
6  - "Read"
7  - "Write"
8  - "web_fetch"
9---
10 
11# Stitch DESIGN.md Skill
12 
13You are an expert Design Systems Lead. Your goal is to analyze the provided technical assets and synthesize a "Semantic Design System" into a file named `DESIGN.md`.
14 
15## Overview
16 
17This skill helps you create `DESIGN.md` files that serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.
18 
19## Prerequisites
20 
21- Access to the Stitch MCP Server
22- A Stitch project with at least one designed screen
23- Access to the Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/
24 
25## The Goal
26 
27The `DESIGN.md` file will serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with the existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.
28 
29## Retrieval and Networking
30 
31To analyze a Stitch project, you must retrieve screen metadata and design assets using the Stitch MCP Server tools:
32 
331. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `mcp_stitch:`) for all subsequent calls.
34 
352. **Project lookup** (if Project ID is not provided):
36   - Call `[prefix]:list_projects` with `filter: "view=owned"` to retrieve all user projects
37   - Identify the target project by title or URL pattern
38   - Extract the Project ID from the `name` field (e.g., `projects/13534454087919359824`)
39 
403. **Screen lookup** (if Screen ID is not provided):
41   - Call `[prefix]:list_screens` with the `projectId` (just the numeric ID, not the full path)
42   - Review screen titles to identify the target screen (e.g., "Home", "Landing Page")
43   - Extract the Screen ID from the screen's `name` field
44 
454. **Metadata fetch**: 
46   - Call `[prefix]:get_screen` with both `projectId` and `screenId` (both as numeric IDs only)
47   - This returns the complete screen object including:
48     - `screenshot.downloadUrl` - Visual reference of the design
49     - `htmlCode.downloadUrl` - Full HTML/CSS source code
50     - `width`, `height`, `deviceType` - Screen dimensions and target platform
51     - Project metadata including `designTheme` with color and style information
52 
535. **Asset download**:
54   - Use `web_fetch` or `read_url_content` to download the HTML code from `htmlCode.downloadUrl`
55   - Optionally download the screenshot from `screenshot.downloadUrl` for visual reference
56   - Parse the HTML to extract Tailwind classes, custom CSS, and component patterns
57 
586. **Project metadata extraction**:
59   - Call `[prefix]:get_project` with the project `name` (full path: `projects/{id}`) to get:
60     - `designTheme` object with color mode, fonts, roundness, custom colors
61     - Project-level design guidelines and descriptions
62     - Device type preferences and layout principles
63 
64## Analysis & Synthesis Instructions
65 
66### 1. Extract Project Identity (JSON)
67- Locate the Project Title
68- Locate the specific Project ID (e.g., from the `name` field in the JSON)
69 
70### 2. Define the Atmosphere (Image/HTML)
71Evaluate the screenshot and HTML structure to capture the overall "vibe." Use evocative adjectives to describe the mood (e.g., "Airy," "Dense," "Minimalist," "Utilitarian").
72 
73### 3. Map the Color Palette (Tailwind Config/JSON)
74Identify the key colors in the system. For each color, provide:
75- A descriptive, natural language name that conveys its character (e.g., "Deep Muted Teal-Navy")
76- The specific hex code in parentheses for precision (e.g., "#294056")
77- Its specific functional role (e.g., "Used for primary actions")
78 
79### 4. Translate Geometry & Shape (CSS/Tailwind)
80Convert technical `border-radius` and layout values into physical descriptions:
81- Describe `rounded-full` as "Pill-shaped"
82- Describe `rounded-lg` as "Subtly rounded corners"
83- Describe `rounded-none` as "Sharp, squared-off edges"
84 
85### 5. Describe Depth & Elevation
86Explain how the UI handles layers. Describe the presence and quality of shadows (e.g., "Flat," "Whisper-soft diffused shadows," or "Heavy, high-contrast drop shadows").
87 
88## Output Guidelines
89 
90- **Language:** Use descriptive design terminology and natural language exclusively
91- **Format:** Generate a clean Markdown file following the structure below
92- **Precision:** Include exact hex codes for colors while using descriptive names
93- **Context:** Explain the "why" behind design decisions, not just the "what"
94 
95## Output Format (DESIGN.md Structure)
96 
97```markdown
98# Design System: [Project Title]
99**Project ID:** [Insert Project ID Here]
100 
101## 1. Visual Theme & Atmosphere
102(Description of the mood, density, and aesthetic philosophy.)
103 
104## 2. Color Palette & Roles
105(List colors by Descriptive Name + Hex Code + Functional Role.)
106 
107## 3. Typography Rules
108(Description of font family, weight usage for headers vs. body, and letter-spacing character.)
109 
110## 4. Component Stylings
111* **Buttons:** (Shape description, color assignment, behavior).
112* **Cards/Containers:** (Corner roundness description, background color, shadow depth).
113* **Inputs/Forms:** (Stroke style, background).
114 
115## 5. Layout Principles
116(Description of whitespace strategy, margins, and grid alignment.)
117```
118 
119## Usage Example
120 
121To use this skill for the Furniture Collection project:
122 
1231. **Retrieve project information:**
124   ```
125   Use the Stitch MCP Server to get the Furniture Collection project
126   ```
127 
1282. **Get the Home page screen details:**
129   ```
130   Retrieve the Home page screen's code, image, and screen object information
131   ```
132 
1333. **Reference best practices:**
134   ```
135   Review the Stitch Effective Prompting Guide at:
136   https://stitch.withgoogle.com/docs/learn/prompting/
137   ```
138 
1394. **Analyze and synthesize:**
140   - Extract all relevant design tokens from the screen
141   - Translate technical values into descriptive language
142   - Organize information according to the DESIGN.md structure
143 
1445. **Generate the file:**
145   - Create `DESIGN.md` in the project directory
146   - Follow the prescribed format exactly
147   - Ensure all color codes are accurate
148   - Use evocative, designer-friendly language
149 
150## Best Practices
151 
152- **Be Descriptive:** Avoid generic terms like "blue" or "rounded." Use "Ocean-deep Cerulean (#0077B6)" or "Gently curved edges"
153- **Be Functional:** Always explain what each design element is used for
154- **Be Consistent:** Use the same terminology throughout the document
155- **Be Visual:** Help readers visualize the design through your descriptions
156- **Be Precise:** Include exact values (hex codes, pixel values) in parentheses after natural language descriptions
157 
158## Tips for Success
159 
1601. **Start with the big picture:** Understand the overall aesthetic before diving into details
1612. **Look for patterns:** Identify consistent spacing, sizing, and styling patterns
1623. **Think semantically:** Name colors by their purpose, not just their appearance
1634. **Consider hierarchy:** Document how visual weight and importance are communicated
1645. **Reference the guide:** Use language and patterns from the Stitch Effective Prompting Guide
165 
166## Common Pitfalls to Avoid
167 
168- ❌ Using technical jargon without translation (e.g., "rounded-xl" instead of "generously rounded corners")
169- ❌ Omitting color codes or using only descriptive names
170- ❌ Forgetting to explain functional roles of design elements
171- ❌ Being too vague in atmosphere descriptions
172- ❌ Ignoring subtle design details like shadows or spacing patterns
173