Introduction

À partir de captures d’écran, d’un bref descriptif de l’interface ou de quelques sources d’inspiration, Codex peut créer une interface qui s’adapte aux différentes tailles d’écran tout en respectant les conventions de votre projet.

Avec le skill Playwright, Codex peut ouvrir l’application dans un véritable navigateur, comparer le rendu à vos captures d’écran pour différentes tailles d’écran, puis ajuster la mise en page ou le comportement de l’interface pour se rapprocher du résultat souhaité.

Partez de références visuelles

Fournissez à Codex les références qui illustrent le mieux l’interface souhaitée. Une seule capture d’écran peut suffire pour une tâche ciblée. Pour mieux guider Codex, montrez plusieurs variantes : la mise en page sur ordinateur et sur mobile, l’apparence d’un élément au survol ou après sélection, ainsi que les vues pertinentes pendant le chargement ou en l’absence de données.

De simples références suffisent, même s’il ne s’agit pas de maquettes finalisées. Elles doivent illustrer assez clairement la hiérarchie visuelle, les espacements et le style recherché pour que Codex puisse les reproduire sans avoir à les deviner.

Précisez vos attentes

Plus vous décrivez précisément les interactions attendues et le style souhaité, meilleur sera le résultat. Le modèle privilégie généralement les styles et les interactions les plus courants. Si vous recherchez autre chose et que vos références ne le montrent pas clairement, l’interface risque de paraître générique. Des sources d’inspiration supplémentaires ou des consignes plus précises aideront Codex à créer une interface qui se démarque.

Préparez le système de design

Codex donne les meilleurs résultats lorsque les composants du dépôt sont déjà bien organisés. Il peut réutiliser automatiquement vos composants et votre système de design sans avoir à les recréer.

Si nécessaire, par exemple si votre pile technique sort de l’ordinaire, indiquez à Codex quels composants de base réutiliser, où trouver les tokens de design et quels éléments du dépôt font référence pour les boutons, les champs de saisie, les cartes, la typographie et les icônes.

Si vous partez d’une base de code existante, Codex saura probablement utiliser vos composants et votre système de design de lui-même. Si vous partez de zéro, mieux vaut lui donner des consignes explicites.

Demandez à Codex de prendre les captures d’écran comme référence visuelle et d’en reproduire le rendu avec les outils et les conventions du projet : utilitaires, wrappers de composants, système de couleurs, échelle typographique, tokens d’espacement, routage, gestion de l’état et méthodes de récupération des données.

Utilisez Playwright

Playwright aide Codex à affiner l’interface au fil des essais. Codex peut ouvrir l’application dans un véritable navigateur, comparer le rendu aux captures d’écran que vous avez fournies, puis ajuster la mise en page ou le comportement de l’interface.

Codex peut redimensionner la fenêtre du navigateur pour simuler plusieurs tailles d’écran et vérifier la mise en page aux différents points de rupture.

Vérifiez que le skill Playwright interactif est activé dans Codex. Pour en savoir plus, consultez la documentation sur les skills.

Affinez le résultat

La première version devrait déjà reprendre les grandes lignes de vos captures d’écran. Prévoyez quelques séries d’ajustements si la mise en page ou les interactions sont complexes, ou si l’interface comporte beaucoup d’animations.

Demandez à Codex de comparer le rendu aux captures d’écran, au-delà de la simple vérification que la page se compile. En cas de divergence, Codex doit privilégier les tokens du système de design du dépôt et limiter les ajustements d’espacement ou de taille au strict nécessaire pour préserver l’aspect général de l’interface.

Ajoutez des captures d’écran ou de brèves notes si une seule image ne suffit pas à illustrer certains états.

Exemple de prompt de suivi