stitch::manage-design-system

1# Design-System
2 
3Create a "source of truth" for your project's design language to ensure
4consistency across all future screens.
5 
6> [!NOTE]
7> Refer to your system prompt for instruction on handling MCP tool prefixes for
8> all tools mentioned in this skill (e.g., `get_screen`,
9> `create_design_system_from_design_md`, `apply_design_system`).
10 
11## 📥 Retrieval
12 
13To analyze a Stitch project, you must retrieve metadata and assets using the
14Stitch MCP tools:
15 
161. **Project lookup**: Use `list_projects` to find the target `projectId`.
172. **Screen lookup**: Use `list_screens` for that `projectId` to find
18   representative screens (e.g., "Home", "Main Dashboard").
193. **Metadata fetch**: Call `get_screen` for the target screen to get
20   `screenshot.downloadUrl` and `htmlCode.downloadUrl`.
214. **Asset download**: Use `read_url_content` to fetch the HTML code.
22 
23## 🧠 Synthesis from Description
24 
25If you need to extract a design system from existing screens, use the `design-md` skill (in the `stitch-utilities` plugin).
26 
27If there are no existing screens (new project), or the user provides a direct description (e.g., "dark theme, blue and purple, rounded, Inter font"):
28 
291. Map the user's vague terms to precise values using the design mappings (see `design-md` skill in `stitch-utilities` or `generate-design` skill).
302. Select concrete hex codes, font families, and roundness values.
313. Generate the `DESIGN.md` file (refer to the `design-md` skill in `stitch-utilities` for structure).
32…