Skip to main content

Dembrandt MCP Server

AI Agent IntegrationBy Dembrandt3 min

The Dembrandt MCP server exposes a set of tools to any MCP-compatible AI editor. When you ask your agent to match a brand, audit a competitor, or extract tokens from a live site, it calls Dembrandt automatically — no copy-paste, no DevTools.

1.Install

Claude Desktop

Open Settings → Developer → Edit Config. This opens a JSON file — paste the Dembrandt block inside mcpServersand save. Then restart Claude Desktop. A hammer icon in the chat input confirms it's active.

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

Claude Code

Run once in terminal — registers Dembrandt globally across all projects.

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

Or paste this into your agent and it will run the command for you:

Prompt
Install the Dembrandt MCP server so I can extract design tokens from any website. Run: claude mcp add --transport stdio dembrandt -- npx -y --package dembrandt dembrandt-mcp

Cursor or Windsurf: create .mcp.json at the repo root with the same config as above, then restart your editor.

2.How it works

Each extraction tool launches a real headless Chromium browser, navigates to the target URL, reads every computed style, simulates hover and focus interactions, and returns structured design tokens. Extractions run asynchronously by default — the tool returns a job_id immediately and you poll with get_job_status. Pass sync: true to block and wait for the result directly.

Real browser
Chromium, not static HTML parsing. JavaScript executes, CSS computes.
Async queue
Up to 2 concurrent extractions. Queue as many jobs as you need.
Structured output
JSON with semantic roles — not a raw style dump.

3.Available tools

get_design_tokensFull design system — colors, typography, spacing, borders, shadows, components, breakpoints, logo, and detected frameworks.
get_color_paletteBrand colors ranked by frequency, semantic roles, CSS custom properties, and hover/focus states. Hex, RGB, LCH, OKLCH.
get_typographyFont families with fallback stacks, complete type scale by context (heading, body, button, caption), weights, line heights, letter spacing.
get_component_stylesButton variants with all interactive states, input field styles, link styles, badge and tag styles.
get_surfacesBorder radii with element context, border patterns, and box shadow elevation levels.
get_spacingMargin and padding values ranked by usage frequency, grid system detection (4px, 8px, or custom scale).
get_brand_identitySite name, logo with dimensions, all favicon variants, detected CSS frameworks (Tailwind, Bootstrap, MUI), icon systems.
compute_driftCompare two extractions and get a 0-100 drift score with per-category detail and changed tokens. Pure — no browser.
get_findingsLint an extraction for design-system quality: WCAG contrast failures, near-duplicate colors, off-scale values. Pure — no browser.
export_dtcgConvert an extraction to W3C Design Tokens (DTCG) format for Style Dictionary, Figma token plugins, or any DTCG pipeline. Pure — no browser.
generate_design_mdRender a DESIGN.md brand guide from an extraction — a human-readable design reference for agents and developers. Pure — no browser.
render_reportRender a self-contained HTML report from an extraction, optionally with a drift diff. Pure — no browser.
get_job_statusPoll for the result of an async extraction job. Returns status and the full result once completed.
list_jobsList all extraction jobs from this session with status and timestamps.
cancel_jobCancel a queued extraction job.

4.Tool options

All extraction tools accept these optional parameters:

slowboolean
3x longer timeouts — use for heavy JavaScript SPAs that load slowly.
darkModeboolean
Extract dark mode tokens. Available on get_color_palette and get_design_tokens.
mobileboolean
Extract from a mobile viewport instead of desktop.
cookiestring
Cookie string for authenticated pages, e.g. "session=abc; token=xyz".
wcagboolean
Include WCAG contrast analysis between palette colors. Available on get_color_palette and get_design_tokens.
syncboolean
Block and return the result directly instead of a job_id. Waits 15-40 seconds.

5.Example prompts

›“Extract the color palette from stripe.com and use it as the base for our design tokens.”
›“Get the typography from linear.app and tell me what font they use for headings.”
›“Extract button styles from example.com — I want to match their interaction states.”
›“What spacing system does github.com use?”

What to explore next

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 Skills — UX and Design System Skills for AI Agents

30 UX and design system skills for AI agents. Install once, your agent designs with hierarchy, WCAG standards, and brand accuracy. The UX knowledge that normally costs senior consultant days.

Read more

Explorer

Design tokens extracted from well-known brands using Dembrandt.

Read more