Skip to main content
Flowstep génère des écrans UI à partir de prompts en langage naturel, vous permettant de passer de l’idée à la conception visuelle en quelques secondes. Que vous ayez besoin d’un écran unique pour valider un concept ou d’un ensemble complet d’écrans couvrant un parcours utilisateur entier, un prompt bien écrit est tout ce dont vous avez besoin pour commencer.

​
Générez une conception

1

Ouvrez un nouveau projet

À partir de votre tableau de bord Flowstep, créez un nouveau projet ou ouvrez-en un existant où vous souhaitez ajouter des écrans.
2

Écrivez votre prompt

Tapez une description de l’écran ou des écrans que vous souhaitez. Soyez spécifique sur le type d’application, l’objectif de l’utilisateur et le contenu que vous vous attendez à voir.
3

Spécifiez le nombre d'écrans que vous souhaitez

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

Générez

Soumettez votre prompt. Flowstep produit vos écrans et les affiche dans l’éditeur, prêts à être examinés ou affinés.

​
Écran unique vs. plusieurs écrans

Vous pouvez générer soit un écran, soit jusqu’à 6 écrans à partir d’un seul prompt. Les deux approches conviennent à différentes étapes du travail de conception.
  • Un écran — idéal pour explorer un état d’interface utilisateur spécifique, un composant ou un concept ciblé.
  • Plusieurs écrans — idéal pour cartographier des flux, comparer les options de mise en page ou couvrir un parcours utilisateur complet rapidement.
Quand vous souhaitez plusieurs écrans, soyez explicite dans votre prompt. Flowstep utilise le libellé de votre prompt pour décider du nombre d’écrans à produire, donc les prompts vagues retournent généralement un écran unique. Les écrans générés sont nommés Screen 1, Screen 2, et ainsi de suite — utilisez ces noms pour faire référence à un écran spécifique dans les prompts de suivi.

​
Plus de façons de faire un prompt

Le texte n’est pas la seule entrée. Vous pouvez également :
  • Joindre des fichiers — ajouter des images (JPG, PNG, WEBP) ou des documents (PDF, MD, TXT) jusqu’à 3 MB chacun au prompt, via glisser-déposer, le sélecteur de fichiers ou en collant. Référencez une image jointe dans votre prompt et Flowstep l’intègre dans les écrans générés. Consultez Utiliser les références.
  • Dictez votre prompt — cliquez sur le bouton micro dans la barre de prompt (ou appuyez sur Cmd+Shift+V sur Mac, Ctrl+Shift+V sur Windows) et parlez pendant jusqu’à 60 secondes. La transcription est ajoutée à ce que vous avez déjà tapé.
  • Laissez Flowstep rechercher le web — quand votre prompt l’appelle (par exemple, « clone the Stripe pricing page »), Flowstep peut rechercher le web et lire les marques d’une page — couleurs, polices, logo, composants UI — et les utiliser dans les écrans générés. Flowstep décide par lui-même s’il faut faire une recherche, donc ce ne sera pas nécessairement déclenché par chaque prompt ; notez que les sites web recréés utilisent des images et une navigation différentes de l’original.
  • Définissez les consignes de conception — définissez les règles de style permanentes qui s’appliquent à chaque génération dans le fichier. Consultez Consignes de conception.

​
Écrire des prompts efficaces

Exemple de prompt pour écran unique : « Design a mobile login screen for a fitness tracking app with email and password fields, a sign-in button, and a forgot password link. »
Exemple de prompt multi-écran : « Generate multiple screens for a food delivery app onboarding flow—cover selecting cuisine preferences, entering a delivery address, and confirming the first order. »
Exemple de prompt pour parcours complet : « Cover the full user journey in a expense reporting app, from submitting a receipt to manager approval. »
Gardez ces principes à l’esprit lors de l’écriture de prompts :
  • Nommez la plateforme (mobile, desktop, tablet) afin que Flowstep dimensionne correctement les écrans.
  • Décrivez l’objectif de l’utilisateur, pas seulement les éléments d’interface utilisateur — 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’ils importent pour la conception.
  • Utilisez des phrases comme « generate multiple screens » ou « cover the full user journey » pour déclencher une sortie multi-écran.