Dembrandt vs Figma
Figma is where the design is decided. Dembrandt is where you find out what shipped.
This is not a replacement comparison, because Dembrandt does not design anything. Figma owns the decision: the variables, the frames, the review, the handoff. What it cannot see is the far end of the pipeline. Between a variable in the file and a color on the screen sit the implementation, the application CSS, the theme layer and every third-party script on the page. Dembrandt reads the result of all of that and writes it back down as structured tokens.
Comparison
| Figma | Dembrandt | |
|---|---|---|
| Direction | Decision → file → handoff → build | Shipped page → computed tokens → W3C DTCG JSON |
| Source of truth | Figma Variables, styles and the frames around them | The live production DOM, after CSS, themes and third-party scripts |
| Sites you did not build | Nothing to open. There is no file. | Any URL. No access to the team or the repo needed. |
| Drift detection | None between the file and the deployed site | A numeric drift score on every deploy, against a pinned baseline |
| CI integration | Not a build step | Runs as a CI step and fails the build when tokens move |
| Contrast grading | Plugins, on the frame | --wcag grades every palette pair AA and AAA on the shipped page |
| MCP server | Yes. Dev Mode MCP serves the frame the designer selected. | Yes. Fifteen tools over the tokens read off the live page, plus drift. |
| Agent skills | None | 43 design and UX skills an agent installs alongside the tokens |
| Export formats | Variable exports and plugins | W3C DTCG JSON, CSS variables, DESIGN.md, a Tailwind v4 theme, an HTML report, a brand guide PDF |
Figma answers
- What should this look like
- Which variable is the right one to use here
- How does this component behave across its states and breakpoints
- What did we agree on, and who approved it
Dembrandt answers
- What does it actually look like right now, in production
- Which values moved since the last deploy, and by how much
- What is the design system of a site we have no file for
- What should an agent know about this brand before it writes UI
The gap between them
Every design system has two copies of itself: the one in the file and the one on the screen. Teams review the first one constantly and the second one almost never. Nothing in Figma fails when production quietly drifts away from it, because Figma is not watching production. It has no reason to.
Run both. Figma owns the intent. Dembrandt measures whether the intent survived the build.
Extract tokens from any production URL in seconds:
To enforce drift in CI, get an API key, then run --compare <baseline> --key $DEMBRANDT_KEY in your deploy step. It exits 1 when the tokens move. Full setup: cloud drift CI recipe.
Other comparisons
Every tool here solves a different part of the problem. The full list says which does what.