Édition Markdown

AI-translated from English; not yet reviewed by a fluent editor.

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

> Choisissez un fichier DESIGN.md figé, fournissez-le à Claude Code pour modifier une page que vous êtes autorisé à éditer, puis inspectez le code et le rendu sur ordinateur et téléphone.

By BIG CHANGE Editorial

Published: 2026-10-20T00:01:06.937Z
Updated: 2026-10-20T00:01:06.937Z
Canonical: https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide

![Conceptual charcoal illustration of one clipped design-reference sheet beside an unbranded display showing a simple webpage layout.](https://bigchange.ai/api/media/file/pinned-design-reference-one-page-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no Claude Code run, Notion or edited and tested page is depicted.

Une page existante vous donne quelque chose de précis à améliorer et à préserver. La [collection Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.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](https://code.claude.com/docs/en/quickstart) 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](https://code.claude.com/docs/en/data-usage) et les [autorisations des outils](https://code.claude.com/docs/en/permissions) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md). 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) 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](https://code.claude.com/docs/en/common-workflows) et, séparément, les [fichiers de consignes du projet](https://code.claude.com/docs/en/memory) ; 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.

```markdown
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](https://bigchange.ai/blog/genspark-design-prototype-source-zip) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) 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`](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) 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](https://code.claude.com/docs/en/quickstart), les [consignes de référence aux fichiers](https://code.claude.com/docs/en/common-workflows) et la [documentation des consignes du projet](https://code.claude.com/docs/en/memory) 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](https://code.claude.com/docs/en/costs), l’[utilisation des données](https://code.claude.com/docs/en/data-usage) et les [autorisations](https://code.claude.com/docs/en/permissions) explique l’usage et les contrôles selon le compte. Aucune session, facture ou page produite n’a été testée pour ce guide.

## Sources

- [README Awesome DESIGN.md figé](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — Description principale du dépôt et consigne de copie d’un seul fichier au commit immuable. Elle présente des analyses de sites publics fournies en l’état ; ses affirmations sur la qualité des résultats sont promotionnelles. L’arborescence complète, examinée indépendamment à ce commit, contient 84 fichiers DESIGN.md directs, un nombre lié à cette version.
- [Exemple Notion DESIGN.md au commit figé](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — Exemple d’analyse de mise en page, espacement, typographie et composants. Il se contredit sur les boutons en capsule ou rectangulaires, n’établit aucun comportement vérifié de survol ou d’animation et suggère une commande de contrôle de code non vérifiée. C’est une analyse communautaire, pas la spécification officielle de Notion ni une autorisation de copier des ressources.
- [Licence MIT Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent ; la mention de copyright et d’autorisation doit rester dans les copies ou parties substantielles. Cette licence du dépôt n’établit aucun droit sur la marque, le logo, la police propriétaire ou les images d’un site représenté.
- [Démarrage de Claude Code](https://code.claude.com/docs/en/quickstart) — Conditions officielles relatives au projet, au compte ou fournisseur et à la connexion. Le lecteur doit utiliser un accès admissible et son propre projet ; BIG CHANGE n’a testé ni installation de Claude Code ni compte payant.
- [Processus courants de Claude Code](https://code.claude.com/docs/en/common-workflows) — Consignes officielles sur le contexte explicite @file et le travail sur un projet. Elles justifient la référence délibérée au fichier copié, sous réserve des paramètres et limites, pas le chargement automatique d’un DESIGN.md arbitraire.
- [Mémoire de projet de Claude Code](https://code.claude.com/docs/en/memory) — Explique les fichiers de consignes et leur chargement selon la configuration. N’établit pas qu’un DESIGN.md autonome se charge simplement parce qu’il est dans le dépôt ; ce guide ne change aucune configuration de consignes.
- [Coûts de Claude Code](https://code.claude.com/docs/en/costs) — Contexte d’usage et de facturation selon le compte. Une référence Markdown n’ajoute aucune dépendance de paquet, mais ce guide n’établit ni prix fixe, ni quota gratuit, ni gain de temps pour la tâche Claude Code.
- [Utilisation des données de Claude Code](https://code.claude.com/docs/en/data-usage) — Traitement officiel des données selon le compte et comportement des journaux locaux. Le propriétaire doit examiner la politique avant de partager du code ou des ressources privés de clients ; aucune affirmation universelle de traitement exclusivement local ou d’entraînement n’est faite.
- [Autorisations de Claude Code](https://code.claude.com/docs/en/permissions) — Contrôles officiels des autorisations des outils. Les consignes d’une requête n’accordent ni n’imposent à elles seules l’accès aux outils ; le lecteur doit examiner les actions proposées et les fichiers réellement modifiés.