GitHub Copilot CLI pour le design.

Ce qu'est réellement GitHub Copilot CLI

GitHub Copilot CLI est l'agent de code natif du terminal de GitHub. Il lit votre dépôt, modifie des fichiers, exécute des commandes shell et travaille directement avec votre contexte GitHub — issues, pull requests et dépôts — en s'authentifiant avec votre compte GitHub existant. Il est propulsé par le même harnais agentique que l'agent de code Copilot de GitHub, il planifie donc des tâches complexes et itère au lieu de se contenter de compléter des lignes. Il a atteint la disponibilité générale en février 2026, après une préversion publique ouverte en septembre 2025.

Pour le travail de design, deux propriétés ressortent. Il lit les fichiers d'instructions personnalisés — règles à l'échelle du dépôt dans .github/copilot-instructions.md ainsi que AGENTS.md — de sorte que vos conventions de design sont incluses automatiquement à chaque exécution. Et il prend en charge plusieurs fournisseurs de modèles de fondation, ce qui vous permet de changer de modèle tâche par tâche avec la commande /model, en fonction de celui qui raisonne le mieux sur une interface donnée.

• Fichiers d'instructions: Copilot CLI lit les instructions du dépôt dans .github/copilot-instructions.md, les fichiers spécifiques à un chemin sous .github/instructions, et AGENTS.md — l'endroit naturel pour encoder vos conventions de design, vos tokens et vos checklists de revue.
• Outils intégrés + MCP: Il intègre le serveur MCP de GitHub et exécute des outils de fichiers et de shell, et vous pouvez ajouter des serveurs MCP personnalisés avec /mcp add (stockés dans mcp-config.json sous ~/.copilot) pour du contexte externe comme un fichier Figma en direct.
• Choix du modèle: Utilisez la commande /model pour choisir parmi des modèles de pointe d'Anthropic, OpenAI et Google — en changeant tâche par tâche, le tout sur votre abonnement Copilot existant.

• Éditeur : GitHub
• Identifiant : un abonnement GitHub Copilot actif (Pro, Pro+, Business ou Enterprise)
• Installation : npm install -g @github/copilot, puis exécutez copilot

Pourquoi les instructions de dépôt et le choix du modèle conviennent au design

L'avantage de Copilot CLI pour le design vient de deux propriétés — mais, comme avec tout agent, le goût doit toujours être fourni.

• Des conventions qui voyagent avec le dépôt: Parce que Copilot CLI lit automatiquement .github/copilot-instructions.md et AGENTS.md, vos tokens, vos primitives et vos règles de revue sont dans le contexte à chaque exécution — l'agent travaille sur une marque plutôt que sur un look par défaut.
• Choisir le bon modèle par tâche: Le choix de modèles d'Anthropic, OpenAI et Google signifie que vous pouvez vous tourner vers celui qui raisonne le mieux sur une mise en page donnée, puis en changer pour la tâche suivante — sans modifier votre workflow.
• De vraies specs via MCP: Le serveur MCP GitHub intégré, plus un serveur MCP Figma, dirigent l'agent vers vos tokens, vos composants et vos vraies specs, afin qu'il construise à partir de la source au lieu d'approximer.

La leçon est la même que celle que tout agent enseigne : Copilot CLI n'a pas de goût par défaut. Il produit du bon design lorsque vous lui donnez des contraintes — un design system, un skill esthétique et des références concrètes. Open Design empaquette exactement ces entrées, ce qui explique pourquoi les deux s'accordent (voir plus bas).

Configurer Copilot CLI pour le travail de design, de zéro

Voici le chemin complet d'une machine vierge à un Copilot CLI capable de construire et de vérifier des interfaces.

# 1. Install Copilot CLI (Node.js required)
npm install -g @github/copilot

# 2. Start it in your project and authenticate on first run
cd your-project
copilot           # run /login and follow the prompts to sign in

# 3. Choose a model for the task
#    inside the session:
/model            # pick a frontier model from Anthropic, OpenAI, or Google

# 4. Add custom instructions and the Figma MCP server (optional)
#    write .github/copilot-instructions.md or AGENTS.md
/mcp add          # add the Figma MCP server for design handoff

• Encodez vos règles de design: Placez vos tokens, vos primitives et vos conventions dans .github/copilot-instructions.md ou AGENTS.md, afin que le rendu corresponde à une marque au lieu de retomber sur un look générique.
• Ajoutez la vérification dans le navigateur: Branchez un MCP Playwright ou navigateur pour que Copilot effectue le rendu dans un vrai navigateur et vérifie son résultat sur les différents points de rupture, au lieu de confirmer seulement que le build passe.

