Skip to main content
Home/MCP Server

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

One command adds Dembrandt to Claude Code globally:

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:

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

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.
get_job_statusPoll for the result of an async extraction job. Returns status and the full result once completed.
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.
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 vercel.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