Skip to content
Get packs

Extract Design System

Turns frontend source code into a DESIGN.md describing its colors, type, spacing and components.

Source Download skill
Repository
google-labs-code/stitch-skills
Stars
8,657
Licence
Apache-2.0
Files
7 files

What it does

This skill teaches an AI agent to read a web project's source files (component files, stylesheets, Tailwind configs, theme and token files) and write up its visual design system as a DESIGN.md document. It covers the overall mood, colour palette with named roles, typography, spacing and component patterns, without needing the app to be built or running. The output is written to be usable by Stitch, Google's design tool, or by another designer to recreate the same visual feel.

Great for

  • Designers who inherit a codebase and want to document its look and feel
  • Developers who want a quick audit of the styling patterns across a frontend repo
  • Teams migrating an existing project's visual identity into Stitch

Skip it if

  • Projects whose design lives only in a rendered app or image, since this skill reads source files only (the sibling design-md skill works from rendered HTML)
  • Exact pixel-perfect spec extraction for production handoff, because the output is interpretive editorial description rather than a precise token dump

Try asking

  • “Extract the design system from this React + Tailwind repo into a DESIGN.md”
  • “What does this app look like? Pull out the design from this code.”
  • “Audit the styling patterns and colour roles in this Vue project”
  • “Create a DESIGN.md from the stylesheets and theme files in this folder”
Step-by-step guide: how to use Extract Design SystemInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 7 original files, the Apache-2.0 licence and an attribution note.

    extract-design-md.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip extract-design-md.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip extract-design-md.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at the project root so it can read package.json and detect the framework first.
  • Review the generated colour names and roles, since they are interpretive and may need correction against the actual code.
  • Ask for a specific framework reference if the project mixes stacks, so the right extraction patterns are used.

What's inside

  • examples/DESIGN.md
  • references/angular.md
  • references/plain-css.md
  • references/react-tailwind.md
  • references/svelte.md
  • references/vue.md
  • SKILL.md

Redistributed unmodified from google-labs-code/stitch-skills under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.