extract-design
manavarya09/design-extract
Extract complete design systems from any website into 8 ready-to-use formats.
What is extract-design?
Analyzes a website URL to automatically extract its full design language—colors, typography, spacing, shadows, and components—then generates 8 output files (markdown, HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C tokens, and CSS variables) plus WCAG accessibility scoring. Use this when you need to replicate or understand a site's design system.
- Extracts color palettes, typography, spacing systems, shadows, and component patterns from live websites
- Generates 8 output formats: AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables
- Runs WCAG accessibility scoring on extracted design
- Supports multi-page crawling, dark mode extraction, and component screenshots
- Offers comparison and history tracking for design evolution
- Provides ready-to-use theme files for immediate project integration
How to install extract-design
npx skills add https://github.com/manavarya09/design-extract --skill extract-design- Node.js and npm installed
- designlang CLI (installed globally or used via npx)
How to use extract-design
- 1.Run the extraction on your target URL: npx designlang <url> --screenshots
- 2.Read the generated markdown file to review the design system: cat design-extract-output/*-design-language.md
- 3.Review the visual HTML preview by opening *-preview.html in a browser
- 4.Choose which output files to use: copy Tailwind config, import CSS variables, paste shadcn theme, or import Figma variables into your project
- 5.Use the markdown file as context for AI-assisted development or as documentation
Use cases
- Quickly replicate a competitor's or inspiration site's design system into your project
- Generate a Figma design system from a live website for designer handoff
- Extract design tokens from an existing site to bootstrap a new project's theme
- Compare design systems across multiple websites to identify trends
- Create AI-optimized design documentation for LLM-assisted development
- Frontend developers building new projects and needing design system reference
- Designers extracting live design systems for Figma collaboration
- Product teams analyzing competitor or inspiration site design patterns
- AI-assisted development workflows requiring structured design context
extract-design FAQ
Use the --wait <ms> flag to allow time for JavaScript to render before extraction. For example: npx designlang <url> --wait 3000
Yes, use the --dark flag to also extract dark mode color schemes: npx designlang <url> --dark --screenshots
Use the --depth flag to crawl N internal pages: npx designlang <url> --depth 3 --screenshots
Yes, use the compare command: npx designlang diff <urlA> <urlB>
Use *-tailwind.config.js for Tailwind projects, *-variables.css for vanilla CSS, *-theme.js for React/CSS-in-JS, *-shadcn-theme.css for shadcn/ui, and *-figma-variables.json for Figma handoff
Full instructions (SKILL.md)
Source of truth, from manavarya09/design-extract.
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.jsinto their project - Import
*-variables.cssinto their stylesheet - Paste
*-shadcn-theme.cssinto globals.css for shadcn/ui users - Import
*-theme.jsfor React/CSS-in-JS projects - Import
*-figma-variables.jsoninto Figma for designer handoff - Open
*-preview.htmlin a browser for a visual overview - Use the markdown file as context for AI-assisted development
- Copy
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) |
Related skills
More from manavarya09/design-extract and the wider catalog.
authsome
Transparently proxy HTTP requests through credential injection for external APIs and services.
market-research-analysis
|
mantine-combobox
Build custom dropdown, select, autocomplete, and multi-select components with Mantine's low-level Combobox primitives.
mantine-custom-components
Build custom Mantine components with full theming, Styles API, and factory integration.
mantine-form
Build validated forms with @mantine/form using controlled or uncontrolled modes.
docker-compose-orchestration
Orchestrate multi-container applications with Docker Compose for development and production deployment