# Dembrandt

> Dembrandt is an open-source CLI tool that automatically extracts design systems and design tokens from any website.

## What is Dembrandt?

Dembrandt analyzes websites and extracts their visual design properties (colors, typography, spacing, shadows, and more), converting them into structured design tokens. It saves designers and developers 1-3 hours per brand that would otherwise be spent manually inspecting websites with browser DevTools.

## Installation

```bash
npm install -g dembrandt
```

## Usage

```bash
dembrandt dembrandt.com
```

### Key Flags

- `--wcag` - Real WCAG 2.1 contrast ratios from DOM, including hover/focus/disabled states
- `--crawl` - Multi-page extraction (replaces `--pages`)
- `--brand-guide` - Export a complete brand guide as PDF in 10 seconds
- `--dtcg` - Export in W3C Design Tokens format
- `--save-output` - Save results to file
- `--dark-mode` - Extract dark mode styles
- `--mobile` - Extract mobile-responsive styles
- `--browser=firefox` - Use Firefox (helps with Cloudflare-protected sites)
- `--slow` - Longer timeouts for JavaScript-heavy SPAs

## AI Agent Integration (MCP)

Use Dembrandt as a tool in Claude Code, Cursor, Windsurf, or any MCP-compatible client.

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

Or add to `.mcp.json`:

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

Tools available: `get_design_tokens`, `get_color_palette`, `get_typography`, `get_component_styles`, `get_surfaces`, `get_spacing`, `get_brand_identity`.

## Website Pages

- `/` - Landing page with product overview, features, and interactive demo
- `/getting-started` - Quickstart guide for first extraction ([llms.txt](/getting-started/llms.txt))
- `/validator` - Real-time validator for the W3C Design Tokens Community Group (DTCG) specification 2025.10: paste token JSON, get instant feedback against the Format, Color, and Resolver modules ([llms.txt](/validator/llms.txt))
- `/explorer` - Design Token Explorer: gallery of design tokens from popular brands ([llms.txt](/explorer/llms.txt))
- `/explorer/[brand]` - Individual brand detail pages showing extracted design tokens
- `/blackpaper` - Technical deep-dive on Dembrandt's methodology ([llms.txt](/blackpaper/llms.txt))
- `/why-it-matters` - Article on design system foundations ([llms.txt](/why-it-matters/llms.txt))
- `/design-dev-workflows` - Article on modern agentic, MCP-powered design-dev workflows ([llms.txt](/design-dev-workflows/llms.txt))
- `/brand-to-design-system` - Article on brand, design system, and component library hierarchy from two perspectives ([llms.txt](/brand-to-design-system/llms.txt))
- `/design-md` - Article on DESIGN.md format: where it works, where it fails, and how it compares to DTCG tokens ([llms.txt](/design-md/llms.txt))
- `/building-your-first-design-system` - Article on the rare skill of turning a brand into a working design system: perception, abstraction, and systems thinking ([llms.txt](/building-your-first-design-system/llms.txt))
- `/token-drift` - Article on token drift: why design tokens silently diverge between releases and how a baseline-based approach catches it ([llms.txt](/token-drift/llms.txt))
- `/recipes` - CLI commands, AI agent prompts, and full pipelines for extracting design tokens, auditing brand compliance, benchmarking competitors, and integrating Dembrandt into your workflow. Filterable by role. ([llms.txt](/recipes/llms.txt) lists every recipe with its commands and agent prompts)
- `/recipes/[slug]` - Individual recipe pages with full description, commands, and SEO metadata per workflow
- `/skills` - Landing page for dembrandt-skills: UX and design system skills for AI agents including pipeline orchestration skills (dembrandt, extract-design, generate-ui-from-brand)
- `/mcp` - Dembrandt MCP server: use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor
- `/integrations` - Where Dembrandt plugs in: AI editors, CI/CD drift gates, Figma Variables and Tokens Studio via DTCG, the MCP server, and Chromium or Firefox extraction
- `/agentic-pipelines` - Article on the agentic pipeline: the eight stages from ticket to production and where an AI agent sits in each
- `/app-features` - Dembrandt App feature page: token drift tracking, baseline pinning, snapshot history, and how to act on findings

## Optional

- [llms-full.txt](/llms-full.txt) - Comprehensive version with all page details combined

## Dembrandt App (Cloud)

A web application for managing extractions, tracking token drift, and comparing snapshots over time.

- Upload and store JSON extractions in the browser (localStorage)
- Pin any snapshot as a baseline — all subsequent extractions are automatically compared against it
- Drift report per extraction: category breakdown (colors, typography, spacing, radius, shadows) with visual color swatches and before/after values
- Snapshot timeline (GitHub-style calendar) per domain
- Copy individual tokens directly into Copilot, Claude, Cursor, or your codebase
- Available at `/app` (requires login via GitHub OAuth)

## Who Uses Dembrandt?

- **Designers** auditing and documenting design systems
- **Developers** needing quick design token references
- **Product teams** doing competitor research
- **QA professionals** conducting design audits
- **Brand teams** creating documentation

## Key Features

- Real-time design token extraction from any URL
- **WCAG contrast checking** - Real AA/AAA grades from DOM including interactive states (`--wcag`)
- **Motion tokens** - Transition durations, easings, hover deltas per context (button, nav, card, modal)
- **Logo extraction** - Semantic logo detection with scoring and multi-instance support
- **Brand Guide PDF export** - Generate a complete brand guide as PDF in 10 seconds (`--brand-guide`)
- **AI Agent Integration** - Use as an MCP tool in Claude Code, Cursor, Windsurf (`dembrandt-mcp`)
- **DESIGN.md output** - Export Google DESIGN.md format with OpenType font feature tokens
- **W3C design tokens** - DTCG-compliant JSON export (`--dtcg`)
- Multi-page extraction (`--crawl`)
- Gradient, shadow, and motion detection
- Dark mode and mobile style extraction

## Links

- npm: https://www.npmjs.com/package/dembrandt
- GitHub: https://github.com/dembrandt/dembrandt
- X: @dembrandtcom (official account)
- X bot: @dembranded (automated daily brand extractions)
- LinkedIn: https://www.linkedin.com/company/10303168/

## Tech Stack (Website)

- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Framer Motion