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
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
dembrandt dembrandt.com --dtcg
dembrandt dembrandt.com --wcag
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.
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.