Dembrandt
A CLI that extracts any website's design system into tokens: colors, typography, spacing, shadows, in one run
Medium risk
We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.
Why this level
- Launches a browser and reaches external sites to collect styles
- The --stealth flag bypasses some anti-automation defenses; use only on permitted sites
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add cli/dembrandtDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Install the tool
npm install -g dembrandtInstall Dembrandt: npm install -g dembrandt, then run dembrandt install-browser once. Run it as dembrandt <domain> with the flags you need, for example --design-md for an agent-ready file or --dtcg for W3C tokens.
Other ways from the author
npm install -g dembrandt
dembrandt install-browser
dembrandt dembrandt.comThe install-browser step is required once: dembrandt uses playwright-core, which ships without a bundled browser.
This is third-party code. Review the repository files before installing.
What it does
Dembrandt loads a page through Playwright, reads the DOM's computed styles, and turns them into structured design tokens: colors with a confidence score, typography, spacing, radii, shadows, motion, and components such as buttons and inputs. Output can be exported as a shadcn/ui theme, a Tailwind config, W3C DTCG tokens, a DESIGN.md for an agent, or an HTML report. A separate compare mode checks the current run against a saved baseline and exits with an error when tokens drifted, which fits a CI gate.
Who it is for. For frontend developers and designers who need to quickly extract or check a third-party site's design system.
Good fit when
- You need to quickly understand a third-party site's palette, fonts and spacing
- You need a DESIGN.md or tokens so an agent builds in a consistent style
- You need to catch visual drift in CI by comparing a run against a baseline
Not a fit when
- The site blocks automated access or requires complex authorization
- You need an exact copy of the markup rather than a set of tokens
Example request
Extract design tokens from example.com and save them as DESIGN.mdLimitations
Requires Node.js 18+ and a separate Chromium install via dembrandt install-browser; without that step the command will not run. The --stealth flag is meant only for authorized use on your own or permitted sites. The ML brand-color prediction is marked experimental.
How to disable. Remove the package with npm uninstall -g dembrandt; when run via npx nothing stays installed.
Security check
- Launches a browser and reaches external sites to collect styles
- The --stealth flag bypasses some anti-automation defenses; use only on permitted sites
README in short
The README presents Dembrandt as a one-command tool for extracting a site's design system. Install is via npm with a separate Chromium download step. Flags are grouped into export (shadcn, tailwind, dtcg, design-md, html, screenshot), analysis (wcag contrast, compare for drift, an experimental ai mode) and coverage (sitemap crawling, multi-page merges, mobile viewport, dark mode). A GitHub Action provides a CI gate, and the project site lists ready-made recipes. MIT licensed.
FAQ
Can I run it without a global install?
Yes, via npx dembrandt example.com, but the install-browser step is still needed once: npx dembrandt install-browser.
How do I add a design-drift check to CI?
Use the dembrandt/dembrandt GitHub Action with url and baseline inputs, or run dembrandt URL --compare baseline.json --json-only, which exits with code 1 on drift.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys