Dembrandt extracts a website design system into tokens via a single command, supporting multiple output formats and MCP integration. It runs with Node.js 18+, is MIT-licensed, and has ongoing releases.
Collecting history — the radar snapshots this repo daily. The trend line appears after 3 days of data (1 so far).
What it is
Dembrandt is a tool to extract a website's design system into design tokens, including logo, colors, typography, borders, and more. It supports multiple outputs and integration with AI agents via MCP.
How it works
The project provides a CLI that fetches a site and derives tokens such as colors, typography, spacing, borders, shadows, motion, components, breakpoints, icons, and frameworks. It can output in terminal, JSON, DTCG (Design Tokens), and DESIGN.md formats. It includes options to crawl multiple pages, use different browsers (Chromium/Firefox), and generate PDFs or reports. It relies on Playwright for browser interaction and can install browser engines as needed.
Getting started
Install globally: npm install -g dembrandt
dembrandt dembrandt.com
Or use npx without installing:
npx dembrandt dembrandt.com
Requires Node.js 18+.
Quick usage examples from the README
dembrandt <url> # Basic extraction (terminal display only)
dembrandt dembrandt.com --json-only # Output raw JSON to terminal (no formatted display, no file save)
dembrandt dembrandt.com --save-output # Save JSON to output/dembrandt.com/YYYY-MM-DDTHH-MM-SS.json
Multi-page extraction and discovery
dembrandt dembrandt.com --crawl 5
Output formats
dembrandt dembrandt.com --dtcg
dembrandt dembrandt.com --design-md
dembrandt dembrandt.com --brand-guide
Browser selection and installation
dembrandt install-browser # chromium (default)
dembrandt install-browser firefox # a specific engine
npx playwright@$(node -p "require('playwright-core/package.json').version") install --with-deps chromium
Getting started (continued)
You can also:
- Use
--sitemapor--crawlfor multi-page analysis and merged results. - Generate a DESIGN.md, DTCG, or a branded PDF with
--design-md,--dtcg, or--brand-guiderespectively.
Recent releases
- v0.26.1 (2026-08-03): Fixes brand-guide logo rendering issues.
- v0.26.0 (2026-08-03): Normalises modern CSS colour functions end to end, including Tailwind v4 opacity modifiers.
- v0.25.1 (2026-07-28): Type definitions declared for main entry and subpaths; dependency updates.
- v0.25.0 (2026-07-28): Added consent dismissal sweeps for iframes and shadow DOM CMPs.
- v0.24.0 (2026-07-18): Drift-related improvements including comparison-validity warnings and report integration.
Traction
2322 stars on GitHub; 222 forks; 1 open issue.
Behind the repo
[Not provided in README] (Link to external startup/company not indicated beyond MCP integration references.)
Caveats
- License: MIT
- Created: 2025-11-22
- Last push: 2026-08-03
- Language: TypeScript
- Requires Node.js 18+
Outputs and file paths described in commands (e.g., output/dembrandt.com/YYYY-MM-DDTHH-MM-SS.json, output/dembrandt.com/TIMESTAMP.tokens.json, etc.).