Aller au guide d’utilisation
create-design-mdpar Julien Thibeaut

Create Design MD Skill.

Un skill Claude Code et Codex pour le travail de marque et de design system : crée ou met à jour un DESIGN.md à partir d'un dépôt de produit existant ou d'un site web public.

  • Marque et design systems
  • DESIGN.md
ibelick/ui-skills · skills/create-design-md/SKILL.mdSKILL.md
--- name: create-design-md description: Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions. --- ## Boundaries ## 1. Choose the mode ## Shared evidence pipeline ## 2. Trace the evidence ## 3. Decide what belongs ## 4. Write the document
Métadonnées et titres de section lus depuis le fichier source le 14 septembre 2026 · 16 176 caractères au total

01 Ce qu'il fait

Ce que fait le Skill create-design-md dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Transforme un produit existant en contrat de conception écrit. En mode dépôt, il audite les tokens, thèmes, primitives partagées et routes rendues d'un produit local, puis écrit DESIGN.md à la racine de ce produit ; en mode URL, il reconstitue un brouillon à partir du DOM, des styles calculés et des feuilles de style chargées, en largeurs desktop et mobile.

Les deux modes partagent un même pipeline de preuves — rôle, valeur, source, portée, récurrence, confiance — et un même schéma de token plat, avec css-tailwind, json-tailwind ou dtcg comme cibles d'export. Les valeurs ne subsistent que si une source de référence les nomme ou qu'elles passent une validation à trois preuves, et le document n'est publié qu'une fois le lint et l'export réussis. Il ne modifie rien d'autre que DESIGN.md.

Ce qu'il produit

  • Un brouillon DESIGN.md reconstitué et écrit dans l'espace de travail actuel en mode URL, étiqueté comme brouillon.
  • Un rapport listant le mode et le produit ou l'URL audité, les sources de référence utilisées, ainsi que les conflits ou zones non étayées laissées hors du document.
  • Les résultats finaux du lint et de l'export, qui doivent tous deux réussir avant que le document ne soit restitué.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Choisir le Mode

    Mode dépôt lorsqu'un dépôt de produit local est disponible, écrivant DESIGN.md à la racine de ce produit ; mode URL lorsque seule une URL publique est fournie, produisant un brouillon reconstitué dans l'espace de travail actuel.

  2. 02
    Collecter les Preuves et Enregistrer la Provenance

    Chaque candidat est enregistré avec sa source, sa portée et sa récurrence avant toute normalisation, si bien que les deux modes alimentent le même pipeline d'enregistrement.

  3. 03
    Normaliser selon le Schéma DESIGN.md

    Les candidats incertains, locaux sans contrat, ou non pertinents pour l'implémentation sont écartés ; le reste est mappé dans le schéma de token plat canonique.

  4. 04
    Verrouiller le Brouillon Derrière une Validation

    Le Markdown n'est écrit qu'une fois le frontmatter analysé et validé par des contrôles de forme, afin que le texte ne soit jamais rédigé avant d'être ajusté après coup sur le YAML.

  5. 05
    Lint et Export

    Le linting structurel s'exécute d'abord, puis un export de compatibilité dans la cible sélectionnée, et chaque catégorie renseignée doit apparaître dans le résultat.

  6. 06
    Rapporter le Mode, les Sources et les Lacunes

    Le rapport nomme le mode et le produit ou l'URL audité, les sources de référence utilisées, ce qui a été omis comme non étayé, ainsi que les résultats du lint et de l'export.

02 Trouvez celui qui vous convient

Quand utiliser le skill create-design-md

Utilisez le skill create-design-md dans Claude Code ou Codex lorsque le travail relève de la marque et du design-system de ce type. Adéquation et limites ci-dessous sont tirées du fichier propre du skill.

Bon choix

  • Documenter le langage de conception d'une interface et reconstruire son système visuel à partir des preuves actuelles présentes dans le code.
  • Donner aux agents de code un contexte UI persistant plutôt que de répéter les décisions de conception à chaque tâche.
  • Un site public sans source disponible, où un brouillon reconstitué à partir du DOM, des styles calculés et du CSS chargé est acceptable.

Connaître les limites

  • Modifier le code source, les dépendances ou la configuration du produit pour correspondre à la conception documentée — seul le fichier DESIGN.md est dans le périmètre.
  • Lire les noms de token internes, la propriété des composants ou l'intention non documentée à partir d'un site web en production : les preuves issues de l'URL ne peuvent pas établir cela.
  • Travailler sans inspection du navigateur rendu ; des captures d'écran ou des fichiers source doivent être demandés plutôt que d'inférer à partir du texte ou du HTML.
  • Lister exhaustivement chaque token ou composant découvert — les inventaires exhaustifs sont explicitement hors périmètre.

Quoi fournir

  • Quel produit, si le dépôt en contient plusieursL'utilisateur doit nommer le produit déployable en cours de documentation ; en cas d'ambiguïté sur la propriété, le skill pose la question avant d'écrire.
  • Une URL publique associée à un accès navigateur renduLe mode URL inspecte le DOM, les styles calculés et les feuilles de style publiquement chargées aux largeurs desktop et mobile ; des captures d'écran seules ne peuvent pas établir de valeurs exactes.
  • Une cible d'export non par défaut, le cas échéantLa sortie URL utilise par défaut css-tailwind sauf si l'utilisateur spécifie une autre cible, car les noms de token doivent rester valides pour celle-ci.

