What is the Dembrandt MCP?
Dembrandt MCP is an open-source MIT server that lets an agent extract a website's design system as tokens. It returns colors, typography, spacing, surfaces and component styles, then exports DTCG tokens or a design.md file. It runs over stdio with npx and needs no key for basic extraction.
Dembrandt is a command line tool that reads a live website and turns its look into structured design data. The MCP mode exposes the same extraction as tools, so an agent can call it directly.
Extraction returns a job id. The agent polls the job, then hands the id to analysis tools instead of pasting the whole result back. That keeps large sites from flooding the context window.
What it extracts
- Colors, typography, spacing and borders from a real page
- Surfaces, component styles and brand identity
- Drift scoring between two extractions of the same domain
- Export to DTCG tokens or a design.md file
Best for
- Rebuilding a client's existing brand in a new stack
- Auditing how far a live site has drifted from its tokens
- Feeding an agent real values instead of guessed hex codes
Who it is not for
It reads rendered pages, so it cannot recover tokens from a Figma file or a private staging site that needs an interactive login. Interactive login stays a command line feature only.
Use it with UiChemy
Pull the tokens from a reference site, then move the design into WordPress with a Figma MCP bridge or a UiChemy conversion.
Connect Dembrandt MCP Server: Design Tokens From Any Website to your AI client
claude mcp add --transport stdio dembrandt -- npx -y dembrandt mcpAdd the server
Run the Claude Code command above, or paste the JSON block into the config file of Claude Desktop, Cursor or Windsurf.
Restart the client
Claude Desktop needs a restart after the config edit. Cursor and Windsurf read a .mcp.json at the repo root.
Optional key
Set DEMBRANDT_KEY to upload each extraction as a snapshot and score it against the previous one for that domain.
Client configuration
{
"mcpServers": {
"dembrandt": {
"command": "npx",
"args": ["-y", "dembrandt", "mcp"]
}
}
}Endpoints and ports
npx -y dembrandt mcpstdio serverAPI keyOptional, enables snapshots and scoringhttp://localhost:9222Optional, connect to a running ChromiumWhat you can do with it
- Job based resultsExtraction returns a job id, so large pages do not fill the agent's context.
- DTCG exportTokens leave in the Design Tokens Community Group format that most tools read.
- Drift scoringTwo extractions of one domain can be compared to see what changed.
- Browser optionsFlags cover mobile, dark mode, cookies, basic auth, custom headers and sitemap crawling.
- MCP Registry listingThe server is listed in the official MCP Registry, with one click installs for Cursor and VS Code.
Tools it exposes
get_design_tokens
Extract the full token set from a URL.
get_color_palette
Return the colors used on the page.
get_typography
Return font families, sizes and weights.
get_component_styles
Return styles for buttons, inputs and other components.
get_surfaces
Return background and surface treatments.
get_spacing
Return the spacing scale in use.
get_brand_identity
Return logo and brand cues.
get_job_status
Poll an extraction job by id.
compute_drift
Compare two extractions and score the change.
export_dtcg
Export the tokens in DTCG format.
generate_design_md
Write a design.md summary of the system.
Frequently asked questions
What is Dembrandt MCP?
Dembrandt MCP is the Model Context Protocol mode of the open-source Dembrandt tool. It lets an AI agent call extraction tools against a live website and receive colors, typography, spacing, surfaces and component styles as structured data, then export them as design tokens.
How do I install Dembrandt MCP in Claude Code?
Run claude mcp add --transport stdio dembrandt -- npx -y dembrandt mcp. Claude Code registers the server and starts it through npx on demand. Other clients use a JSON block with command npx and args set to -y, dembrandt and mcp. Restart the client if it does not pick up the change.
Does Dembrandt MCP need an API key?
No key is needed to run extraction. An optional DEMBRANDT_KEY uploads each extraction as a snapshot and scores it against the previous one for the same domain. Without it the server still returns tokens, palettes and typography, and you can still export DTCG tokens locally.
What format do the exported tokens use?
The export_dtcg tool writes tokens in the Design Tokens Community Group format, which many design and build tools can import. The generate_design_md tool writes a plain design.md summary, which suits agents that read markdown instructions better than JSON.
Can Dembrandt extract from a site behind a login?
The tools accept cookie, cookieFile, basicAuth and custom header options, so some protected pages can be read by passing credentials. Interactive login is not available over MCP and stays a command line feature. Pages you cannot open in a normal browser session cannot be read.
Is Dembrandt free to use?
Yes. The repository is MIT licensed and the npm package runs locally with npx. The optional hosted features tied to DEMBRANDT_KEY are a separate service with its own account, so check the Dembrandt site for current terms before relying on them.