Extract Design System
Headless-browser design token-udtræk fra enhver offentlig hjemmeside
Tested · Didn't pass
Hvad det gør
Indpakker dembrandt CLI'en for at drive en headless Chromium på en offentlig URL og skrive starter token-filer — .extract-design-system/raw.json og normalized.json plus design-system/tokens.json og tokens.css. Udløses, når du beder om at reverse-engineere et sites farver, skrifttyper, afstand, radier eller skygger til CSS custom properties for et nyt projekt. Kræver Node 20+ og en engangs `npx playwright install chromium`.
Testrapport
CLI'en kører rent, og browser-udtrækket under den er ægte godt — men normalisatoren smider det meste væk, før du overhovedet ser det. Kørt mod linear.app indeholdt den rå optagelse 39 CSS custom properties, herunder --color-accent: #7170ff, 8 palettefarver, 12 skygger og 19 radier; den normaliserede output, som skill'en beder dig om at gennemgå, beholdt to farver, nul variabler, nul skygger, nul radier, og navngav brandets primære farve som rgb(247, 248, 248), en næsten-hvid, der kun optrådte én gang på siden. Samme form på stripe.com: 117 CSS variabler fanget, inklusive den fulde brand-rampe, derefter kasseret, hvilket efterlod en tokens.css med to farver og tyve rå pixelværdier med 14.5px og 16.5px i afstandsskalaen. Årsagen er et type-mismatch i src/normalize/normalize.ts — dembrandt udsender arrays af objekter, normalisatoren filtrerer for strenge og ender lydløst med tomme arrays, og den læser skyggeobjekter under en .value nøgle, som dembrandt kalder .shadow. Fem minutters grepping af sidens egne stylesheets med curl genfandt Stripes ægte brand-rampe og radius-tokens, hvilket skill'en ikke gjorde, så på dens hovedleverance koster den dig i øjeblikket mere, end den giver.
Testet: 2026-08-07 · Claude Code 2.x (agent harness)
Installation
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
Kommandoer og eksempelprompter
/extract-design-systemHeadless-browser design token-udtræk fra enhver offentlig hjemmeside
Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):
Extract the color palette and fonts from stripe.com as CSS tokensReverse-engineer this site's design tokens into tokens.cssPull the spacing, radii and shadows off linear.app into tokens.json