Skip to main content
---stars---dl/mo

Extract Design Systems from any URL. Generate DESIGN.md in seconds.

Run your design system like a CI/CD pipeline. Works with Claude Code, Cursor, v0, Figma Make, and any AI-native workflow.

npm i -g dembrandt
Get StartedView on GitHub
Terminal
$dembrandt dembrandt.com
Colors
#ea580c primary
#38bdf8 accent
#0a1a3d surface
+4 more in JSON
Typography
Red Hat Display, JetBrains Mono
12 → 64px, weights 500–700
Spacing
8px grid: 4, 8, 16, 24, 48px
Also extracted
Logo, Favicons, Components, Motion,
Borders, Shadows, Breakpoints, Icons
+ full token set in JSON
✓ DESIGN.md, tokens.json saved
+ Tailwind, CSS vars, brand-guide PDF, MCP …
200 000+
npm installs
10s
per extraction
7 500+
skill installs

Your design system is drifting right now

DESIGN.mdA structured brief AI builders read directly, so Claude Code or Cursor ships on-brand UI without a designer in the loop.
W3C DTCG tokensThe standard token format. Drops into any design system or pipeline with no lock-in.
JSONRaw tokens for scripts, diffs, and automation. Wire them into anything you build.
Brand Guide PDFA shareable brand document in seconds. Send it to clients or stakeholders, no manual deck.
dembrandt-skills

Teach your agent to design

Install once, and your agent knows how to design.

32 UX skills for AI agents. The knowledge that normally costs senior UX-consultant days — packaged for your agent. Brand-accurate, WCAG-compliant, right hierarchy, right components.

dembrandt— orchestrator

Runs the full 6-stage UX pipeline — brand foundation → tokens → layout → components → polish → a11y gate. One skill for end-to-end design review.

extract-design— pipeline

Pulls real design tokens from any live URL directly into your agent — colors, typography, spacing, components, W3C output. Requires dembrandt ≥ 0.12.10.

generate-ui-from-brandwcag-accessibilityvisual-emphasis-and-hierarchybutton-states+25 more
See all 40 skills
Install
$ npx skills add dembrandt/dembrandt-skills --all

Powerful Features

Full token extraction from any URL — the most accurate output in the category

CLI Options

Powerful command-line flags for customization

$dembrandt <url>
--aiMore accurate color extraction using a trained ML model
--compareDrift-compare against a baseline JSON or App baseline id; exits 1 on drift
--htmlWrite a self-contained HTML drift report
--wcagAnalyze WCAG contrast ratios between palette colors
--crawlAuto-discover and extract up to N pages via DOM links
--dtcgExport in W3C Design Tokens (DTCG) format
--dark-modeExtract colors from dark mode
See all flags

Button States

Hover, active and focus states with colors and transforms

DefaultHoverActive

Framework Detection

Identifies the tech stack behind any site

ReactNext.jsTailwind

Breakpoints

All responsive breakpoints extracted automatically

sm: 640px
md: 768px
lg: 1024px
xl: 1280px

Motion Tokens

Transition durations, easings, and hover interaction deltas per context — button, nav, card, modal

WCAG Contrast

Real contrast ratios from DOM — AA/AAA grades including hover, focus, and disabled states

Multi-page

Extract design systems across multiple pages

MCP Integration

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

Brand Guide PDF

Export a complete brand guide as PDF from any URL in 10 seconds

Gradients

Complex gradient pattern detection

DESIGN.md

Exports a structured markdown brief — Google DESIGN.md format with OpenType font feature tokens

Tone of Voice

Coming soon

Analyze brand voice and messaging

Participate in development on GitHub

Use cases

Audit, benchmark, replicate, or document any brand from a live website.

Brand Audit & Design Extraction

Audit existing or legacy apps for design system consistency and extract visual specs fast, without manual DevTools work.

Developer Token Reference

Instant token references for colors, typography, spacing, shadows, and radii when Figma or docs are missing or outdated.

Competitor & Market Research

Benchmark design systems across competitor sites. Track trends in color palettes, typography, and spacing scales.

Cross-site Consistency Checks

Extract tokens from multiple pages and compare them side by side. Spot drift between implementations.

Documentation Kickstart

Generate initial design token documentation and JSON for existing products. Especially useful with W3C DTCG export.

Inspiration & Fast Prototyping

Quickly gather visual references for moodboards, style guides, or new feature ideation from any live site.

Drift detection that runs after every release

