stitch::extract-design-md

1# Extract Design System from Frontend Code
2 
3Analyze frontend source code to extract a comprehensive design system document
4(DESIGN.md) that captures the project's visual language — colors, typography,
5spacing, component patterns, and layout principles — directly from the source
6files, without needing to build or render the application.
7 
8## Why This Exists
9 
10The `design-md` skill works from rendered HTML. But often you have a codebase
11and want to understand its design system before you can even run the app —
12maybe dependencies are missing, the build is broken, or you just want a quick
13audit. This skill reads the source files themselves: stylesheets, component
14files, theme configs, and Tailwind setups. It's faster and works anywhere.
15 
16## When to Use
17 
18- User has a frontend codebase and wants to extract or document its design system
19- User wants to migrate a project's visual identity into Stitch
20- User asks to "audit the styling" or "understand the design language" of a repo
21- User wants to create a DESIGN.md from existing source code
22- The app can't be built/rendered but the source is available
23- User wants to unify or reconcile inconsistent styles across a codebase
24 
25## Prerequisites
26 
27- Access to the frontend project's source directory
28- No build or runtime dependencies needed — this skill reads source files only
29 
30---
31 
32## Workflow
33 
34### Phase 1: Project Discovery
35 
36Start by understanding what you're working with. This determines which
37extraction patterns to use.
38…