M
MCP Directory CURATED DIRECTORY
911 MCP servers indexed
中文
← Back to directory
D

Dembrandt

Community
Extract any website's design system into design tokens in seconds: logo, colors, typography, borders & more. One command.
How to install ↓ Compare GitHub source repository ↗
Category
Dev Tools #38 of 438
Stars
★ 3.6k Very popular
Transport
stdio (local process)
Runtime
Node.js 18+
Credentials
Optional API key
License
MIT
Last commit
Tools
12
66FMRS · C

Dembrandt is a powerful design token extraction tool that, through MCP integration, allows AI agents to easily obtain design information from websites. It supports multiple export formats and CI integration, but attention should be paid to compliance and resource consumption. Overall, it is suitable for teams needing automated design analysis.

Strongest · Documentation 18/20 Weakest · Reliability 7/20

Reliability
7/20
Security and permissions
13/20
Maintenance
14/20
Documentation
18/20
Setup experience
14/20
Why each score
Reliability 7/20
Only the README was supplied; no source tree, tests, CI config, or MCP manifest is available, so the ability of dembrandt-mcp to complete init and tool-list handshake cannot be verified. The README documents many extraction tools, exit codes, and multi-page crawling, indicating planned error handling, but those claims are untrusted evidence. Dependencies (Playwright/browser) are described as controllable, yet no reproducible tests or CI evidence exists, so the score is lowered by uncertainty to 7.
Security and permissions 13/20
No red-line issues: install examples use placeholder API keys, no real secrets; no destructive/payment/remote-command defaults. Data flow is disclosed: extraction hits the target site, snapshot upload only occurs with --key, and DEMBRANDT_API_URL overrides the endpoint; stealth/anti-detection is opt-in and flagged as requiring authorization. Deductions: without source, least-privilege/confirmation behavior and handling of cookies/browser sessions cannot be verified; authenticated data could leak if the tool is misused, though there is no evidence of covert collection. Score: 13.
Maintenance 14/20
The repo is not archived, has an MIT license, and the README references a versioned release (v0.26.1) and an official GitHub Action; the feature surface appears actively evolved. However, supplied material lacks commit history, release cadence, dependency update policy, issue response, or security-response channel; star count is only a discovery signal and adds no points. Sustained maintenance cannot be fully confirmed, so 14.
Documentation 18/20
Documentation is layered and comprehensive: install, MCP client examples (Claude Code one-liner and .mcp.json), CLI flag compatibility tables, DTCG/DESIGN.md/WCAG, CI drift gate, exit codes, browser-mismatch troubleshooting, limitations, and intended use are all covered. Deductions: no MCP manifest, no tool-by-tool parameter reference, and no MCP-specific init troubleshooting evidence, so 18 rather than 20.
Setup experience 14/20
Setup path is concrete: Node.js 18+, npm global/npx, Claude Code claude mcp add one-liner and .mcp.json snippet, on-demand browser install matched to playwright-core, and Linux/CI system-library command. Static calibration caps setup at 15 because no CI/test artifacts prove the flow executes; the browser prerequisite remains an extra manual step, so 14.

Static review · not runListed 2026-08-07

Read the FMRS scoring method →

Fit and risk

What it can accessUses the networkControls a browser

Best for

  • Frontend developers needing to rapidly analyze a website's design system and extract reusable tokens.
  • Design system teams needing to document existing sites or track design changes across versions.
  • AI agents using MCP that need to automatically fetch website design information for development or auditing.

Not for

  • Users needing full interactive analysis (e.g., hover effects) since only some interaction states are extracted from CSS.
  • Canvas/WebGL-rendered websites because they have no DOM to read.
  • Unauthorized automated access that violates a website's terms of service; ensure permission.

Required permissions

  • Network access: Requires internet to access target websites.
  • Local file system: Write permissions for saving output files (JSON, PDF, DESIGN.md).
  • Browser execution: Uses Playwright to drive a browser; may need system privileges.

Risks and side effects

  • Target websites may prohibit automated access, risking IP bans or legal issues.
  • Extracted tokens may contain copyrighted design elements; do not reproduce third-party brand assets without permission.
  • Browser automation can be resource-intensive; in CI or restricted environments, configuration like --no-sandbox may be needed.

Setup

Before you start

Runtime：Node.js 18+

Other optional settings (2)
DEMBRANDT_API_URL optional Overrides the snapshot upload endpoint (default https://www.dembrandt.com); only needed with --key for App cloud sync.
BROWSER_CDP_ENDPOINT optional DevTools Protocol endpoint of an already-running Chromium (e.g. http://localhost:9222); supported only with --browser chromium.
  1. Ensure Node.js 18+ is installed.
  2. Install globally: npm install -g dembrandt, or use npx: npx dembrandt <url>.
  3. To use as an MCP server, add configuration to an MCP-compatible client (e.g., Claude Desktop, Cursor, Windsurf):
{"mcpServers": {"dembrandt": {"command": "npx", "args": ["-y", "--package", "dembrandt", "dembrandt-mcp"]}}}
  1. Install browser on first use: dembrandt install-browser.
claude_desktop_config.json 
{
  "mcpServers": {
    "dembrandt": {
      "command": "npx",
      "args": [
        "-y",
        "--package",
        "dembrandt",
        "dembrandt-mcp"
      ]
    }
  }
}

Shown for Claude Desktop. Other clients may use a different file or key (VS Code uses "servers") — the configurator below converts it.

.vscode/mcp.json
{
  "servers": {
    "dembrandt": {
      "command": "npx",
      "args": [
        "-y",
        "--package",
        "dembrandt",
        "dembrandt-mcp"
      ]
    }
  }
}

Goes in your project's .vscode/mcp.json (VS Code uses a "servers" key).

Terminal
claude mcp add dembrandt -- npx -y --package dembrandt dembrandt-mcp

Run it in a terminal; replace any <…> placeholders with your own values first.

Generate and validate client config

Check that it works

The client's tool list should show get_design_tokens and related tools; asking "extract the color palette from dembrandt.com" and receiving structured tokens confirms the connection.

Troubleshooting

  1. If a browser is not found, run `dembrandt install-browser` to install the matching version.
  2. For Cloudflare or other anti-bot measures, try `--browser=firefox` or `--stealth` (use only when authorized).
  3. For JavaScript-heavy sites that time out, use `--slow` to increase wait times.
  4. In Docker/CI, add `--no-sandbox` to disable the Chromium sandbox.
  5. Check Node.js version meets the requirement (>=18).

Things to try

Once connected, you can ask your AI assistant things like:

  • Extract the full design tokens from dembrandt.com
  • Get the color palette and typography from dembrandt.com
  • Export dembrandt.com tokens in W3C DTCG format
  • Compare this extraction against my baseline and compute the drift score

Tools 12

get_design_tokens read-only
Extract the website's design tokens including colors, typography, spacing, borders, etc.
get_color_palette read-only
Extract the website's color palette, including semantic colors, CSS variables, and gradients.
get_typography read-only
Extract fonts, sizes, weights, and sources.
get_component_styles read-only
Extract styles for components like buttons, badges, inputs, and more.
get_surfaces read-only
Extract surface styles such as backgrounds and panels.
get_spacing read-only
Extract spacing scales, e.g., margin and padding values.
get_brand_identity read-only
Extract brand identity elements like logo and brand colors.
compute_drift read-only
Compare current extraction with a baseline and compute drift score and changes.
Show 4 more tools
get_findings read-only
Return automated findings or anomalies from the extraction.
export_dtcg read-only
Export the extraction result in W3C Design Tokens (DTCG) format.
generate_design_md read-only
Generate a DESIGN.md file readable by AI agents, following Google's draft format.
render_report read-only
Generate an HTML report for drift or extraction results.

Use cases

Document design systems: Quickly extract design tokens from existing websites to serve as documentation.
Brand audits: Analyze visual consistency of competitors or your own properties.
Design-to-code: Export tokens in DTCG format for use with Style Dictionary or design tools.
Continuous integration: Detect token drift in CI to prevent design regression.
Accessibility audits: Run WCAG contrast checks to ensure compliance.

Supported clients

Claude Desktop
Cursor
Windsurf

Listed from the project's documentation, not tested by this site.

Overview

Dembrandt is an open-source CLI and MCP server that uses Playwright to render web pages, read computed styles and the DOM, and automatically extract design tokens such as colors, typography, spacing, borders, shadows, motion, components, and breakpoints. It supports exporting to the DTCG standard format or generating a DESIGN.md file. It also offers token drift detection, WCAG contrast analysis, brand guide PDF generation, and more, helping with design system documentation, audits, and continuous integration.

Similar servers

Context7 80 · B

Upstash's official server providing up-to-date third-party library docs for AI coding assistants

★ 62.9k · Tools 2 Compare with this →
Compare with other MCP servers

Source revision 4deb8350b134 Data synced 2026-10-13 Read the FMRS scoring method