Dembrandt.

Extract any website's design system in one command. Enforce it in CI.

Logo, colors, typography, spacing, borders, shadows, motion, components. W3C design tokens in seconds.

Install

npm install -g dembrandt
dembrandt install-browser        # one-time: fetches the matching Chromium
dembrandt dembrandt.com

The browser step is required. dembrandt drives Chromium through playwright-core, which ships no browser binaries, so a fresh install has nothing to launch until you run it. Skipping it fails with browser engine not available.

Or use npx without installing: npx dembrandt dembrandt.com. The browser step applies here too: run npx dembrandt install-browser first. Browsers land in a shared Playwright cache, so either route only needs it once.

Requires Node.js 18+

Or install the MCP server straight into your editor and let the agent run it:

What you get

• Colors (semantic roles with the evidence behind each pick, curated palette, every detected colour, CSS variables, gradients)
• Typography (fonts, sizes, weights, sources, font file URLs)
• Spacing (margin/padding scales)
• Borders (radius, widths, styles, colors)
• Shadows
• Motion (duration scale, easing curves, hover patterns per component type)
• Components (buttons, badges, inputs, links)
• Breakpoints
• Icons & frameworks

Playwright renders the page, dembrandt reads computed styles from the DOM, analyzes color usage and confidence, groups similar typography, detects spacing patterns, and returns design tokens.

Flags

dembrandt dembrandt.com --shadcn        # shadcn/ui theme, observed slots only
dembrandt dembrandt.com --dtcg          # W3C design tokens, for Style Dictionary or Tokens Studio
dembrandt dembrandt.com --wcag          # WCAG 2.1 contrast on real DOM pairs

Default is formatted terminal output only. Every flag below; the detailed reference is docs/usage.md.

Export

Analysis

Coverage

Access

Catch design drift in CI

Extract a preview deployment, compare against a committed baseline, fail the job when tokens moved:

- uses: dembrandt/dembrandt@v0.39.2
  with:
    url: https://preview.example.com
    baseline: .dembrandt/baseline.json

The action is on the GitHub Marketplace and annotates the PR with the drifted tokens. On any other runner the gate is just an exit code plus JSON: dembrandt URL --compare baseline.json --json-only exits 1 on drift and prints per-token changes[]. See docs/ci.md for the Action inputs, the platform-neutral gate, and the exit code table.

Recipes

Copy a command, paste a prompt, get a result. Competitor benchmarking, WCAG audits, Figma token push, agentic design system builds. Filterable by role at dembrandt.com/recipes, with the basics in docs/recipes.md.

AI Agent Integration (MCP)

Use Dembrandt as a tool in Claude Code, Cursor, Windsurf, or any MCP-compatible client. Ask your agent to "extract the color palette from dembrandt.com" and it calls Dembrandt automatically.

Per-client setup, environment variables and the full tool list: docs/mcp.md and dembrandt.com/mcp.

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

The server is listed in the MCP Registry as io.github.dembrandt/dembrandt, so a client that reads the registry can install it by name.

Or add to your project's .mcp.json:

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

Available tools include get_design_tokens, get_color_palette, get_typography, get_component_styles, get_surfaces, get_spacing, and get_brand_identity, plus pure analysis tools (compute_drift, get_findings, export_dtcg, generate_design_md, render_report) and job-control tools.

Extraction tools accept slow, mobile, darkMode, wcag, cookie, cookieFile, basicAuth and header (for authenticated pages), userAgent, and noSandbox (Docker and most CI containers). Interactive --login stays CLI-only. Set pages above 1 to crawl and merge several pages, which produces a markedly stronger token set than one page; paths names them explicitly and sitemap discovers them from sitemap.xml.

Extraction returns a job_id. Poll it with get_job_status, then hand that same id to the pure tools instead of passing the extraction back as an argument:

get_design_tokens(url: "example.com", pages: 5)  ->  job_id
get_job_status(job_id)                           ->  tokens
get_findings(job_id)                             ->  contrast and consistency issues
export_dtcg(job_id)                              ->  W3C design tokens

Pair with dembrandt-skills to give your agent UX intelligence on top of extracted tokens: hierarchy, accessibility, interaction states, and a full 6-stage design pipeline orchestrator.

npx skills add dembrandt/dembrandt-skills

Dembrandt App (Beta)

Load extractions, track token drift, and compare snapshots