Utiliser une référence DESIGN.md figée dans Claude Code pour une page

Une page existante vous donne quelque chose de précis à améliorer et à préserver. La collection Awesome DESIGN.md de VoltAgent propose des analyses en texte brut de sites publics à fournir à un agent de programmation IA. Ce guide utilise un fichier du commit du 14 octobre 2026 comme référence visuelle pour une modification limitée dans Claude Code. Le résultat n’est validé qu’après votre inspection du code modifié et de la page affichée.

BIG CHANGE a examiné le dépôt figé et la documentation de Claude Code. Nous n’avons ni exécuté Claude Code, ni modifié de page, ni mesuré le temps, ni inspecté de résultat généré. L’arborescence figée contient 84 fichiers directement sous design-md/*/DESIGN.md ; ce nombre décrit ce commit, pas une taille permanente du catalogue.

Le grand changement

• Ce qui change : Une analyse de conception unique, figée à une version précise, peut servir de contexte explicite pour modifier une page autorisée.
• Pourquoi cela compte : Le propriétaire peut reprendre une idée utile de mise en page ou d’espacement tout en comparant le résultat au contenu, à l’identité et au comportement réels de sa page.
• À surveiller : La référence est une analyse communautaire. Ses indications de marque et certaines de ses consignes internes peuvent être incorrectes ou inadaptées à votre page.

Avant de commencer

Il vous faut une page et un dépôt que vous êtes autorisé à modifier, une copie de travail ou une branche, un moyen d’afficher la page localement et un accès à Claude Code par un compte ou fournisseur admissible. Identifiez le fichier à modifier et les méthodes habituelles du projet pour démarrer et vérifier cette page. Notez son public, les textes et liens essentiels, les couleurs, polices et logo approuvés, ainsi que le seul problème visuel à résoudre. Gardez ces décisions du propriétaire à côté de la copie de travail pour évaluer la modification proposée.

Vérifiez la politique relative aux données et les autorisations des outils de votre compte avant de fournir des éléments privés d’un client. Claude Code traite les requêtes et le contenu du projet selon les conditions du compte ; un projet local ne rend pas la session du modèle exclusivement locale. Confirmez que vous pouvez partager les textes, ressources ou codes privés auxquels la tâche donnerait accès.

Utiliser une référence sur une page

1. Ouvrez le README de la collection figée. Choisissez un design-md/<name>/DESIGN.md qui propose une idée pertinente pour le problème défini. Lisez tout le fichier avant de l’utiliser. L’exemple Notion montre le format : suggestions de mise en page, de typographie, d’espacement et de composants. Il décrit aussi des boutons en capsule et rectangulaires. Cette contradiction vous impose de choisir, plutôt que de demander à Claude Code de suivre chaque ligne.
2. Copiez ce seul DESIGN.md figé dans le projet de travail, par exemple à l’emplacement design-reference/DESIGN.md. Notez à côté l’URL d’origine, le chemin et le commit 3b605329240ce735b510037cca322f1831fdd7f8. Conservez avec la copie la mention de copyright et d’autorisation MIT du dépôt. La référence Markdown ne nécessite aucune installation de paquet. La licence couvre le contenu du dépôt ; elle ne donne pas le droit d’utiliser le logo, les fichiers de polices, les images ou la marque d’une entreprise représentée.
3. Dans le projet autorisé, ouvrez Claude Code et fournissez explicitement le fichier copié comme contexte. Anthropic documente les références de fichiers et, séparément, les fichiers de consignes du projet ; placer un DESIGN.md autonome dans un dossier ne prouve pas que Claude Code l’a chargé. Remplacez le chemin de page et les règles du propriétaire entre crochets ci-dessous par des valeurs réelles, puis confirmez la lecture de la référence avant d’accepter une modification.

Read @design-reference/DESIGN.md as a visual reference. Edit only [path/to/owned-page] and the existing styles that page needs. Improve [one specific layout or hierarchy problem]. Keep the page's current audience, approved copy, links, brand colors, font and logo. Use only layout, hierarchy or spacing ideas that fit those rules. Do not copy the example site's name, assets or identity. Preserve working interactions and keyboard access. Show the proposed file changes and tell me how to render and check this page with this project's existing commands.

4. Lisez les différences proposées avant de les exécuter ou de les accepter. Vérifiez chaque fichier, texte et lien modifié. Refusez toute nouvelle dépendance, ressource ou modification d’une autre page que vous n’avez pas demandée. Affichez la page avec la commande de démarrage documentée de votre projet. Ouvrez-la à une largeur d’ordinateur puis de téléphone ; inspectez la page réelle, pas le récit des intentions de l’agent.
5. Comparez le rendu à vos exigences écrites. Vérifiez la conservation des textes et liens prévus, un ordre utile des titres, un contraste suffisant des textes et commandes, et l’absence de contenu coupé ou de défilement horizontal sur téléphone. Au clavier, atteignez et utilisez les liens, boutons, menus et formulaires concernés. Testez les interactions modifiées, notamment les états visibles de focus et d’erreur. Consignez la révision de la page, les largeurs, les vérifications et les défauts. N’acceptez la modification qu’une fois ces vérifications réussies pour votre page.

Si Claude Code ignore la référence, indiquez à nouveau le fichier et demandez quelles sections il a utilisées. Si la référence contredit vos règles de marque, retirez cette consigne de la requête et corrigez le code concerné. Si un lien, le parcours du focus ou une interaction casse, rétablissez le fonctionnement précédent et réduisez la modification. Si vous ne pouvez pas afficher la page et inspecter le résultat, ne validez pas le changement avant de pouvoir le faire.

La collection réunit des descriptions communautaires d’autres sites, fournies en l’état par ses responsables. Son fichier Notion contient des géométries de boutons contradictoires, des comportements au survol non documentés et une commande de contrôle de code non vérifiée par ce guide. Utilisez les vérifications connues de votre projet, pas cette commande suggérée. L’usage de Claude Code et les frais ultérieurs d’hébergement ou de ressources dépendent de votre compte et projet ; ce guide n’établit ni délai de modification ni qualité finale garantie.

Pour une autre méthode de création de page assistée par IA, notre guide de prototype Genspark explique comment copier un prototype hébergé et inspecter son ZIP de code source exporté. Ce travail part d’un autre livrable et aboutit à un résultat différent.

Sources et lectures complémentaires

• Le README figé de VoltAgent décrit la collection et son analyse en l’état des sites publics. Le nombre de fichiers vient de l’arborescence récursive figée, et non d’une affirmation concernant les versions futures.
• Le Notion DESIGN.md figé illustre le format et ses contradictions. Ce n’est ni une spécification approuvée par Notion ni une autorisation d’utiliser ses ressources.
• La licence MIT du dépôt exige de conserver la mention de copyright et d’autorisation dans les copies ou parties substantielles.
• Le guide de démarrage de Claude Code, les consignes de référence aux fichiers et la documentation des consignes du projet d’Anthropic précisent l’accès et le contexte explicite. Ils ne vérifient ni cette modification de page ni le chargement automatique de la référence autonome.
• La documentation d’Anthropic sur les coûts, l’utilisation des données et les autorisations explique l’usage et les contrôles selon le compte. Aucune session, facture ou page produite n’a été testée pour ce guide.