Manavarya09/design-extract
Manavarya09/design-extractExtract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.
From the README
designlang crawls any website with a headless browser, extracts every computed style from the live DOM, and generates 8 output files — including an AI-optimized markdown file, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS custom properties.
But unlike every other tool out there, it also extracts layout patterns (grids, flexbox, containers), captures responsive behavior across 4 breakpoints, records interaction states (hover, focus, active), scores WCAG accessibility, and lets you compare multiple brands or sync live sites to local tokens.
Quick Start
npx designlang
Get everything at once:
npx designlang --full
What You Get (8 Files)
| File | What it is |
|------|------------|
| *-design-language.md | AI-optimized markdown — feed it to any LLM to recreate the design |
| *-preview.html | Visual report with swatches, type scale, shadows, a11y score |
| *-design-tokens.json | W3C Design Tokens format |
| *-tailwind.config.js | Drop-in Tailwind CSS theme |
| *-variables.css | CSS custom properties |
| *-figma-variables.json | Figma Variables import (with dark mode support) |
| *-theme.js | React/CSS-in-JS theme (Chakra, Stitches, Vanilla Extract) |
| *-shadcn-theme.css | shadcn/ui globals.css variables |
The markdown output has 19 sections: Color Palette, Typography, Spacing, Border Radii, Box Shadows, CSS Custom Properties, Breakpoints, Transitions & Animations, Component Patterns (with full CSS snippets), Layout System, Responsive Design, Interaction States, Accessibility (WCAG 2.1), Gradients, Z-Index Map, SVG Icons, Font Files, Image Style Patterns, and Quick Start.
In v7 a companion *-mcp.json file is also written alongside the 8 outputs so that designlang mcp can serve regions, components, and health data from disk on later invocations. Opting into --platforms additively emits ios/, android/, flutter/, and/or wordpress-theme/ directories in the output folder, and --emit-agent-rules adds a .cursor/, .claude/, CLAUDE.md.fragment, and agents.md set.
Install
# Use directly (no install needed)
npx designlang
# Or install globally
npm install -g designlang
# As an agent skill (Claude Code, Cursor, Codex, 40+ agents)
npx skills add Manavarya09/design-extract
What Makes This Different
Most design extraction tools give you colors and fonts. That's it. designlang fills 5 market gaps that no other tool addresses:
1. Layout System Extraction
Extracts the structural skeleton — grid column patterns, flex direction usage, container widths, gap values, and justify/align patterns.
Layout: 55 grids, 492 flex containers
Every other tool gives you the paint. designlang gives you the architecture.
2. Responsive Multi-Breakpoint Capture
Crawls the site at 4 viewports (mobile, tablet,