Le workflow capture d'écran-vers-UI

La boucle de design la plus rentable avec Copilot CLI consiste à transformer une image de référence en une interface réactive fonctionnelle et à itérer jusqu'à ce qu'elle corresponde — en s'appuyant sur un modèle multimodal solide pour comparer le rendu à la référence.

1. Partez des références visuelles les plus claires dont vous disposez — et incluez plusieurs états (bureau et mobile, survol, vide, chargement), pas seulement une image héro.
2. Soyez précis dans le prompt ; des prompts vagues produisent une UI générique même avec un modèle solide.
3. Conservez votre design system et vos conventions dans .github/copilot-instructions.md ou AGENTS.md, et indiquez à Copilot où vivent les tokens et les primitives canoniques.
4. Lancez un serveur de développement et faites en sorte que Copilot effectue le rendu dans un vrai navigateur, en redimensionnant aux points de rupture pour vérifier le résultat.
5. Itérez en faisant comparer par Copilot son implémentation aux captures d'écran — pas simplement confirmer que ça se compile.

Dirigez Copilot vers vos images de référence et donnez des contraintes concrètes ; il prévisualise chaque modification de fichier ou commande pour votre approbation avant de l'exécuter :

copilot
# in the prompt:
> Implement the design in reference-desktop.png and reference-mobile.png
  in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens described in
  .github/copilot-instructions.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

Gardez des prompts courts et ciblés, validez les bonnes itérations et annulez les mauvaises (en indiquant à Copilot quand vous annulez), afin que chaque passe s'appuie sur une base propre.

Instructions personnalisées, MCP et extensions

Trois points d'extension rendent Copilot CLI pratique pour un travail de design durable, et tous trois s'inscrivent proprement dans un workflow de design ouvert.

• Instructions personnalisées: Les règles du dépôt vivent dans .github/copilot-instructions.md (avec des fichiers spécifiques à un chemin sous .github/instructions et AGENTS.md). Ce sont le foyer durable de vos conventions de design, incluses automatiquement à chaque exécution.
• Serveurs MCP: Copilot CLI intègre le serveur MCP de GitHub et vous laisse ajouter des serveurs personnalisés via /mcp add (stockés dans mcp-config.json sous ~/.copilot) — la façon portable d'apporter du contexte de design, le plus pertinent étant le serveur MCP Figma, qui fonctionne avec tous les agents, pas seulement Copilot.
• Agents spécialisés et outils intégrés: Les modes spécialisés de Copilot CLI — pour l'exploration de la base de code, l'exécution des builds et des tests, la revue des changements et la planification — plus ses outils de fichiers et de shell lui permettent de rassembler des références et d'exécuter la boucle de vérification sans quitter le terminal.

Ce sont des capacités portables et multi-agents — exactement le genre de choses qu'Open Design est conçu pour orchestrer, plutôt que de les recréer projet par projet.

Copilot CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI pour le design

Il n'y a pas de vainqueur unique pour le travail de design — chaque agent a une force différente, et les équipes expérimentées les combinent. Un résumé équitable :

Le verdict récurrent de la communauté est que le goût vient des humains : tous retombent sur une esthétique générique sans skills, références et contraintes. C'est le vrai problème à résoudre — et il a la forme d'un outil de design, pas d'un modèle.

Les pièges, et comment éviter le rendu « bouillie d'IA »

La plainte la plus courante au sujet du design généré par IA est qu'il a l'air générique — dégradés doux, panneaux flottants, coins arrondis surdimensionnés, ombres dramatiques, une ambiance Inter-et-violet qui « hurle qu'une IA a fait ça ». Parmi les autres problèmes rapportés figurent des mises en page mobiles cassées et des instructions qui fuient dans le texte de l'interface. Aucun de ceux-ci n'est propre à Copilot CLI ; ce sont ce qui arrive lorsqu'un agent, quel qu'il soit, fonctionne sans contexte de design soigneusement sélectionné.

• Ajoutez un skill esthétique: Un skill de design soigneusement sélectionné force l'agent à s'engager dans une direction réelle au lieu du look par défaut.
• Vérifiez dans un vrai navigateur: Effectuez le rendu et l'auto-contrôle sur les différents points de rupture avec un MCP navigateur, afin que les mises en page ne se cassent pas silencieusement sur mobile.
• Fournissez tokens et références: De vrais tokens de design et des captures d'écran de référence sont le plus grand levier sur la qualité du rendu.
• Encodez les règles dans les instructions personnalisées: Placez des règles de style telles que « pas de cartes héro, deux polices au maximum, hiérarchie centrée sur la marque » dans .github/copilot-instructions.md ou AGENTS.md, là où l'agent les lit à chaque exécution.

