W3C design tokens, linked
Primitive, semantic and composite layers, ready for Tailwind, CSS variables, Figma variables and shadcn.
Read any site’s
design system
Paste a URL and a real browser reads its colours, type and spacing, then hands them back as tokens for Tailwind, Figma and your AI editor.
Your first live read here is free. The CLI is free and open source.
Palettestripe.com
#533afdbrand#061b31text#e5edf5surface#81b81aaccentAaSöhne, 300
Financial infrastructure to grow your revenue.
Spacingpx
2832404864color.action.primary#533afdReads the design systems of
- Stripe
- Linear
- Vercel
- Notion
- Figma
- Apple
Your whole design system
in one run
primary #533afdSöhne 300AA 7.4
designlangColour8 Type Spacing7
designlangTry
stripe.comSample result
- #533afd
- #061b31
- #0d1738
- #64748d
AgSöhne, 300
28 32 40 48 64 80 96
29colours13spacing stepsBgrade, 88/100
- Page
- Colour
- Type
- Spacing
- Shadows
- Radii
- Components
- Regions
- Contrast
- Score
Everything you’d build by hand
11output formats, from Tailwind to SwiftUI
26capabilities in one command
MITlicensed. The CLI is free, for good.
One run, eleven outputs
SwiftUI, Jetpack Compose, Flutter, a WordPress block theme and every web format. No second tool.
Lives inside your editor
An MCP server for Claude Code, Cursor and Windsurf, plus AGENTS.md and .cursorrules written for you.
Reads the live page
A real browser renders the site, so you get what shipped: computed colours, fonts and spacing, not guesses.
Contrast, fixed for you
A WCAG audit of every colour pair, with the smallest hue shift that passes AA.
A CI check for drift
Snapshot your tokens and fail the build when the live design system quietly changes.
What developers said at launch
Unedited comments from the r/ClaudeAI launch thread.
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
Real reads, on this site
Eight brands. Eight real npx designlang <host> runs. Click any card to open the actual brand book.
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. The CLI is free and open source, with no signup or API key. Try it on any URL above or run npx designlang stripe.com in your terminal.
Good questions
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 two extractions 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.