Dembrandt, StyleKit, WAALEE: picking a design token extractor
By The WAALEE Team · · 4 min read
Eighteen months ago, pulling a design system off a live site meant opening DevTools and doing it by hand. Now there's a small wave of tools that do it in one command or one click: dembrandt, an open-source CLI that shipped this year and crossed two thousand GitHub stars fast, and StyleKit, a free Chrome extension doing the same job from a toolbar icon. WAALEE has been in this exact lane since before either existed. Worth being straight about what's actually different now that extraction itself is no longer the hard part.
What each one reads, and what it hands back
Dembrandt is a TypeScript CLI you run against any URL. Per its own docs, it uses Playwright to render the page in a real Chromium (or Firefox) tab, reads the computed styles off the live DOM, then applies heuristics and optional ML to score colors, type, spacing, borders, motion and components by confidence. It outputs to terminal, JSON, W3C DTCG tokens, or a DESIGN.md file, and it exposes `get_design_tokens`, `get_color_palette` and `compute_drift` as MCP tools, so an agent can call it directly instead of reading a file. It also has a drift-detection mode with exit codes, built for a CI pipeline that fails a PR when a site's tokens change unexpectedly.
StyleKit is the opposite shape: no install beyond a browser extension, no terminal. Click its icon on any open tab and it reads CSS computed styles in place, colors with hex codes, font families and weights, spacing and margin values, radii, shadows, then exports the lot as a DESIGN.md file. Nothing leaves the browser, no account, no server round trip. That makes it the fastest path from "I'm looking at a site I like" to a file an agent can read, with nothing to set up first.
- Dembrandt: CLI + MCP server, DTCG and DESIGN.md output, drift detection for CI, built for a team automating extraction across many sites or watching one for change.
- StyleKit: one click in the browser, DESIGN.md only, no account or install beyond the extension, built for a single quick capture while you're already looking at the page.
- WAALEE: paste a URL in the browser, get W3C tokens back as ready-to-paste prompts for five specific tools, Claude, Lovable, v0, Cursor and Bolt, not just a token file you still have to introduce to each one yourself.
Format stopped being the differentiator
A year ago, "does it output real tokens or just a vibe" was the whole question. It mostly isn't anymore. Dembrandt and StyleKit both land on DTCG-shaped output or DESIGN.md, the same formats the rest of this space (Google's own design.md spec included) has converged on. That's a healthy sign for the category: extraction got commoditized, which is good for anyone building on top of it. It also means the actual decision for a founder or small team isn't "which tool reads CSS correctly," it's closer to: do you want a pipeline you run and re-run (dembrandt), a one-off capture with zero setup (StyleKit), or output already shaped for the specific coding tool you're about to open.
Where the gap still sits
Both dembrandt and StyleKit hand you a token file, and from there it's on you to know what Claude wants versus what Lovable wants versus what a Cursor rules file expects, and to translate the same palette into each one correctly. That's a small tax per tool, but it compounds the moment you're moving between four or five of them on the same project, which is the normal state of building anything with AI right now. WAALEE treats that translation as the actual product: one extraction, five AI-ready prompt formats, so the token set that comes out matches what each tool's own prompt conventions expect instead of a generic JSON blob you reformat by hand every time.
Three ways to get a live site's real design system out as something an AI tool can use:
- dembrandt: Open-source CLI and MCP server. Playwright-rendered extraction, DTCG/DESIGN.md output, drift detection for CI. Best for a team automating extraction or gating PRs on token changes.
- StyleKit: Free Chrome extension, one click on any open tab, exports DESIGN.md. No install beyond the extension, no account, nothing leaves the browser.
- WAALEE: Paste a live URL and get real colors, type, spacing and W3C tokens back as AI-ready prompts already shaped for Claude, Lovable, v0, Cursor and Bolt, not one generic file to adapt per tool yourself.
None of this is a knock on dembrandt or StyleKit. A free, one-click extractor and an open CLI with CI hooks both make the first step of this problem genuinely easier, and more tools reading real computed styles instead of guessing is good for everyone building AI-assisted sites. The thing worth checking before you pick one is what you actually do with the output five minutes later: write a config file by hand for each tool you use, or open a prompt that's already correct for it.