Que fait Codex, et que fait OpenDesign ?
Codex est l'agent : il lit votre brief, écrit et exécute le code, puis révise. OpenDesign est l'espace de travail qui l'entoure : design systems, skills, un aperçu, des commentaires et des fichiers versionnés. OpenDesign est un projet open source indépendant et n'est pas affilié à OpenAI.
De quoi ai-je besoin avant de commencer ?
L'application de bureau, une connexion Codex fonctionnelle pour le mode choisi et une petite tâche pour tester. Voir
compatibilité ; les exigences de compilation depuis les sources sont distinctes. Un design system aide ; choisissez-en un dans la bibliothèque si vous n'en avez pas.
J'ai déjà installé OpenDesign. Et maintenant ?
Suivez les instructions de connexion pour votre version installée et effectuez le petit test dans la
section configuration. Apportez ensuite un brief réel. Le
quickstart technique couvre le chemin d'exécution depuis les sources, distinct de celui-ci.
En quoi le plugin de design est-il différent de ce guide ?
Cette page explique le workflow UI. Le
répertoire de plugins vous aide à choisir des ressources ; la
page d'installation contient les instructions que votre agent doit suivre. Elles répondent à des besoins différents.
Où puis-je voir les autres agents ?
Le
hub des agents répertorie les guides d'agents disponibles. Claude Code, Cursor et OpenCode sont accessibles ci-dessus, dans la section des agents associés.
Comment éviter des designs Codex d'apparence générique ?
Donnez à Codex des références concrètes et des design tokens, énoncez les règles de marque dans les instructions de projet telles que AGENTS.md ou DESIGN.md, et vérifiez la page rendue aux points de rupture cibles. Une compétence de design frontend peut aussi fournir une direction visuelle plus réfléchie. Examinez vous-même le résultat ; les vérifications dans le navigateur ne remplacent pas le jugement en matière de design.
Codex peut-il créer une interface utilisateur à partir d'une capture d'écran ou d'une maquette Figma ?
Une capture d'écran peut servir de référence visuelle pour une implémentation. Les workflows Figma sont distincts : utilisez l'intégration Figma officielle lorsque vous avez besoin du contexte d'un fichier de design ou d'un aller-retour vers des cadres Figma modifiables. Ce guide se concentre sur l'examen d'une interface web rendue, et non sur la production d'un fichier de design vectoriel modifiable.
Comment donner un système de design à Codex ?
Fournissez les règles du système en matière de couleur, de typographie, d'espacement et de composants dans les instructions du projet telles que
DESIGN.md ou
AGENTS.md, et demandez à Codex de les suivre. OpenDesign dispose également d'une
bibliothèque de systèmes de design dans laquelle vous pouvez choisir avant de générer une interface.
Puis-je connecter Codex à Figma ?
Oui. L'intégration Figma d'OpenAI permet de travailler entre les maquettes Figma et le code. Configurez-la à l'aide de la
documentation Codex actuelle ; les commandes et les capacités exactes peuvent évoluer. Le workflow principal de cette page produit et vérifie du HTML, et non des fichiers Figma modifiables.
Que signifie BYOK lorsqu'on utilise Codex avec OpenDesign ?
Apportez votre propre clé signifie que vous authentifiez Codex avec votre propre compte OpenAI ou clé API, sous réserve des conditions de facturation et d'utilisation du mode que vous choisissez. OpenDesign ne fait pas office de proxy pour vos identifiants. Consultez la
section de compatibilité et les recommandations d'authentification actuelles d'OpenAI pour les détails qui s'appliquent à votre configuration.
Codex UI désigne-t-il l'application Codex ou une interface construite avec Codex ?
L'expression peut désigner soit l'application Codex d'OpenAI, soit une interface produit générée avec l'agent Codex. Cette page concerne la seconde : concevoir et réviser une interface web avec Codex.
Que dois-je vérifier avant de livrer une interface générée par Codex ?
Examinez l’interface rendue aux largeurs bureau et mobile, testez chaque interaction et chaque parcours clavier, vérifiez le focus et l’accessibilité, puis comparez le résultat avec le brief et les références. Un build réussi ou une vérification du navigateur effectuée par l’agent ne constitue qu’une première passe ; une personne doit vérifier l’artefact avant la remise.
Ce qu’OpenAI Codex est réellement (et ce qu’il n’est pas)
D’abord, une mise au point qui trompe presque toutes les personnes qui recherchent « Codex ». Le Codex original d’OpenAI était un modèle d’autocomplétion de code de 2021 qui alimentait les premières versions de GitHub Copilot et a été abandonné en 2023. Ce n’est pas le sujet de cette page. Le Codex d’aujourd’hui est l’outil de codage agentique d’OpenAI : il planifie, écrit, exécute et vérifie du code à partir de tâches en langage naturel.
Le Codex moderne est disponible sur quatre surfaces : une CLI de terminal (réécrite en Rust, sous licence Apache-2.0), une extension d’IDE pour VS Code, Cursor et Windsurf, une expérience cloud/web pour les tâches asynchrones déléguées, et une application de bureau avec un navigateur intégré et Computer Use.
Une deuxième mise au point, car les recherches de « Codex UI » se divisent en deux. L’une concerne l’interface propre à Codex : l’application de bureau et web qu’OpenAI fournit pour exécuter l’agent. L’autre, et c’est celle dont traite cette page, est l’interface utilisateur que vous construisez avec Codex : les composants, les mises en page et les écrans de votre produit.
Modèle par défaut : à la mi-2026, le modèle recommandé est gpt-5.5, gpt-5.4 étant le modèle qu’OpenAI a explicitement entraîné pour le frontend et l’usage de l’ordinateur.
Fichier d’instructions : Codex lit un fichier AGENTS.md dans votre projet (une norme multi-outils) pour les règles du projet, l’endroit naturel pour encoder vos conventions de design.
Bac à sable : il s’exécute dans un bac à sable au niveau du noyau (workspace-write par défaut), de sorte qu’un agent modifiant votre interface utilisateur ne peut pas s’aventurer en dehors du projet.
Moyen d’authentification : clé API OpenAI (BYOK) ou abonnement ChatGPT (Free / Go / Plus / Pro / Business / Enterprise)
Fournisseur : OpenAI
Licence de la CLI : Apache-2.0, open source
Pourquoi Codex est désormais performant en design
Trois choses ont convergé début 2026 pour faire de Codex un véritable outil de design plutôt qu’un générateur de code générique.
Un modèle entraîné pour le frontend : OpenAI a livré GPT-5.4, son premier modèle principal entraîné pour
le frontend et l’usage de l’ordinateur, avec une bien meilleure compréhension des images tout au long du workflow de design et une auto-vérification renforcée. Il peut même générer des moodboards et des options visuelles avant de s’engager sur les assets finaux.
Une compétence officielle de design frontend : le catalogue
openai/skills fournit une compétence de design frontend sélectionnée qui impose un vrai goût : des mises en page sans cartes, des héros en pleine page, une hiérarchie centrée sur la marque, des animations sobres, au plus deux polices et une couleur d’accent, et fait écrire à Codex une thèse visuelle avant de construire. Ajouter cette compétence de design frontend est l’intervention unique la plus rapide pour améliorer la sortie de Codex.
Vérification dans le navigateur : avec la compétence Playwright, Codex ouvre un vrai navigateur, se redimensionne aux breakpoints et compare sa sortie à la référence au lieu de simplement vérifier que le build passe.
Le goût vient de trois entrées que vous fournissez : un système de design, une compétence et de vraies images de référence.
La leçon derrière ces trois éléments : Codex n’a pas de goût par défaut. Il produit du bon design lorsque vous lui donnez des contraintes, un système de design, une compétence esthétique et des références concrètes. OpenDesign regroupe exactement ces entrées, ce qui explique pourquoi les deux vont de pair (plus bas).
Configurer Codex pour le travail de design, en partant de zéro
Voici le parcours complet depuis une machine propre jusqu’à un Codex capable de construire et de vérifier une UI.
Vous préférez une solution en un clic ?
Téléchargez l’application de bureau OpenDesign, elle intègre Codex avec une compétence sélectionnée et une bibliothèque de systèmes de design, donc vous choisissez Codex comme agent et commencez à concevoir sans aucune configuration CLI. Les étapes ci-dessous sont la voie manuelle si vous préférez configurer Codex vous-même.
La séquence d’installation : installer → s’authentifier → configurer AGENTS.md → installer la compétence frontend → activer la vérification dans le navigateur.
Encodez vos règles de design : placez vos tokens, primitives et conventions dans AGENTS.md ou un DESIGN.md et pointez Codex vers eux, afin que la sortie corresponde à une marque au lieu de tomber par défaut dans un rendu générique.
Choisissez le bon niveau de raisonnement : OpenAI note que les niveaux de raisonnement faible à moyen produisent souvent de meilleurs résultats frontend que le réglage le plus élevé.
Utilisez la section de configuration actuelle pour les commandes et les détails propres à la version, qui peuvent changer.
# 1. Installer la CLI Codex
npm install -g @openai/codex
# ou : brew install --cask codex
# ou : curl -fsSL https://chatgpt.com/codex/install.sh | sh
# 2. S’authentifier (connexion ChatGPT recommandée pour des limites plus élevées)
codex # puis choisissez « Se connecter avec ChatGPT »
# 3. Générer le contexte du projet
codex # dans votre projet, exécutez /init pour créer AGENTS.md
# 4. Ajouter la compétence frontend officielle, puis redémarrer Codex
# (dans l’application Codex) $skill-installer frontend-skill
# 5. Connecter le serveur MCP Figma (facultatif, pour la passation design)
codex mcp add figma --url https://mcp.figma.com/mcpExemple de commande historique issu du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.
Le workflow de la capture d'écran vers l'UI avec Codex
La boucle de conception la plus efficace avec Codex consiste à transformer une image de référence en une interface utilisateur réactive et fonctionnelle, puis à itérer jusqu'à ce qu'elle corresponde.
Les conseils d'OpenAI se résument en cinq étapes.
Partez des références visuelles les plus claires dont vous disposez, et incluez plusieurs états (desktop et mobile, survol, vide, chargement), pas seulement une image principale.
Soyez précis dans le prompt ; les prompts vagues produisent une interface générique.
Préparez un design system et indiquez à Codex où se trouvent les tokens et les primitives canoniques.
Activez la compétence interactive Playwright pour que Codex effectue le rendu dans un vrai navigateur et redimensionne aux points de rupture.
Itérez en demandant à Codex de comparer son implémentation avec les captures d'écran, pas simplement de confirmer que ça compile.
Fournissez des images en faisant glisser une capture d'écran dans le terminal ou avec le flag d'image, puis promptez avec des contraintes concrètes :
Lancez un serveur de développement dans un second terminal, gardez les prompts petits et ciblés, et committez les bonnes itérations / annulez les mauvaises (en informant Codex lorsque vous annulez) afin que chaque passe s'appuie sur une base propre.
codex -i reference-desktop.png -i reference-mobile.png \
"Implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens.
Match spacing, layout, and hierarchy; make it responsive.
Use the Playwright skill to verify the UI matches the
references and iterate until it does."Exemple de commande historique du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.
Design d'interface utilisateur avec Codex : des composants à un frontend livré
Codex construit l'interface utilisateur à partir de trois types d'entrées : une description écrite, une capture d'écran de référence ou une frame Figma. Avec un design system en contexte et la compétence Playwright activée, il produit des frontends réactifs basés sur des composants et vérifie son propre travail dans un vrai navigateur.
Transformer une capture d'écran en une page, c'est la démo ; livrer un vrai frontend, c'est le travail. Le travail de conception d'interface avec Codex devient bon quand vous le traitez comme la construction d'un système : des composants réutilisables, des mises en page réactives et chaque état d'interaction, pas une seule image principale. La compréhension d'image renforcée et l'auto-vérification de GPT-5.4 rendent cela pratique, mais la structure vient toujours de vous.
D'abord les composants : demandez à Codex de construire des composants atomiques et réutilisables (boutons, champs de saisie, cartes, navigation) en fonction de vos tokens avant de composer des pages entières, afin que le frontend reste cohérent plutôt que jetable.
Réactif par défaut : fournissez des références desktop et mobile et nommez les points de rupture ; demandez à Codex de redimensionner dans un vrai navigateur et de corriger les mises en page qui cassent, plutôt que de se fier à un seul viewport.
Chaque état d'interaction : spécifiez les états survol, focus, actif, vide, chargement et erreur, les états qui donnent à l'interface un aspect fini et que la sortie IA générique omet habituellement.
Balisage accessible : exigez du HTML sémantique, des contrôles étiquetés, des anneaux de focus visibles et un contraste adéquat, et demandez à Codex de les vérifier dans le cadre de la construction.
Demandez explicitement un composant et ses états, puis laissez Codex vérifier par rapport à la référence :
Le schéma qui sépare une bonne sortie frontend de la « bouillie IA » est la vérification : Codex effectue le rendu de l'interface, la compare à vos références sur différents points de rupture et itère, au lieu de simplement confirmer que la compilation passe.
codex "Build a responsive pricing section in React + Tailwind + TypeScript.
Reuse my design-system tokens and Button/Card components.
Include hover, focus, and mobile-stacked states.
Use the Playwright skill to check it against pricing-desktop.png
and pricing-mobile.png at 375px and 1280px, and iterate until it matches."
Exemple de commande historique du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.
Construire un système de design avec Codex
Un système de design est le plus grand levier sur la qualité du rendu, c'est ainsi que Codex connaît vos couleurs, échelle typographique, espacement et composants au lieu de se rabattre sur l'aspect générique Inter et violet. Donnez à Codex un système de design sur lequel construire et chaque écran qu'il produit hérite du même style.
Définir les tokens : Capturez la couleur, la typographie, l'espacement, le rayon et l'ombre sous forme de tokens nommés, le vocabulaire que Codex réutilise au lieu d'inventer des valeurs pour chaque écran.
Capturez les primitives : Indiquez à Codex vos composants canoniques (Button, Input, Card, Modal) afin qu'il compose à partir d'eux plutôt que de redessiner chacun d'eux.
Écrivez-le là où Codex le lit : Encodez les règles dans un AGENTS.md ou DESIGN.md que l'agent charge à chaque exécution : pas de cartes héro, au maximum deux polices, une couleur d'accent, hiérarchie centrée sur la marque.
Appliquez à chaque passage : Demandez à Codex de vérifier les nouvelles UI par rapport au système et de signaler les dérives, pour que le système de design reste réel au lieu de se dégrader après le premier écran.
Vous pouvez aussi travailler dans l'autre sens : donnez à Codex quelques écrans de référence et demandez-lui d'extraire un système de design de départ, tokens et primitives, que vous affinerez ensuite. Dans les deux cas, le système est l'artefact qui rend les résultats reproductibles.
Codex + Figma : les allers-retours entre design et code
En février 2026, OpenAI et Figma ont annoncé un
partenariat officiel, transformant la précédente bêta de Figma MCP en une intégration bidirectionnelle de premier ordre. Elle fonctionne dans les deux sens.
Design → Code : Copiez le « lien vers la sélection » d'un cadre dans Figma, collez-le dans Codex avec get_design_context, et demandez-lui d'implémenter le design en utilisant votre bibliothèque de composants existante.
Code → Design : L'outil generate_figma_design (« Code to Canvas ») transforme une UI live en cours d'exécution en cadres Figma modifiables, écran entier, élément sélectionné, ou fichier complet.
Le MCP Figma fonctionne comme un serveur distant et est exempt de limites de débit. Ajoutez-le une fois et il est disponible pour Codex,
Claude Code,
Cursor, VS Code, et plus encore, ce qui est exactement le type de capacité portable et multi-agents que OpenDesign est conçu pour orchestrer.
Codex, Cursor et Claude Code comparés pour le design
Il n'y a pas de gagnant 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 :
Codex — Forte finition visuelle après GPT-5.4 + frontend-skill ; compréhension des images — Constructions asynchrones déléguées, exécutions en bac à sable, règles AGENTS.md portables
Cursor — Boucle visuelle de construction et d'observation avec aperçu en direct et éditions en ligne — Travail d'itération et d'observation serré sur l'UI dans un IDE
Claude Code — Décisions de design spécifiques (hex, espacement, typographie) et UX consciente de la base de code — Raisonnement frontend et refactorisations à grand contexte
Le verdict récurrent de la communauté est que le goût vient des humains : les trois par défaut à une esthétique générique sans compétences, références et contraintes. C'est le vrai problème à résoudre, et il est en forme d'outil de design, pas en forme de modèle.
Agent — Force en design — Idéal pour
Plugins de design Codex comparés (y compris OpenDesign)
La capacité de design de Codex vient presque entièrement de ce que vous y branchez. Voici les principaux plugins et outils de design que vous pouvez utiliser avec Codex aujourd'hui, et où OpenDesign se situe parmi eux :
Plugin OpenAI Product Design — Le plugin de rôle d'OpenAI : explorer des directions, auditer les parcours utilisateur, prototyper à partir d'une URL live, rendre les captures d'écran interactives, exporter vers Figma ou Canva — Non — Tâches de design officielles rapides dans Codex
openai/skills frontend-skill — Une esthétique soignée, des mises en page sans cartes, une hiérarchie axée sur la marque, un mouvement retenu, une thèse visuelle avant de construire — Oui (Apache-2.0) — Améliorer la qualité brute de la sortie
Intégration Figma (MCP) — Figma ↔ code bidirectionnel : implémenter des frames en code, repousser une UI en cours d'exécution dans Figma éditable — Non (officiel) — Équipes qui vivent dans Figma
OpenDesign — Une couche de design ouverte et locale autour de Codex : compétence soignée + bibliothèque de design system, un pipeline de rendu, une UI de bureau, et BYOK — Oui (Apache-2.0) — Un vrai workflow de design portable que vous maîtrisez
Comment choisir : si vous voulez le flux de design d'OpenAI dans Codex, le plugin Product Design couvre l'exploration de directions, l'audit de flux et le prototypage à partir d'une URL live. Pour la qualité brute de la sortie, la
compétence de design frontend est l'ajout le plus efficace. L'
intégration Figma officielle est essentielle si votre équipe vit dans Figma, et elle est portable, vous pouvez donc l'associer à n'importe lequel des autres, y compris
Claude Code et
Cursor.
OpenDesign est la seule option qui soit open-source, locale et BYOK de bout en bout. Il enveloppe Codex dans une
compétence soignée et une
bibliothèque de design system, un pipeline de rendu structuré et une UI de bureau locale, de sorte que le contexte de design qui rend Codex bon est présent dès la première exécution, pas assemblé à la main à chaque projet, et chaque artefact reste dans votre propre dépôt.
Plugin / outil — Ce qu'il apporte — Open source — Idéal pour Codex pour les designers qui ne codent pas
Vous n’avez pas besoin d’être ingénieur pour concevoir avec Codex. L’agent part d’une intention en langage naturel et de vraies références, puis renvoie une UI fonctionnelle et responsive, ce qui en fait un véritable outil pour les designers et les profils produit, pas seulement pour les développeurs frontend. L’astuce est de le piloter comme un brief de design, pas comme une session de codage.
Décrivez en langage naturel : Exprimez ce que vous voulez en termes de design, mise en page, hiérarchie, ton, ressenti, et laissez Codex le traduire en balisage.
Partez de références : Ajoutez des captures d’écran, un moodboard ou le site d’une marque ; des références concrètes valent mieux que n’importe quelle quantité de prose pour obtenir le bon rendu.
Prévisualisez dans un vrai navigateur : Laissez Codex générer et ouvrir le résultat pour que vous le jugiez à l’œil, le redimensionniez et signaliez ce qui ne va pas.
Itérez et revenez en arrière en toute sécurité : L’agent s’exécute en sandbox, vous pouvez donc essayer une direction, garder les bonnes passes et annuler les mauvaises sans rien casser.
Écueils, et comment éviter l’aspect « AI slop »
La plainte la plus fréquente à propos du design généré par Codex est qu’il paraît générique : dégradés doux, panneaux flottants, coins arrondis surdimensionnés, ombres spectaculaires, une ambiance Inter et violette qui « crie qu’une IA a fait ça ». D’autres problèmes signalés incluent des mises en page mobiles cassées, des instructions qui fuient dans le texte de l’UI et des limites d’utilisation atteintes rapidement.
Installez une compétence frontend : Une compétence esthétique sélectionnée avec soin force Codex à s’engager dans une vraie direction plutôt que dans le rendu par défaut.
Activez la vérification Playwright : Faites en sorte que Codex génère et s’auto-vérifie sur plusieurs breakpoints afin que les mises en page ne se cassent pas silencieusement sur mobile.
Fournissez des tokens et des références : De vrais design tokens et des captures d’écran de référence sont le plus grand levier sur la qualité du rendu.
Inscrivez les règles dans AGENTS.md : Placez des règles de style du type « pas de hero cards, deux polices maximum, hiérarchie donnant la priorité à la marque » là où l’agent les lit à chaque exécution.
Remarquez que chaque mesure d’atténuation consiste à donner à l’agent un contexte de design sélectionné avec soin. Maintenir ce contexte à la main, projet par projet, est le labeur que OpenDesign supprime.
BYOK : votre clé OpenAI, votre offre ChatGPT, vos limites
Codex fonctionne en mode BYOK (apportez votre propre clé) : vous vous authentifiez avec votre propre clé d'API OpenAI ou votre abonnement ChatGPT, et vos identifiants vous appartiennent. Cela compte pour le contrôle des coûts comme pour la confidentialité : rien de votre clé ni de votre travail n'a besoin de transiter par un tiers.
Clé d'API OpenAI (BYOK) — Paiement à l'usage par token — Contrôle précis des coûts, automatisation et CI
Abonnement ChatGPT — Inclus dans Plus / Pro / Business / Enterprise — Des limites plus élevées et plus prévisibles pour le design interactif au quotidien
Choisissez le bon niveau de raisonnement : OpenAI indique qu'un raisonnement faible à moyen donne souvent de meilleurs résultats frontend que le réglage le plus élevé, pour un coût moindre.
Gardez des prompts courts et ciblés : des tâches brèves et précises consomment moins de tokens et produisent des diffs plus propres qu'un seul prompt géant.
Commitez les bonnes itérations : conservez les passes qui fonctionnent et annulez les autres, pour ne pas payer la régénération d'une base propre à chaque fois.
Option — Mode de facturation — Idéal pour
Concevoir avec Codex dans OpenDesign
OpenDesign est la couche de design open source que le workflow ci-dessus ne cesse de réclamer. Il traite Codex comme un adaptateur de première partie et l'enveloppe dans une bibliothèque organisée de skills et de design systems, un pipeline de rendu structuré et une interface de bureau locale, afin que le contexte de design qui rend Codex performant soit présent dès le premier lancement, au lieu d'être assemblé à la main à chaque fois.
L'application de bureau OpenDesign : choisissez un plugin, décrivez ce que vous voulez, et Codex le construit, sans ligne de commande.
Authentifiez-vous avec votre clé d'API OpenAI (BYOK) ou votre abonnement ChatGPT ; les identifiants restent sur votre machine et ne passent jamais par nos serveurs.
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.
Chaque artefact et fichier DESIGN.md vit dans votre propre dépôt, et non dans un cloud hébergé.
Codex déploie OpenDesign en local et l'ouvre dans son navigateur intégré, puis pilote le canvas depuis là.
Le même agent Codex, la même clé, plus un véritable workflow de design portable et open source autour. Il est local-first et sous Apache-2.0, donc rien de votre travail ni de vos identifiants ne quitte votre machine.
Un résultat réel d'une session Codex + OpenDesign : des présentations, des landing pages et une vidéo rendue, le tout enregistré dans votre propre dépôt.
Installez OpenDesign et sélectionnez Codex comme agent.
OpenDesign est-il affilié à OpenAI ?
Non. Codex est un produit d’OpenAI ; OpenDesign est un projet open source indépendant qui le prend en charge en tant qu’adaptateur first-party.
Codex 
OpenDesign 
