Dembrandt

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](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](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](https://www.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](docs/mcp.md) and [dembrandt.com/mcp](https://www.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](https://github.com/dembrandt/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. [dembrandt.com/app](https://www.dembrandt.com/app)

• Automatic drift tracking from CI. Generate an API key at dembrandt.com/app/api-keys, then pass --key to the CLI. Every run uploads a snapshot to your account and scores it against the previous one for that domain. Wire into GitHub Actions or any CI runner and every deploy records itself.
• Pin a baseline. Mark any snapshot as your reference. Every subsequent extraction is automatically scored against it.
• Visual diff. Color swatches, before/after values, delta scores per category: colors, typography, spacing, radius, shadows.
• Snapshot timeline. Proportional timeline per domain, scrub across any date range from days to years.
• Compare side by side. Load multiple extractions into one view: two releases, two sites, or two surfaces.
• Copy tokens. Paste values straight into Copilot, Claude, or Cursor.
• No login required for local use. Data stays in the browser. Sign in with GitHub to enable cloud sync.

Limitations

• Dark mode requires --dark-mode flag (not automatically detected)
• Hover and focus states come from real interaction on a sample of elements; states that need a pointer path or a timer are missed
• Canvas/WebGL-rendered sites cannot be analyzed (no DOM to read)
• JavaScript-heavy sites require hydration time (8s initial + 4s stabilization)
• Some dynamically-loaded content may be missed
• Default viewport is 1920x1080 (use --mobile for 390x844 mobile viewport)

Intended Use

Dembrandt reads publicly available CSS and computed styles from website DOMs for documentation, learning, and analysis of design systems you own or have permission to analyze.

Only run Dembrandt against sites whose Terms of Service permit automated access, or against your own properties. Do not use extracted material to reproduce third-party brand identities, logos, or trademarks. Respect robots.txt, rate limits, and copyright.

Dembrandt d