stitch::extract-design-md — Skills

What it does

User has a frontend codebase and wants to extract or document its design system

User wants to migrate a project's visual identity into Stitch

User asks to "audit the styling" or "understand the design language" of a repo

User wants to create a DESIGN.md from existing source code

The app can't be built/rendered but the source is available

User wants to unify or reconcile inconsistent styles across a codebase

Access to the frontend project's source directory

Requirements & configuration

| theme.js / theme.ts / tokens.js | Design token files |

design-token libraries (e.g., style-dictionary, @chakra-ui/react,

| Theme/token files | Color objects, palettes |

Check for design-token libraries. If the project uses style-dictionary,

--brand-primary, they're telling you this is a design token. Respect that.

Source

Repository: https://github.com/google-labs-code/stitch-skills

stitch::extract-design-md FAQ

What does the stitch::extract-design-md skill do?

>- 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. User has a frontend codebase and wants to extract or document its design system User wants to migrate a project's visual identity into Stitch

What does stitch::extract-design-md require?

| theme.js / theme.ts / tokens.js | Design token files | design-token libraries (e.g., style-dictionary, @chakra-ui/react, | Theme/token files | Color objects, palettes | Check for design-token libraries. If the project uses style-dictionary, --brand-primary, they're telling you this is a design token. Respect that.

How do I install stitch::extract-design-md?

Run: npx -y skills add https://github.com/google-labs-code/stitch-skills --skill stitch::extract-design-md --agent claude-code — the source lives at github.com/google-labs-code/stitch-skills.

Maintain stitch::extract-design-md?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![stitch::extract-design-md on getagentictools](https://getagentictools.com/badge/skills/google-labs-code-stitch-skills-stitch-extract-design-md.svg)](https://getagentictools.com/skills/google-labs-code-stitch-skills-stitch-extract-design-md?ref=badge)

npx agentictools info skills/google-labs-code-stitch-skills-stitch-extract-design-md

The second line is the CLI lookup for this page — handy in READMEs and docs.