Stop Reverse-Engineering CSS by Hand! Use Dembrandt Instead

What if you could steal—legally, ethically, instantly—any website's entire design system with a single command?

Picture this: You're staring at a gorgeous landing page. The color palette is chef's kiss. The typography hierarchy? Flawless. The spacing rhythm? Impeccable. Your designer brain screams "I need this for my project!" So you open DevTools. You start clicking through elements. You copy hex codes one by one. You screenshot font stacks. You manually document border-radius values. Forty-five minutes later, you've got a messy spreadsheet and a headache.

Sound familiar?

Here's the brutal truth: manual design system extraction is a productivity death trap. It's the kind of soul-crushing busywork that separates amateur developers from the pros who ship fast. Every hour spent reverse-engineering CSS is an hour stolen from building features, optimizing performance, or—heaven forbid—actually sleeping.

But what if I told you there's a tool that compresses that 45-minute nightmare into under 10 seconds? No spreadsheet. No DevTools archaeology. No squinting at computed styles.

Enter Dembrandt—the open-source CLI tool that's making design token extraction effortlessly automatic. One command. Any website. Complete design system. Extracted, structured, and ready to use.

This isn't just another CSS scraper. This is design intelligence at terminal speed. And in this deep dive, I'm going to show you exactly why top developers are quietly adding Dembrandt to their essential toolkit—and why you should too.

What is Dembrandt?

Dembrandt is a Node.js CLI tool that automatically extracts complete design systems from any public website and converts them into structured design tokens—the universal language of modern design systems.

Created by @thevangelist and released under the MIT license, Dembrandt leverages Playwright to render web pages in a real browser environment, then performs sophisticated analysis on computed styles, DOM structure, and CSS variables. The result? A comprehensive token collection covering colors, typography, spacing, borders, shadows, components, breakpoints, and even brand identity elements like logos.

The name itself evokes Dembrandt—a playful nod to the legendary painter Rembrandt, suggesting the tool "paints" a complete picture of a site's design system. And paint it does: with surgical precision and artistic completeness.

Why it's trending now:

The design tokens ecosystem has exploded. With the W3C Design Tokens Community Group (DTCG) format gaining industry adoption, tools like Style Dictionary, Tokens Studio, and Figma's native variables all speaking the same token language, developers desperately need ways to get tokens into these systems. Dembrandt bridges the critical gap between "existing website" and "structured token library"—a workflow that previously required expensive enterprise tools or tedious manual labor.

The rise of AI coding agents (Claude Code, Cursor, Windsurf) has supercharged interest further. Dembrandt's MCP (Model Context Protocol) integration means your AI assistant can now "see" and reference any site's design system automatically. That's not just convenient—it's transformative for agent-driven development workflows.

Key Features That Make Dembrandt Insane

Dembrandt isn't a simple color picker. It's a full-spectrum design intelligence engine. Here's what separates it from basic scrapers:

🎨 Comprehensive Token Categories

Dembrandt extracts eight critical design dimensions:

• Colors — Semantic colors, full palettes, CSS custom properties, with confidence scoring (High/Medium/Low based on usage context)
• Typography — Font families, sizes, weights, line heights, letter spacing, plus font source detection (Google Fonts, Adobe, system fonts)
• Spacing — Margin and padding scales, revealing the rhythmic grid system
• Borders — Radius values, widths, styles, and border colors
• Shadows — Box shadows, drop shadows, layered effects
• Components — Buttons, badges, inputs, links with their complete style definitions
• Breakpoints — Responsive design thresholds
• Icons & Frameworks — Detected icon libraries and CSS frameworks

🤖 Native AI Agent Integration (MCP)

Dembrandt exposes 7 specialized tools through the Model Context Protocol:

Your AI agent can literally say "extract the color palette from stripe.com" and Dembrandt executes automatically.

📄 Multiple Export Formats

• Raw JSON for programmatic consumption
• W3C DTCG format (.tokens.json) for design tool interoperability
• DESIGN.md — Google's standard for AI-readable design documentation
• Brand Guide PDF — Printable, shareable design system summary

🌐 Advanced Browser Engineering

• Dual browser support: Chromium (default) and Firefox (for Cloudflare bypass)
• Anti-detection injection: Stealth scripts evade bot protection
• SPA hydration handling: 8-second initial wait + 4-second stabilization for JavaScript^{↗ Bright Coding Blog}-heavy apps
• Automatic retry: Falls back to visible browser mode if headless fails
• Mobile viewport simulation: 390×844 for responsive analysis

📊 WCAG Accessibility Analysis

Unlike palette-based checkers, Dembrandt walks the actual DOM to find real text/background color pairs, computing true contrast ratios with AA/AAA grading.

🔍 Multi-Page Intelligence

Analyze up to 10 pages with cross-page confidence boosting—tokens appearing across multiple pages get higher reliability scores. Discovery via DOM links or sitemap.xml parsing.

Real-World Use Cases Where Dembrandt Dominates

1. Design System Documentation & Migration

Your company acquired a startup. Their product has zero design documentation, but you need to integrate their UI into your ecosystem. Dembrandt extracts their complete system in seconds, producing DTCG-compatible tokens you can feed directly into Style Dictionary. Migration timeline: weeks → hours.

2. Competitive Design Analysis

Need to understand how Stripe structures their spacing scale? How Linear handles dark mode transitions? Dembrandt reveals the actual implementation—not mockups, not guesses, but real computed styles from production sites. Use --pages 10 --sitemap for comprehensive competitive audits.

3. AI-Powered Development Workflows

With --design-md, generate Google's DESIGN.md standard for any site. Your AI coding agent now has complete design context—no more hallucinated color values or invented spacing scales. The agent references actual tokens, producing remarkably accurate UI implementations.

4. Accessibility Compliance Auditing

The --wcag flag transforms Dembrandt into a contrast compliance scanner. Perfect for:

• Pre-launch accessibility checks
• Third-party widget integration reviews
• Ongoing monitoring of design drift

Unlike generic tools, it finds actual DOM color pairs—catching issues where text overlays gradients, images, or semi-transparent backgrounds.

5. Multi-Site Design Consolidation

Enterprise organizations with dozens of properties face the "design drift" nightmare. Dembrandt enables systematic extraction across your entire portfolio, revealing inconsistencies and providing baseline tokens for unification efforts.

6. Design Education & Research

Studying how top products implement design systems? Dembrandt provides structured, analyzable data from real-world implementations. Compare Airbnb's typography scale against Booking.com's. Understand how Figma structures their spacing system. Learn from the best, empirically.

Step-by-Step Installation & Setup Guide

Getting Dembrandt running takes under 60 seconds. Here's the complete setup:

Prerequisites

• Node.js 18+ (check with node --version)
• npm or equivalent package manager

Global Installation (Recommended)

# Install globally for system-wide access
npm install -g dembrandt

# Verify installation
dembrandt --version

Zero-Install Option (npx)

# Run without installing—perfect for CI or one-off extractions
npx dembrandt example.com

Browser Setup

Chromium installs automatically with the package. For Firefox support (essential for Cloudflare-protected sites):

# Install Firefox browser binary
npx playwright install firefox

MCP Integration for AI Agents

Claude Code:

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

Project-level configuration (.mcp.json):

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

Local UI Setup (Optional)

For visual browsing of extractions:

cd local-ui
npm install
npm start

Access at http://localhost:5173 with API on port 3002. Extractions performed via CLI with --save-output automatically appear here.

Docker^{↗ Bright Coding Blog}/CI Configuration

# Disable sandbox for containerized environments
dembrandt example.com --no-sandbox --save-output

REAL Code Examples from the Repository

Let's examine actual commands and outputs from Dembrandt's documentation, with detailed explanations of what happens under the hood.

Example 1: Basic Extraction with Terminal Display

# Simplest possible usage—extracts and displays formatted results in terminal
dembrandt stripe.com

What happens: Dembrandt launches a headless Chromium instance, navigates to stripe.com, waits for full hydration (critical for React^{↗ Bright Coding Blog}/Vue/Angular SPAs), then runs parallel extractors for colors, typography, spacing, borders, shadows, and components. Results display in a beautifully formatted terminal table with color swatches.

