Dembrandt vs Tokens Studio
Tokens Studio moves tokens from Figma into code. Dembrandt moves tokens from production back into structured data.
They run in opposite directions. Tokens Studio is a Figma plugin. It exports your design variables as W3C JSON and syncs them into the codebase. Dembrandt is a CLI. It reads the live production site after render and extracts every computed token from the DOM. One starts in design. The other starts in what shipped.
Comparison
| Tokens Studio | Dembrandt | |
|---|---|---|
| Direction | Figma → tokens → code | Production URL → tokens → W3C DTCG JSON |
| Source of truth | Figma variables and styles | The live production DOM. Computed, rendered values. |
| Token format | JSON, via Style Dictionary and W3C DTCG | W3C DTCG JSON, CSS variables, DESIGN.md, a Tailwind v4 theme |
| Drift detection | None. It syncs tokens, it does not score them. | A numeric drift score on every deploy, against a pinned baseline |
| CI integration | studio pull materialises token files into the repo and CI | Runs as a CI step and fails the build when tokens move |
| Requires Figma | Yes | No. It runs against any URL. |
| Use case | Push design decisions from Figma into the codebase | Pull token reality from production back into structured data |
| MCP server | Yes, in beta and per organization. Typed tools over the tokens authored in Studio. | 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 |
Use Tokens Studio when
- Your design tokens are defined in Figma and need to flow into the codebase
- You work in a design-led team where Figma is the source of truth
- You need token exports in CSS, Swift, Kotlin, or other platform-specific formats via Style Dictionary
- You want to sync Figma variable changes directly into your repository
Use Dembrandt when
- You need to know what tokens are actually rendering in production, not what Figma says they should be
- You have no Figma source or are auditing a site you did not build
- You want drift detection in CI: flag when production tokens shift between deploys
- You want to feed live brand context into AI agents via MCP or DESIGN.md
The gap between them
Tokens Studio gets the right tokens into the code. Dembrandt measures whether they survived to production. Between export and render, application CSS, third-party scripts, and theming logic all get a vote. Tokens Studio cannot see any of it. Dembrandt reads what the browser computed after the page finished loading.
Run both. Tokens Studio owns the Figma to code pipeline. Dembrandt verifies that what shipped is what was designed.
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.