Concevoir avec l'IA fonctionne mieux en boucle : vous décrivez, l'IA rédige, vous jugez et affinez, et vous répétez. L’IA produit rapidement des options. Vous êtes responsable de choisir le bon.
Étape 1 : rédiger un brief. Décrivez l'utilisateur, la tâche, le contenu et les éventuelles contraintes. "Un écran de paramètres pour une application de budgétisation, pour les utilisateurs de téléphones, avec des sections pour le compte, les notifications et la confidentialité, en utilisant nos composants existants" donnera un bien meilleur résultat que "créer une page de paramètres".
Étape 2 : générer des brouillons. Les outils d'invite d'interface utilisateur tels que Google Stitch ou l'assistant IA de UXPin transforment une description ou un croquis en écrans. Demandez plusieurs variantes et comparez-les, plutôt que d'accepter la première.
Étape 3 : affiner dans un outil de conception. Apportez le meilleur brouillon dans Figma, Penpot ou un autre éditeur. Corrigez la hiérarchie, l'espacement et la copie, et concevez les états que l'IA saute habituellement : chargement, vide, erreur et désactivé.
Étape 4 : connectez-vous au code. Les outils de codage d'IA tels que Claude Code et Cursor peuvent créer l'interface. Les résultats sont bien meilleurs lorsqu'ils peuvent lire votre conception via un serveur MCP. Figma et Penpot en ont tous deux un. Pour les pièces interactives et animées, ExodeUI, que nous créons, dispose d'un serveur MCP qui permet à l'IA de créer et de modifier des animations avec des états et la physique du ressort à partir d'invites en langage clair, stockées dans un fichier .exode ouvert que votre application lit.
Étape 5 : vérifiez avant d’expédier. Vérifiez l'utilisation du clavier et du lecteur d'écran, le contraste, la réduction des mouvements, les petits et grands écrans et les textes longs ou traduits. Traitez les résultats de l'IA comme le travail d'un coéquipier rapide mais nouveau : utile, mais toujours révisé.