How to extract a full design system from any website in 60 seconds
By Kiana Bluecher and The WAALEE Team · · 4 min read
Most "design inspiration" dies in a screenshots folder. You save a site you love, then rebuild it from memory and end up with something that feels 70% right. The gap is the details — the exact greys, the type scale, the spacing rhythm — and those are the things a screenshot can't hand you.
We read the rendered page, not the source
When you paste a URL, we load it in a real headless Chromium and read the computed styles off the live DOM — the actual rendered look and feel, after CSS, fonts, and layout have all resolved. That's very different from scraping HTML. You get the values the browser actually painted.
What you get back
- A full color palette — primary, accent, neutral, and semantic — de-duplicated and organized.
- Typography: families, weights, sizes, and line-heights, grouped by role.
- A spacing scale and the component patterns the site leans on.
- W3C-compliant design tokens you can drop straight into a codebase.
- AI-ready prompts calibrated to the reference, for Claude, Lovable, v0, or Cursor.
The whole thing takes a few seconds on a warm run. No signup, no browser extension — just a URL and a style guide on the other side.
How WAALEE compares to other extractors
We're not the only way to pull a design system off a page. Here's an honest map of the landscape and where WAALEE fits — cross-check any of them:
- Dembrandt: One-command CLI that runs a headless browser and returns real computed values. Great for terminal workflows; no prompts or accessibility check.
- UIScanner: Paste a URL, get tokens plus a build prompt. Closest in spirit to WAALEE; WAALEE adds W3C token export and a WCAG contrast pass.
- extract-design-system: Open-source CLI and Claude/Cursor skill; outputs JSON and CSS variables for local projects.
- Design System Extractor: Chrome extension that reads on-page styles one page at a time. Handy for quick spot-checks.
- WAALEE: Web-based, reads the rendered DOM, and hands back colors, type, spacing, W3C tokens and AI-ready prompts tuned for Claude, Lovable, v0, Cursor and Bolt — plus a WCAG check. No install.
The honest takeaway: if you live in a terminal, a CLI like Dembrandt is a fine fit. If you want tokens and a builder-ready prompt from one paste in the browser, that's what we built WAALEE for.