Extract Design System
Headless-browser design token extraction from any public website
Test report
- Verdict
- Tested · Didn't pass
- Tested
- Aug 7, 2026
- Environment
- Claude Code 2.x (agent harness)
The CLI runs cleanly and the browser extraction underneath it is genuinely good — but the normalizer throws most of it away before you ever see it. Run against linear.app, the raw capture contained 39 CSS custom properties including --color-accent: #7170ff, 8 palette colours, 12 shadows and 19 radii; the normalized output that the skill tells you to review kept two colours, zero variables, zero shadows, zero radii, and named the brand primary as rgb(247, 248, 248), a near-white that appeared exactly once in the page. Same shape on stripe.com: 117 CSS variables captured including the full brand ramp, then discarded, leaving a tokens.css of two colours and twenty raw pixel values with 14.5px and 16.5px in the spacing scale. The cause is a type mismatch in src/normalize/normalize.ts — dembrandt emits arrays of objects, the normalizer filters for strings and silently ends up with empty arrays, and it reads shadow objects under a .value key that dembrandt calls .shadow. Five minutes of grepping the site's own stylesheets with curl recovered Stripe's real brand ramp and radius tokens, which the skill did not, so on its headline deliverable it currently costs you more than it gives.
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 5/5
- Triggers reliably 5/5
- Output vs. baseline 3/10
- Docs & honesty 2/5
What Extract Design System does
Wraps the dembrandt CLI to drive a headless Chromium at a public URL and write starter token files — .extract-design-system/raw.json and normalized.json plus design-system/tokens.json and tokens.css. Triggers when you ask to reverse-engineer a site's colours, fonts, spacing, radii or shadows into CSS custom properties for a new project. Requires Node 20+ and a one-time `npx playwright install chromium`.
How to install Extract Design System
git clone https://github.com/arvindrk/extract-design-system.git
mkdir -p ~/.claude/skills
cd extract-design-system && cp -r skills/extract-design-system ~/.claude/skills/extract-design-system
Skills live in ~/.claude/skills/ (global) or .claude/skills/
(per-project). Restart Claude Code after installing.
Commands — how to trigger Extract Design System
-
/extract-design-systemHeadless-browser design token extraction from any public website
It also activates on plain-language prompts like these:
-
Extract the color palette and fonts from stripe.com as CSS tokens -
Reverse-engineer this site's design tokens into tokens.css -
Pull the spacing, radii and shadows off linear.app into tokens.json
Frequently asked questions
- Is the Extract Design System skill free?
- Yes. The skill itself is free from arvindrk/extract-design-system. SkillProof publishes the install command and an independent test verdict at no cost.
- Does Extract Design System work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Aug 7, 2026. Verdict: Tested · Didn't pass. The CLI runs cleanly and the browser extraction underneath it is genuinely good — but the normalizer throws most of it away before you ever see it. Run against linear.app, the raw capture contained 39 CSS custom properties including --color-accent: #7170ff, 8 palette colours, 12 shadows and 19 radii; the normalized output that the skill tells you to review kept two colours, zero variables, zero shadows, zero radii, and named the brand primary as rgb(247, 248, 248), a near-white that appeared exactly once in the page. Same shape on stripe.com: 117 CSS variables captured including the full brand ramp, then discarded, leaving a tokens.css of two colours and twenty raw pixel values with 14.5px and 16.5px in the spacing scale. The cause is a type mismatch in src/normalize/normalize.ts — dembrandt emits arrays of objects, the normalizer filters for strings and silently ends up with empty arrays, and it reads shadow objects under a .value key that dembrandt calls .shadow. Five minutes of grepping the site's own stylesheets with curl recovered Stripe's real brand ramp and radius tokens, which the skill did not, so on its headline deliverable it currently costs you more than it gives.
- How do I install Extract Design System?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use Extract Design System with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.