Skip to main content

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.

Skills

UX and design system heuristics for AI agents, packaged alongside token extraction.

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.

Where it plugs in

Examples, grouped by context. Not an exhaustive list.

CI/CD

Slack

Posts --compare's drift report to a Slack channel.

Pre-push drift gate

Blocks a push when tokens drift from the baseline.

GitHub Actions

dembrandt/dembrandt@v0: drift gate on every PR.

Vercel

Extracts preview deployments and reports drift.

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

Reconciles a Figma design system with a live extraction.

Penpot via MCP

Authors a native token set in Penpot from a live extraction.

Output formats

DTCG JSON

W3C DTCG format, ready for token pipelines.

DESIGN.md

Readable token context optimized for AI agents.

HTML report

Self-contained drift report for design QA in a pipeline.

PDF

Shareable audit document for stakeholders.

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 for your agent.

v0

Feeds extracted tokens or DESIGN.md into generated UI.

GitHub Copilot

Drag in a brand guide or DESIGN.md for real values.

Figma Make

Uses measured tokens instead of approximated ones.

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 protected sites.

Tools it pairs with

Dembrandt measures what production renders. It does not author tokens, document a system for people, or test pixels. These tools do, and each one takes a handoff.

Style Dictionary

Transforms one token file into CSS, Swift, Kotlin, and SASS.

Dembrandt writes the DTCG file it reads, straight from production.

dembrandt example.com --dtcgDembrandt vs Style Dictionary

Tokens Studio

Authors tokens in Figma and syncs them into the codebase.

Dembrandt measures which of them survived to production.

dembrandt example.com --dtcgDembrandt vs Tokens Studio

Chromatic

Pixel regression on Storybook stories, story by story.

Dembrandt scores the tokens the deployed page actually renders.

dembrandt example.com --compare baseline.jsonDembrandt vs Chromatic

Lighthouse

Performance, SEO, and page-level accessibility.

Dembrandt grades contrast per token, with the exact ratio and hex.

dembrandt example.com --wcagDembrandt vs Lighthouse

zeroheight

Living documentation designers and engineers browse.

Dembrandt exports the measured system to document from.

dembrandt example.com --design-mdDembrandt vs zeroheight

Frontify

Brand assets and guidelines for the whole organization.

Dembrandt reports what production renders against them.

dembrandt example.com --brand-guideDembrandt vs Frontify

Set it up

AI editors (MCP)

Add Dembrandt to Claude Code:

Terminal
claude mcp add --transport stdio dembrandt -- npx -y --package dembrandt dembrandt-mcp

For Cursor, Windsurf, or any project-scoped setup, add a .mcp.json at the repo root:

.mcp.json
{ "mcpServers": { "dembrandt": { "command": "npx", "args": ["-y", "--package", "dembrandt", "dembrandt-mcp"] } } }

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:

Terminal
npx dembrandt "$PREVIEW" --compare baseline.json --html report.html

On GitHub, use the official action. It installs the CLI and Chromium (cached), runs the extraction, and carries the verdict in its exit code. Accept an intended change as the new baseline with --approve:

.github/workflows/drift.yml
name: Design drift on: deployment_status jobs: drift: if: github.event.deployment_status.state == 'success' runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: dembrandt/dembrandt@v0 with: url: ${{ github.event.deployment_status.environment_url }} baseline: baseline.json

The action also takes key (upload snapshots to the App for drift history) and args (extra CLI flags), and outputs report and score. On other CI systems (GitLab CI, Jenkins, Azure DevOps) run the CLI directly, it is a Node CLI with standard exit codes. Add --no-sandbox in containers.

Slack alerts

Run --compare with --json-only, then post to an incoming webhook only when the status is drift. One colored bar per change mirrors the App's own drift panel: green for added, orange for removed, gray for changed.

notify-drift.sh
REPORT=$(npx dembrandt "$PREVIEW" --compare baseline.json --json-only) STATUS=$(echo "$REPORT" | jq -r '.drift.status') if [ "$STATUS" = "drift" ]; then ATTACHMENTS=$(echo "$REPORT" | jq '[.drift.changes[] | { color: (if .kind == "added" then "#22C55E" elif .kind == "removed" then "#EA580C" else "#8A8F98" end), text: ((if .kind == "added" then "＋" elif .kind == "removed" then "－" else "～" end) + " " + .label + (if .before and .after then " · " + .before + " → " + .after elif .after then " · " + .after else "" end)) }]') PAYLOAD=$(jq -n --argjson attachments "$ATTACHMENTS" \ '{ username: "Dembrandt", icon_url: "https://www.dembrandt.com/dembrandt-logo-just-symbol.png", text: "*Design of $SITE* · $ENVIRONMENT · deployed just now · $COMMIT", attachments: $attachments }') curl -s -X POST -H 'Content-type: application/json' --data "$PAYLOAD" "$SLACK_DRIFT_WEBHOOK_URL" fi

Store the webhook URL as a CI secret (SLACK_DRIFT_WEBHOOK_URL), never in the repo. Score and threshold are left out of the message on purpose: a reviewer acts on the link, not the number.

For the full walkthrough with screenshots of the Slack app setup, see the Slack alerts recipe.

Design tokens (DTCG)

Export tokens in W3C DTCG format, ready to convert for Tokens Studio or Figma Variables:

Terminal
dembrandt example.com --dtcg --save-output

Ground generative UI

Export a DESIGN.md and feed it to v0 or Copilot so generated UI uses real brand values, not guesses:

Terminal
dembrandt example.com --design-md

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.

Read more

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.

Read more

Dembrandt App

Load extractions, pin a baseline, and track token drift over time. Compare snapshots and copy tokens directly into your workflow.

Read more