extract-design-system : extraire des jetons de design d'un site public

Pour qui

Installez cette Skill quand il faut retrouver des jetons de design depuis un site public et générer un JSON de départ plus des propriétés CSS personnalisées pour un projet local. Couverture officielle : colors, typography, spacing, border radius, shadows. Utilisable comme AI agent skill (Claude, Cursor, Codex) ou standalone CLI.

Convient à qui veut vite des starter tokens, pas une bibliothèque de composants complète. Le corps nomme ces trois agents et aussi un CLI autonome ; ne lisez pas cela comme un support d'un seul. Si le site cible n'est pas joignable publiquement, ou si vous attendez un correctif de config framework ou une réécriture automatique de l'app, cette compétence ne colle pas.

Page : https://github.com/arvindrk/extract-design-system

Premier essai en 3 minutes

Uniquement cette commande d'installation :

npx skills add arvindrk/extract-design-system

Préconditions : vous avez un projet local et comptez extraire depuis « une page joignable publiquement » ; vous acceptez l'écriture des fichiers nommés. Ne nommez pas un répertoire absent.

Au premier essai, vérifiez d'abord le périmètre ; n'écrivez pas les fichiers tout de suite. Demandez à l'agent : quels jetons, quels fichiers, ce qu'il ne fera pas. Signal de succès : colors / typography / spacing / border radius / shadows, plus .extract-design-system/raw.json, .extract-design-system/normalized.json, design-system/tokens.json, design-system/tokens.css ; et reformulation de Public websites only, Single-page extraction workflow, Starter tokens, not a full component library, No framework config patching or automatic app rewrites.

Ensuite, extraire avec l'exemple officiel : https://stripe.com and generate starter token files for this project. Signal de succès : ces quatre fichiers apparaissent et la config du framework n'a pas bougé. La page mentionne un standalone CLI sans commande de lancement ; n'en inventez pas.

Cas d'usage

Cas 1 : extraire Stripe selon l'exemple officiel. Libellé d'origine : Extract the design system from https://stripe.com and generate starter token files for this project. Écriture de fichiers et accès au web public ; confirmez le répertoire du projet avant d'exécuter. On peut vérifier des fichiers de jetons de départ, pas un jeu de composants.

Cas 2 : une autre page publique unique, toujours seulement des jetons de départ. Donnez une page ouvrable publiquement, extraire uniquement, sans changer l'app. Signal de succès : toujours ces quatre fichiers officiels, et l'agent refuse les rustines de framework. N'allez pas croire qu'un site multipage sera parcouru en entier ; le corps dit single-page.

Limites d'usage

Sites publics seulement. Pages privées ou à connexion hors périmètre.

Une page à la fois. Le produit est starter tokens, pas une bibliothèque de composants complète.

Pas de framework config patching, pas d'automatic app rewrites.

Les chemins de sortie suivent le corps ; ne les renommez pas et ne les enregistrez pas ailleurs.

Claude, Cursor, Codex et standalone CLI sont dans le texte d'origine ; n'écrivez pas un support exclusif. Le lancement du CLI n'est pas donné ; ne l'inventez pas. N'ajoutez pas sélecteurs, sessions connectées ou domaines en lot non écrits.