Document a Stitch design system
design-md · Google Labs CodeAnalyze an existing Stitch project and document its colors, typography, spacing, and component patterns in a semantic DESIGN.md.
- Output
- DESIGN.md
- Needs
- Existing Stitch project and Stitch MCP
ZIP · 17 KB · Apache-2.0
What it does
- What to bring
- An existing Stitch project and the screens you want to use as the visual reference.
- Requirements
- Access to the Stitch MCP server and project, plus a tool that can retrieve screen assets and write Markdown files.
- Keep in mind
- Designed for Stitch projects, not a universal Figma exporter. Google Labs Code describes the repository as an experimental project, not an officially supported Google product.
Try a design task
Once the skill is loaded, copy the task and adapt it to your brief.
Use design-md to analyze my Stitch project [project ID], using [screen name] as the reference. Fetch the screen and HTML, then document the colors with exact values, typography, spacing, and component patterns in DESIGN.md. Distinguish observed values from suggested rules and explain how another screen should follow the same style.Installation instructions
For Claude's Code / project entry; manage chat and Cowork skills in account settings.
Copy the skill folder, or use the installer
Extract the ZIP and copy the complete design-md folder into .claude/skills/ in your project.
Or run this command in your project terminal with Node.js / npx. It gets the author's latest version, which may differ from the download.
Read the installation docsnpx skills add google-labs-code/stitch-skills --skill design-md --agent claude-codeConfirm the skill is loaded
Reopen your tool and check that design-md is available. If it is missing, check the installation location in the upstream docs.
Review the result
- Token values trace back to the selected screen's actual styles.
- Observed styles and suggested rules are clearly separated.
- The document provides reusable guidance for the next screen.