Skip to main content
Flowstep génère des écrans UI à partir de prompts en langage naturel, ce qui vous permet de passer d’une idée à une 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 un parcours utilisateur entier, un prompt bien rédigé suffit pour commencer.

​
Générer une conception

1

Ouvrir un nouveau projet

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

Rédigez votre prompt

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

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

Par défaut, Flowstep génère un seul écran. Si vous souhaitez 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

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

​
Un seul écran ou plusieurs écrans

Vous pouvez générer soit un seul écran, soit 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 d’UI spécifique, un composant ou un concept ciblé.
  • Plusieurs écrans — idéal pour cartographier les flux, comparer les options de mise en page ou couvrir un parcours utilisateur complet rapidement.
Lorsque vous souhaitez plusieurs écrans, soyez explicite dans votre prompt. Flowstep utilise la formulation de votre prompt pour décider du nombre d’écrans à produire, donc les prompts vagues retournent généralement un seul écran. Les écrans générés sont nommés Screen 1, Screen 2, etc. — utilisez ces noms pour faire référence à un écran spécifique dans les prompts de suivi.

​
Autres façons de rédiger des prompts

Le texte n’est pas la seule entrée. Vous pouvez aussi :
  • Joindre des fichiers — ajoutez 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. Faites référence à une image jointe dans votre prompt et Flowstep l’incorpore dans les écrans générés. Voir Utiliser les références.
  • Dicter votre prompt — cliquez sur le bouton du microphone 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é.
  • Laisser Flowstep rechercher sur le web — lorsque votre prompt l’exige (par exemple, « cloner la page de tarification de Stripe »), Flowstep peut rechercher sur le web et lire l’identité visuelle d’une page — couleurs, polices, logo, composants d’UI — et l’utiliser dans les écrans générés. Flowstep décide lui-même s’il faut rechercher, donc cela ne se déclenchera pas nécessairement sur chaque prompt ; notez que les sites web recréés utilisent des images et une navigation différentes de l’original.
  • Définir les directives de conception — définissez les règles de style permanentes qui s’appliquent à chaque génération dans le fichier. Voir Directives de conception.

​
Rédiger des prompts efficaces

Exemple de prompt pour un seul écran : “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 un 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 la rédaction de prompts :
  • Nommez la plateforme (mobile, bureau, tablette) pour que Flowstep dimensionne correctement les écrans.
  • Décrivez l’objectif de l’utilisateur, pas seulement les éléments d’UI — Flowstep déduit la mise en page à partir 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 expressions comme « generate multiple screens » ou « cover the full user journey » pour déclencher une sortie multi-écran.