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 that exports your design variables as W3C JSON and syncs them into your codebase. Dembrandt is a CLI that reads your live production site after full render and extracts every computed token value from the DOM. One starts in design. The other starts in code.
Comparison
| Tokens Studio | Dembrandt | |
|---|---|---|
| Direction | Figma → tokens → code | Production URL → tokens → W3C JSON |
| Source of truth | Figma variables and styles | Live production DOM — computed rendered values |
| Token format | JSON (Style Dictionary, W3C DTCG) | W3C DTCG JSON, CSS variables, DESIGN.md |
| Drift detection | No — syncs tokens, does not score them | Numeric drift score per deploy against a pinned baseline |
| CI integration | Export step, not a CI gate | Runs as a CI step, can fail builds on drift |
| Requires Figma | Yes | No — runs against any URL |
| Use case | Push design decisions from Figma into the codebase | Pull token reality from production back into structured data |
| MCP / AI support | No | Yes — DESIGN.md output for Claude Code, Cursor, Windsurf |
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 ensures the right tokens go into the code. Dembrandt measures whether they survived to production. Between export and render, tokens can be overridden by application CSS, third-party scripts, or theming logic. Tokens Studio has no way to detect that. Dembrandt reads what the browser actually computes after full page load.
Used together: Tokens Studio manages the Figma-to-code pipeline. Dembrandt closes the loop by verifying that what shipped matches what was designed.
Extract tokens from any production URL in seconds:
npx dembrandt your-site.comTo enforce drift in CI, get an API key and add --key $DEMBRANDT_KEY to your deploy step. Full setup: cloud drift CI recipe.