stitch::extract-design-mdby Google Labs

Stitch Extract Design MD Skill.

A Claude Code and Codex skill for brand and design-system work: extracts a complete DESIGN.md from frontend source code in any framework.

Brand & Design Systems
DESIGN.md

Download OpenDesign View usage guide

google-labs-code/stitch-skills · plugins/stitch-design/skills/extract-design-md/SKILL.mdSKILL.md

--- name: stitch::extract-design-md description: - Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit … --- ## Why This Exists ## When to Use ## Prerequisites ## Workflow ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

Front matter and section headings read from the upstream file on 2026-09-14 · 13,970 characters in full

01 What it does

What the stitch::extract-design-md Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill reads a frontend codebase and writes a DESIGN.md that captures its visual language, without building or rendering the app. It detects the framework from package.json and config files (React, Vue, Svelte, Angular, Tailwind, CSS-in-JS, plain CSS), then works through atmosphere, color palette and roles, typography, component stylings, layout principles, and notes for Stitch generation.

The output lands at .stitch/DESIGN.md and must open with a YAML frontmatter block carrying name and a colors mapping, because other skills parse it. Aimed at designers and developers reverse-engineering, auditing, or migrating an existing project's design system.

What it produces

A DESIGN.md document assembled in the standard design system format.
A YAML frontmatter block with name and a colors mapping at the top of that file, followed by the markdown sections.
A final section of design system notes for Stitch generation, covering language, color references and component prompts.

See the example prompt ↗

How It Works

01
Detect the Framework and Stack
Scan the project root for telltale files such as package.json, tailwind.config.js, postcss.config.js, theme.js or tokens.js, then read package.json to learn the framework, CSS tooling and any design-token libraries.
02
Read the Matching Framework Reference
React/Next/Tailwind, Vue/Nuxt, Svelte, Angular and plain CSS each have a reference file with framework-specific patterns for locating colors, typography and spacing.
03
Extract the Color Palette and Assign Roles
Colors come from CSS custom properties, Tailwind config, theme files, component styles, scoped classes and CSS-in-JS objects, then get grouped by function rather than by hue.
04
Analyze Components and Layout
The skill looks at buttons, cards, navigation, inputs and domain-specific components, plus grid, whitespace, alignment and responsive behavior.
05
Write the DESIGN.md
Everything is assembled into the standard DESIGN.md format and written into a .stitch directory that is created if missing.
06
Optionally Hand Off to Stitch
If the user wants the design system pushed into Stitch, the written DESIGN.md becomes the input for the manage-design-system skill.

02 Find your fit

When to Use the stitch::extract-design-md Skill

Use the stitch::extract-design-md skill in Claude Code or Codex when the job is brand and design-system work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

You have a frontend codebase and want its design system extracted or documented from the source.
The app cannot be built or rendered, but the source files are available.
You want to migrate a project's existing visual identity into Stitch.
The styling across a codebase is inconsistent and needs unifying or reconciling.

Know the Boundaries

It is not the rendered-HTML route; that is what the separate design-md skill does from rendered HTML.
It cannot run without access to the frontend project's source directory.

What to Provide

Theme or token files, if they existPointing at theme. or tokens. files gives the most authoritative source of design values.
Project name, and ID if knownThe document title uses the project name; project ID is included when available and otherwise omitted.
A decision about pushing to StitchIf the user wants the design system pushed into Stitch, the workflow continues past Phase 3 into the integration handoff.

03 Inside the skill

Rules the stitch::extract-design-md Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

YAML Frontmatter Is Mandatory
The file must open with a YAML block containing name and a colors mapping, matching examples/DESIGN.md.
Name Colors by Character, Not Hue
Each color gets a descriptive name that evokes what it looks like, so #294056 becomes "Deep Muted Teal-Navy" rather than "Blue".
Consolidate near-duplicate Colors
Near-duplicates such as #333 and #2C2C2C are merged under the single name that best represents the intended color.
Start from the Tailwind Config
A customized tailwind.config.js is treated as the design system itself, extracted from first, with components spot-checked for overrides afterwards.
Theme Files Outrank Component Styles
A theme file defining a palette reveals the intended design system, while scattered inline styles show only what actually shipped.
Treat CSS Custom Properties as Intent
A variable like --brand-primary is a deliberate design token, not an incidental value, and should be respected as such.
Write Stitch Notes in Natural Language
The generation notes describe components in prose rather than pasting CSS syntax or raw properties.
Keep Atmosphere Editorial
The atmosphere section is written as editorial copy about mood and philosophy, not as technical documentation.

04 Put it to work

Install stitch::extract-design-md in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add stitch::extract-design-md to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::extract-design-md

Generic skills CLI form for plugins/stitch-design/skills/extract-design-md/SKILL.md; the repository may document its own path.

Give the Skill a First Brand and design-system Work Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Pull the design system out of [./src] for me — it's a Vue app with a theme.ts and some SCSS, and the dev server won't start right now. Group the colors by role, not by hue, give near-duplicates one descriptive name, and cover typography, buttons, cards, navigation and inputs. Write it to .stitch/DESIGN.md with the YAML frontmatter, and finish with a few Stitch generation prompts.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Every color has a descriptive name, a hex code and a functional role.
Typography covers font family, a character description and the full hierarchy.
Component styles state shape, color, states and transitions.
Layout states max-width, grid, breakpoints and the spacing strategy.
The document captures the intent behind the styling rather than just raw values.

In OpenDesign import stitch::extract-design-md from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
Skill file: plugins/stitch-design/skills/extract-design-md/SKILL.md Content checksum recorded at verification; commit 0337446
License: Apache-2.0 From LICENSE.
Repository stars: 8,304 GitHub snapshot taken 2026-09-14 for the whole google-labs-code/stitch-skills repository, which contains 12 skills in this catalog. Not a rating or usage count for stitch::extract-design-md.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

Why This ExistsReading source is faster than rendered HTML and works when the build is broken.
When to UseTriggers: extracting, documenting, auditing, migrating a design system, unifying inconsistent styles.
PrerequisitesSource directory access only; no build or runtime dependencies required.
WorkflowFour phases: project discovery, deep extraction, writing DESIGN.md, optional Stitch integration.
Quality ChecklistVerification items for colors, typography, components, layout, language, deduplication and intent.
Tips for Better ExtractionMine code comments, prefer token libraries and theme files, treat Tailwind config as the system.

The Skill's Own Description

“- Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code.”

Front-matter description from SKILL.md. The full file is about 13,970 characters. Read the full file on GitHub.

06 Before you install

Questions About the stitch::extract-design-md Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Do I need to install dependencies or get the app building first?

No. The skill reads source files only and needs no build or runtime dependencies, so it works when dependencies are missing or the build is broken.

Which frameworks and styling setups can it handle?

React, Vue, Svelte, Angular, plain HTML/CSS and any web framework, including Tailwind configs, CSS-in-JS and theme or token files. Framework-specific extraction patterns live in reference files it consults for React/Tailwind, Vue, Svelte, Angular and plain CSS.

Why does the DESIGN.md need YAML frontmatter?

The block carries the name and colors mapping as structured data that other skills parse. Leaving it out, or omitting the core color tokens, is a failure to use the skill correctly.

Can it push the finished design system into Stitch?

That step is optional and handled by another skill: Phase 4 hands off to manage-design-system, which makes the MCP create/update calls using the DESIGN.md as input. If you only want the document, the work ends after Phase 3.

Stitch Extract Design MD

Run stitch::extract-design-md on a Real Brand and design-system Work Task.

Download OpenDesign, import stitch::extract-design-md from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills