Tools· Design & Creative

design-extract

design-extract reads a website's complete design system straight from the DOM and returns it as tokens, themes and component anatomy.

analyticaldesigningexecutableOpen Source

Open provider

Description

design-extract drives a headless browser against any URL and generates more than 17 output files with a single command: DTCG design tokens at the primitive, semantic and composite level, a Tailwind configuration, a shadcn/ui theme, Figma variables, motion tokens, a typed component anatomy, and a ready-made prompt template for tools such as v0, Lovable or Claude Artifacts.

The tool goes beyond plain color and font extraction: layout patterns, responsive behavior across multiple breakpoints, hover, focus and active states, a WCAG contrast rating, consistency checks across multiple pages, and drift checks against a reference source are all part of its scope. It also ships emitters for iOS SwiftUI, Android Jetpack Compose, Flutter and WordPress block themes, plus an MCP server for Claude Code, Cursor and Windsurf.

At Voyage Digital, design-extract is part of the active stack for design system extraction, among other things as a basis for reference and competitive analyses in redesign or rebranding projects.

Strengths

One command, many output files

DTCG tokens, a Tailwind configuration, a shadcn/ui theme, Figma variables, motion tokens, a typed component anatomy and a ready-to-use prompt template for v0, Lovable, Cursor or Claude Artifacts are all produced in a single run with more than 17 output files.

A layout system, not just color values

Grids, flex containers, container widths and gaps are captured as their own structure, not just as color or font values.

Responsive behavior documented

Four breakpoints are crawled, and the differences between them are logged.

Interaction states captured automatically

Hover, focus and active states are triggered programmatically, and the resulting changes are recorded.

Motion language as a fingerprint

Duration, easing families, spring detection and a motion fingerprint such as springy, smooth, mechanical or mixed sum up a page's motion style.

WCAG contrast rating with correction suggestion

Every foreground-background pair is scored; if it fails, the tool suggests the nearest passing existing color.

Assessment

AI features

MCP server The MCP server exposes tokens, page regions, components and contrast pairs to MCP-aware agents such as Claude Code.
Claude Code plugin Installed as a plugin, every CLI command becomes its own slash command inside a Claude Code session.
Agent skill for further ecosystems Installed as a skill, the tool is also available in Cursor, Codex and more than 40 further AI coding agents.
Ready-made prompt template The extraction run produces a ready-to-use prompt template for v0, Lovable, Cursor and Claude Artifacts.
Agent rule files A single flag additionally writes rule files for Cursor, Claude Code, CLAUDE.md and generic agents.

Suitable for

Design and frontend teams that need the design system of an existing website as structured tokens instead of a manual transcript
Agencies that want to systematically evaluate reference pages for redesigns or competitive analyses
Developers who want to feed AI coding tools such as Claude Code or Cursor directly with an extracted design system
Teams that want to check accessibility early in the process, through the built in WCAG contrast rating

Limitations and notes

Resource-heavy default run A single extraction pass processes up to 5,000 DOM elements with more than 25 computed properties; on very large pages this can noticeably slow the run down.
Chromium download on first start Without the option to use an existing system Chrome install, the tool downloads a bundled Chromium instance of around 150 MB.
Default run covers only one page Without an explicit depth setting, only the given URL is crawled; multi-page consistency checks require the crawl depth to be set explicitly.
Dark mode not included by default Dark variants are only extracted with an additional option.
Protected pages need preparation For login-protected or certificate-secured target pages, cookies, headers or an option to ignore certificate errors must be configured beforehand.

Quick start

Install designlang globally with npm i -g designlang, or run it directly via npx designlang without installing.
Run the command against the desired reference URL, for example npx designlang https://your-reference-site.com. The result lands in the design-extract-output folder by default.
Use designlang grade with the target URL to generate a shareable report card, or designlang apply with the target URL to apply the tokens directly to your own project.
For the full feature set including screenshots, responsive crawling and interaction states, add the --full flag.
If needed, install it as a Claude Code plugin via /plugin install Manavarya09/design-extract, or as an agent skill via npx skills add Manavarya09/design-extract in your own coding environment.

Tips

For CI pipelines, the linting, drift-check and visual-diff commands all return a non-zero exit code on deviations.
For multiple reference sites, the brands command delivers a comparison matrix instead of isolated single runs.
Before a redesign, the battle command is worth using for a direct, scored comparison of two sites.
Anyone who wants to transfer a design language rather than copy it can use the remix command as a starting point in a different visual vocabulary.
For recurring checks, the watch command monitors a site for design changes at an interval.

Access

design-extract is open source under the MIT license; local execution requires Node.js as well as Playwright for the headless browser. The original repository at github.com/Manavarya09/design-extract is no longer reachable (404); the associated author account currently lists no public repositories. The author now maintains the tool under the name designlang and distributes it as an npm package (npmjs.com/package/designlang, actively maintained), though without publicly viewable source code. As an openly readable, MIT licensed source, the verified mirror at github.com/joeycumines/design-extract serves this purpose: its README identifies itself as a mirror of the original, and its feature set matches completely. Recommendation: use the mirror for local installation, and additionally watch the npm package designlang for the always current distribution.