I Built Dembrandt: Extract Any Website's Design System in Seconds
Abstract
This paper presents Dembrandt, an open-source command-line interface tool designed to automate the extraction of design systems from live websites. The tool addresses the common challenge faced by designers and developers who must reverse-engineer brand guidelines from existing web properties. By leveraging headless browser automation[1] and computed style analysis, Dembrandt reduces manual design token extraction from hours to seconds, outputting structured data compatible with modern design system workflows[2].
1.Introduction
Sometimes you don't have a customer brand guide. Or there are no digital design guidelines at all. But you still need to make a frontend with customer brand...
Over my 15 year design career, I've spent countless hours manually inspecting websites with DevTools[3] and benchmarking customer web tools: 1-3 hours per brand plus the additional sites to benchmark. This inefficiency represents a significant cost in the design-to-development pipeline[4].
2.Problem Statement
I would look at the :root CSS variables for colors, inspect H1-H6 for texts, look at box shadows and border radiuses. Every developer has their own preferred methodology for this task. Finally, I decided to tackle this not-so-glorious workflow that many designers and developers follow.
Designers have been and will still struggle to dissect brands from websites, and it's not just about extracting colors: that's the easy part. The real challenge is understanding what truly matters in a design system[5]. Developers also feel the pain when designs lack proper color values and specifications.
3.Proposed Solution
Dembrandt is my open-source attempt to help perfect the designer-dev-business workflow. Dembrandt dissects the brand from any website with one command and outputs the design system in terminal.
Run dembrandt bmw.de to extract design system (colors, typography, spacing, borders, logo,..) into design tokens in few seconds. It is perfect for competitor analysis, audits or documentation, saving hours of DevTools digging.
3.1Technical Implementation
Dembrandt uses Playwright[1] to render a live site, bypasses bot detection, analyzes computed DOM styles and CSS variables, and distills real usage patterns into confidence-scored design tokens. The output conforms to the W3C Design Tokens Community Group specification[2].
4.Target Audience
The tool is designed for the following use cases:
- Designers auditing existing apps for consistent design systems
- Developers needing quick token references when designs lack proper specs
- Competitor research and benchmarking
- Identifying differences in pages / apps
- Imitating a brand (be ethical)
5.API Reference
The following command-line flags modify extraction behavior:
--dtcgexport tokens in the W3C Design Tokens standard (easy to plug into other tools)--save-outputpersist results as JSON for audits and documentation--browser=firefoxbetter success on Cloudflare / bot-protected sites--dark-modeextract dark mode color tokens--slowreliable extraction for JavaScript-heavy SPAs6.Conclusion
Dembrandt won't replace a proper brand guide or digital design guidelines - but it removes the manual work when one doesn't exist. If you've ever reverse-engineered a brand from a live website, Dembrandt was built for you.
If you are interested in contributing to dembrandt, participate in GitHub discussions.
Peace out.
References
- [1]Microsoft. "Playwright: Fast and reliable end-to-end testing for modern web apps."playwright.dev
- [2]W3C Design Tokens Community Group. "Design Tokens Format Module."design-tokens.github.io
- [3]Chrome DevTools. "Chrome DevTools Documentation." Google Developers, 2024.developer.chrome.com
- [4]Curtis, Nathan. "Design Systems Handbook." InVision, 2017.designbetter.co
- [5]Frost, Brad. "Atomic Design." bradfrost.com, 2016.atomicdesign.bradfrost.com