Remarquez que chaque mesure d'atténuation consiste à donner à l'agent un contexte de design soigneusement sélectionné. Maintenir ce contexte à la main, projet par projet, c'est la corvée qu'Open Design supprime.

Concevoir avec Copilot CLI dans Open Design

Open Design est la couche de design open source que le workflow ci-dessus ne cesse de réclamer. Il traite GitHub Copilot CLI comme un adaptateur de première partie et l'enveloppe dans une bibliothèque de skills et de design systems soigneusement sélectionnée, un pipeline de rendu structuré et une UI de bureau locale — de sorte que le contexte de design qui rend Copilot bon est là dès la première exécution, et non assemblé à la main à chaque fois. Open Design est indépendant, open source (Apache-2.0) et local-first, ce qui explique pourquoi l'association fonctionne : l'agent fait le travail, vos fichiers et vos identifiants restent les vôtres.

1. Installez Open Design et sélectionnez GitHub Copilot CLI comme agent.
2. Authentifiez-vous avec votre abonnement GitHub Copilot — les identifiants restent sur votre machine et ne transitent jamais par nous.
3. Choisissez un design system et un skill, puis générez des présentations, des prototypes et des landing pages avec un goût cohérent.
4. Chaque artefact et fichier DESIGN.md vit dans votre propre dépôt, et non dans un cloud hébergé.

Même agent Copilot CLI, même abonnement — plus un véritable workflow de design portable et open source tout autour. Open Design est local-first et Apache-2.0, donc rien de votre travail ni de vos identifiants ne quitte votre machine.

Questions fréquentes

1. 01 GitHub Copilot CLI peut-il vraiment faire du travail de design ? +

   Oui — avec un skill esthétique, un design system et de vraies images de référence dans le contexte, Copilot CLI produit une UI réactive de qualité production, et vous pouvez choisir le modèle qui vérifie le mieux le rendu par rapport aux références. Sans ce contexte, il a tendance à retomber sur un look générique, ce qui est l'écart que comble Open Design.

2. 02 Ai-je besoin d'un abonnement pour concevoir avec Copilot CLI ? +

   Oui — Copilot CLI fonctionne avec un abonnement GitHub Copilot actif (Pro, Pro+, Business ou Enterprise) ; il n'est pas en bring-your-own-key. Vous vous authentifiez avec votre compte GitHub. Open Design ne fait jamais transiter vos identifiants — votre abonnement est utilisé directement par votre agent.

3. 03 Qu'est-ce qui rend Copilot CLI bon pour le design en particulier ? +

   Deux choses : il lit automatiquement les instructions du dépôt et AGENTS.md, de sorte que vos conventions de design voyagent avec le dépôt ; et il vous laisse basculer, tâche par tâche, parmi des modèles de pointe d'Anthropic, OpenAI et Google. Les deux aident — mais le goût vient toujours du design system, du skill et des références que vous fournissez.

4. 04 Copilot CLI ou Claude Code pour le design frontend ? +

   Les deux sont solides. Claude Code est connu pour ses décisions de design précises et conscientes de la base de code ; l'avantage de Copilot CLI est le choix de modèles entre fournisseurs et l'intégration GitHub profonde sur un abonnement que vous possédez peut-être déjà. Beaucoup d'équipes utilisent les deux — Open Design vous laisse changer d'agent sans changer votre workflow de design.

5. 05 Comment connecter Copilot CLI à Figma ? +

   Ajoutez le serveur MCP Figma avec la commande /mcp add ; les paramètres sont stockés dans mcp-config.json sous ~/.copilot. Copilot peut alors récupérer un vrai contexte de design — composants, variables, données de mise en page — afin que le code généré corresponde à la source au lieu de l'approximer.

6. 06 Open Design est-il affilié à GitHub ou Microsoft ? +

   Non. GitHub Copilot CLI est un produit de GitHub ; Open Design est un projet open source indépendant qui le prend en charge en tant qu'adaptateur de première partie. GitHub Copilot est une marque de GitHub, Inc. et Microsoft.

7. 07 Mes fichiers et identifiants sont-ils en sécurité ? +

   Oui — Open Design est local-first et Apache-2.0. Vos fichiers, artefacts et DESIGN.md restent dans votre propre dépôt, et vos identifiants GitHub Copilot sont utilisés directement par votre agent, jamais acheminés via les serveurs d'Open Design.