Extract Design System
Headless-browser design token extractie van elke openbare website
Tested · Didn't pass
Wat het doet
Wikkelt de dembrandt CLI om een headless Chromium aan te sturen op een openbare URL en starter token files te schrijven — .extract-design-system/raw.json en normalized.json plus design-system/tokens.json en tokens.css. Activeert wanneer u vraagt om de kleuren, lettertypen, spatiëring, radii of schaduwen van een site te reverse-engineeren naar CSS custom properties voor een nieuw project. Vereist Node 20+ en een eenmalige `npx playwright install chromium`.
Testrapport
De CLI werkt schoon en de browser-extractie eronder is oprecht goed — maar de normalizer gooit het meeste weg voordat je het ooit ziet. Uitgevoerd tegen linear.app, bevatte de ruwe capture 39 CSS custom properties inclusief --color-accent: #7170ff, 8 paletkleuren, 12 schaduwen en 19 radii; de genormaliseerde uitvoer die de skill je vertelt te controleren, behield twee kleuren, nul variabelen, nul schaduwen, nul radii, en noemde de primaire merknaam als rgb(247, 248, 248), een bijna-wit dat precies één keer op de pagina verscheen. Zelfde vorm op stripe.com: 117 CSS variabelen vastgelegd inclusief de volledige merkramp, vervolgens weggegooid, waardoor een tokens.css overbleef van twee kleuren en twintig ruwe pixelwaarden met 14.5px en 16.5px in de spatiëringsschaal. De oorzaak is een type mismatch in src/normalize/normalize.ts — dembrandt geeft arrays van objecten uit, de normalizer filtert op strings en eindigt stilzwijgend met lege arrays, en het leest schaduwobjecten onder een .value sleutel die dembrandt .shadow noemt. Vijf minuten greppen van de eigen stylesheets van de site met curl herstelde Stripe's echte merkramp en radius tokens, wat de skill niet deed, dus op zijn belangrijkste levering kost het je momenteel meer dan het oplevert.
Getest op: 2026-08-07 · Claude Code 2.x (agent harness)
Installatie
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
Commando's en voorbeeldprompts
/extract-design-systemHeadless-browser design token extractie van elke openbare website
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
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