Codex pour le design.

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.
• Une skill frontend officielle: Le catalogue openai/skills fournit une frontend-skill organisée qui impose un vrai goût : des mises en page sans cartes, des héros pleine largeur, une hiérarchie qui met la marque d’abord, un mouvement sobre, deux familles typographiques et une couleur d’accent au maximum — et amène Codex à écrire une thèse visuelle avant de construire.
• 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.

# 1. Install the Codex CLI
npm install -g @openai/codex
# or: brew install --cask codex
# or: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Authenticate (ChatGPT sign-in recommended for higher limits)
codex            # then choose “Sign in with ChatGPT”

# 3. Generate project context
codex            # inside your project, run /init to create AGENTS.md

# 4. Add the official frontend skill, then restart Codex
# (in the Codex app) $skill-installer frontend-skill

# 5. Wire the Figma MCP server (optional, for design handoff)
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 \
  "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."

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 + 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.

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.

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.