Codex 
OpenDesign Comment concevoir des interfaces avec OpenAI Codex dans OpenDesign : la configuration, une tâche complète du brief au fichier révisé, et les limites à connaître avant de commencer.
« Un tableau de projet plus calme.
Des priorités claires. De la place pour se concentrer. »
TROIS PAGES CODEX
Ce guide : brief, références, règles de conception et un résultat HTML révisé.
Lire ce guide PLUGINS ET INSTALLATIONParcourez les plugins de design ou consultez les instructions d'installation d'OpenDesign.
Accéder aux ressources UN RÉSULTAT DIFFÉRENTLes diaporamas disposent d'un guide séparé avec leur propre workflow.
Ouvrir les slides CodexUne tâche de conception Codex complète
Une seule tâche, montrée du début à la fin : le brief et les contraintes que vous transmettez, l'artefact 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 Codex.
BriefConcevez un tableau de suivi de projet pour une petite équipe produit. Affichez la progression globale, la prochaine échéance et le travail bloqué en un coup d'œil. Les tâches se déplacent entre À faire, En cours et Terminé. Le tableau doit fonctionner sur ordinateur et sur mobile.
data-od-id stablesRédigez le brief, sélectionnez le système de conception et définissez les critères d'acceptation.
Planifie la mise en page, écrit le HTML, le CSS et le JavaScript, exécute le fichier et le révise sur demande.
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.
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.
La barre latérale, l'en-tête, les statistiques et les colonnes s'alignent sur la grille de 8px ; rien ne se superpose à 1440 ou 390.
La progression, la prochaine étape clé et le nombre de blocages priment sur les en-têtes de colonne ; l'accent ne marque qu'un seul libellé d'étape clé.
Les colonnes deviennent un sélecteur segmenté ; la barre d'étapes clés reste visible ; la barre latérale se replie en barre d'onglets.
Basculez ici l'aperçu entre desktop et mobile. Dans votre propre artefact, ouvrez une tâche et testez les filtres, la navigation au clavier et le comportement du focus.
Adéquation
Compatibilité
Ce guide couvre Codex en local. Les autres modes ont une configuration et une facturation différentes. Références publiées vérifiées le 11 septembre 2026.
OpenAI Codex, l’agent de code — pas l’ancien modèle de complétion de code. Cette page traite de la conception d’interfaces avec Codex, pas de l’UI de l’application Codex elle-même. Les notes de configuration d’OpenDesign citent Codex parmi les agents disponibles.
Pour Codex en local, connectez-vous avec ChatGPT ou utilisez une clé API OpenAI. Ces options ont des implications différentes en matière de facturation et de politique. Suivez les instructions d’authentification d’OpenAI ; cette page ne garantit ni quota ni tarif.
Consultez la page de téléchargement pour les versions 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 paquet de bureau. Version minimale compatible de Codex : non vérifiée ici.
Suivez les instructions de connexion affichées par votre version installée, puis lancez une petite tâche. Confirmez que l’agent prévu l’a traitée et que l’artefact s’ouvre. Un téléchargement seul n’établit pas une connexion fonctionnelle.
Commencez par l’application de bureau
Téléchargez d’abord, terminez la configuration de Codex pour votre version installée, puis vérifiez un petit résultat. Vous n’avez pas besoin de construire OpenDesign depuis les sources pour suivre ce parcours.
Choisissez le paquet adapté à votre ordinateur, installez-le et ouvrez l’application.
Télécharger OpenDesignSuivez les instructions Codex de votre version installée. Pour Codex en local, terminez la connexion ChatGPT ou l’authentification par clé API avant d’envoyer une tâche.
Lire les notes d'authentification CodexUtilisez un petit brief afin de pouvoir juger l’ensemble du cycle, y compris une révision.
Cré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.
Pour exécuter depuis les sources, suivez plutôt le guide de démarrage technique. Pour installer le plugin dans Codex, utilisez l'entrée d'installation ci-dessous.
Le workflow de design Codex
La même tâche du progress-board, suivie du brief jusqu'au fichier vérifié. Chaque étape indique ce que vous fournissez, ce que fait Codex, ce qu'apporte OpenDesign et ce que vous vérifiez.
Langage simple, trois à six lignes. Nommez l'audience, la fonction de l'écran et les plateformes.
AGENTS.md du projet ; pose des questions en cas d'ambiguïté.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.
Codex écrit un fichier HTML autonome : mise en page, styles, interactions et points d'ancrage stables.
Le fichier s'affiche dans OpenDesign aux largeurs que vous avez demandées. C'est ici que le design est évalué.
data-od-id pour les commentaires et les modifications.Demandez des modifications en pointant les éléments dans l'aperçu. Chaque révision est un nouveau fichier ; rien n'est écrasé silencieusement.
Ressources
Une adresse en texte brut avec des instructions d'installation à lire par Codex, pas un tutoriel visuel. Copiez le prompt dans Codex, qui lit lui-même l'entrée.
Installez OpenDesign dans Codex en lisant https://open-design.ai/codex-plugin/ et en suivant ses instructions d'installation. Demandez avant de modifier la configuration.
Plugins frontend et de design system pour Codex, chacun avec sa propre source et ses instructions d'installation.
Les types d'artefacts que Codex peut produire dans OpenDesign, un skill par type.
Tokens de marque et composants à lier avant que Codex ne génère quoi que ce soit.
Les présentations disposent d'un guide séparé ; le résultat et le workflow diffèrent de l'UI produit.
Limites
FAQ
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.