For the complete documentation index, see llms.txt. Markdown versions of documentation pages are available by appending .md to the page URL.
Navigation principale
Codex

Codex use case

Apportez des modifications ciblées à l’interface

Utilisez Codex-Spark pour itérer rapidement et de façon ciblée sur l’interface d’une application existante.

Difficulty Facile
Time horizon 5 min

Utilisez Codex pour apporter une petite modification à la fois à l’interface d’une application existante, la vérifier dans le navigateur et enchaîner rapidement les itérations depuis une fenêtre de discussion détachée placée près de votre aperçu.

Idéal pour

  • Applications existantes dont la structure principale est déjà en place et qui nécessitent de petits ajustements visuels
  • Cycles rapides de revue produit ou design, où chaque remarque doit donner lieu à une seule modification ciblée du code
  • Phases de peaufinage de l’interface qui nécessitent une vérification dans le navigateur sans pour autant se transformer en refonte globale

Contents

    ← Tous les cas d’utilisation

    Apportez des modifications ciblées à l’interface

    Utilisez Codex-Spark pour itérer rapidement et de façon ciblée sur l’interface d’une application existante.

    Utilisez Codex pour apporter une petite modification à la fois à l’interface d’une application existante, la vérifier dans le navigateur et enchaîner rapidement les itérations depuis une fenêtre de discussion détachée placée près de votre aperçu.

    Facile
    5 min

    Utilisez Codex pour apporter une petite modification à la fois à l’interface d’une application existante, la vérifier dans le navigateur et enchaîner rapidement les itérations depuis une fenêtre de discussion détachée placée près de votre aperçu.

    Facile
    5 min

    Idéal pour

    • Applications existantes dont la structure principale est déjà en place et qui nécessitent de petits ajustements visuels
    • Cycles rapides de revue produit ou design, où chaque remarque doit donner lieu à une seule modification ciblée du code
    • Phases de peaufinage de l’interface qui nécessitent une vérification dans le navigateur sans pour autant se transformer en refonte globale

    Skills et plugins

    • Ouvrez l’application en cours d’exécution dans un véritable navigateur, examinez la route modifiée et vérifiez chaque petit ajustement de l’interface avant de passer à l’itération suivante.
    Skill Why use it
    Playwright Ouvrez l’application en cours d’exécution dans un véritable navigateur, examinez la route modifiée et vérifiez chaque petit ajustement de l’interface avant de passer à l’itération suivante.

    Prompt de démarrage

    Apportez cette modification à l’interface de l’application existante : [describe the exact spacing, alignment, color, copy, responsive, or component-state adjustment] Contraintes : - Modifiez uniquement les fichiers nécessaires à cet ajustement de l’interface. - Réutilisez les composants, tokens, icônes et modèles de mise en page existants. - Ne modifiez ni le comportement, ni le flux de données, ni le routage, sauf si je le demande explicitement. - Lancez ou réutilisez le serveur de développement, inspectez l’interface actuelle dans le navigateur, appliquez le plus petit patch possible et vérifiez visuellement le résultat. Arrêtez-vous après cette seule modification et récapitulez les fichiers modifiés ainsi que la vérification effectuée dans le navigateur.
    Apportez cette modification à l’interface de l’application existante : [describe the exact spacing, alignment, color, copy, responsive, or component-state adjustment] Contraintes : - Modifiez uniquement les fichiers nécessaires à cet ajustement de l’interface. - Réutilisez les composants, tokens, icônes et modèles de mise en page existants. - Ne modifiez ni le comportement, ni le flux de données, ni le routage, sauf si je le demande explicitement. - Lancez ou réutilisez le serveur de développement, inspectez l’interface actuelle dans le navigateur, appliquez le plus petit patch possible et vérifiez visuellement le résultat. Arrêtez-vous après cette seule modification et récapitulez les fichiers modifiés ainsi que la vérification effectuée dans le navigateur.

    Introduction

    Si vous disposez déjà d’une application et souhaitez itérer rapidement sur son interface, vous pouvez utiliser gpt-5.3-codex-spark pour y apporter de petites modifications ciblées. Codex-Spark est notre modèle le plus rapide, optimisé pour itérer sur le code en temps réel et de manière quasi instantanée.

    Cette approche fonctionne particulièrement bien en boucle courte : une remarque sur l’aspect visuel, une modification ciblée, une vérification dans le navigateur, puis la remarque suivante.

    Vous pouvez utiliser le modèle Codex Spark pour cette tâche. Il est disponible avec les offres Pro.

    Choisissez votre modèle

    Pour itérer rapidement sur l’interface, commencez par gpt-5.3-codex-spark si vous y avez accès. Ses capacités sont inférieures à celles de nos modèles généralistes, mais il est conçu pour l’itération de code en temps réel. Si vous n’y avez pas accès, utilisez gpt-5.6 avec un effort de raisonnement medium ou low.

    Ce compromis est utile pour les modifications ciblées de l’interface. Vous n’avez généralement pas besoin du modèle au raisonnement le plus poussé pour déplacer un bouton, régler un breakpoint ou ajuster l’état d’un composant. Il vous faut un modèle qui répond rapidement, comprend le code local, modifie le bon fichier et peut répéter cette boucle sans alourdir les itérations.

    Workflow de développement

    1. Ouvrez l’application existante et affichez la route ou le composant concerné.
    2. Détachez la discussion Codex en cours pour l’ouvrir dans une fenêtre flottante, puis gardez-la à proximité de votre navigateur, de votre éditeur ou de l’aperçu du design pendant que vous travaillez.
    3. Demandez à Codex d’effectuer une seule modification précise de l’interface à la fois. Fournissez la route, le viewport, la capture d’écran actuelle, la capture cible ou la remarque produit exacte si vous en disposez.
    4. Demandez à Codex d’examiner l’implémentation actuelle, d’apporter la modification minimale raisonnable et de préserver les composants, tokens, primitives de mise en page et flux de données déjà en place dans l’application.
    5. Examinez le résultat, puis envoyez le petit ajustement suivant dans la même discussion.

    Rédigez des prompts courts

    Les prompts destinés à des modifications ciblées de l’interface doivent être directs et précis. Un bon prompt indique la zone de l’interface concernée, la modification visée et la validation attendue.

    Si le résultat est presque satisfaisant, formulez un message de suivi tout aussi précis :

    Le résultat est presque correct. Conservez l’implémentation, mais ajustez uniquement ce détail : [describe the remaining mismatch] Vérifiez à nouveau la même route avec le même viewport avant de vous arrêter.

    Quand ralentir

    Ne continuez pas à utiliser la boucle rapide si la tâche ne porte plus sur un ajustement ciblé. Passez à un modèle plus puissant et à un prompt plus soigneusement élaboré lorsque la modification nécessite une refactorisation à grande échelle, une nouvelle primitive du système de design, un comportement d’accessibilité complexe ou une décision produit qui affecte plusieurs écrans.

    Les itérations rapides sur l’interface sont particulièrement efficaces lorsque Codex ajuste une partie de l’interface déjà bien comprise, plutôt que de refondre entièrement l’application.

    Cas d’utilisation associés