Integrations
Dembrandt is a CLI, an MCP server, the App, and a set of open formats. The surfaces and formats that drop into the tools you already use.
CLI
Extract rendered tokens from any URL. Flags for crawl, DTCG, compare, and reports.
MCP server
A tool surface any MCP client (Claude Code, Cursor, Windsurf) can call.
The App
A workspace to manage extractions, snapshots, baselines, and drift scores without a terminal.
Open formats
DTCG JSON, DESIGN.md, plain JSON, HTML, PDF. Readable by people, agents, and tools.
This list is a starting point, not a limit. Because Dembrandt is an MCP server that speaks open formats, an AI agent can bridge it to almost any design or dev tool you already use. If your agent can read a file or call a tool, it can put Dembrandt's tokens to work there.
Three roles it plays
Whatever the tool, Dembrandt shows up as one of these.
Source of truth
One measured token set the whole team and its agents work from.
Drift gate
Compare against a baseline in CI. Exit 1 on drift, like a failing test.
Agent bridge
Through MCP, an agent connects Dembrandt to almost any tool it can reach.
Where it plugs in
Examples, grouped by context. Not an exhaustive list.
AI editors
- Claude Code
- Add Dembrandt as an MCP tool and extract live tokens mid-conversation.
- Claude Desktop
- An MCP host for design work in chat, not just code. Pairs with Skills.
- Cursor
- Project-scoped MCP via a .mcp.json at the repo root.
- Windsurf
- Any MCP-compatible editor exposes the same Dembrandt tools.
- Skills
- UX and design system heuristics injected into your agent; pairs with token extraction.
- v0
- Feed extracted tokens or a DESIGN.md as grounding for generated UI.
- GitHub Copilot
- Drag in a brand guide or DESIGN.md and let the agent match real values.
- Figma Make
- Use measured tokens as the source of truth instead of approximations.
CI/CD
- Pre-push drift gate
- Compare the rendered token set against a committed baseline and block the push when it drifts.
- GitHub Actions
- Run extraction and the drift report on every PR as a design QA check.
- Vercel
- Extract against a preview deployment and report token drift per build.
Design tools
- Tokens Studio
- Export to DTCG JSON and import straight into Tokens Studio.
- Figma Variables
- Map extracted tokens to Figma Variables via the DTCG format.
- Figma via MCP
- Pull a design system out of Figma and reconcile it with a live extraction.
Protocol and runtime
- MCP server
- A framework-agnostic tool surface for any MCP client.
- Chromium
- Default headless extraction engine via Playwright.
- Firefox
- Alternative engine with stealth mode for bot-protected sites you are authorized to extract.
Set it up
AI editors (MCP)
Add Dembrandt to Claude Code:
For Cursor, Windsurf, or any project-scoped setup, add a .mcp.json at the repo root:
CI/CD drift gate
Extract the preview, compare against a baseline, write a report. Dembrandt exits 1 on drift, so the check goes red like a failing test:
It is a Node CLI that returns standard exit codes, so the same step runs in any pipeline (GitHub Actions, GitLab CI, Jenkins, Azure DevOps). Add --no-sandbox in containers. Accept an intended change as the new baseline with --approve:
Design tokens (DTCG)
Export tokens in W3C DTCG format, ready to convert for Tokens Studio or Figma Variables:
Ground generative UI
Export a DESIGN.md and feed it to v0 or Copilot so generated UI uses real brand values, not guesses:
What to explore next
Dembrandt MCP Server
Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent extracts live design tokens automatically when you ask.
Run Your First Extraction
Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.
Dembrandt App
Load extractions, pin a baseline, and track token drift over time. Compare snapshots and copy tokens directly into your workflow.