Cartographie de la surface de personnalisation de Copilot
VS Code détecte plusieurs fichiers de personnalisation, et ils ont des portées différentes. .github/copilot-instructions.md s'applique à tout l'espace de travail pour chaque requête. Les fichiers correspondant à *.instructions.md sous .github/instructions/ s'appliquent sélectivement, via un glob applyTo dans leur frontmatter, vous permettant d'attacher des règles uniquement à vos chemins de composants et de styles. Les fichiers *.prompt.md sont des prompts réutilisables que vous invoquez via des commandes slash. VS Code lit également AGENTS.md, ce qui signifie qu'un projet déjà configuré pour d'autres agents apporte ses règles permanentes avec lui. Taper /init dans le chat génère un fichier d'instructions de départ à partir de votre base de code.
| Portée | Idéal pour | |
|---|---|---|
.github/copilot-instructions.md | Chaque requête dans l'espace de travail | La règle de pointage : lire DESIGN.md, ne jamais coder en dur |
.github/instructions/*.instructions.md | Fichiers correspondant à son glob applyTo | Règles spécifiques à l'UI ciblées sur les composants et les styles |
AGENTS.md | Inter-outils, chaque requête | Règles partagées lorsque votre équipe utilise plusieurs agents |
*.prompt.md | À l'invocation | Tâches répétables (générer un composant selon les standards internes) |
Pourquoi les instructions seules n'arrêteront pas la dérive
Le réflexe est d'écrire des adjectifs de style dans le fichier d'instructions : moderne, propre, cohérent avec notre marque. Cela échoue pour la même raison que dans tous les outils : les adjectifs ne contraignent rien. Copilot comble le vide avec la moyenne statistique des UI du web, soit ce même fond presque noir, cet accent violet et ces cartes aux coins arrondis uniformément que tous les modèles utilisent. La contrainte nécessite des valeurs, et les valeurs ont besoin d'un support vers lequel les instructions peuvent pointer.
Consistency check · Ad-hoc colors
The same plan card, built two ways in Ambient Sage.
Pricing
Everything a small team needs to ship a branded UI.
Pricing
Everything a small team needs to ship a branded UI.
La configuration : trois fichiers, dix minutes
- 1
Installer de vrais tokens
Des variables CSS sémantiques (ou un thème Tailwind) dans le codebase, afin que « use the tokens » se résolve en valeurs réelles. Avec des tokens de style shadcn, cela se fait en une seule commande ; n'importe quel kit s'installe comme un élément de registre.
- 2
Ajoutez DESIGN.md à la racine du dépôt
Le contrat écrit : la signification des couleurs, l'échelle typographique, l'espacement, les motifs qui rendent le produit reconnaissable et la liste des éléments à ne pas faire. C'est le fichier qui assure la cohérence de l'identité entre les sessions ; des tokens sans prose laissent toujours la mise en page et la hiérarchie au hasard.
- 3
Pointez Copilot vers les deux
Une section courte dans
.github/copilot-instructions.mdplus un fichier d'instructions limité à l'UI. La concision est ici la règle : la connaissance réside dans DESIGN.md, l'instruction n'est qu'un pointeur.
npx shadcn add https://identityforge.io/r/ambient-sage.json---
applyTo: "src/components/**,src/app/**,**/*.css"
---
# Design system
- Read DESIGN.md at the repo root before any UI work.
- Use only the semantic tokens (bg-background, text-foreground,
text-primary, ...); never a literal hex value or an arbitrary
Tailwind color.
- Typography, spacing, and radii come from DESIGN.md's scales.
- If a needed value has no token, stop and ask instead of inventing one.Optionnel : laissez le mode agent appliquer les kits lui-même
Le mode agent de VS Code communique via MCP, Copilot peut donc aller plus loin que la simple lecture de fichiers : avec le serveur MCP Identity Forge installé, il peut rechercher des kits, lire l'intégralité de leurs systèmes de tokens, et écrire le DESIGN.md et les tokens dans le dépôt sur demande. Une commande suffit pour le configurer :
npx --yes identityforge@latest install --client vscodeLe design system suivi par Copilot
Chaque kit est un système complet : 28 tokens sémantiques en mode clair et sombre, typographie, espacement, motifs et règles, exportables en tant que DESIGN.md, variables CSS, thèmes Tailwind ou élément de registre shadcn.
GitHub Copilot possède-t-il une fonctionnalité de design system?
Non. Contrairement à v0 ou Lovable, Copilot ne propose aucune ingestion native de design system. Ses fichiers d'instructions sont le mécanisme : .github/copilot-instructions.md pour les règles de l'espace de travail et .github/instructions/*.instructions.md pour celles limitées par un glob. Couplés à de vrais tokens et à un DESIGN.md, ils remplissent la même fonction sans restriction liée au forfait.
Que doit contenir copilot-instructions.md pour garantir la cohérence du design?
Un pointeur, pas le système : demandez à Copilot de lire DESIGN.md avant de travailler sur l'UI, d'utiliser uniquement des tokens sémantiques et de ne jamais coder les couleurs ou les polices en dur. Conservez les valeurs réelles et la logique dans DESIGN.md afin que l'instruction reste courte et que chaque requête ne serve que de pointeur.
Copilot lit-il AGENTS.md?
Dans VS Code, oui : AGENTS.md est découvert au même titre que les propres fichiers de Copilot. Si votre projet contient déjà des règles d'agent multi-outils à cet endroit, Copilot les hérite, et vous n'avez qu'à ajouter le pointeur de design une seule fois.
Copilot peut-il appliquer un kit Identity Forge?
Deux méthodes. Sans MCP : npx shadcn add installe les tokens de n'importe quel kit comme un élément de registre, et la page du kit fournit le DESIGN.md. Avec MCP : installez le serveur Identity Forge pour VS Code et le mode agent pourra rechercher, prévisualiser et appliquer des kits en tant qu'outils dans la conversation.
Pourquoi Copilot continue-t-il d'inventer de nouvelles couleurs?
Généralement dû à l'un de ces trois manques : l'instruction mentionne « consistent » sans nommer les tokens, les tokens existent mais pas de DESIGN.md (la hiérarchie et l'espacement dérivent donc toujours), ou les règles d'UI se trouvent dans un fichier limité dont le glob applyTo ne cible pas les fichiers en cours d'édition. Vérifiez d'abord le glob ; l'erreur est silencieuse.