Dembrandt — Claude Code MCP server: design tokens from any live site
Pulls colours, type, spacing and components off a live page and hands them to your agent as design tokens. Useful when you need to copy a style into your own project.
claude mcp add dembrandt -- npx -y dembrandtWhat Dembrandt does
The server opens a page in Chromium through playwright-core, reads computed styles from the DOM and turns them into tokens: colours with semantic roles, typography, spacing scales, radii, shadows, motion, components, breakpoints. From there the agent can export them as W3C DTCG, a shadcn/ui theme, Tailwind v4 @theme CSS, DESIGN.md or raw JSON.
Drift checking is the other half. The --compare <baseline> flag diffs the current run against a saved baseline and exits with code 1 when tokens moved. The same gate runs in CI as the GitHub Action dembrandt/[email protected] with url and baseline inputs.
Before the first run you need Node.js 18+ and a separate dembrandt install-browser step — the package only fetches Chromium when you call it. Skip that and the run dies with browser engine not available. Pages behind a login are reachable with --cookie, --cookie-file or --login.
What it helps with
- lift a colour palette and font stack off a competitor page
- build a shadcn/ui theme from a live prototype
- check WCAG 2.1 contrast on real DOM pairs
- catch token drift between a preview deploy and the baseline
- export a design system as W3C tokens for Style Dictionary
Example prompts for the agent
- Extract design tokens from
https://example.comand show me the palette with roles - Compare the current tokens against
baseline.jsonand list what changed - Build a shadcn/ui theme from this page and save it to a file
How to install Dembrandt
Platform CLI
claude mcp add dembrandt -- npx -y dembrandtPlatform CLI
codex mcp add dembrandt -- npx -y dembrandtConfig file
{
"mcpServers": {
"dembrandt": {
"command": "npx",
"args": [
"-y",
"dembrandt"
]
}
}
}Config file
{
"servers": {
"dembrandt": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"dembrandt"
]
}
}
}Platform CLI
gemini mcp add dembrandt npx -y dembrandtStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Dembrandt
How do I install Dembrandt in Claude Code?
Run claude mcp add dembrandt -- npx -y dembrandt. The server is then available to the agent in that project.
What does Dembrandt do?
It opens a site in a browser, reads computed styles and turns them into design tokens: colours, typography, spacing, borders, shadows, motion and components.
What do I need before running it?
Node.js 18+ and a one-time dembrandt install-browser command that downloads Chromium. Without it the run fails with browser engine not available.
