# Dembrandt

> Extract any website's design system into design tokens in seconds — logo, colors, typography, borders, and more — with a single CLI command.

Dembrandt is an open-source CLI tool that extracts a website's design system into structured design tokens in seconds. It uses Playwright to render pages, reads computed styles from the DOM, and outputs colors, typography, spacing, borders, shadows, and component styles. It supports W3C DTCG format, multi-page analysis, MCP integration for AI agents, and brand guide PDF generation — all from a single command.

- **Design Token Extraction** — *Run `dembrandt example.com` to instantly extract colors, typography, spacing, borders, shadows, and component styles from any website.*
- **W3C DTCG Format** — *Use `--dtcg` to export tokens in the standardized W3C Design Tokens Community Group format, compatible with Style Dictionary and other tooling.*
- **Multi-Page Analysis** — *Use `--pages N` and `--sitemap` flags to analyze multiple pages and merge results with cross-page confidence boosting.*
- **MCP / AI Agent Integration** — *Add Dembrandt as an MCP server in Claude Code, Cursor, Windsurf, or any MCP-compatible client; 7 tools available including `get_color_palette`, `get_typography`, and `get_brand_identity`.*
- **DESIGN.md Generation** — *Use `--design-md` to produce a plain-text design system document readable by AI coding agents.*
- **Brand Guide PDF** — *Use `--brand-guide` to generate a printable PDF summarizing the extracted design system.*
- **Dark Mode & Mobile Viewports** — *Use `--dark-mode` or `--mobile` flags to extract tokens from dark-mode variants or mobile-sized viewports.*
- **Browser Choice** — *Supports Chromium (default) and Firefox (`--browser=firefox`) for bypassing bot detection on Cloudflare-protected sites.*
- **Local UI** — *Browse all saved extractions in a visual local interface with color palettes, typography specimens, spacing visualizations, and component previews.*
- **Color Confidence Scoring** — *Assigns high/medium/low confidence scores to extracted colors based on DOM context and usage frequency.*

## Features
- Design token extraction (colors, typography, spacing, borders, shadows, components)
- W3C DTCG format export
- Multi-page analysis with merged results
- MCP server integration for AI agents
- DESIGN.md generation for AI agents
- Brand guide PDF generation
- Dark mode extraction
- Mobile viewport support
- Chromium and Firefox browser support
- Local visual UI for browsing extractions
- Color confidence scoring
- Sitemap-based page discovery
- CSS variable extraction
- Breakpoint detection
- Icon and framework detection

## Integrations
Claude Code, Cursor, Windsurf, Playwright, Style Dictionary, npm, npx, Node.js

## Platforms
CLI, API

## Pricing
Open Source

## Version
v0.11.0

## Links
- Website: http://dembrandt.com/
- Documentation: https://github.com/dembrandt/dembrandt
- Repository: https://github.com/dembrandt/dembrandt
- EveryDev.ai: https://www.everydev.ai/tools/dembrandt