Passer au contenu principal
Flowstep génère des écrans d’interface utilisateur à partir de prompts en langage naturel, ce qui vous permet de passer de l’idée à la conception visuelle en quelques secondes. Que vous ayez besoin d’un seul écran pour valider un concept ou d’un ensemble complet d’écrans couvrant tout un parcours utilisateur, un prompt bien rédigé suffit pour commencer.

​
Générer une conception

1

Ouvrir un nouveau projet

Depuis votre tableau de bord Flowstep, créez un nouveau projet ou ouvrez un projet existant auquel vous voulez ajouter des écrans.
2

Rédiger votre prompt

Décrivez l’écran ou les écrans que vous voulez. Soyez précis quant au type d’application, à l’objectif de l’utilisateur et au contenu que vous attendez.
3

Indiquer le nombre d'écrans souhaité

Par défaut, Flowstep génère un seul écran. Si vous voulez plusieurs écrans, dites-le explicitement dans votre prompt — Flowstep peut générer jusqu’à 6 écrans à partir d’un seul prompt.
4

Générer

Envoyez votre prompt. Flowstep produit vos écrans et les affiche dans l’éditeur, prêts à être révisés ou raffinés.
Lorsque vous créez un nouveau fichier et envoyez son premier prompt, Flowstep le nomme d’après ce prompt pour que vous le retrouviez facilement. Un fichier qui porte déjà un nom — ou qui contient des prompts antérieurs — conserve son nom, et vous pouvez renommer vous-même n’importe quel fichier à tout moment.

​
Arrêter une génération

Pendant que Flowstep répond, le bouton d’envoi se transforme en bouton d’arrêt (Stop Flowstep response). Cliquez dessus pour arrêter la génération. Dans une demande à plusieurs écrans, les écrans déjà terminés restent sur votre canevas, et ceux qui ne sont pas terminés sont retirés. Arrêter une génération après que Flowstep a commencé à construire des écrans utilise tout de même le message — consultez messages et limites.

​
Écran unique ou écrans multiples

Vous pouvez générer un seul écran ou jusqu’à 6 écrans à partir d’un seul prompt. Les deux approches conviennent à différentes étapes du travail de conception.
  • Un seul écran — idéal pour explorer un état précis de l’interface, un composant ou un concept ciblé.
  • Plusieurs écrans — idéal pour cartographier des flux, comparer des options de mise en page ou couvrir rapidement un parcours utilisateur complet.
Lorsque vous voulez plusieurs écrans, soyez explicite dans votre prompt. Flowstep se fie à la formulation de votre prompt pour décider du nombre d’écrans à produire; un prompt vague ne donne donc généralement qu’un seul écran. Les écrans générés sont nommés Screen 1, Screen 2, et ainsi de suite — utilisez ces noms pour désigner un écran précis dans vos prompts de suivi.

​
Plus de façons de formuler un prompt

Le texte n’est pas la seule entrée possible. Vous pouvez aussi :
  • Joindre des fichiers — ajouter au prompt des images (JPG, PNG, WEBP) ou des documents (PDF, MD, TXT) d’au plus 3 Mo chacun, par glisser-déposer, par le sélecteur de fichiers ou en collant. Faites référence à une image jointe dans votre prompt, et Flowstep l’intègre aux écrans générés. Consultez Utiliser les références.
  • Dicter votre prompt — cliquez sur le bouton du micro dans la barre de prompt (ou appuyez sur Cmd+Shift+V sur Mac ou Ctrl+Shift+V sur Windows) et parlez pendant 60 secondes au maximum. La transcription est ajoutée à ce que vous avez déjà saisi.
  • Laisser Flowstep faire une recherche sur le Web — lorsque votre prompt le demande (par exemple, « cloner la page de tarification de Stripe »), Flowstep peut faire une recherche sur le Web et lire l’identité visuelle d’une page — couleurs, polices, logo, composants d’interface — pour l’utiliser dans les écrans générés. Flowstep décide lui-même s’il doit faire une recherche, donc cela ne se déclenche pas forcément pour chaque prompt; notez que les sites Web recréés utilisent des images et une navigation différentes de l’original.
  • Définir des directives de conception — définissez des règles de style permanentes qui s’appliquent à chaque génération du fichier. Consultez Directives de conception.

​
Rédiger des prompts efficaces

Exemple de prompt pour un seul écran : « Concevez un écran de connexion mobile pour une application de suivi de la forme physique, avec des champs courriel et mot de passe, un bouton de connexion et un lien de mot de passe oublié. »
Exemple de prompt multi-écrans : « Générez plusieurs écrans pour un flux d’intégration d’une application de livraison de repas — couvrez le choix des préférences culinaires, la saisie d’une adresse de livraison et la confirmation de la première commande. »
Exemple de prompt de parcours complet : « Couvrez le parcours utilisateur complet d’une application de notes de frais, de la soumission d’un reçu jusqu’à l’approbation par le gestionnaire. »
Gardez ces principes à l’esprit lorsque vous rédigez vos prompts :
  • Nommez la plateforme (mobile, ordinateur, tablette) pour que Flowstep dimensionne correctement les écrans.
  • Décrivez l’objectif de l’utilisateur, pas seulement les éléments d’interface — Flowstep déduit la mise en page à partir de l’intention.
  • Incluez le contenu clé, comme les étiquettes, les actions ou les données, s’il est important pour la conception.
  • Utilisez des formulations comme « générer plusieurs écrans » ou « couvrir le parcours utilisateur complet » pour obtenir une sortie à plusieurs écrans.