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.

Export

Flag	What you get
--dtcg	W3C design tokens (DTCG)
--design-md	DESIGN.md for AI agents
--tailwind [path]	Tailwind v4 @theme CSS
--shadcn [path]	shadcn/ui theme, observed slots only
--html [path]	Self-contained HTML report
--brand-guide	Brand guide PDF
--json-only	Raw JSON to stdout
--save-output	JSON to output/<domain>/
--screenshot <path>	Viewport screenshot
--color-format <f>	Colour notation: hex, rgb, oklch, lch, source
--raw-colors	Pre-filter colours too

Analysis

Flag	What you get
--wcag	Contrast grades on real DOM pairs
--compare <baseline>	Drift gate; exits 1 when tokens moved
--tokens <file>	Check rendered colours, radii and font sizes against a W3C Design Tokens file; repeat for several
--max-off-token <n>	With --tokens: exit 1 when more than N rendered values match no token
--tokens-report <path>	With --tokens: Markdown summary with the nearest token per off-token value, wiki-ready
--annotations <github|azure>	CI annotations for drift and off-token values; detected from the runner by default
--approve	Accept the current run as the new baseline
--ai	ML brand-primary prediction (experimental)

Coverage

Flag	What you get
--crawl [n]	Merge N pages, cross-page confidence
--sitemap	Discover pages from sitemap.xml
--dark-mode	The dark theme's tokens
--mobile	Mobile viewport
--slow	3x timeouts for heavy sites
--browser <type>	chromium or firefox; CDP via env
--no-sandbox	For Docker and CI

Access

Flag	What you get
--cookie <string>	Reach pages behind a session
--cookie-file <path>	JSON cookies, Playwright storageState (incl. localStorage and the sessionStorage block --save-storage-state adds), or Netscape cookies.txt
--basic-auth <user:pass>	HTTP Basic for the browser context
--login	Open a visible browser to sign in; press Enter when ready, then extract (interactive terminal only)
--save-storage-state <path>	With --login, save the signed-in session (cookies, localStorage, sessionStorage) to a file; reuse it later with --cookie-file, also in CI
--header <string>	Any extra request header, repeat for several
--no-headed-fallback	Never open a visible browser on a failed navigation; for batch runs
--user-agent <string>	Custom user agent
--locale <string>	Locale for the fingerprint
--timezone <string>	Timezone for the fingerprint
--accept-language <s>	Accept-Language header
--screen-size <WxH>	Reported screen resolution
--stealth	Anti-detection; authorized use only
--key <string>	Sync runs to your account

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. 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 does not host, redistribute, or claim rights to any third-party brand assets.

Sponsors

The CLI is MIT-licensed and free. Sponsorship funds the enforcement layer: a committed project-level token baseline, --compare and the ingest API for CI/CD drift gates, and the App platform (snapshot history, team drift dashboard, alerts to Slack, Linear, and GitHub).

Documentation

• docs/usage.md: every flag, multi-page extraction, browser selection, CDP, DTCG, DESIGN.md, Tailwind theme, WCAG, motion, brand guide PDF
• docs/ci.md: GitHub Action, drift gate, exit codes
• docs/mcp.md: MCP server install per client, environment, tools
• docs/recipes.md: copy-paste workflows
• docs/FLAGS.md: flag interactions, ignored combinations, multi-page propagation

Contributing

Bugs, weird sites, pull requests. All welcome.

Open an Issue or PR.

@thevangelist

MIT. Do whatever you want with it.