llms.txt
# 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
- `--ai` - ML-powered brand primary color prediction: trained ONNX model picks the brand primary from the extracted palette (experimental; requires optional `onnxruntime-node`)
- `--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
- `--key dmb_···` - Push the snapshot to your Dembrandt account. Stores it with a timestamp and automatically scores it against the previous snapshot for that domain. Wire into CI to record a snapshot on every deploy.
## AI Agent Integration (MCP)
Use Dembrandt as a tool in Claude Code, Cursor, Windsurf, or any MCP-compatible client. Listed in the official MCP Registry as `io.github.dembrandt/dembrandt`.
```bash
claude mcp add --transport stdio dembrandt -- npx -y dembrandt mcp
```
Or add to `.mcp.json`:
```json
{
"mcpServers": {
"dembrandt": {
"command": "npx",
"args": ["-y", "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))
- `/extract-design-system` - How to extract a design system from a website: by hand in DevTools, from the codebase, or from the rendered page, with what each misses
- `/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))
- `/agentic-design-system` - Article on building a design system agentically: an agent writes tokens and components into Figma over MCP, measures drift per codebase and opens the pull requests ([llms.txt](/agentic-design-system/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 (Dembrandt Drift Gate on the GitHub Marketplace), 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) — no account needed
- **Cloud sync via API key**: generate a key at `/app/api-keys`, then pass `--key dmb_···` to the CLI. Every run uploads a snapshot to your account and scores it against the previous one for that domain. Wire into CI to record a snapshot on every deploy automatically.
- 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 per domain: proportional dot timeline that scales to any date range, from days to years
- Compare page: load multiple extractions side by side across domains, releases, or brands
- Copy individual tokens directly into Copilot, Claude, Cursor, or your codebase
- Available at `/app` — local use works without login; cloud sync requires 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
- **ML-powered brand primary detection** - Trained ONNX model picks the brand primary from the extracted palette where the heuristic gets it wrong (experimental, `--ai`)
- **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 (`npx -y 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
