designlang: one command pulls any website's design system into tokens and Tailwind config

Recreating a reference site’s look usually means copying its colours, type sizes, spacing and corner radii one value at a time. designlang is an MIT-licensed command-line tool by Manav Arya Singh (GitHub account Manavarya09). The repository is design-extract; it had 4,980 stars on November 9, 2026, and the npm package is at version 13.4.0. It opens a URL in headless Chromium, reads the design system from the rendered page, and writes DTCG tokens, a Tailwind config, a shadcn theme and Figma variables in one pass.

The screenshot comes from version 3.0.0, which wrote eight files. The current README describes 17 or more files per run.

Core features

• Reads what the browser renders: colours, fonts, spacing, shadows, radii and motion parameters are sampled from the styles the page actually displays. You get what visitors see, not the intent in a design file. The trade-off is a snapshot of one moment, not the source of truth.
• One command, many formats: each run writes 17 or more files, according to the README. They include W3C DTCG tokens, a Tailwind config, a shadcn theme, Figma variables for light and dark modes, CSS custom properties and motion tokens.
• More than colours: layout patterns, behaviour across four breakpoints, hover and focus states, and WCAG contrast scoring are all part of the output.
• Gates in CI: designlang verify-ui checks a local interface against a brand file at 390, 768 and 1280 pixels and exits with code 1 on drift, so it can act as a pipeline check. drift and lint follow the same pattern.
• Plugs into AI editors: designlang mcp exposes the design system to Claude Code, Cursor and Windsurf as MCP resources and tools. The repository also ships a Claude Code plugin with slash commands such as /extract and /fidelity, plus prompt packs for v0, Lovable, Cursor and Claude Artifacts.
• Fidelity scoring: designlang fidelity <original> --clone <local URL> compares the visuals and motion of a clone with the original, returns a score and a ranked list of fixes. It is useful when you are working out what a clone still gets wrong.

Typical use cases

• A landing page in the style of a reference site: run npx designlang <url>, hand the tokens to an AI editor and write components against variables rather than measurements taken from screenshots.
• A design system across several pages: designlang site samples a site’s main pages and merges them into one canonical system with a consistency grade.
• Checking a live site against local tokens: drift treats the deployed site as the source of truth and compares it with a local tokens file.
• A quick “does this look generic?” check: designlang slop gives a page a score out of 100 and lists the common AI-design tells it found. Treat the number as the tool’s judgment, not a shared standard.

Quick start

npm i -g designlang
designlang install-browser   # one-time Chromium download, about 150 MB
npx designlang https://stripe.com

Output is written to ./design-extract-output/. The tool needs Node.js 20 or later and needs no account or API key. If Google Chrome is already installed, --system-chrome skips the Chromium download. Pages behind a login can be read with --cookie, --cookie-file or --header.

Relation to existing options

Similar tools exist. Search results surface dembrandt (3,983 stars, MIT) and extract-design-system (279 stars, MIT), which also read styles from a URL. designlang’s difference is in its output: one run gives Tailwind, a shadcn theme, Figma variables and a prompt pack, plus MCP access and fidelity scoring. If you only need a JSON file or a set of CSS variables, a lighter tool will do. If you want the result to feed straight into an AI editor, designlang covers more ground.

If your project is a shadcn/ui-based admin such as shadcn-admin, the generated shadcn theme file is a ready starting point.

Summary

designlang fits front-end engineers and designers who want to carry a reference site’s visual language into their own project, and teams that want an AI editor to write interfaces against real design variables. Facts and limits: MIT licensed, npm version 13.4.0, Node.js 20 or later. The repository was created on April 15, 2026, and last pushed on November 5, 2026, so it has about seven months of history. The limits are plain. The output is a snapshot of rendered styles, not a design source file. The first run downloads about 150 MB of Chromium. The README lists two sponsors, Atlas Cloud and Bloome, and the optional --smart classifier needs API keys for an external model; the basic extraction does not. Reusing another site’s design system raises licensing and brand questions that you have to settle yourself. GitHub counts the repository as HTML, but the command-line tool itself is JavaScript.