tokens
W3C DTCG tokens, fully linked.
Primitive · semantic · composite. Drop-in for Tailwind, CSS vars, Figma variables, shadcn theme, and React / Vue / Svelte. Reads from the live DOM — the names match what your designers actually shipped.
Reverse-engineer
any website’s
design system.
One command. DTCG tokens, Tailwind, CSS vars, Figma variables, iOS, Android, Flutter, WordPress, plus a stdio MCP for Claude Code and Cursor — back in seconds.
$ npx designlang stripe.com --pdf walking dom resolving palette reading type measuring rhythm clustering components auditing contrast rendering pdf Brand book · 42 tokens · 3 fonts · grade A+ stripe-com.brand.html stripe-com.brand.pdf stripe-com.tokens.json stripe-com.tailwind.config.js
try it now
See it work.
Paste a URL. Watch the system land.
try
IDLEpaste a URL above
what’s inside
Everything you would build by hand.
Nine extractors, eleven emitters, one design system — for the open web, every native runtime, and your AI editor.
26 capabilities/11 output formats/3 MCP-aware editors/$0 · MIT
multi-platform
One run, eleven outputs.
iOS SwiftUI, Android Compose, Flutter Dart, WordPress block theme, plus every web format. No second tool.
mcp
Lives inside your editor.
Stdio MCP for Claude Code, Cursor, Windsurf. Plus auto-generated AGENTS.md / .cursorrules / Claude skills.
WCAG remediation.
The smallest hue-shift that passes AA. Not just a red badge.
Real CTAs, real headlines.
The brand voice extracted from the page itself — not Lorem ipsum.
Brand books, native PDF.
13 chapters, page bookmarks, running footer, tokens attached.
CSS health audit.
Specificity, dead rules, duplicates. Fix what AI agents trip over.
Dual extraction.
Walks both themes, diffs them, emits one set of paired tokens.
Drift CI bot.
Snapshot your tokens. Fail the build when the live system silently moves.
loved by developers
From the threads.
Real, unedited comments from the r/ClaudeAI launch.
Is the background representative of the token burn and the ungodly amount of work this task seems like for the model?
Just turned this into an openclaw skill and tested it out. Works great! This is going to be super useful.
yeah I want that background as much as I want the tool lol
my Claude definitely earned its tokens on this one
Is the background representative of the token burn and the ungodly amount of work this task seems like for the model?
Just turned this into an openclaw skill and tested it out. Works great! This is going to be super useful.
yeah I want that background as much as I want the tool lol
my Claude definitely earned its tokens on this one
this is diabolical and will make so many companies unhappy, but I love it
This my friend is bloody awesome! Starred.
Yes! I have a dedicated "scraper" agent and this is the perfect addition to its skillset. Thank you!
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.
this is diabolical and will make so many companies unhappy, but I love it
This my friend is bloody awesome! Starred.
Yes! I have a dedicated "scraper" agent and this is the perfect addition to its skillset. Thank you!
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.
I want to be able to copy specific animations / interaction design of a website. Can it do that?
It actually does that already — run with --interactions and it captures hover, focus, active states on buttons, links and inputs. Plus all CSS transitions, easings and keyframes.
Yeah but the background was so funny hahaha
Only upvoted cuz of the background
I want to be able to copy specific animations / interaction design of a website. Can it do that?
It actually does that already — run with --interactions and it captures hover, focus, active states on buttons, links and inputs. Plus all CSS transitions, easings and keyframes.
Yeah but the background was so funny hahaha
Only upvoted cuz of the background
see them in action
Real extractions, on this site.
Eight brands. Eight real npx designlang <host> runs. Click any card to open the actual brand book.
Browse galleryextracted live · 2026-05-20
about designlang
An open-source CLI that turns any URL into a complete design system.
designlang is a free, MIT-licensed command-line tool that points a headless Chromium browser at any live website and reads its design system off the rendered DOM. One run emits W3C DTCG tokens in primitive, semantic and composite layers, plus a Tailwind config, CSS variables, Figma Variables JSON, a shadcn/ui theme, React / Vue / Svelte theme objects, iOS SwiftUI extensions, Android Jetpack Compose Theme.kt, Flutter ThemeData, a WordPress block theme, and a print-ready brand-book PDF with chapter bookmarks and the tokens embedded as a file attachment.
designlang is built for the AI-coding era. The bundled stdio MCP server exposes every extracted artefact — colours, typography, spacing, motion, anatomy, accessibility findings — to Claude Code, Cursor and Windsurf as native MCP resources. The CLI also writes AGENTS.md, .cursorrules and Claude Code skills directly into your repo so any agent can read the system without prompting.
Beyond extraction, designlang ships a CSS health audit (specificity graph, dead-rule detection, duplicate declaration count, @keyframes catalogue), a WCAG remediation step that picks the smallest hue-shift to pass AA, a semantic region classifier for navs / hero / pricing / testimonials / footer, component clustering with variant and slot detection, dark-mode pairing, authenticated crawling, and a CI drift bot that fails the build when the system silently changes.
Designed as a strict superset of design-extractor.com, designlang ships the entire DESIGN.md spec (see the spec page) plus everything you actually need to build the design. Free, open source, no signup, no API key. Try it on any URL above or run npx designlang stripe.com in your terminal.
faq
Frequently asked.
Quick answers about installing designlang, the output formats, the MCP server, and how it compares to Style Dictionary, Subframe, v0 and design-extractor.com.
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.
Two seconds to first token.
Drop the command, get the system. Pipe it into Tailwind, your MCP-aware editor, or a PDF.
npx designlang stripe.comTry it now