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'.
The English summary is being prepared. Showing the original description.
Review the instructions the agent will receive before you install.
Extract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.
Ensure designlang is available. Install if needed:
npm install -g designlang
Or use npx (no install required):
npx designlang <url>
npx designlang <url> --screenshots
For multi-page crawling: npx designlang <url> --depth 3 --screenshots
For dark mode: npx designlang <url> --dark --screenshots
cat design-extract-output/*-design-language.md
Present key findings to the user:
Offer next steps:
*-tailwind.config.js into their project*-variables.css into their stylesheet*-shadcn-theme.css into globals.css for shadcn/ui users*-theme.js for React/CSS-in-JS projects*-figma-variables.json into Figma for designer handoff*-preview.html in a browser for a visual overview| 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 |
npx designlang diff <urlA> <urlB>npx designlang history <url>| 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) |
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Use when styling UI for posthog.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
The English summary is being prepared. Showing the original description.
Use when styling UI for replit.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
The English summary is being prepared. Showing the original description.
Use when styling UI for v0.dev — references the extracted design system tokens instead of inventing colors, spacing, or typography.
The English summary is being prepared. Showing the original description.
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
The English summary is being prepared. Showing the original description.
Use when styling UI for coinbase.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
The English summary is being prepared. Showing the original description.
Use when styling UI for planetscale.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
The English summary is being prepared. Showing the original description.