Extract any website’s full design system in seconds—colors, typography, spacing, shadows, breakpoints. One command. No install. (GitHub)
If you’re a designer, developer, product manager—or anyone who needs to audit, understand, or reverse engineer a web brand’s system—Dembrandt is about to become your secret weapon.
Why Dembrandt Matters
In the wild world of digital products and brand systems, design tokens and pattern languages are more than polish—they’re the scaffolding of scalable UI. Whether you’re migrating from legacy CSS, auditing a competitor’s UI, or just trying to sync design/dev with fewer meetings, here’s why Dembrandt stands out:
🎨 For Designers
Skip the tedious “inspect element → write down colors” loop. Dembrandt extracts full color palettes, typographies, spacing scales, shadows and more. (GitHub)
Great for competitive analysis: you can pull design systems from live sites and spot inconsistencies or opportunities.
👩💻 For Developers
Useful when you inherit a project with no token system. Dembrandt helps you document what’s already in production.
Supports exporting raw JSON for programmatic use and integration. (GitHub)
📊 For Product & Marketing Leads
Want to track a competitor’s brand evolution? Dembrandt extracts tokens over time so you can measure changes.
Need to audit your own brand compliance? Extract production site’s design system and compare across pages/environments.
🧠 For Engineering Leadership
Visual regression isn’t enough. With Dembrandt you can measure technical design debt: Are you still using 4px spacing when everything else uses 8px? What’s your typography scale?
On acquisition/integration work: extract the acquired brand’s system quickly and begin aligning.
How It Works (and Why It’s Smart)
Here’s a peek under the hood of Dembrandt that makes it reliable—and not just another token generator.
Uses Playwright to launch a real browser, render the page, and compute styles from the DOM. (GitHub)
Includes anti-bot detection logic: stealth browser launch, simulated mouse/scroll, user-agent tweaks. This means many “modern” sites won’t block it. (GitHub)
The extraction pipeline:
Navigate site (with retry logic)
Wait for SPA hydration (8s + stabilization)
Verify page content (min length threshold)
Run extractors: colors, typography, spacing, shadows, breakpoints, component styles. (GitHub)
Output:
Terminal display (tables of colors, typography, etc)
JSON file saved under
output/domain.com/YYYY-MM-DDTHH-MM-SS.jsonwith full detail. (GitHub)
Quick Start Guide
Getting started with Dembrandt takes just a couple of minutes:
# Run without install:
npx dembrandt stripe.com
# Alternatively install globally:
npm install -g dembrandt
dembrandt stripe.com
You can also call:
dembrandt <url> --json-only > tokens.json
to pipe out raw JSON for later processing. (GitHub)
Prerequisite: Node.js 18 or higher. (GitHub)
Real-World Use Cases
Let’s imagine a few ways you—or your team—could plug Dembrandt into workflows:
Brand Audit: You’re redesigning your product and want to capture what’s currently live (colors, typography, spacing). Run Dembrandt on your site and get a full snapshot of your production system—no guesswork.
Competitor Benchmarking: You’re curious how your competitor handles UI tokens. Run Dembrandt on their public site, compare their semantic colours vs your own.
Design System Migration: Legacy CSS everywhere with no tokens. Extract existing styles, create a
design-tokens.json, feed into your framework or UI library.Pre-Acquisition Review: Your company is acquiring a startup; you need to understand their design system quickly so you can plan integration. Dembrandt gives you a fast read-out of their site’s UI patterns.
Quality Assurance: After a release, you want to verify consistency across pages. Run Dembrandt and compare output over time to detect drift (e.g., rogue colours, inconsistent spacing).
Pros & Considerations
✅ Strengths
Super fast: Single command, minimal setup.
Complete extraction: Includes colors, typography, spacing, shadows, breakpoints.
JSON output: Great for automation and integration.
Modern browser rendering: Avoids simpler crawlers that miss dynamic styles.
Good for teams: design/dev/product all benefit.
⚠️ Things to Know
Dark mode detection is currently not supported. (GitHub)
Sites heavily reliant on Canvas or WebGL may not be analyzed correctly. (GitHub)
Some dynamically-loaded content beyond hydration might be missed.
Respect ethical/legal boundaries—tool is meant for analysis, not copying proprietary assets. (GitHub)
Why You Should Try It Today
Because design systems aren’t static. Every day your product’s UI evolves. If you don’t have a snapshot of where you started—how colours, typography, spacing are defined—you don’t have a guardrail.
Running Dembrandt today gives you:
A baseline of your current design system.
A benchmarking tool for competitors.
A smart “token dump” for building scalable UI libraries.
A faster path from visual audit → code system.
Final Thoughts
If you’ve ever spent a painful afternoon digging through CSS files, capturing colour hexes, figuring out the spacing scale, or wondering “what is our actual design system?”, Dembrandt is for you.
It’s not just another UI tool—it’s a bridge between the visual world and code world. One command, one JSON dump, full design system extracted. The future of design system tooling is here.
Go ahead, run:
npx dembrandt <your-site.com>
And start extracting clarity.
🔧 Tool link: GitHub – thevangelist/dembrandt (GitHub)