| name | extract-design |
| description | Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use', or '/extract-design'. |
| allowed-tools | Bash, Read, Write, Glob |
Extract Design Language
Extract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.
Prerequisites
Ensure designlang is available. Install if needed:
npm install -g designlang
Or use npx (no install required):
npx designlang <url>
Process
- Run the extraction on the provided URL:
npx designlang <url> --screenshots
For multi-page crawling: npx designlang <url> --depth 3 --screenshots
For dark mode: npx designlang <url> --dark --screenshots
- Read the generated markdown file to understand the design:
cat design-extract-output/*-design-language.md
-
Present key findings to the user:
- Primary color palette with hex codes
- Font families in use
- Spacing system (base unit if detected)
- WCAG accessibility score
- Component patterns found
- Notable design decisions (shadows, radii, etc.)
-
Offer next steps:
- Copy
*-tailwind.config.js into their project
- Import
*-variables.css into their stylesheet
- Paste
*-shadcn-theme.css into globals.css for shadcn/ui users
- Import
*-theme.js for React/CSS-in-JS projects
- Import
*-figma-variables.json into Figma for designer handoff
- Open
*-preview.html in a browser for a visual overview
- Use the markdown file as context for AI-assisted development
Output Files (8)
| File | Purpose |
|---|
*-design-language.md | AI-optimized markdown โ the full design system for LLMs |
*-preview.html | Visual HTML report with swatches, type scale, shadows, a11y |
*-design-tokens.json | W3C Design Tokens format |
*-tailwind.config.js | Ready-to-use Tailwind CSS theme |
*-variables.css | CSS custom properties |
*-figma-variables.json | Figma Variables import format |
*-theme.js | React/CSS-in-JS theme object |
*-shadcn-theme.css | shadcn/ui theme CSS variables |
Additional Commands
- Compare two sites:
npx designlang diff <urlA> <urlB>
- View history:
npx designlang history <url>
Options
| Flag | Description |
|---|
--out <dir> | Output directory (default: ./design-extract-output) |
--dark | Also extract dark mode color scheme |
--depth <n> | Crawl N internal pages for site-wide extraction |
--screenshots | Capture component screenshots (buttons, cards, nav) |
--wait <ms> | Wait time after page load for SPAs |
--framework <type> | Generate only specific theme (react or shadcn) |
