Design Extract
Extract 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 remediatio
Last verified:
What is Design Extract?
designlang is an open-source command-line tool that reverse-engineers any website's complete design system by crawling the live DOM with a headless browser. It extracts every computed style including colors, typography, spacing, shadows, borders, motion animations, and component patterns, then outputs them in multiple formats. The tool reads directly from what your browser renders, just like opening DevTools, without scraping content or bypassing paywalls.
Key features include W3C DTCG tokens in primitive, semantic, and composite layers; 12 output formats covering Tailwind config, CSS variables, Figma Variables, shadcn/ui themes, React/Vue/Svelte themes, iOS SwiftUI, Android Jetpack Compose, Flutter, and WordPress block themes; a stdio MCP server for Claude Code, Cursor, and Windsurf; a CSS health audit with specificity analysis and dead-rule detection; WCAG contrast remediation that finds the smallest hue-shift to pass AA; dark-mode extraction with paired tokens; semantic region classification; component clustering with variant detection; and a print-ready 13-chapter brand-book PDF with embedded tokens.
designlang is built for developers, designers, and AI coding agents working in the AI-coding era. It's ideal for teams wanting to clone design systems from reference sites, audit CSS health, ensure accessibility compliance, integrate design tokens into multi-platform apps, or give AI agents native access to design systems via MCP. The tool requires Node.js 20+, runs locally with no signup or API keys, and is MIT-licensed with 2,500+ GitHub stars.
Design Extract pricing
Pricing model: Freemium
Free and open-source under MIT license. No paid tier, no API keys, no signup required. The CLI via npx is unlimited. The hosted demo at designlang.app is rate-limited to one extraction per IP per day. Full source code available on GitHub at github.com/Manavarya09/design-extract.
Design Extract pros
- Open-source and MIT-licensed with no paid tier
- No signup, no API keys required
- One command extracts complete design system
- W3C DTCG tokens with primitive/semantic/composite layers
- 12 output formats from single run
- Native MCP server for Claude Code, Cursor, Windsurf
- Multi-platform emitters for iOS, Android, Flutter, WordPress
- WCAG contrast remediation with smallest hue-shift fix
- CSS health audit with specificity graph and dead-rule detection
- Dark-mode pairing with diffed tokens
- Print-ready 13-chapter brand-book PDF with embedded tokens
- Auto-generates AGENTS.md, .cursorrules, Claude skills
- Captures motion, hover, focus, active states with --interactions
- Component clustering with variant and slot detection
- CI drift bot fails build when design system silently changes
- Shared permalinks for every extraction at /x/<hash>
- Local browser studio to inspect tokens and specs
- Real brand voice extracted from page, not Lorem ipsum
- Tailwind config with theme.extend wired to extracted tokens
- Figma Variables JSON imports cleanly into Figma's variables panel
Design Extract cons
- Requires Node.js 20 or later
- Hosted demo rate-limited to 1 extraction per IP per day
- CLI-only interface, no GUI except local studio
- Headless Chromium browser dependency
- May not work well with heavily obfuscated/minified CSS
- Authenticated crawling requires manual setup
- Only extracts computed styles, not Figma source files
- Single URL input, not batch processing multiple sites at once
Frequently asked questions about Design Extract
What is designlang?
designlang is an open-source CLI that crawls any live website with a headless browser and emits its complete design system: W3C DTCG tokens (primitive, semantic, composite), Tailwind config, CSS variables, Figma variables, shadcn/ui theme, plus native emitters for iOS SwiftUI, Android Jetpack Compose, Flutter and WordPress, and a print-ready brand-book PDF. It runs locally and ships an MCP server so Claude Code, Cursor and Windsurf can read live extractions as native tools.
How do I install designlang?
Run npx designlang <url> — no install, no account, no API key. The package is on npm as designlang and requires Node.js 20 or later. The full source is on GitHub at github.com/Manavarya09/design-extract under the MIT licence.
How is designlang different from Style Dictionary, Tokens Studio, Subframe, v0 and Builder.io?
Those tools take a Figma file or hand-authored tokens as input. designlang takes a live URL. It reads what your browser actually computes — colours, spacing, typography, motion, shadows, anatomy — directly from the rendered DOM. It outputs strict W3C DTCG with proper primitive / semantic / composite layering, runs a CSS health audit, performs WCAG remediation, and ships multi-platform emitters from one run.
Does designlang work with Claude Code, Cursor and Windsurf?
Yes. designlang ships a stdio MCP server (designlang mcp) that exposes extracted tokens, semantic regions, component clusters, CSS health and accessibility remediation as MCP resources and tools. The CLI also auto-generates .cursor/rules/designlang.mdc, .claude/skills/designlang/SKILL.md, CLAUDE.md fragments and AGENTS.md so any AI coding agent can read the system natively.
Is designlang free and open source?
Yes. designlang is MIT-licensed and fully open source on GitHub. The CLI is free with no signup. The hosted demo at designlang.app is rate-limited to one extraction per IP per day; the CLI is unlimited.
What output formats does designlang support?
W3C DTCG JSON, Tailwind CSS config, CSS custom properties, Figma Variables JSON, shadcn/ui theme, React / Vue / Svelte theme objects, iOS SwiftUI extensions, Android Compose Theme.kt + colors.xml, Flutter ThemeData, WordPress block theme (theme.json + style.css), agent rules (AGENTS.md, .cursorrules, Claude skills, MCP), motion tokens, typed component anatomy stubs, a brand voice/CTA pack, and a print-ready brand-book PDF with chapter bookmarks and an embedded tokens attachment.
Can I generate a brand-book PDF for any URL?
Yes. npx designlang brand <url> --pdf produces a 13-chapter brand-guidelines PDF with chapter page breaks, a running footer, an extracted-primary cover band, and (with --attach-tokens) the DTCG tokens JSON embedded as a PDF file attachment.
Does designlang extract motion, hover states and interaction design?
Yes. With the --interactions flag designlang captures hover, focus and active states for buttons, links and inputs, and reads all CSS transitions, easing functions and @keyframes animations into a motion-tokens DTCG file.
What is the CLI command syntax?
The basic command is npx designlang <url>. Additional options include --pdf for brand book, --dark for dark mode extraction, --depth <n> for crawling N internal pages, --screenshots for component screenshots, --wait <ms> for SPA load time, --framework <type> for specific theme generation (react or shadcn), --out <dir> for output directory, --interactions for motion/state capture, and clone for Next.js starter generation.
Does designlang bypass paywalls or scrape content?
No. It only reads what your browser already sees — computed styles from the live DOM, same as opening DevTools. No scraping content, no bypassing paywalls. Just the CSS and design tokens from the rendered page.