Extract Design System
Headless-webbläsar design token-extraktion från vilken offentlig webbplats som helst
Tested · Didn't pass
Vad den gör
Wrappar dembrandt CLI för att driva en headless Chromium på en offentlig URL och skriva start-token-filer — .extract-design-system/raw.json och normalized.json plus design-system/tokens.json och tokens.css. Utlöses när du ber att reverse-engineer en webbplats färger, typsnitt, avstånd, radier eller skuggor till CSS custom properties för ett nytt projekt. Kräver Node 20+ och en engångs `npx playwright install chromium`.
Testrapport
CLI:n körs rent och webbläsar-extraktionen under den är genuint bra — men normaliseraren kastar bort det mesta innan du ens ser det. Kördes mot linear.app, den råa infångningen innehöll 39 CSS custom properties inklusive --color-accent: #7170ff, 8 palettfärger, 12 skuggor och 19 radier; den normaliserade utdata som skillen säger åt dig att granska behöll två färger, noll variabler, noll skuggor, noll radier, och namngav varumärkets primärfärg som rgb(247, 248, 248), en nästan-vit som dök upp exakt en gång på sidan. Samma form på stripe.com: 117 CSS-variabler fångades inklusive hela varumärkesrampen, sedan kasserades de, vilket lämnade en tokens.css med två färger och tjugo råa pixelvärden med 14.5px och 16.5px i avståndsskalan. Orsaken är en typmatchningsfel i src/normalize/normalize.ts — dembrandt genererar arrayer av objekt, normaliseraren filtrerar för strängar och slutar tyst med tomma arrayer, och den läser skuggobjekt under en .value-nyckel som dembrandt kallar .shadow. Fem minuters greppning av webbplatsens egna stilmallar med curl återfick Stripes verkliga varumärkesramp och radie-tokens, vilket skillen inte gjorde, så på dess huvudleverans kostar det dig för närvarande mer än det ger.
Testad: 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
Kommandon och exempelprompter
/extract-design-systemHeadless-webbläsar design token-extraktion från vilken offentlig webbplats som helst
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
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