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. Hand that same job_id to the analysis tools rather than passing the extraction back to them: a real extraction is far too large to travel through the model as a tool argument.

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

Extraction — launches a browser, returns a job_id
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.
Analysis — pure, no browser, takes a job_id or an inline extraction
compute_driftCompare two extractions and get a 0-100 drift score with per-category detail and changed tokens. Takes two job_ids or two inline extractions. Pure — no browser.
get_findingsLint an extraction for design-system quality: WCAG contrast failures, near-duplicate colors, off-scale values. Takes a job_id or an inline extraction. Pure — no browser.
export_dtcgConvert an extraction to W3C Design Tokens (DTCG) format for Style Dictionary, Figma token plugins, or any DTCG pipeline. Takes a job_id or an inline extraction. Pure — no browser.
generate_design_mdRender a DESIGN.md brand guide from an extraction — a human-readable design reference for agents and developers. Takes a job_id or an inline extraction. Pure — no browser.
render_reportRender a self-contained HTML report from an extraction, optionally with a drift diff. Takes a job_id or an inline extraction. Pure — no browser.
Jobs
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.
pagesnumber
Crawl and merge up to N pages into one token set (1-20). One page gives you one page's tokens, so this is the largest single lever on token quality.
pathsstring[]
Name the extra paths explicitly, e.g. ["/pricing", "/docs"]. Overrides page discovery.
sitemapboolean
Discover the extra pages from sitemap.xml instead of DOM links. Alone it takes up to 20 pages; pages caps it.
headerstring
One extra HTTP header, e.g. "Authorization: Bearer ...", for pages a cookie cannot reach.
userAgentstring
Custom user agent string.
noSandboxboolean
Disable the browser sandbox. Required inside Docker and most CI containers, where the browser otherwise fails to launch.
syncboolean
Block and return the result directly instead of a job_id. Waits 15-40 seconds for one page, and proportionally longer for a crawl.

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