designlang: extract a website's design system into DTCG tokens, Tailwind and Figma variables
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 remediation, Chrome extension. MIT, Playwright, Node 20+.
At a glance
- What is it?
- designlang points Playwright at a live URL and reads tokens, motion, layout patterns and WCAG contrast off the DOM. It is a good fit for teams that want a starting design system from a real site, and a poor fit for anyone expecting pixel-exact reproduction of a canvas app.
- Who is it for?
- Adopt designlang if you need a first-pass token set from a live site and you already run Node 20+ and Playwright locally; the npm package designlang installs Chromium automatically via its postinstall script. Do not adopt it if your reference design lives in Figma or a canvas app rather than a rendered DOM, or if you need a legally clean copy of someone else's brand.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository received new commits within the last day.
- What is it written in?
- Mainly HTML, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on September 16, 2026, and from our analysis. They are not legal advice.
DEEP OPEN-SOURCE ANALYSIS
The gap designlang fills between a screenshot and a stylesheet
A designer sends a link. An engineer opens DevTools and starts copying hex values. That loop is slow, and it produces a partial answer: the colors show up, but the spacing scale, the type ramp, the hover states and the contrast failures do not. designlang targets exactly that gap. It is a Node 20+ CLI and npm package named designlang, published under MIT by Manav Arya Singh, that opens a URL in headless Chromium through Playwright and reads the design system off the live DOM rather than from an image or a handoff file.
The audience is narrower than 'anyone who likes design systems'. It is for front-end and design-engineering teams who need a token set they can actually paste into a repo: DTCG tokens, a Tailwind config, a shadcn theme, Figma variables, motion tokens and typed component anatomy stubs. The README describes the output as 17+ files from one command. If you only want a color palette, this is more machinery than you need. If you want the palette plus the spacing scale plus the state styles plus a contrast report, the single command starts to make sense.
How the extraction actually runs: Playwright, DOM reads, and token election
The mechanism is a headless browser and a set of DOM reads. The package.json lists playwright as a dependency, and the postinstall script runs npx playwright install chromium so the browser is present after install. The CLI then visits the URL and inspects computed styles, which is why the README can claim it goes beyond colors into layout patterns, responsive behavior across four breakpoints, and hover, focus and active states. Those are things you cannot recover from a static screenshot but can recover from a rendered page.
The more interesting design choice is in the site command. Where a single-URL run reads one page, designlang site crawls what the README calls canonical pages (home, pricing, docs, blog, about, product) and synthesizes one de-duplicated system. Tokens are elected by coverage: the share of pages that use a given value. That is a real editorial decision, not a technical one. It means a color used on every page outranks a one-off accent, and it also means a deliberate page-local brand moment can be voted out of the canonical set. The README states that near-identical colors are merged, which is the other half of the same trade-off: you get a smaller, cleaner palette at the cost of losing distinctions the original designer may have made on purpose.
There is also a v13 Extraction Theatre on designlang.app/watch that streams the browser's CDP screencast alongside token events. That is a transparency feature rather than an extraction feature, but it matters for trust: the README explicitly frames it as a way to check the output rather than take it on faith.
Installing designlang and running a first extraction
The README's quick start uses npx, so no global install is required. Node 20 or newer is the floor stated in package.json under engines. The first run will pull Chromium if the postinstall step did not already do it.
npx designlang https://stripe.comThat single command is described in the README as extracting everything. Expect a directory of generated files rather than terminal output you read once: DTCG tokens, Tailwind config, shadcn theme, Figma variables, motion tokens and component anatomy stubs among them. The README does not state the exact output directory name, so check what the CLI prints on completion.
If you want the whole-site pass instead of one page, the README gives this form:
npx designlang site stripe.comAccording to the README, this crawls the canonical pages and returns one canonical system plus a consistency grade. That grade is the number to look at first. A low consistency score is telling you the site does not have a single system to extract, and the merged output will be a compromise rather than a description.
To see screenshots, responsive passes and interaction states rather than tokens alone, the README documents a --full flag:
npx designlang --full https://stripe.comRun this against a page you own before you run it against a reference site. You will learn within one run whether the token counts look plausible for your own codebase.
Where designlang breaks down or is the wrong tool
The extraction is only as good as the DOM it reads. A site that renders its interface inside a canvas, a WebGL layer or a heavily obfuscated CSS-in-JS runtime gives the browser far less to inspect than a plain semantic page does. The README does not claim canvas support, and nothing in the dependency list suggests image-based inference. If your reference design is a Figma file or a screenshot rather than a live URL, this is the wrong tool; the related search phrase 'Design extractor from image' describes something this project does not appear to be.
Coverage-based election has a second failure mode. On a marketing site with a genuinely inconsistent palette, merging near-identical colors produces a tidy token set that never existed in the source. The output looks more coherent than the site. That is useful if you are trying to clean up, and misleading if you are trying to document.
There is also a licensing boundary the README does not address. Extracting a design system from a third-party site produces derivative artifacts: token names, palettes and type scales that mirror someone else's brand. MIT covers the tool, not the output. The README does not document a rights check or a robots.txt policy for the crawler in site mode, so that judgement is yours before you run it against a site you do not own.
The smart classification path depends on an external service. The README states that Atlas Cloud, a sponsor, powers the OpenAI-compatible --smart classification. That means one code path in the tool is not self-contained, and the README does not describe what happens to --smart output when that service is unavailable.
designlang against a Figma-first token pipeline
The obvious alternative is the Figma-first route: keep tokens in Figma variables as the source of truth, export them with a plugin, and sync them into the repo. That approach assumes the design exists in Figma and is maintained there. designlang assumes the opposite, that the live site is the source of truth and the design file may be stale or absent.
The practical difference shows up in what each one can see. A Figma-first pipeline knows intent: which values are named tokens, which are aliases, which are deprecated. designlang knows rendered reality: what the browser actually paints, including states and breakpoints a design file may not enumerate. Neither is a superset of the other. If your team already has disciplined Figma variables, adding designlang gives you a drift check rather than a replacement, which is roughly what the repo's fidelity and verify commands appear to be for. If your team has no design file at all, designlang is the only one of the two that can start from nothing.
Maintenance, upgrade cost and what MIT does and does not cover
The repository is not archived, and the last push was on 2026-09-15, one day before this writing. The release history is dense rather than sparse: v13.2.0 on 2026-08-31, v12.15.0 on 2026-05-21, v12.14.0 on 2026-05-17. That cadence is the upgrade cost. The README's quick start annotates commands with the version that introduced them, from v12.2 through v13.1, which tells you the CLI surface has been moving steadily. If you pin designlang in CI, expect to re-read the changelog between minor versions rather than assume flag stability.
The runtime cost is Playwright plus Chromium. That is a heavy dependency to add to a build image, and the postinstall script runs a browser download. On a locked-down CI runner with no network access at install time, that step will fail unless Chromium is provisioned separately. The README does not document an offline install path.
On licensing: the package is MIT, which permits commercial use, modification and redistribution with the licence and copyright notice retained. That covers the code. It does not cover the design tokens you generate from a third-party site, and it does not cover the sponsors' services that some flags depend on. Nothing here is legal advice; if you plan to ship extracted tokens from a site you do not own, that is a question for whoever handles your IP.
Editorial conclusion
Adopt designlang if you need a first-pass token set from a live site and you already run Node 20+ and Playwright locally; the npm package designlang installs Chromium automatically via its postinstall script. Do not adopt it if your reference design lives in Figma or a canvas app rather than a rendered DOM, or if you need a legally clean copy of someone else's brand. Before committing, verify that the site you are extracting from permits it, and run npx designlang https://your-own-site on a page you control to see how much of the output is real tokens versus one-off values.
Frequently asked questions
How can I extract a design system from a website with designlang?
Run npx designlang followed by the URL, which the README says extracts everything into DTCG tokens, Tailwind config, shadcn theme, Figma variables and motion tokens. For a whole-site pass that crawls canonical pages and elects tokens by coverage, use npx designlang site followed by the domain.
What does designlang need to run?
Node 20 or newer, per the engines field in package.json, and Chromium, which the postinstall script installs via Playwright. The README's quick start uses npx, so a global install is not required.
Is designlang the same as an image-based design extractor?
No. designlang reads the rendered DOM through headless Chromium, so it depends on the page actually rendering its styles in the browser. The README does not describe extracting a design system from a static image or a screenshot.
Does designlang work with Claude Code and other AI editors?
Yes. The repository ships an MCP server entry point at ./mcp and includes .claude-plugin, commands, skills and vscode-extension directories, and the README lists a paste-ready prompt pack for v0, Lovable, Cursor and Claude Artifacts.
Community notes