Stitch::extract Design Md
Extract a comprehensive design system (DESIGN.md) directly from frontend source code, ...
Install
npx skills add google-labs-code/stitch-skills --skill stitch::extract-design-md -g -a claude-code -y- Repository
- google-labs-code/stitch-skills8.7k
- Category
- Design
- Updated
- 3mo ago
- License
- Apache-2.0
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
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.
Extract Design System from Frontend Code
Analyze frontend source code to extract a comprehensive design system document (DESIGN.md) that captures the project's visual language, colors, typography, spacing, component patterns, and layout principles, directly from the source files, without needing to build or render the application.
Why This Exists
The design-md skill works from rendered HTML. But often you have a codebase
and want to understand its design system before you can even run the app, maybe dependencies are missing, the build is broken, or you just want a quick
audit. This skill reads the source files themselves: stylesheets, component
files, theme configs, and Tailwind setups. It's faster and works anywhere.
When to Use
- 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
Prerequisites
- Access to the frontend project's source directory
- No build or runtime dependencies needed, this skill reads source files only
Workflow
Phase 1: Project Discovery
Start by understanding what you're working with. This determines which extraction patterns to use.
1. Detect the Framework and Stack
Scan the project root for telltale files:
