Codex pour le design : créer des UI avec OpenAI Codex

Ce qu’est réellement OpenAI Codex (et ce qu’il n’est pas)

D’abord, une mise au point qui désarçonne presque tous ceux qui cherchent « Codex ». Le Codex d’OpenAI d’origine était un modèle de complétion de code de 2021 qui propulsait les premiers GitHub Copilot et a été déprécié en 2023. Ce n’est pas le sujet de cette page. Le Codex d’aujourd’hui est l’outil de code agentique d’OpenAI, il planifie, écrit, exécute et vérifie du code à partir de tâches en langage naturel.

Le Codex moderne se décline sur quatre surfaces : une CLI en terminal (réécrite en Rust, sous licence Apache-2.0), une extension IDE pour VS Code, Cursor et Windsurf, une expérience cloud/web pour les tâches async déléguées, et une application desktop avec un navigateur intégré et Computer Use.

• 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 (un standard inter-outils) pour les règles de projet, l’endroit naturel pour encoder vos conventions de design.
• Sandbox: Il s’exécute dans un sandbox au niveau noyau (workspace-write par défaut), de sorte qu’un agent qui modifie votre UI ne peut pas sortir du projet.

• Éditeur : OpenAI
• Identifiant : clé API OpenAI (BYOK) ou abonnement ChatGPT (Free / Go / Plus / Pro / Business / Enterprise)
• Licence de la CLI : Apache-2.0, open source

Pourquoi Codex est bon en design désormais

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 mainline entraîné pour le frontend et l’usage de l’ordinateur, avec une bien meilleure compréhension d’images tout au long du workflow de design et une auto-vérification renforcée. Il peut même générer des mood boards et des options visuelles avant de s’engager sur les assets finaux.
• Un frontend design skill officiel: Le catalogue openai/skills propose un frontend design skill soigneusement sélectionné qui impose un vrai goût : des mises en page sans cartes, des heros pleine largeur, une hiérarchie centrée sur la marque, des animations sobres, deux polices au maximum et une seule couleur d'accent, et il oblige Codex à rédiger une thèse visuelle avant de construire. Ajouter ce frontend design skill est le levier unique le plus rapide pour améliorer les résultats de Codex.
• La vérification en navigateur: Avec la skill Playwright, Codex ouvre un vrai navigateur, redimensionne aux breakpoints et compare ses sorties à la référence au lieu de simplement vérifier que le build passe.

La leçon derrière ces trois points : Codex n’a pas de goût par défaut. Il produit de bons designs quand vous lui donnez des contraintes, un design system, une skill esthétique et des références concrètes. Open Design empaquette précisément ces entrées, et c’est pourquoi les deux s’accordent (plus de détails ci-dessous).

Configurer Codex pour le design, à partir de zéro

Voici le parcours complet, d’une machine vierge à un Codex capable de construire et de vérifier des UI.

Vous préférez la voie en un clic ? Téléchargez l'application de bureau Open Design, elle regroupe Codex avec une bibliothèque de skill et de design system soigneusement sélectionnée, si bien qu'il vous suffit de choisir Codex comme agent pour commencer à concevoir, sans aucune configuration de CLI. Les étapes ci-dessous constituent la voie manuelle si vous préférez brancher Codex vous-même.

# 1. Installer le Codex CLI
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 choisir “Sign in with ChatGPT”

# 3. Générer le contexte du projet
codex            # dans votre projet, lancez /init pour créer AGENTS.md

# 4. Ajouter le skill frontend officiel, puis redémarrer Codex
# (dans l'app Codex) $skill-installer frontend-skill

# 5. Brancher le serveur MCP Figma (optionnel, pour le handoff design)
codex mcp add figma --url https://mcp.figma.com/mcp

• Encodez vos règles de design: Mettez vos tokens, primitives et conventions dans AGENTS.md ou un DESIGN.md et orientez Codex vers eux, pour que les sorties correspondent à une marque au lieu de retomber sur un rendu générique.
• Choisissez le bon niveau de raisonnement: OpenAI note que les niveaux de raisonnement faibles à moyens produisent souvent de meilleurs résultats frontend que le réglage le plus élevé.

Le workflow capture-vers-UI

La boucle de design la plus efficace avec Codex consiste à transformer une image de référence en une UI fonctionnelle et responsive, puis à itérer jusqu’à ce qu’elle corresponde. Les recommandations d’OpenAI elles-mêmes se résument à cinq étapes.

1. Partez des références visuelles les plus claires dont vous disposez, et incluez plusieurs états (desktop et mobile, survol, vide, chargement), pas seulement un visuel héros.
2. Soyez précis dans le prompt ; des prompts vagues produisent une UI générique.
3. Préparez un design system et indiquez à Codex où se trouvent les tokens et les primitives canoniques.
4. Activez la skill interactive Playwright pour que Codex rende dans un vrai navigateur et redimensionne aux breakpoints.
5. Itérez en faisant comparer à Codex son implémentation avec les captures, au lieu de simplement confirmer que ça build.

Fournissez les images en glissant une capture dans le terminal ou via le flag image, puis formulez le prompt avec des contraintes concrètes :

codex -i reference-desktop.png -i reference-mobile.png \
  "Implémente ce design en React + Vite + Tailwind + TypeScript.
   Réutilise mes composants et tokens de design system existants.
   Respecte les espacements, la mise en page et la hiérarchie ; rends-le responsive.
   Utilise le skill Playwright pour vérifier que l'UI correspond aux
   références et itère jusqu'à ce que ce soit le cas."

Faites tourner un serveur de dev dans un second terminal, gardez des prompts courts et ciblés, committez les bonnes itérations / annulez les mauvaises (en prévenant Codex quand vous revenez en arrière) pour que chaque passe parte d’une base propre.

Codex pour le frontend et le design d’UI

Transformer une capture en une page, c’est la démo ; livrer un vrai frontend, c’est le travail. Le travail de design d’UI avec Codex devient bon quand vous le traitez comme la construction d’un système, des composants réutilisables, des mises en page responsives et chaque état d’interaction, et non comme un unique visuel héros. La meilleure compréhension d’images et l’auto-vérification de GPT-5.4 rendent cela réalisable, mais la structure, c’est toujours vous qui l’apportez.

• Les composants d’abord: Demandez à Codex de construire des composants atomiques et réutilisables (boutons, champs, cartes, navigation) à partir de vos tokens avant d’assembler des pages entières, pour que le frontend reste cohérent au lieu d’être bricolé au cas par cas.
• Responsive par défaut: Fournissez des références desktop et mobile et nommez les breakpoints ; faites redimensionner Codex dans un vrai navigateur et corriger les mises en page qui cassent, plutôt que de vous fier à une seule fenêtre d’affichage.
• Chaque état d’interaction: Détaillez les états survol, focus, actif, vide, chargement et erreur, les états qui donnent à une UI un air abouti et que les sorties d’IA génériques négligent le plus souvent.
• Un balisage accessible: Exigez du HTML sémantique, des contrôles étiquetés, des anneaux de focus visibles et un contraste suffisant, et demandez à Codex de les vérifier dans le cadre du build.

Formulez explicitement le prompt pour un composant et ses états, puis laissez Codex vérifier par rapport à la référence :

codex "Construis une section de tarification responsive en React + Tailwind + TypeScript.
   Réutilise les tokens de mon design system et mes composants Button/Card.
   Inclus les états survol, focus et empilé sur mobile.
   Utilise la skill Playwright pour la comparer à pricing-desktop.png
   et pricing-mobile.png à 375px et 1280px, et itère jusqu’à ce qu’elle corresponde."

Le motif qui distingue un bon frontend du « AI slop », c’est la vérification : Codex rend l’UI, la compare à vos références sur les différents breakpoints, et itère, au lieu de seulement confirmer que le build passe.

Construire un design system avec Codex

Un design system est le plus grand levier sur la qualité des sorties, c’est ainsi que Codex connaît vos couleurs, votre échelle typographique, vos espacements et vos composants au lieu de retomber sur le rendu générique Inter-et-violet. Donnez à Codex un design system sur lequel s’appuyer et chaque écran qu’il produit hérite du même goût.

• Définissez des tokens: Capturez la couleur, la typographie, les espacements, les rayons et les ombres sous forme de tokens nommés, le vocabulaire que Codex réutilise au lieu d’inventer des valeurs écran par écran.
• Capturez les primitives: Orientez Codex vers vos composants canoniques (Button, Input, Card, Modal) pour qu’il compose à partir d’eux au lieu de les redessiner un par un.
• Écrivez-le là où Codex le lit: Encodez les règles dans un fichier AGENTS.md ou DESIGN.md que l’agent charge à chaque exécution : pas de hero cards, deux familles typographiques au maximum, une seule couleur d’accent, une hiérarchie qui met la marque d’abord.
• Faites respecter à chaque passe: Demandez à Codex de vérifier chaque nouvelle UI par rapport au système et de signaler les écarts, pour que le design system reste réel au lieu de se déliter après le premier écran.

Vous pouvez aussi travailler dans l’autre sens : confiez à Codex quelques écrans de référence et demandez-lui d’en extraire un design system de départ, tokens et primitives, que vous affinez ensuite. Dans les deux cas, le système est l’artefact qui rend les résultats reproductibles.

Codex + Figma : aller-retour design ↔ code

En février 2026, OpenAI et Figma ont annoncé un partenariat officiel, transformant la précédente bêta du Figma MCP en une intégration bidirectionnelle de premier ordre. Elle fonctionne dans les deux sens.

• Design → Code: Copiez le « link to selection » d’une frame dans Figma, collez-le dans Codex avec get_design_context, et demandez-lui d’implémenter la maquette avec votre bibliothèque de composants existante.
• Code → Design: L’outil generate_figma_design (« Code to Canvas ») retransforme une UI en cours d’exécution en frames Figma éditables, écran entier, élément sélectionné ou fichier complet.

Le Figma MCP s’exécute comme un serveur distant et est exempté des limites de débit. Ajoutez-le une fois et il est disponible pour Codex, Claude Code, Cursor, VS Code et plus encore, exactement le genre de capacité portable et multi-agent qu’Open Design est conçu pour orchestrer.

Codex vs Cursor vs Claude Code 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é équilibré :

Le verdict récurrent de la communauté est que le goût vient des humains : les trois 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.

Comparatif des plugins de design pour Codex (Open Design inclus)

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ù Open Design se situe parmi eux :

Comment choisir : si vous voulez le flux de design maison d'OpenAI dans Codex, le Product Design plugin couvre l'exploration de directions, l'audit des parcours et le prototypage à partir d'une URL en direct. Pour la qualité brute des sorties, la frontend design skill est l'ajout au plus fort levier. L'intégration Figma officielle est essentielle si votre équipe vit dans Figma, et elle est portable, vous pouvez donc l'associer à n'importe quel autre, y compris Claude Code et Cursor.

Open Design est la seule option qui soit open source, local-first et BYOK de bout en bout. Elle enveloppe Codex dans une skill et une bibliothèque de systèmes de design soignées, un pipeline de rendu structuré et une UI de bureau locale, ainsi le contexte de design qui rend Codex performant est là dès la première exécution, sans avoir à l'assembler à la main dans chaque projet, et chaque artefact reste dans votre propre dépôt.

Codex pour les designers qui ne codent pas

Vous n’avez pas besoin d’être ingénieur pour concevoir avec Codex. L’agent prend une intention en langage courant et de vraies références, et renvoie une UI fonctionnelle et responsive, ce qui en fait un véritable outil pour les designers et les personnes produit, et pas seulement pour les développeurs frontend. L’astuce est de le piloter comme un brief de design, pas comme une session de code.

• Décrivez en langage courant: Dites ce que vous voulez en termes de design, mise en page, hiérarchie, ton, ressenti, et laissez Codex le traduire en balisage.
• Travaillez à partir de références: Glissez 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 rendre et ouvrir le résultat pour que vous le jugiez de vos propres yeux, le redimensionniez et pointiez 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.

Les pièges, et comment éviter le rendu « AI slop »

La critique la plus fréquente à l’égard du design généré par Codex est qu’il a l’air générique, dégradés doux, panneaux flottants, coins arrondis surdimensionnés, ombres spectaculaires, une ambiance Inter-et-violet qui « crie qu’une IA a fait ça ». Parmi les autres problèmes signalés : des mises en page mobiles cassées, des instructions qui fuient dans les textes de l’UI et des limites d’usage atteintes rapidement.

• Installez une skill frontend: Une skill esthétique organisée force Codex à s’engager sur une vraie direction au lieu du rendu par défaut.
• Activez la vérification Playwright: Faites en sorte que Codex rende et se contrôle lui-même sur les différents breakpoints pour que les mises en page ne cassent pas en silence sur mobile.
• Fournissez tokens et références: De vrais tokens de design et des captures de référence sont le plus grand levier sur la qualité des sorties.
• Encodez les règles dans AGENTS.md: Mettez des règles de style comme « pas de hero cards, deux familles typographiques au maximum, hiérarchie qui met la marque d’abord » là où l’agent les lit à chaque exécution.

Remarquez que chaque parade revient à donner à l’agent un contexte de design organisé. Maintenir ce contexte à la main, projet par projet, est le labeur qu’Open Design supprime.

BYOK : votre clé OpenAI, votre formule ChatGPT, vos limites

Codex fonctionne en bring-your-own-key (BYOK) : vous vous authentifiez avec votre propre clé API OpenAI ou votre abonnement ChatGPT, et vos identifiants vous appartiennent. C’est important pour le contrôle des coûts et pour la confidentialité, rien concernant votre clé ou votre travail n’a à transiter par un tiers.

• Choisissez le bon niveau de raisonnement: OpenAI note qu’un raisonnement faible à moyen donne souvent de meilleurs résultats frontend que le réglage le plus élevé, et coûte moins cher.
• Gardez des prompts courts et ciblés: Des tâches courtes et précises consomment moins de tokens et produisent des diffs plus propres qu’un unique prompt géant.
• Committez les bonnes itérations: Enregistrez les passes qui fonctionnent et annulez le reste, pour ne pas payer à regénérer une base propre à chaque fois.

Concevoir avec Codex dans Open Design

Open Design 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’entoure d’une bibliothèque organisée de skills et de design systems, d’un pipeline de rendu structuré et d’une UI desktop locale, pour que le contexte de design qui rend Codex bon soit présent dès la première exécution, et non assemblé à la main à chaque fois.

1. Installez Open Design et sélectionnez Codex comme agent.
2. Authentifiez-vous avec votre clé API OpenAI (BYOK) ou votre abonnement ChatGPT, les identifiants restent sur votre machine et ne transitent jamais par nos serveurs.
3. Choisissez un design system et une skill, puis générez des decks, 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, pas dans un cloud hébergé.

Le même agent Codex, la même clé, auxquels s’ajoute un véritable workflow de design open source, portable, autour de lui. C’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 OpenAI Codex peut-il vraiment faire du travail de design ? +

   Oui, avec une skill frontend, un design system et de vraies images de référence dans le contexte, Codex (surtout sur GPT-5.4) produit une UI responsive de qualité production et peut la vérifier dans un navigateur. Sans ce contexte, il a tendance à retomber sur un rendu générique, et c’est l’écart que comble Open Design.

2. 02 S’agit-il du plugin Product Design d’OpenAI Codex ? +

   Non. Open Design est un projet open source indépendant qui intègre Codex comme agent. Il complète l’outillage propre d’OpenAI avec une bibliothèque de skills et de design systems ouverte et local-first.

3. 03 Ai-je besoin d’un abonnement ChatGPT pour concevoir avec Codex ? +

   Vous pouvez utiliser soit une clé API OpenAI (BYOK), soit votre abonnement ChatGPT. La connexion ChatGPT offre généralement des limites plus généreuses ; Open Design ne fait jamais transiter vos identifiants, dans les deux cas.

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

   Les deux sont solides. Claude Code est reconnu pour ses décisions de design précises et conscientes de la base de code ; Codex offre une forte finition visuelle après GPT-5.4 et excelle dans les builds délégués en sandbox. Beaucoup d’équipes utilisent les deux, Open Design vous laisse changer d’agent sans changer votre workflow de design.

5. 05 Comment connecter Codex à Figma ? +

   Ajoutez le serveur Figma MCP officiel (codex mcp add figma --url https://mcp.figma.com/mcp). Vous pouvez ensuite implémenter des frames Figma en code avec get_design_context et renvoyer une UI en cours d’exécution vers des frames Figma éditables avec generate_figma_design.

6. 06 Comment éviter l’esthétique générique « AI slop » ? +

   Installez une skill frontend, fournissez de vrais tokens de design et des captures de référence, encodez les règles de marque dans AGENTS.md et activez la vérification Playwright. Open Design les livre sous forme de bibliothèque organisée pour vous éviter la configuration projet par projet.

7. 07 Open Design est-il affilié à OpenAI ? +

   Non. Codex est un produit d’OpenAI ; Open Design est un projet open source indépendant qui le prend en charge comme adaptateur de première partie. OpenAI et Codex sont des marques d’OpenAI.

8. 08 Mes fichiers et identifiants sont-ils en sécurité ? +

   Oui, Open Design est local-first. Vos fichiers, artefacts et DESIGN.md restent dans votre propre dépôt, et vos identifiants OpenAI sont utilisés directement par votre agent, jamais routés via les serveurs d’Open Design.

9. 09 Codex peut-il construire une UI frontend responsive ? +

   Oui. Avec des références desktop et mobile et la skill Playwright, Codex construit une UI frontend responsive, la rend dans un vrai navigateur à chaque breakpoint et itère jusqu’à ce qu’elle corresponde, composants, mises en page et états d’interaction compris. Lui fournir les tokens de votre design system est ce qui maintient les sorties cohérentes plutôt que génériques.

10. 10 Comment donner un design system à Codex ? +

    Encodez vos tokens (couleur, typographie, espacements) et vos composants canoniques dans un fichier AGENTS.md ou DESIGN.md que Codex lit à chaque exécution, et demandez-lui de s’appuyer dessus. Open Design fournit une bibliothèque organisée de design systems pour que vous puissiez choisir un système au lieu d’en écrire un de zéro, et Codex construit ensuite chaque écran en s’appuyant dessus.

11. 11 Puis-je utiliser Codex pour le design si je ne sais pas coder ? +

    Oui. Codex transforme des briefs en langage courant et des images de référence en UI fonctionnelle, de sorte que les designers et les personnes produit peuvent l’utiliser sans écrire de code. L’application desktop d’Open Design supprime entièrement le terminal et la configuration, vous choisissez un agent, un design system et une skill, puis vous générez et prévisualisez dans une UI locale.

12. 12 Open Design prend-il en charge le BYOK avec Codex ? +

    Oui. Open Design fonctionne en bring-your-own-key : authentifiez Codex avec votre propre clé API OpenAI ou votre abonnement ChatGPT, et l’identifiant est utilisé directement par votre agent, jamais relayé par Open Design. C’est local-first, donc vos fichiers et votre DESIGN.md restent dans votre propre dépôt.

13. 13 Comment ajouter un frontend design skill à Codex ? +

    Installez le frontend design skill officiel depuis le catalogue openai/skills : dans l'application Codex, lancez l'installateur de skill pour le frontend-skill, puis redémarrez Codex. Le frontend design skill amène Codex à s'engager sur une véritable esthétique, mises en page sans cartes, hiérarchie centrée sur la marque, deux polices au maximum et une seule couleur d'accent, au lieu de l'apparence générique par défaut, et c'est le plus grand levier sur la qualité de design de Codex.