Turn Any Website Into a Design System With One Command
You've probably found yourself in this situation: you see a site with a design you admire, and you want to understand how it's built. Maybe you want to match its color palette, borrow its spacing rhythm, or figure out what makes its typography feel right. You open DevTools, start poking around, and quickly realize you're going to spend the next two hours copying values by hand.
designlang takes a different approach. Point a headless browser at any URL, and it reads the design system off the live DOM, emitting 17+ files you can actually use.
What It Does
designlang is a Node.js tool (available on npm) that spins up a headless browser, loads whatever URL you give it, and inspects the rendered page rather than the source. That distinction matters: it's reading what the browser actually paints, including computed styles that only exist after CSS, JavaScript, and media queries have done their work.
From that inspection, it emits a pile of output formats. You get DTCG tokens, a Tailwind config, a shadcn theme, Figma variables, motion tokens, typed component anatomy, brand voice notes, page-intent labels, and a prompt pack designed to be pasted into tools like v0, Lovable, Cursor, or Claude Artifacts.
It also goes beyond what most extractors bother with. The README calls out layout patterns, responsive behavior across four breakpoints, hover/focus/active states, WCAG contrast scoring, multi-page consistency checks, drift detection against a live source-of-truth, visual diffs, and a shareable graded report card.
The project is built by Manav Arya Singh, and it's been showing up on Trendshift's daily and weekly JavaScript charts.
Why It's Cool
-
It reads the live DOM, not the stylesheet. This is the core design decision, and it's the right one. Static analysis of CSS files misses anything generated at runtime, anything behind a media query, and anything computed from a cascade you'd have to untangle manually. A headless browser sidesteps all of that by just looking at the result.
-
The output formats meet you where you already work. Rather than inventing a proprietary format and asking you to adopt it, designlang emits things your tooling already understands. Tailwind config, shadcn theme, Figma variables, DTCG tokens. If you use any of those, the output drops straight in.
-
The prompt pack is a genuinely practical touch. Extracting design tokens is one thing. Handing a coding assistant enough context to reproduce a design is another. A paste-ready prompt pack for v0, Lovable, Cursor, and Claude Artifacts acknowledges how people actually build now.
-
It checks things most extractors ignore. Responsive behavior across four breakpoints. Hover, focus, and active states. WCAG contrast scoring. These are the details that separate a design system that looks right in a screenshot from one that holds up in a real interface.
-
Drift checks and visual diffs point at a real workflow. If you've ever tried to keep a design system in sync with a live product, you know the pain. Comparing extracted tokens against a source-of-truth, or diffing visuals over time, turns designlang from a one-off extraction tool into something you could run repeatedly.
-
The graded report card is a nice bit of leverage. A shareable score gives you something concrete to point at, whether you're auditing your own site or making a case to someone else about where the design system needs work.
How to Try It
You'll need Node.js installed. The fastest way in is npx, so there's nothing to install globally.
Extract everything from a site:
npx designlang https://stripe.com
The README also shows a dna subcommand:
npx designlang dna
To dig into the full set of options, output formats, and subcommands, head to the repository:
https://github.com/manavarya09/design-extract
There's also a live site at designlang.app if you want to see it in action before running anything locally.
One note worth flagging: the README mentions that the --smart classification flag is powered by Atlas Cloud, which is listed as a sponsor. If you want the AI-assisted classification, that's the dependency to be aware of.
Final Thoughts
designlang is the kind of tool that solves a problem you've probably worked around rather than solved. Extracting design tokens from a live site used to mean manual DevTools archaeology, and this replaces it with a single command and a folder full of usable files. It's not going to design anything for you, and the quality of what you get out depends on how coherent the source site's design actually is. But if you're rebuilding a design system, auditing a competitor's approach, or feeding context to a coding assistant, this is a much better starting point than a blank file. Worth a look if you work anywhere near front-end design and tooling.
Follow @githubprojects for more developer tools and open source projects.