Extract Design System
Extrakce design tokenů z jakékoli veřejné webové stránky pomocí headless prohlížeče
Tested · Didn't pass
Co umí
Obaluje dembrandt CLI pro spuštění headless Chromia na veřejné URL a zápis startovacích souborů tokenů — .extract-design-system/raw.json a normalized.json plus design-system/tokens.json a tokens.css. Spouští se, když požádáte o reverzní inženýrství barev, písem, mezer, rádiusů nebo stínů webu do vlastních CSS vlastností pro nový projekt. Vyžaduje Node 20+ a jednorázový `npx playwright install chromium`.
Testovací report
CLI běží čistě a extrakce prohlížeče pod ním je skutečně dobrá – ale normalizátor většinu z toho zahodí, než to vůbec uvidíte. Spuštěno proti linear.app, surový záznam obsahoval 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. Příčinou je type mismatch v 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. Pět minut prohledávání vlastních stylů webu pomocí curl obnovilo 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.
Testováno: 2026-08-07 · Claude Code 2.x (agent harness)
Instalace
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
Příkazy a ukázkové prompty
/extract-design-systemExtrakce design tokenů z jakékoli veřejné webové stránky pomocí headless prohlížeče
Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):
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