What is the stitch-extract-design-md skill?
The stitch-extract-design-md skill reverse-engineers a design system from frontend source. An AI coding agent scans React, Vue, Svelte, Angular or plain CSS files, gathers colors, type, components and layout, then writes .stitch/DESIGN.md with a YAML color block, without ever building or rendering the app.
The skill belongs to the stitch-design plugin in Google's stitch-skills repository. Its job is to describe the visual language of a codebase, including colors, typography, spacing, component patterns and layout, in a DESIGN.md that Stitch can use.
The SKILL.md explains why it exists. The sibling design-md skill works from rendered HTML, but sometimes the build is broken or dependencies are missing, and reading source files is faster and works anywhere.
How it reads a project
- Discovery. The agent reads package.json and signal files to detect React, Vue, Svelte, Angular, Tailwind, PostCSS, CSS-in-JS or plain CSS.
- It maps the source tree, looking at components, styles, theme folders, tailwind.config and any theme or tokens file.
- It opens the matching reference for React with Tailwind, Vue, Svelte, Angular or plain CSS.
- Deep extraction covers atmosphere, color roles, typography, components, layout and notes for Stitch generation.
- It writes .stitch/DESIGN.md, with an optional hand-off to manage-design-system.
What goes into the DESIGN.md
- A YAML frontmatter block with a name and a colors mapping. The skill calls leaving it out a failure, because other skills parse that data.
- Six numbered sections: theme and atmosphere, color palette and roles, typography, component stylings, layout principles and Stitch generation notes.
- Color names that describe character, such as Deep Muted Teal-Navy for one hex value, with near-duplicates consolidated.
Who the stitch-extract-design-md skill is for
Best for
- Developers who inherit a repo and want its design language written down before touching it.
- Teams migrating a project's visual identity into Stitch.
- Anyone auditing inconsistent styles, since the skill consolidates near-duplicate colors and favors theme files over scattered inline styles.
Not for
- Sites you can only view in a browser, with no source. Pages like that need a rendered-HTML route such as design-md.
- Writing a design system from a blank brief. Related: create-design-md.
- Uploading to Stitch on its own. The hand-off to manage-design-system does that part.
Use it with UiChemy
The output is a design document, not a page. If the same brand needs to appear in WordPress, UiChemy can build from Figma, Composer or AI to WordPress. Click Get Started on uichemy.com. Related: extract-design-system.
How to install Stitch Extract DESIGN.md Skill: Read a Design System from Source Code
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codeRegister the Stitch MCP server
The skill works on local files, but the plugin family expects the Stitch MCP server. The setup guide is at https://stitch.withgoogle.com/docs/mcp/setup/.
Install through your agent
Claude Code users run
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code. Cursor uses--scope workspace --target cursor. The skill is in stitch-design.Codex marketplace
Run
codex plugin marketplace add google-labs-code/stitch-skills --ref main. The README says the optional sparse flags only speed up the clone.Point it at a repo
Open the frontend project and ask the agent to pull out the design system or document the visual language of the app.
Check that it loaded
Run it on a small project. The agent should name the framework it detected, then create .stitch/DESIGN.md that starts with a YAML block holding name and colors.
Key features
- Source only, no buildThe prerequisites are access to the project's source directory and nothing else. No build or runtime dependencies are needed, which suits broken or half-installed repos.
- Framework detectionA signal table maps package.json entries and config files to React or Next.js, Vue or Nuxt, Svelte, Angular, Tailwind, PostCSS, CSS-in-JS and token files.
- Framework reference filesThe skill folder holds reference notes for Angular, plain CSS, React with Tailwind, Svelte and Vue, plus an example DESIGN.md used as the template.
- Color roles, not hue listsColors are grouped as primary foundation, accent and interactive, text hierarchy and functional states, each with a descriptive name, hex code and role.
- Typography captureThe agent records font families and their character, the heading to body hierarchy with size, weight, letter-spacing and line-height, and how headings map to components.
- Component and layout analysisButtons, cards, navigation, inputs and one or two domain components are described, along with max width, grid, breakpoints and spacing units.
- Stitch generation notesThe last section holds atmosphere language, color references, two or three example component prompts and tips for incremental iteration inside Stitch.
- Quality checklistEight checks cover named colors, full type hierarchy, component states, layout values, natural language notes and consolidated duplicates.
- Hand-off to StitchWhen asked, the agent passes the finished file to the manage-design-system skill, which makes the create or update calls through the Stitch MCP.
Frequently asked questions
What does the stitch-extract-design-md skill produce?
It produces a DESIGN.md at .stitch/DESIGN.md. The file opens with a YAML block holding the project name and color tokens, then six sections covering atmosphere, colors, typography, components, layout and notes for generating screens in Stitch.
Does the app need to build or run?
No. The skill states that no build or runtime dependencies are needed, because it reads stylesheets, component files, theme configs and Tailwind setups directly. That is its stated advantage over the design-md skill, which works from rendered HTML.
Which frameworks does it recognize?
The discovery table lists React and Next.js, Vue and Nuxt, Svelte and SvelteKit, Angular, Tailwind CSS, PostCSS, CSS-in-JS and plain CSS, SASS or Less, plus token files named theme or tokens. A reference file exists for each main family.
How do I install the stitch-extract-design-md skill?
Run the repository's plugin install, for example npx plugins add google-labs-code/stitch-skills with a project scope and your agent as the target. Codex users add the repo as a plugin marketplace. The skill ships in the stitch-design plugin.
Why is the YAML frontmatter mandatory?
The skill says structured color data is required for other skills to parse the design system. Leaving out a YAML block with at least the core color tokens counts as using the skill incorrectly, so the agent copies the layout of the bundled example.
How are near-duplicate colors handled?
The skill says deduplication matters. Close values such as #333 and #2C2C2C are consolidated under one descriptive name that represents the intended color, and every color in the final file gets a name, a hex code and a functional role.
Does it upload the design system to Stitch?
Not by itself. Phase four is optional. If you want the design in Stitch, the agent hands the written file to the manage-design-system skill, which does the MCP create or update calls. If you only want the document, the work ends after the file is written.