Extract Design System
Estrazione di token di design da browser headless da qualsiasi sito web pubblico
Tested · Didn't pass
Cosa fa
Avvolge la CLI dembrandt per pilotare un Chromium headless a un URL pubblico e scrivere file token iniziali — .extract-design-system/raw.json e normalized.json più design-system/tokens.json e tokens.css. Si attiva quando chiedi di fare reverse-engineering dei colori, font, spaziatura, raggi o ombre di un sito in proprietà personalizzate CSS per un nuovo progetto. Richiede Node 20+ e un `npx playwright install chromium` una tantum.
Rapporto di test
La CLI funziona correttamente e l'estrazione dal browser sottostante è genuinamente buona — ma il normalizzatore ne scarta la maggior parte prima che tu la veda. Eseguito su linear.app, la cattura raw conteneva 39 proprietà personalizzate CSS inclusi --color-accent: #7170ff, 8 colori della palette, 12 ombre e 19 raggi; l'output normalizzato che la skill ti dice di revisionare ha mantenuto due colori, zero variabili, zero ombre, zero raggi, e ha chiamato il colore primario del brand rgb(247, 248, 248), un quasi-bianco apparso esattamente una volta nella pagina. Stessa forma su stripe.com: 117 variabili CSS catturate inclusa l'intera rampa del brand, quindi scartate, lasciando un tokens.css di due colori e venti valori pixel raw con 14.5px e 16.5px nella scala di spaziatura. La causa è un'incongruenza di tipo in src/normalize/normalize.ts — dembrandt emette array di oggetti, il normalizzatore filtra per stringhe e finisce silenziosamente con array vuoti, e legge oggetti ombra sotto una chiave .value che dembrandt chiama .shadow. Cinque minuti di grepping sui fogli di stile del sito con curl hanno recuperato la vera rampa del brand e i token di raggio di Stripe, cosa che la skill non ha fatto, quindi sul suo deliverable principale attualmente ti costa più di quanto ti dia.
Testato il: 2026-08-07 · Claude Code 2.x (agent harness)
Installazione
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
Comandi e prompt di esempio
/extract-design-systemEstrazione di token di design da browser headless da qualsiasi sito web pubblico
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
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