Generate Semantic Design Systems from Technical Assets

Stitch DESIGN.md Skill positions the assistant as a Design Systems Lead that analyzes a Stitch project's screens and synthesizes a "Semantic Design System" into a DESIGN.md file - a source of truth for prompting Stitch to generate new screens matching the existing design language. It defines a six-step retrieval workflow against the Stitch MCP Server: discover the tool namespace prefix via list_tools, look up the project via list_projects (filtering view=owned) to extract its numeric Project ID, look up the target screen via list_screens, fetch full screen metadata via get_screen (screenshot.downloadUrl, htmlCode.downloadUrl, width/height/deviceType, and the project's designTheme), download and parse the HTML/CSS via web_fetch or read_url_content to extract Tailwind classes and component patterns, and pull project-level designTheme (color mode, fonts, roundness, custom colors) via get_project. Analysis then proceeds through five synthesis steps: extract project identity, define the atmosphere in evocative adjectives such as Airy, Dense, Minimalist, or Utilitarian, map the color palette as descriptive name plus exact hex code plus functional role, translate border-radius and geometry into physical descriptions (e.g. rounded-full as "Pill-shaped"), and describe shadow depth and elevation.

Use this skill when analyzing Stitch projects, creating DESIGN.md files, synthesizing semantic design systems, working with Stitch's design language, or generating design documentation for Stitch projects. It requires access to the Stitch MCP Server, a Stitch project with at least one designed screen, and the Stitch Effective Prompting Guide.

Input is a Stitch project, identified by title/URL or an explicit Project ID, and optionally a specific screen. Output is a DESIGN.md file following a fixed five-section structure: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings (Buttons, Cards/Containers, Inputs/Forms), and Layout Principles - each written in descriptive design terminology with exact hex codes and pixel values included in parentheses alongside the natural-language descriptions.

### Design System: [Project Title]
**Project ID:** [Insert Project ID Here]

### 1. Visual Theme & Atmosphere
(Description of the mood, density, and aesthetic philosophy.)

### 2. Color Palette & Roles
(List colors by Descriptive Name + Hex Code + Functional Role.)

### 3. Typography Rules
(Description of font family, weight usage for headers vs. body, and letter-spacing character.)

### 4. Component Stylings
* **Buttons:** (Shape description, color assignment, behavior).
* **Cards/Containers:** (Corner roundness description, background color, shadow depth).
* **Inputs/Forms:** (Stroke style, background).

### 5. Layout Principles
(Description of whitespace strategy, margins, and grid alignment.)

Built entirely on the Stitch MCP Server's tool surface - list_tools, list_projects, list_screens, get_screen, and get_project - plus web_fetch or read_url_content for downloading HTML and screenshot assets, and references the Stitch Effective Prompting Guide at stitch.withgoogle.com/docs/learn/prompting/ for terminology and pattern guidance. Best practices call for avoiding generic color/shape terms in favor of descriptive names paired with exact values, always explaining each design element's functional role, and using consistent terminology throughout the document.

Design systems leads and engineers working with Stitch who need to reverse-engineer an existing project's visual language into a precise, reusable DESIGN.md reference - translating raw Tailwind classes and hex values into consistent, functionally-explained design terminology - rather than re-describing the design from scratch on every new screen prompt.