Default behavior note: Results display only in terminal—no files saved. Use --save-output to persist.

Example 2: DTCG Format Export for Design Tool Pipeline

# Export in W3C standard format for Style Dictionary, Tokens Studio, Figma
dembrandt stripe.com --dtcg

Output location: output/stripe.com/TIMESTAMP.tokens.json

The generated .tokens.json structure follows the W3C DTCG specification:

{
  "color": {
    "primary": {
      "value": "#635bff",
      "type": "color",
      "description": "Extracted from primary buttons and logo"
    },
    "background": {
      "default": {
        "value": "#ffffff",
        "type": "color"
      },
      "subtle": {
        "value": "#f6f9fc",
        "type": "color"
      }
    }
  },
  "fontSize": {
    "base": {
      "value": "16px",
      "type": "fontSize"
    },
    "heading": {
      "lg": {
        "value": "48px",
        "type": "fontSize"
      }
    }
  }
}

Why this matters: This standardized format imports directly into Tokens Studio for Figma, feeds Style Dictionary to generate platform-specific code (CSS variables, iOS/Android formats, Tailwind config), and integrates with Amazon Style Dictionary, Salesforce Theo, or any DTCG-compatible toolchain.

Example 3: Multi-Page Sitemap Extraction with WCAG Audit

# Comprehensive audit: 10 pages via sitemap, with accessibility analysis
dembrandt stripe.com --pages 10 --sitemap --wcag --save-output

Execution flow:

1. Sitemap discovery: Checks robots.txt for sitemap location, parses sitemap.xml, follows sitemapindex references if present
2. URL scoring: Ranks discovered URLs by importance (homepage, pricing, features prioritized)
3. Sequential fetching: Politely delays between requests (respectful crawling)
4. Cross-page merging: Identifies tokens appearing across multiple pages, boosting confidence scores
5. WCAG analysis: Walks actual DOM for every page, computing contrast ratios for real text/background pairs
6. Persistent output: Saves merged JSON with wcag field containing all contrast violations

Sample WCAG output structure:

{
  "wcag": [
    {
      "foreground": "#ffffff",
      "background": "#635bff",
      "ratio": 4.62,
      "grade": "AA",
      "gradeLarge": "AAA",
      "occurrences": 47,
      "elements": ["button.primary", "a.cta"]
    },
    {
      "foreground": "#96f7d6",
      "background": "#ffffff",
      "ratio": 1.89,
      "grade": "fail",
      "occurrences": 3,
      "elements": [".banner-accent"]
    }
  ]
}

Critical insight: The occurrences field reveals frequency-weighted risk—a failing contrast on 47 button instances is exponentially more urgent than 3 banner accents. Dembrandt sorts by frequency, prioritizing fixes by impact.

Example 4: DESIGN.md Generation for AI Context

# Generate Google's DESIGN.md standard for agent consumption
dembrandt stripe.com --design-md

Output: output/stripe.com/DESIGN.md

This plain-text document follows Google's stitch.withgoogle.com specification, enabling AI agents to:

• Reference actual color values instead of hallucinating
• Understand spacing relationships and component hierarchies
• Maintain design consistency across generated code

Example 5: Pipeline-Friendly JSON Extraction with Filtering

# Extract JSON to stdout, pipe to grep for specific token verification
dembrandt stripe.com --json-only | grep -i "border-radius"

Use case: Rapid verification of specific design decisions without saving files. Perfect for:

• CI/CD pipeline assertions (assert border-radius >= 4px)
• Quick spot-checks during development
• Shell scripting automation

Advanced Usage & Best Practices

Performance Optimization

For JavaScript-heavy sites (Next.js^{↗ Bright Coding Blog}, Nuxt, heavy React apps), always use --slow:

# Triples timeout from 8s to 24s hydration wait
dembrandt heavy-react-app.com --slow --save-output

Bot Detection Evasion

Cloudflare or DataDome blocking you? Firefox mode is your secret weapon:

dembrandt protected-site.com --browser=firefox --save-output

