How to use the Extract Design System agent skill

What does the skill make the agent do?

The skill tells the agent to scan a frontend project's source files, including component files, stylesheets, Tailwind configs, and theme and token files, and describe the visual design system they define. The output is a DESIGN.md document covering overall mood, a colour palette with named roles, typography, spacing, and component patterns.

It works from source alone, so the app does not need to be built or running. The result is written so that Stitch, Google's design tool, or another designer can recreate the same visual feel.

• Detects the framework and stack from files such as package.json, tailwind.config.js and postcss.config.js
• Groups colours by function (background, accent, text, states) and gives them descriptive names
• Describes type scale, font character, and spacing principles in editorial language

Install the skill from the ZIP

Download the ZIP for plugins/stitch-design/skills/extract-design-md from the page where you found this guide. Unzip it so the skill folder sits in one of the locations below. The skill's files are SKILL.md, a references folder with framework guides for React with Tailwind, Vue, Svelte, Angular and plain CSS, and an examples folder containing an example DESIGN.md.

For a personal install, unzip into ~/.claude/skills/. For a single project, unzip into the project's .claude/skills/ folder. You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/
• Per project: .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

How do you trigger the skill with a request?

You do not need to type the skill name. The skill's description says it should be used when someone wants to reverse-engineer a design system from a codebase, audit a project's visual language, extract design tokens, or understand styling patterns in a frontend repo. Requests such as asking what an app looks like or to pull out the design from code are meant to match it.

Point the agent at the project's source directory so it can find the files it needs. Be specific about the goal, such as a DESIGN.md for Stitch or an audit of colour usage.

• Extract a DESIGN.md from the source in this repo so I can import it into Stitch.
• Audit the styling patterns across this frontend project and summarise the colour palette.
• What does this app look like? Pull out the design from the code in src/.
• Find the design tokens in this Tailwind project and document the typography scale.

What does the agent read first?

The agent starts with project discovery. It reads package.json to identify the framework and any design-token libraries, then maps the source tree. It looks for tailwind.config.js or .ts, globals or global CSS files with custom properties, and any theme or tokens files. It then reads the matching framework reference: react-tailwind, vue, svelte, angular, or plain-css.

Next it works through each design dimension, gathering raw values and turning them into descriptions. Colours found in several places are deduplicated, so near-identical values such as #333 and #2C2C2C are merged under one name.

What do you need before you start?

You need access to the frontend project's source directory. No build or runtime dependencies are needed. The skill's allowed tools include Bash, Read, Write, web_fetch, and Stitch tools matching stitch*:*, so the Stitch tooling must be available for the Stitch-related permissions. The skill runs scripts and uses the network, so review those permissions before installing.

• Read access to the frontend source directory
• Stitch tooling available for the stitch* tool permissions
• The skill runs scripts and uses the network

Safety notes on scripts and network access

The skill's metadata declares that it runs scripts and uses the network. Its allowed tools include Bash and web_fetch as well as file read and write. Only install skills from sources you trust, and read SKILL.md and the reference files before using it on private code.

The skill is designed to read source files, and it does not require the app to run. If your project contains secrets in source files, be aware that the agent reads those files as part of its analysis.

• Read SKILL.md and the reference files before first use
• Check which tools the agent is allowed to use in this session
• Be cautious when running it on code that contains credentials

Tips for better results

Treat the output as an editorial description, not an exact token dump. The skill itself notes that it is not suited to pixel-perfect spec extraction for production handoff. Check the colour names and font descriptions against the real files before you rely on them.

If your design lives only in a rendered app or an image, this skill is the wrong choice. The sibling design-md skill works from rendered HTML instead.

• Name the framework if you know it so the agent reads the right reference
• Ask for a DESIGN.md scoped to one folder if the repo is large
• Review the generated colour names and consolidate any duplicates you disagree with
• Use the examples/DESIGN.md file in the package to see the expected output format