Skip to main content
Flowstep génère des écrans d’interface à 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 dans lequel vous souhaitez ajouter des écrans.
2

Écrire votre prompt

Saisissez une description de l’écran ou des écrans que vous voulez. Précisez le type d’application, l’objectif de l’utilisateur et le 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, indiquez-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 examinés ou affinés.
Lorsque vous créez un nouveau fichier et envoyez son premier prompt, Flowstep le nomme en fonction de ce prompt, ce qui facilite sa recherche ultérieure. Un fichier qui a déjà un nom, ou des prompts antérieurs, conserve son nom. Vous pouvez renommer n’importe quel fichier vous-même à 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 multi-écrans, les écrans déjà terminés restent sur votre canevas, et ceux qui ne sont pas terminés sont supprimés. Si vous arrêtez après que Flowstep a commencé à créer des écrans, le message est tout de même utilisé. Consultez messages et limites.

​
Un seul écran ou plusieurs écrans

Vous pouvez générer un seul écran ou jusqu’à 6 écrans à partir d’un même prompt. Ces 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 base sur la formulation de votre prompt pour décider du nombre d’écrans à produire. Un prompt vague ne renvoie 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.

​
D’autres façons de rédiger un prompt

Le texte n’est pas la seule entrée possible. Vous pouvez aussi :
  • Joindre des fichiers : ajoutez au prompt des images (JPG, PNG, WEBP) ou des documents (PDF, MD, TXT) de 3 Mo maximum chacun, par glisser-déposer, avec le sélecteur de fichiers ou en collant. Mentionnez une image jointe dans votre prompt, et Flowstep l’intègre aux écrans générés. Consultez Utiliser les références de conception.
  • Dicter votre prompt : cliquez sur le bouton du micro dans la barre de prompt (ou appuyez sur Cmd+Shift+V sur Mac, Ctrl+Shift+V sur Windows), puis parlez pendant 60 secondes au maximum. La transcription est ajoutée à ce que vous avez déjà saisi.
  • Laisser Flowstep rechercher sur le web : lorsque votre prompt le demande (par exemple, « cloner la page tarifs de Stripe »), Flowstep peut rechercher 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 seul s’il faut faire une recherche, donc cela ne se déclenche pas forcément à chaque prompt. Notez que les sites recréés utilisent des images et une navigation différentes de l’original.
  • Définir des consignes de conception : définissez des règles de style permanentes qui s’appliquent à chaque génération du fichier. Consultez consignes de conception.

​
Rédiger des prompts efficaces

Exemple de prompt pour un seul écran : « Conçois un écran de connexion mobile pour une application de suivi d’entraînement sportif, avec des champs e-mail et mot de passe, un bouton de connexion et un lien « Mot de passe oublié ». »
Exemple de prompt pour plusieurs écrans : « Génère plusieurs écrans pour le parcours d’accueil d’une application de livraison de repas : choix des préférences culinaires, saisie de l’adresse de livraison et confirmation de la première commande. »
Exemple de prompt pour un parcours complet : « Couvre tout le parcours utilisateur d’une application de notes de frais, de la soumission d’un justificatif jusqu’à l’approbation par le manager. »
Gardez ces principes à l’esprit lorsque vous rédigez des prompts :
  • Indiquez 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 de l’intention.
  • Incluez le contenu clé, comme les libellés, les actions ou les données, s’il compte pour la conception.
  • Utilisez des formulations comme « génère plusieurs écrans » ou « couvre tout le parcours utilisateur » pour obtenir une sortie multi-écrans.