Firefox's fingerprint differs significantly from Chromium's headless signature, often bypassing detection that stops Puppeteer/Playwright-Chromium.

Regression Testing Baselines

# Create versioned baseline
dembrandt myapp.com --save-output --dtcg --pages 5

# After deployment, re-run and diff
diff output/myapp.com/baseline.tokens.json output/myapp.com/current.tokens.json

Dark Mode Systematic Extraction

# Extract light mode
dembrandt example.com --save-output

# Extract dark mode variant
dembrandt example.com --dark-mode --save-output

Critical limitation: Dark mode requires explicit flag—automatic detection isn't implemented yet. Always run both variants for complete system documentation.

Mobile-First Analysis

# Mobile viewport reveals responsive-specific tokens
dembrandt example.com --mobile --save-output

Mobile often exposes simplified color palettes, reduced spacing scales, and touch-optimized component sizes that differ from desktop.

Comparison with Alternatives

Dembrandt's unique advantage: It's the only free, open-source tool that combines automatic extraction from any website, native design tokens output, AI agent integration, and accessibility analysis. Everything else requires manual work, costs significantly, or lacks critical features.

FAQ: Common Developer Concerns

Is Dembrandt legal to use on any website?

Dembrandt reads publicly available CSS and computed styles. Only use it on sites you own, have permission to analyze, or whose Terms of Service permit automated access. Respect robots.txt, rate limits, and copyright. Never use extracted material to reproduce third-party brand identities.

Does it work with JavaScript frameworks like React, Vue, Next.js?

Yes, with caveats. SPAs require hydration time (8s default, 24s with --slow). Canvas/WebGL-rendered content cannot be analyzed (no DOM to read). Most modern frameworks work flawlessly.

Can I export directly to Tailwind CSS^{↗ Bright Coding Blog}?

Use --dtcg --save-output, then feed the .tokens.json into Style Dictionary with a Tailwind transform configuration. The DTCG format is the bridge—Dembrandt extracts, Style Dictionary transforms.

How accurate is the color confidence scoring?

High confidence = logo, primary buttons, core interactive elements. Medium = secondary UI, icons, navigation. Low = generic components (filtered from terminal display). Multi-page analysis boosts confidence for recurring tokens. Always review JSON for complete palette.

What's the difference between --json-only and --save-output?

--json-only prints raw JSON to stdout (pipe-friendly, no files). --save-output persists to output/domain/TIMESTAMP.json with formatted display. They're mutually exclusive approaches to output handling.

Why would I use Firefox over Chromium?

Firefox bypasses Cloudflare and bot detection more effectively. It's also more reliable in WSL environments where Chromium headless struggles. Use it when Chromium times out or gets blocked.

Can Dembrandt extract from password-protected sites?

Not directly—it's designed for public sites. For authenticated extraction, you'd need to extend the Playwright configuration with login flows (possible via custom scripts, not built-in).

Conclusion: Your Design Token Extraction Just Got 100x Faster

Dembrandt represents a fundamental shift in how developers interact with design systems. The old workflow—DevTools archaeology, manual documentation, spreadsheet maintenance—is archaic. The new workflow? One command. Complete system. Structured tokens. Ready for AI agents, design tools, and production code.

What impresses me most isn't just the speed—it's the intelligence. The confidence scoring. The real DOM WCAG analysis. The multi-page merging with cross-validation. This isn't dumb scraping; it's design system archaeology with a PhD.

For design system teams, competitive analysts, accessibility auditors, and AI-augmented developers, Dembrandt eliminates friction that previously consumed hours per site. The MCP integration alone positions it as essential infrastructure for agent-driven development workflows that are rapidly becoming standard.

My verdict? Install it. Alias it. Use it daily. The time savings compound brutally fast.

Ready to stop reverse-engineering CSS by hand? Grab Dembrandt from GitHub and extract your first design system in the next 60 seconds. Your future self—shipping faster, documenting automatically, and letting AI agents handle the grunt work—will thank you.

npm install -g dembrandt
dembrandt your-favorite-site.com --save-output --dtcg

Welcome to effortless design token extraction.