Dembrandt

What Dembrandt MCP server does

Dembrandt MCP server gives MCP-compatible agents access to design-system analysis for live websites. It examines rendered pages rather than relying only on source files, then extracts information such as colors, semantic roles, typography, spacing patterns, borders, shadows, motion, components, breakpoints, icons, and detected frameworks.

The server is suited to reverse-engineering an existing interface, reviewing a preview deployment, or creating artifacts for a design-system workflow. Its output can include design tokens, color palettes, typography details, component styles, surface information, spacing, brand identity, and generated reports.

How it works

A request causes Dembrandt to drive Chromium through Playwright. The browser renders the target page, while the analysis reads computed styles from the DOM, studies color usage and confidence, groups related typography values, and identifies recurring spacing patterns.

Extraction tools accept options for slow or heavy sites, mobile viewports, dark mode, WCAG contrast checks, cookies, cookie files, HTTP Basic Authentication, extra request headers, custom user agents, and sandbox control. Multi-page analysis is available through page crawling or sitemap discovery. Interactive sign-in remains a command-line-only feature rather than an MCP operation.

The Dembrandt MCP server also exposes analysis functions that work with extracted data, including drift computation, findings, DTCG export, design-document generation, and report rendering. Job-control tools are available for managing longer-running work.

Setup and configuration

Install the server through npm and run it with the stdio command npx -y dembrandt mcp. The same command can be placed in a project's .mcp.json, or added with the Claude Code command-line configuration. Cursor and VS Code installation links are provided by the project, and the server is registered as io.github.dembrandt/dembrandt in the MCP Registry.

The underlying browser must be installed before extraction. Run dembrandt install-browser once after installing the package, or run npx dembrandt install-browser when using npx. Node.js 18 or newer is required. The browser is stored in the shared Playwright cache.

Tools and capabilities

Named tools include:

• get_design_tokens for broad design-token extraction.
• get_color_palette, get_typography, get_component_styles, get_surfaces, get_spacing, and get_brand_identity for focused analysis.
• compute_drift and get_findings for inspecting changes and analysis results.
• export_dtcg, generate_design_md, and render_report for producing structured or human-readable outputs.

The server can inspect authenticated pages when suitable cookie, storage-state, Basic Auth, or header options are supplied. It can also request WCAG contrast information and analyze dark or mobile variants.

Limitations and notes

The browser installation step is mandatory because playwright-core does not include browser binaries. Skipping it prevents the server from launching its browser engine. Results describe observed rendered styles and patterns; they are not a guarantee that a site has an explicit or complete design-token source.

Interactive login is supported only by the CLI. For repeatable or CI-oriented access, save browser storage state after signing in and reuse it as a cookie file. The --stealth option is documented for authorized use only. Heavy sites may need the slow setting, and Docker or many CI containers may require the no-sandbox option.