03 Dans le skill

Règles que le skill create-design-md donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Ne toucher qu'au document

    Le mode dépôt ne doit pas modifier le code source du produit, les dépendances, la configuration ou les fichiers générés, et ne doit pas promouvoir des motifs d'implémentation accidentels au rang de décisions de design.

  2. Privilégier les preuves du dépôt

    Le mode dépôt est choisi dès que le code source est disponible ; une URL fournie peut vérifier la présentation rendue mais ne remplace jamais les preuves du dépôt.

  3. Un seul schéma, seule la forme du mapping change

    Les groupes de tokens sont des mappings, jamais des séquences, et les deux modes doivent utiliser les mêmes noms de token plats, sans introduire de second schéma.

  4. Choisir la cible d'export avant d'écrire

    css-tailwind pour Tailwind v4, json-tailwind pour Tailwind v3, et dtcg sinon ; les noms de token doivent être valides pour la cible choisie.

  5. Trois preuves pour les affirmations en mode URL

    Une affirmation en mode URL nécessite une observation, une base et une conséquence ; si une preuve manque, l'affirmation est omise plutôt que devinée.

  6. N'émettre que des noms de token valides selon regex

    Chaque nom de token émis doit correspondre à ^[a-zA-Z0-9][a-zA-Z0-9-]*$ ; toute clé qui échoue est rejetée et réécrite.

  7. Normaliser un unique token de niveau group

    Un token source isolé tel que --radius devient rounded.base ; sm, md, lg et xl ne sont jamais dérivés de classes utilitaires ou de valeurs répétées.

  8. Aucune publication en cas de validation échouée

    Le document n'est jamais renvoyé tant que le lint ou l'export échoue, et une catégorie renseignée absente de l'export est traitée comme un échec de schéma.

04 Mettez-le en pratique

Installer create-design-md dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter create-design-md à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

Forme générique de la CLI skills pour skills/create-design-md/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au Skill une première tâche de brand et de design-system

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt
Here's the repo for [product] — please document its design language in a DESIGN.md at the root. Pull the token names, typography scales and radius values out of our theme file, and leave out anything our shared components don't actually render. We ship on Tailwind v4, so keep the export compatibility in mind.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Exécuter exactement un export de compatibilité dans la cible sélectionnée précédemment et inspecter la sortie.
  • Pour css-tailwind, vérifier que les couleurs sont mappées vers --color-, la famille vers --font-, la taille vers --text-, rounded vers --radius- et l'espacement vers --spacing- ; un bloc de typographie renseigné n'émettant ni --font- ni --text-* signifie que le document doit être réécrit.
  • Avant d'enregistrer, relire le frontmatter analysé et rejeter automatiquement les enfants de typographie scalaires ou les clés rounded absentes de la source de référence.
  • Lors de la mise à jour d'un document existant, conservez temporairement le contenu original et comparez-le au nouveau fichier, en restaurant toute décision acceptée qui aurait été supprimée.
  • Vérifiez la spécification installée avant d'encoder les modes de thème, et n'utilisez un tableau Themes que si les modes ne sont pas pris en charge.

Dans OpenDesign importez create-design-md depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Repository
github.com/ibelick/ui-skills Branche main
Fichier du skill
skills/create-design-md/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 79081ab
License
MIT Depuis LICENSE.
Étoiles du dépôt
8 402 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt ibelick/ui-skills, qui contient 5 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour create-design-md.
Vérifié par OpenDesign
2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. LimitesSeul DESIGN.md est modifié ; pas de schéma concurrent, pas de déversement de chaque token découvert.
  2. 1. Choisir le modeMode dépôt versus mode URL, ce que chacun peut prouver, et quand demander au préalable.
  3. Pipeline de preuves partagéPipeline d'enregistrement en six étapes et règles d'omission que les deux modes doivent respecter.
  4. 2. Tracer les preuvesOrdre d'inspection pour les dépôts ; liste d'échantillonnage, preuves et registre de preuves pour les URLs.
  5. 3. Décider ce qui doit figurerStructuration du schéma, choix de la cible d'export, gestion des thèmes et ce que le texte peut affirmer.
  6. 4. Rédiger le documentFrontmatter minimal, ordre de section autorisé, et ce qu'il faut supprimer avant d'enregistrer.
  7. 5. ValiderLint, un export, vérifications de catégorie, et comparaison d'un document mis à jour.
  8. 6. Rendre compteCe qu'il faut restituer : mode, cible auditée, sources, omissions, résultats de validation.
Description du skill lui-même
Créer ou mettre à jour un fichier DESIGN.md à partir d'un dépôt de produit existant ou d'un site web public. Utiliser lorsqu'on vous demande de documenter le langage de design d'une interface, de reconstituer son système visuel, d'extraire des tokens de design et des recommandations à partir de preuves actuelles, ou de fournir un contexte d'interface persistant pour les agents de code. Ne pas modifier le code source du produit ni promouvoir des motifs d'implémentation accidentels en décisions de design.

Description en front-matter issue de SKILL.md. Le fichier complet fait environ 16 176 caractères. Lire le fichier complet sur GitHub.

Create Design MD

Exécuter create-design-md sur une vraie marque et une tâche de design-system réelle.

Téléchargez OpenDesign, importez create-design-md depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows