Dembrandt MCP Server: Design Tokens From Any Website

What is the Dembrandt MCP server?

Dembrandt extracts any website's design system in one command, and the same project ships an MCP server named dembrandt-mcp. Playwright renders the page, Dembrandt reads computed styles from the DOM, groups them, and returns design tokens.

Through MCP, your agent can ask for the color palette of a URL, then hand the result to analysis and export tools. Extraction returns a job id, which you poll with get_job_status before using the pure tools.

What changes in your agent's output

• The agent gets measured colors, type, spacing, borders, shadows and motion from a real page, not an eyeballed palette.
• Setting pages above 1 crawls and merges several pages. The README says this gives a markedly stronger token set than a single page.
• export_dtcg produces W3C design tokens, and generate_design_md writes a DESIGN.md that an agent can read as a brief.
• compute_drift and get_findings flag token changes and contrast or consistency issues.

What it can read

• Colors with semantic roles, palette, CSS variables and gradients.
• Typography with fonts, sizes, weights, sources and font file URLs.
• Spacing scales, border radius and widths, shadows, and motion curves.
• Components such as buttons, badges, inputs and links, plus breakpoints, icons and frameworks.

Who the Dembrandt MCP server is for

Best for

• Auditing your own site's tokens and keeping them from drifting between releases.
• Benchmarking a competitor's visual system for documentation and learning, within the site's terms.
• Feeding a design system build with real values before an agent writes components, then using the shadcn MCP server to pull matching components.

Not for

• Canvas or WebGL sites. The README says there is no DOM to read, so they cannot be analyzed.
• Copying a third-party brand. The project's intended-use note says not to reproduce brand identities, logos or trademarks.
• Reading a drawn file. The Figma MCP server is the right source for that.
• Extraction by prompt inside a larger toolkit. The designlang MCP server covers similar ground through a different CLI.

Use it with UiChemy

Dembrandt hands your agent the tokens of a design. If the end goal is a WordPress site, UiChemy builds there: Figma to WordPress converts a design, and Composer edits the result in Elementor or Gutenberg. Click Get Started on uichemy.com.

Connect Dembrandt MCP Server: Design Tokens From Any Website to your AI client

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

1. Install the browser once

   Dembrandt drives Chromium through playwright-core, which ships no browser. Run npx dembrandt install-browser once, or the tool fails with a browser engine not available error. Node.js 18 or later is required.

2. Add the server

   Run the command above for Claude Code, or put the JSON config in your project's .mcp.json. Other MCP clients can launch the same command.

3. Ask for a site

   Ask your agent to extract the color palette of a URL. Extraction returns a job id.

4. Poll and export

   Call get_job_status with the job id, then get_findings, export_dtcg or generate_design_md on the same id.

Client configuration

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

Endpoints and ports

What you can do with it

• Real DOM measurementsPlaywright renders the page and Dembrandt reads computed styles, then analyzes color usage and groups similar typography.
• Multi-page mergeSet pages above 1, name paths explicitly, or let the sitemap option discover pages for cross-page confidence.
• Dark, mobile and slow modesExtraction accepts darkMode, mobile and slow options for the dark theme, a 390 by 844 viewport and heavy sites.
• Authenticated pagesThe cookie and header options reach pages behind a session, and userAgent and noSandbox cover Docker and CI containers.
• Agent-readable outputDESIGN.md and DTCG exports give an agent a brief and a token file to follow.
• Drift gate for CIThe CLI's compare flag exits 1 when tokens move, and a GitHub Action annotates the PR with the drifted tokens.
• WCAG contrast on real pairsThe wcag option grades contrast on foreground and background pairs read from the DOM.

Tools it exposes

Frequently asked questions