Extract Design System
Extraction de jetons de design par navigateur headless depuis n'importe quel site web public
Tested · Didn't pass
Ce que fait
Enveloppe la CLI dembrandt pour piloter un Chromium headless à une URL publique et écrire des fichiers de jetons de démarrage — .extract-design-system/raw.json et normalized.json plus design-system/tokens.json et tokens.css. Se déclenche lorsque vous demandez de faire de la rétro-ingénierie des couleurs, polices, espacements, rayons ou ombres d'un site en propriétés CSS personnalisées pour un nouveau projet. Nécessite Node 20+ et une seule exécution de `npx playwright install chromium`.
Rapport de test
La CLI s'exécute proprement et l'extraction du navigateur sous-jacente est vraiment bonne — mais le normalisateur en jette la majeure partie avant même que vous ne la voyiez. Exécuté sur linear.app, la capture brute contenait 39 propriétés CSS personnalisées, dont --color-accent: #7170ff, 8 couleurs de palette, 12 ombres et 19 rayons ; la sortie normalisée que la compétence vous dit de revoir a conservé deux couleurs, zéro variables, zéro ombres, zéro rayons, et a nommé la couleur primaire de la marque rgb(247, 248, 248), un quasi-blanc qui n'apparaissait qu'une seule fois sur la page. Même forme sur stripe.com : 117 variables CSS capturées, y compris la rampe de marque complète, puis écartées, laissant un tokens.css de deux couleurs et vingt valeurs de pixels brutes avec 14.5px et 16.5px dans l'échelle d'espacement. La cause est une incompatibilité de type dans src/normalize/normalize.ts — dembrandt émet des tableaux d'objets, le normalisateur filtre les chaînes et se retrouve silencieusement avec des tableaux vides, et il lit les objets d'ombre sous une clé .value que dembrandt appelle .shadow. Cinq minutes de grepping des propres feuilles de style du site avec curl ont récupéré la vraie rampe de marque et les jetons de rayon de Stripe, ce que la compétence n'a pas fait, donc sur son livrable principal, elle vous coûte actuellement plus qu'elle ne vous donne.
Testé le: 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
Commandes et exemples de prompts
/extract-design-systemExtraction de jetons de design par navigateur headless depuis n'importe quel site web public
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
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