manage-design-systemlisted

# Design-System Create a "source of truth" for your project's design language to ensure consistency across all future screens. > [!NOTE] > In Claude Code, Stitch MCP tools are named `mcp__stitch__<tool>` (e.g. > `mcp__stitch__list_projects`). This skill refers to them by bare name > (`list_projects`, `generate_screen_from_text`, `edit_screens`). > `<SKILL_DIR>` means this skill's own directory inside the installed plugin. ## 📥 Retrieval To analyze a Stitch project, you must retrieve metadata and assets using the Stitch MCP tools: 1. **Project lookup**: Use `list_projects` to find the target `projectId`. 2. **Screen lookup**: Use `list_screens` for that `projectId` to find representative screens (e.g., "Home", "Main Dashboard"). 3. **Metadata fetch**: Call `get_screen` for the target screen to get `screenshot.downloadUrl` and `htmlCode.downloadUrl`. 4. **Asset download**: Use WebFetch (or `curl` via Bash) to fetch the HTML code. ## 🧠 Synthesis from Description If you need to extract a design system from existing screens, use the `design-md` skill. If there are no existing screens (new project), or the user provides a direct description (e.g., "dark theme, blue and purple, rounded, Inter font"): 1. Map the user's vague terms to precise values using the design mappings (see the `design-md` or `generate-design` skill). 2. Select concrete hex codes, font families, and roundness values. 3. Generate the `DESIGN.md` file (refer to the `design-md` skill for structure)