Extract Design System
Headless-nettleser design token-ekstraksjon fra enhver offentlig nettside
Tested · Didn't pass
Hva den gjør
Pakker dembrandt CLI for å drive en headless Chromium på en offentlig URL og skrive start-token-filer — .extract-design-system/raw.json og normalized.json pluss design-system/tokens.json og tokens.css. Utløses når du ber om å reverse-engineere et nettsteds farger, fonter, mellomrom, radier eller skygger til CSS custom properties for et nytt prosjekt. Krever Node 20+ og en engangs `npx playwright install chromium`.
Testrapport
CLI-en kjører rent, og nettleserekstraksjonen under den er genuint god — men normalisatoren kaster det meste bort før du i det hele tatt ser det. Kjørt mot linear.app, inneholdt den rå fangsten 39 CSS custom properties inkludert --color-accent: #7170ff, 8 palettfarger, 12 skygger og 19 radier; den normaliserte utdataen som ferdigheten ber deg om å gjennomgå, beholdt to farger, null variabler, null skygger, null radier, og navnga merkets primærfarge som rgb(247, 248, 248), en nesten-hvit som dukket opp nøyaktig én gang på siden. Samme form på stripe.com: 117 CSS-variabler fanget inkludert hele merkevarens fargeskala, deretter forkastet, og etterlot en tokens.css med to farger og tjue rå pikselverdier med 14.5px og 16.5px i avstandsskalaen. Årsaken er en type-mismatch i src/normalize/normalize.ts — dembrandt utsteder arrayer av objekter, normalisatoren filtrerer for strenger og ender stille opp med tomme arrayer, og den leser skyggeobjekter under en .value-nøkkel som dembrandt kaller .shadow. Fem minutter med å greppe nettstedets egne stilark med curl gjenopprettet Stripes virkelige merkevare-fargeskala og radius-tokens, noe ferdigheten ikke gjorde, så på sin hovedleveranse koster den deg for øyeblikket mer enn den gir.
Testet på: 2026-08-07 · Claude Code 2.x (agent harness)
Installer
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-nettleser design token-ekstraksjon fra enhver offentlig nettside
Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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