Methodologydesign

extract-design

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'.

manavarya09/design-extract

View source

Install

npx skills add https://github.com/manavarya09/design-extract --skill extract-design

Use with your agent

Install the extract-design skill, then use it as build context. Run: npx skills add https://github.com/manavarya09/design-extract --skill extract-design. Then read the installed skill.md and follow its guidance to build or refactor my project.

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`)