POUR ALLER PLUS LOIN
Pour aller plus loin avec Copilot
Tutoriels, documentation et présentations pour concevoir avec Copilot, tels que répertoriés dans le guide publié.
Copilot 
OpenDesign Concevoir avec
Copilot dans
OpenDesign.
Comment concevoir des interfaces avec GitHub Copilot CLI dans OpenDesign : une capture d’écran comme point de départ, les composants de votre dépôt réutilisés, une tâche de page de lancement du brief au fichier validé, et les limites à connaître avant de commencer.
Du brief à l'interface01 / Copilot
VOUS APPORTEZ L'IDÉE↗
« Une page de lancement créée à partir
de la capture d'écran, avec nos composants. »
TROIS ENTRÉES DANS CE GUIDE COPILOT
Choisissez par où commencer avec Copilot
CE GUIDE · CONCEPTION D'INTERFACE
Construisez une interface produit avec Copilot
Ce guide : brief, références, règles de conception et un résultat HTML révisé.
Lire ce guide CONFIGURATIONConfigurez Copilot depuis zéro
Voici le parcours complet, d’une machine vierge à un Copilot CLI capable de construire et de vérifier une UI.
Accéder à la configuration COMPARAISONComparez Copilot à d’autres agents
En quoi Copilot diffère de Codex, Claude Code, Cursor pour le travail de design, et quand choisir un autre workflow.
Voir la comparaisonSur cette page Exemple
Une tâche de design Copilot complète
Une tâche de design Copilot, du brief à l’interface
Une seule tâche, montrée de bout en bout : le brief et les contraintes que vous transmettez, l’artifact qui en résulte, et les vérifications que vous effectuez encore avant que ce soit terminé. L’interface ci-dessous est un exemple illustratif conçu pour cette page, pas l’enregistrement d’une exécution Copilot réelle.
1Brief de conception et contraintes
BriefConcevez la landing page de lancement d’un produit CLI à partir de la capture d’écran jointe d’une page concurrente : hero avec commande d’installation, trois blocs de fonctionnalités et éléments de preuve. Réutilisez les composants du dépôt. Desktop et téléphone.
- Design systemComposants et tokens du dépôt ; Albert Sans, un accent vert
- Points de rupture1440px pour le bureau et 390px pour le mobile, sans défilement horizontal
- InteractionsCopier la commande d’installation, CTA principal et secondaire, navigation par ancres
- SortieUn fichier HTML autonome avec des points d'ancrage
data-od-idstables
2Répartition du travail : vous, Copilot et OpenDesign
- Vous
Rédigez le brief, sélectionnez le système de conception et définissez les critères d'acceptation.
- Copilot
Planifie la mise en page, écrit le HTML, le CSS et le JavaScript et le révise sur demande.
- OpenDesign
Fournit le système de conception et le skill, génère l'aperçu et enregistre chaque version comme un fichier dans le projet.
- Révision
La hiérarchie visuelle, l'espacement sur la grille de 8px, les deux points de rupture et chaque interaction sont vérifiés avant la remise.
3Artefact Copilot : la page de lancement en 1440px et 390px
4Vérification avant transmission
Mise en page
Grille et espacement
Le hero, les fonctionnalités et la preuve partagent la grille de 8px ; la colonne visuelle ne repousse jamais le texte sous la ligne de flottaison.
Hiérarchie
Hiérarchie visuelle
Titre, commande d’installation, puis fonctionnalités ; l’accent marque uniquement le bouton d’installation.
Réactif
Mise en page mobile
Le texte d’abord, le visuel ensuite, les fonctionnalités empilées ; la commande d’installation reste copiable.
Interaction
Vérifications d'interaction
Copiez la commande, suivez les deux CTA, accédez à une ancre de fonctionnalité.
Adéquation
Quand Copilot convient à la tâche, et quand il ne convient pas
Copilot convient quand
- Capture d'écran → UI. Choisissez un modèle multimodal performant et transformez une image de référence en balisage responsive, puis vérifiez le résultat par rapport à celle-ci.
- Choix multi-modèles. Basculez entre les modèles de pointe d'Anthropic, OpenAI et Google selon la tâche avec /model, tout cela avec votre abonnement Copilot.
- Instructions + MCP. Les instructions personnalisées et AGENTS.md véhiculent vos conventions ; le serveur MCP Figma apporte un contexte de design réel dans le code.
- Intégration GitHub approfondie. Serveur MCP GitHub intégré et accès à vos dépôts, issues et PR, authentifié avec votre compte GitHub existant.
Choisissez un autre workflow quand
- Vous avez besoin de fichiers vectoriels modifiables. Le livrable est du HTML, pas un document de design modifiable. Vérifiez un workflow vectoriel distinct pour le format d'asset requis.
- Vous n'avez ni référence ni contrainte. Sans design system ni exemples, le résultat tend vers un aspect générique ; rédigez d'abord le brief.
- Vous ne disposez pas des identifiants requis pour cet agent. Requis : abonnement GitHub Copilot. OpenDesign ne fournit ni ne relaie d'identifiants.
- Votre équipe travaille dans Codex ou Claude Code. Ces agents ont leurs propres pages ; l'espace de travail est le même, la configuration diffère. Voir agents associés.
Compatibilité
Prérequis pour Copilot avant de commencer
Ce guide couvre Copilot tel que connecté via l'application de bureau OpenDesign. Références publiées vérifiées le 6 septembre 2026.
Portée de l'outilCopilot, par GitHub
GitHub Copilot CLI est l'agent de code natif du terminal de GitHub, propulsé par le même moteur agentique que Copilot coding agent. Il lit votre base de code, modifie des fichiers, exécute des commandes et travaille avec vos issues, PR et dépôts GitHub. Cette page traite de la conception d'interfaces avec Copilot via OpenDesign, pas de l'interface propre de Copilot. Les notes de configuration d'OpenDesign répertorient les agents disponibles.
Comptes et authentificationAbonnement GitHub Copilot
Abonnement GitHub Copilot. Authentifiez-vous avec votre abonnement GitHub Copilot — les identifiants restent sur votre machine. Cette page ne garantit ni quota ni prix.
Système et versionsApplication de bureau ou source
Consultez la page de téléchargement pour les builds de bureau. Les exigences Node.js et pnpm du guide de démarrage rapide source s'appliquent à l'exécution depuis les sources, pas à l'installation d'un package de bureau. Version minimale compatible de Copilot : non vérifiée ici.
Vérification de la connexionLe signal de réussite
Suivez les instructions de connexion affichées par votre version installée, puis exécutez une petite tâche. Confirmez que Copilot l'a traitée et que l'artefact s'ouvre. Un simple téléchargement n'établit pas une connexion fonctionnelle.
Commencez par l’application de bureau
Configuration de Copilot en trois étapes
Téléchargez d'abord, terminez la configuration de Copilot pour votre version installée, puis vérifiez un petit résultat. Vous n'avez pas besoin de compiler OpenDesign depuis les sources pour suivre cette voie.
- 1
Téléchargez l’application de bureau OpenDesign
Choisissez le paquet adapté à votre ordinateur, installez-le et ouvrez l’application.
Télécharger OpenDesignPOINT DE CONTRÔLEL'application de bureau s'ouvre. Déjà installée ? Passez à l'étape suivante ; il n'est pas nécessaire de la télécharger à nouveau. - 2
Préparez votre connexion Copilot
Suivez les instructions Copilot de votre version installée. Authentifiez-vous avec votre abonnement GitHub Copilot — les identifiants restent sur votre machine.
Utiliser GitHub Copilot CLI# 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 inExtrait des notes de configuration Copilot du guide publié ; vérifiez la documentation du fournisseur pour la commande actuelle.
POINT DE CONTRÔLEConfirmez l'agent et le compte prévus. S'il n'est pas disponible, vérifiez la compatibilité avant de tenter une tâche plus importante. - 3
Exécutez une petite tâche Copilot
Utilisez un petit brief afin de pouvoir juger l’ensemble du cycle, y compris une révision.
Brief de démarrageCréez un écran de paramètres avec un formulaire de profil et une confirmation d'enregistrement. Utilisez mes règles de design. Vérifiez-le aux largeurs bureau et mobile.
POINT DE CONTRÔLEOuvrez le résultat, testez l'état de sauvegarde et demandez une modification précise. Un fichier généré est le début de la revue, pas la fin.
Pour exécuter OpenDesign depuis les sources, suivez plutôt le guide de démarrage technique.
Le workflow de design Copilot
Le workflow de design Copilot en cinq étapes
La même tâche de page de lancement, suivie du brief au fichier vérifié. Chaque étape indique ce que vous fournissez, ce que fait Copilot, ce qu'apporte OpenDesign et ce que vous vérifiez.
- 1
Brief de design
Langage simple, trois à six lignes. Nommez l'audience, la fonction de l'écran et les plateformes.
- VousRédigez le brief ; joignez une capture d'écran de référence si vous en avez une.
- CopilotLit le brief et le fichier d’instructions du projet ; pose des questions en cas d’ambiguïté.
- OpenDesignFournit le projet, la surface de prompt et le skill correspondant au type d'artefact.
- VérificationConfirmez que le brief énonce les critères d'acceptation. Les ajouter maintenant coûte moins cher qu'après la génération.
- 2
Contraintes de design
Un design system et quelques règles strictes. C'est ce qui distingue un résultat conforme à votre marque d'un rendu générique.
- VousChoisissez un design system ; indiquez les points de rupture et les composants à utiliser obligatoirement.
- CopilotCharge les tokens et les règles de posture de DESIGN.md dans le contexte avant d’écrire une seule ligne.
- OpenDesignFournit la bibliothèque de design systems et associe celui choisi au modèle du skill.
- VérificationLes tokens correspondent à votre marque. Un accent unique, les bonnes polices, le bon rayon.
- 3
Générer l'interface
Copilot rédige un fichier HTML autonome : mise en page, styles, interactions et points d’ancrage stables.
- VousAttendez, ou répondez à une question de clarification. Rien à configurer.
- CopilotPlanifie les sections, écrit le HTML, le CSS et le JavaScript, exécute le fichier et corrige ce qui échoue.
- OpenDesignEnregistre l'artefact dans le dossier du projet et l'indexe pour l'aperçu.
- VérificationRien pour l'instant. Jugez le fichier une fois rendu, pas depuis la source.
- 4
Aperçu
Le fichier s'affiche dans OpenDesign aux largeurs que vous avez demandées. C'est ici que le design est évalué.
- VousChangez de largeur, parcourez les interactions, laissez des commentaires sur les éléments.
- CopilotLit vos commentaires sur l’aperçu et prépare la révision suivante.
- OpenDesignAffiche l'aperçu, expose des cibles
data-od-idpour les commentaires et les modifications. - VérificationHiérarchie, contraste, débordement à 390px, états de focus, et si l'accent est utilisé avec parcimonie.
- 5
Réviser et vérifier
Demandez des modifications en pointant les éléments dans l'aperçu. Chaque révision est un nouveau fichier ; rien n'est écrasé silencieusement.
- VousTransformez les commentaires en demandes ; décidez quand la tâche est terminée.
- CopilotApplique les modifications sur place et réexécute le fichier.
- OpenDesignConserve les versions côte à côte ; exporte une image ou le HTML une fois terminé.
- VérificationRevérifiez uniquement la zone modifiée, puis toute la page une fois à chaque point de rupture.
Ressources
Ressources de conception Copilot
Skills Parcourir les skills Systèmes de design Parcourir les systèmes Modèles Parcourir les modèles
Skills de design
Les types de production que Copilot peut produire dans OpenDesign, un skill par type.
Design systems
Tokens de marque et composants à relier avant que Copilot ne génère quoi que ce soit.
Modèles
Points de départ pour des présentations, des pages d'atterrissage et des écrans produit.
Limites
Limites de Copilot, vérifications manuelles et solutions de repli
- PortéeIl lit automatiquement les fichiers d’instructions personnalisés et AGENTS.md, et vous permet de basculer entre les modèles de pointe d’Anthropic, OpenAI et Google selon la tâche. Cette page traite de Copilot en tant qu’agent connecté à OpenDesign, pas de l’ensemble des fonctionnalités de Copilot.
- Limites d’utilisationLes limites d’utilisation et les coûts dépendent des identifiants que vous utilisez (abonnement GitHub Copilot). Cette page ne fait aucune affirmation concernant les quotas gratuits.
- RéseauDes fichiers de projet locaux ne signifient pas une inférence hors ligne. Vérifiez les paramètres du fournisseur et les politiques de données de votre agent avant de partager des informations sensibles.
- La sortie est en HTMLLes artefacts sont des fichiers HTML, pas des fichiers de design vectoriels.
- Revue manuelleL'accessibilité, le contenu réel, l'adéquation à la marque et la justesse des interactions sont vérifiés par vous dans l'aperçu. Considérez toute autovérification de l'agent comme une première passe.
- Solution de repliSi l'agent est indisponible ou qu'une tâche échoue, vérifiez les instructions de connexion et l'authentification de la version installée. Conservez l'erreur et le dernier artefact fonctionnel avant de modifier la configuration.
FAQ
Questions fréquentes sur Copilot et OpenDesign
GitHub Copilot CLI peut-il vraiment faire du travail de conception ?
Oui — avec un skill esthétique, un design system et de véritables images de référence dans le contexte, Copilot CLI produit une UI responsive de qualité production, et vous pouvez choisir le modèle qui vérifie le mieux le résultat par rapport aux références. Sans ce contexte, il tend à revenir à un rendu générique, ce qui est précisément le vide qu’OpenDesign combine.
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) ; ce n’est pas un système bring-your-own-key. Vous vous authentifiez avec votre compte GitHub. OpenDesign ne fait jamais transiter vos identifiants par un proxy — votre abonnement est utilisé directement par votre agent.
Qu’est-ce qui rend Copilot CLI particulièrement adapté à la conception ?
Deux choses : il lit automatiquement les instructions du dépôt et AGENTS.md, si bien que vos conventions de conception se déplacent avec le dépôt ; et il vous permet de basculer entre les modèles de pointe d’Anthropic, OpenAI et Google selon la tâche. Les deux aident — mais le goût vient toujours du design system, du skill et des références que vous fournissez.
Copilot CLI ou Claude Code pour la conception frontend ?
Les deux sont solides. Claude Code est réputé pour des décisions de design précises et sensibles au codebase ; l'atout de Copilot CLI est le choix du modèle parmi plusieurs fournisseurs et une intégration GitHub poussée sur un abonnement que vous avez peut-être déjà. Beaucoup d'équipes utilisent les deux — OpenDesign vous permet de changer d'agent sans changer votre workflow de conception.
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 le contexte de design réel — composants, variables, données de mise en page — afin que le code généré corresponde à la source au lieu de l’approximer.
Démarrer une première tâche de design avec Copilot
Commencez par une petite tâche, évaluez l'aller-retour, puis apportez le véritable brief. Choisissez l'option correspondant à votre configuration ; la page ne la détecte pas.