designlang vs dembrandt vs extract-design-system: Which Design Extractor Should You Use?

I built one of these tools. designlang is mine, so read this with that in mind. I've tried to be fair: every fact below comes from each project's own README, package.json and npm listing as of 15 September 2026, and where another tool is the better choice I say so.

All three do the same basic job. You give them a URL, they open it in a headless browser, read the computed styles off the live page, and hand you design tokens. The differences are in what comes out the other end, how much of a site they can reach, and how big a tool you're signing up for.

The short version

• Pick dembrandt if you want the most widely used option with a tight feature set. It had about 6.6 times designlang's npm downloads last month and ships releases often.
• Pick designlang if you need outputs the others don't document: a shadcn/ui theme, a Figma variables file, typed React component stubs, or iOS, Android and Flutter tokens.
• Pick extract-design-system if you just want starter tokens.json and tokens.css written into your project by an AI agent, with a check before it touches your code.

What each one outputs

	designlang	dembrandt	extract-design-system
W3C DTCG tokens	Yes, by default	Yes, --dtcg	W3C compatible tokens.json
CSS variables	Yes	Yes, via Tailwind v4 @theme	Yes, tokens.css
Tailwind config	Yes	Yes, Tailwind v4	No
shadcn/ui theme	Yes	Not documented	No
Figma variables	Yes, JSON file plus a Figma plugin	No dedicated file, DTCG works with Tokens Studio	Not documented
DESIGN.md or Markdown	Yes	Yes, --design-md	No
Brand guide	HTML, Markdown and JSON	PDF, --brand-guide	No
Screenshots	Components and full page	Viewport, --screenshot	No
React stubs	Typed .tsx stubs	No	No
iOS, Android, Flutter	Yes, --platforms	No	No

How much of a site they can read

	designlang	dembrandt	extract-design-system
Multiple pages	Yes, --depth	Yes, --crawl, --sitemap	No, single page
Pages behind a login	Yes, cookies and headers	Yes, cookies and headers	No, public sites only
Responsive capture	Four viewports, --responsive	Reads breakpoints, --mobile viewport	--mobile only
Engine	Playwright, computed styles	Playwright, computed styles	Calls the dembrandt CLI

That last row surprised me. extract-design-system runs dembrandt under the hood, so its extraction quality is dembrandt's. What it adds is normalization, an audit command that checks your own code against the tokens, a skill and an MCP server.

AI agent and CI support

All three ship an MCP server, so Claude Code, Cursor and other MCP clients can call them directly.

• designlang has the most integrations: a Claude Code plugin and skill, a VS Code extension, Raycast, a Chrome extension and a Figma plugin. It also has drift, lint and visual-diff commands plus a GitHub Action for catching token drift in CI.
• dembrandt has an MCP server with job-based tools that can crawl several pages in one call, a separate skills repo, and a GitHub Action with --compare for drift checks.
• extract-design-system is skill-first, installed with npx skills add, and its audit --fail can gate a CI run.

The numbers

	designlang	dembrandt	extract-design-system
GitHub stars	4,099	3,472	218
npm downloads, last month	2,184	14,412	1,112
Latest npm release	12.21.0, 14 June 2026	0.33.0, 13 September 2026	0.1.11, 5 May 2026
Licence	MIT	MIT	MIT

Stars and downloads tell different stories here. designlang has the most stars, but dembrandt is what far more people actually install every month.

Where each one falls short

designlang does a lot, and that's its weakness too. The command list is long and changes fast. At the time of writing, the npm release is behind the GitHub repo, so a few newer commands described in the README aren't in npx designlang yet. If you depend on it, pin a version.

dembrandt documents its own limits clearly. It doesn't auto-detect dark mode, reads hover and focus states from CSS rather than by interacting, can't read canvas or WebGL, and can miss content on heavy JavaScript sites that hydrate late.

extract-design-system is deliberately small. It reads one public page and produces starter tokens, not a full system. Dynamic or protected sites may come back incomplete.

Which one I'd use

If I were starting a new project and wanted tokens for Tailwind with drift checks in CI, dembrandt is a solid, well-maintained choice.

If I needed a shadcn theme, Figma variables or native mobile tokens from the same site in one pass, that's the gap designlang was built for.

If I wanted an AI agent to drop starter tokens into an existing codebase and then keep my components honest against them, extract-design-system's audit flow is the neatest fit.

Numbers and features change quickly in this space, so check each repo before you commit to one.