Dembrandt: Extract Any Website's Design System in One Command

By Prahlad Menon Published 2026-08-14 3 min read

You’re rebuilding a competitor’s landing page for a pitch deck. You’re migrating a legacy site to a new stack. You’re auditing WCAG compliance across 50 pages.

You need the design tokens. You don’t have Figma access.

Dembrandt extracts any website’s design system in one command:

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

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

What It Extracts

Colors — Semantic roles, full palette, CSS variables, gradients
Typography — Fonts, sizes, weights, sources, font file URLs
Spacing — Margin/padding scales
Borders — Radius, widths, styles, colors
Shadows — Box shadows with parsed values
Motion — Duration scale, easing curves, hover patterns per component
Components — Buttons, badges, inputs, links with full style definitions
Breakpoints — Responsive breakpoint values
Icons & frameworks — Detected icon libraries and CSS frameworks

How It Works

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.

Not scraping CSS files. Reading the actual rendered output.

Output Formats

# Default: formatted terminal output
dembrandt stripe.com

# Save JSON
dembrandt stripe.com --save-output

# W3C Design Tokens (DTCG) for Style Dictionary or Tokens Studio
dembrandt stripe.com --dtcg

# DESIGN.md for AI agents
dembrandt stripe.com --design-md

# Tailwind v4 @theme CSS
dembrandt stripe.com --tailwind

# WCAG 2.1 contrast audit with AA/AAA grades
dembrandt stripe.com --wcag

# Crawl multiple pages, merge into one output
dembrandt stripe.com --crawl 10

# Extended timeouts for JS-heavy sites
dembrandt stripe.com --slow

The --design-md flag is clever: it generates a markdown file optimized for AI coding agents. Drop it in your repo and your agent knows the design language.

CI/CD Drift Detection

This is where it gets interesting. Commit a baseline, fail builds when tokens drift:

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

The action annotates the PR with drifted tokens. Someone changed the primary color? The border radius? The font stack? You’ll know before it ships.

Platform-agnostic version:

dembrandt URL --compare baseline.json --json-only
# Exit code 1 on drift, prints per-token changes

MCP Integration for AI Agents

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

Or add to .mcp.json:

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

Now your agent can call:

get_design_tokens — Full extraction
get_color_palette — Just colors
get_typography — Just fonts
get_component_styles — Buttons, inputs, etc.
compute_drift — Compare two snapshots
export_dtcg — Generate W3C tokens
generate_design_md — Create the agent-friendly doc

Ask “extract the color palette from stripe.com” and it just works.

The Web App

dembrandt.com/app adds:

Drift tracking — Every CI run uploads a snapshot, scored against previous
Visual diff — Color swatches, before/after values, delta scores
Snapshot timeline — Scrub across any date range
Side-by-side compare — Two releases, two sites, two surfaces
Copy tokens — Paste directly into Copilot/Claude/Cursor

No login required for local use. Data stays in browser. GitHub sign-in enables cloud sync.

Real Use Cases

Competitor analysis:

dembrandt competitor.com --design-md --save-output
# Now you have their entire design language documented

WCAG audit:

dembrandt client-site.com --wcag --crawl 20
# Contrast ratios for every text/background pair across 20 pages

Migration baseline:

dembrandt legacy-site.com --dtcg
# Import tokens into Style Dictionary for the new build

Design system enforcement:

# In CI
dembrandt preview-url --compare .dembrandt/baseline.json
# Fails if someone drifted from the system

Limitations

Worth knowing:

Dark mode requires --dark-mode flag (not auto-detected)
Hover/focus states from CSS only (not interactive)
Canvas/WebGL sites can’t be analyzed (no DOM)
JS-heavy sites need --slow for hydration time
Default viewport is 1920x1080 (--mobile for 390x844)

Ethics Note

Dembrandt reads publicly available CSS and computed styles. Only run it against:

Sites you own
Sites whose ToS permits automated access
Sites you have permission to analyze

Don’t use it to reproduce third-party brand identities.

Pricing

CLI is MIT-licensed and free.

Sponsorship funds the enforcement layer: committed baselines, --compare, the ingest API for CI gates, and the App platform (snapshot history, team dashboard, Slack/Linear/GitHub alerts).