Run Your First Extraction
Overview
In under 2 minutes you will turn any public website into a complete set of design tokens: colors, typography, spacing, borders, and more. All you need is Node.js and a terminal.
After running an extraction, open it in your browser as a visual design system — no terminal needed to explore the results.
1.Prerequisites
You need two things before running Dembrandt.
- Node.js — a free runtime that lets your computer run CLI tools like Dembrandt. Download it here (click the big green button, install like any app). If you've used npm before, you already have it.
- A terminal — just a text window where you type commands.Mac: ⌘ Space → type Terminal → EnterWindows: ⊞ Win → type cmd → Enter
2.Install
Open your terminal, paste the line below, and press Enter. You only need to do this once.
Takes about 30 seconds. You'll see some text scroll by — that's normal.
3.Run it
Pick any public website — a competitor, a brand you admire, or your own. Pass its address as the argument:
Dembrandt opens the site in a headless browser, reads every computed style, and prints the full design system in your terminal. Usually takes 10–30 seconds.
stripe.comlinear.appvercel.comairbnb.comgithub.com4.Output
The terminal prints a structured design system — colors, typography, spacing, borders, and shadows:
5.Flags
Add any of these to the end of your command:
--save-outputSave results as a JSON file on your computer--brand-guideGenerate a brand guide PDF from any URL in 10 seconds--pages 5Analyze 5 pages and merge results into one unified output--dark-modeExtract the dark-mode design tokens (if the site has them)--browser=firefoxUse Firefox instead — helps with Cloudflare-protected sites--dtcgExport tokens in W3C Design Tokens format--slowMore reliable extraction for JavaScript-heavy SPAs6.AI Agent Integration (MCP)
Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent calls it automatically when you ask.
Or add to your project's .mcp.json:
7 tools available:
get_design_tokensget_color_paletteget_typographyget_component_stylesget_surfacesget_spacingget_brand_identityQuestions? Open a GitHub Discussion. The community is friendly.
What to explore next
Explorer
Design tokens extracted from well-known brands using Dembrandt.
Local UI
Browse extracted design systems in a beautiful local interface. Colors, typography, logos, favicons - all in one view.
Articles
Design systems, design-dev workflows, and automated design token extraction.