Pin a baseline, extract after each release, and score the delta. Your design system stops being a static reference and starts behaving like a linter.

Open App
Dembrandt App drift report: fidelity, consistency and contrast scores with a per-token change list

Pin a baseline

Mark any snapshot as your reference. Every new extraction is automatically scored against it.

Drift score per extraction

Get a 0–100 drift score with a category breakdown: colors, type, spacing, radius, shadows.

Snapshot history

Every extraction is stored with a timestamp and browsable on a per-domain timeline.

See exactly what changed

The drift panel shows changed colors as swatches, shifted font sizes, and updated spacing. Not just numbers.

Works on any site

No access needed. Extract from any public URL: competitors, clients, or reference brands.

Automatic cloud sync from CI

Generate an API key, pass it to the CLI with --key. Every run uploads a snapshot to your account and scores it against the previous one — no manual saves, no local files to manage.

Almost 2,000 GitHub stars

At 1.9k and counting: grown organically since launch, no paid promotion.

Dembrandt GitHub stars growth chart - 1.9k stars

Read more

How it all started

Over my 15 year design career, I've spent countless hours manually inspecting websites with DevTools: 1-3 hours per brand.

Dembrandt helps the designer-dev-business workflow. Just dissect the brand with 1 command.

Read the Blackpaper

Brand to design system

A brand gives you a logo, a colour, a typeface. A product needs hover states, dark mode, a full token graph. Someone has to derive all of it.

That derivation is a skill, and it is the one part extraction cannot do for you.

Read the article

Why this is necessary

Designers think in components and visual intent. Developers think in exact values and code. The gap between them is where most quality gets lost.

No common language, no documented system, no time. This is how most teams actually work.

Read the article
Explore brand tokensBrowse recipesDTCG validatorMCP server

What people are saying

“That ‘compare against a reference and score the delta’ pattern is exactly the muscle an agentic system needs, productized.”

Alesia Darsht
Design Lead, Nooks — Medium

“If you wanna get the design system of any website, this is going to be a game changer for you.”

Rammcodes

“Useful tool. Rapidly understanding design tokens can significantly speed up UI replication and product analysis.”

Sahil Sajad

“I love this tool! It makes it so easy to fetch and use design tokens from any site. Just copy a good design system and tell the agent to modify the colors to get another brand.”

Juha-Pekka Rajaniemi

“It's not just another UI tool — it's a bridge between the visual world and code world.”

Kartik Maurya
Thinklet

“If you do design systems, UX audits, or competitive research — it's a tool to keep handy.”

Korben
korben.info

“Dembrandt is a great tool for easily creating a DESIGN.md for your projects that now adheres to the Google alpha spec.”

Trevin Chow
@trevin

“Use Dembrandt to extract a website's design system, then use it in Claude or your agent to easily recreate any interface you like. This combo is incredibly useful.”

Bằng Hoàng

Need help with your design system?

15 years of design systems work. I help teams set up extraction pipelines, establish token architecture, and keep design consistent as they scale with AI tools.

Get in touch

Stay in the loop

Join 1,900+ developers and designers. Tactical insights on automating brand systems, modern Design-Dev workflows, and the future of design-engineering.

Questions?
Answers.

How does Dembrandt work?

Point it at any URL. Dembrandt drives a real browser with Playwright, reads the styles the site actually renders, and outputs the design tokens it finds. Save a baseline and it can tell you what changed since.

What does it extract from a page?

Colors, typography, spacing, border radius, shadows, buttons, and motion, with semantic roles, contrast, and hover states. The full token set a site actually renders, not what a spec claims.

Does Dembrandt work on any website?

Any public URL works, including sites you don't own. For authenticated pages, pass a cookie or header.

How is it different from Figma tokens or Style Dictionary?

Those describe what a design should be. Dembrandt measures what production actually renders, so it catches the gap between the spec and the shipped site, and works even when there is no token file at all.

What does “drift” mean?

Drift is any change between a saved baseline and the live site: a shifted color, a resized font, a changed spacing step. It tells you when a design has quietly moved away from where it started.

What formats can I export to?

W3C Design Tokens (DTCG), plain JSON, a DESIGN.md, and a brand-guide PDF.

How well does it handle responsive and fluid values?

It samples at a given viewport, so fluid type and spacing are a point-in-time reading. Run it at several viewports if you need the full responsive curve.

Does Dembrandt store any of my data?

No. The CLI runs locally on your machine, and nothing you extract is stored or sent to a server.