Skip to main content
Flowstep generiert UI-Screens aus natürlichsprachlichen Prompts und ermöglicht es Ihnen, in Sekunden von der Idee zum visuellen Design zu gelangen. Egal, ob Sie einen einzelnen Screen zum Validieren eines Konzepts oder einen vollständigen Satz von Screens benötigen, der eine gesamte User-Journey abdeckt – ein gut geschriebener Prompt ist alles, was Sie brauchen, um zu beginnen.

​
Generieren Sie ein Design

1

Öffnen Sie ein neues Projekt

Erstellen Sie über Ihr Flowstep-Dashboard ein neues Projekt oder öffnen Sie ein vorhandenes, in dem Sie Screens hinzufügen möchten.
2

Schreiben Sie Ihren Prompt

Geben Sie eine Beschreibung des Screens oder der Screens ein, den/die Sie benötigen. Seien Sie spezifisch über die Art der App, das Benutzerziel und den Inhalt, den Sie erwarten.
3

Geben Sie an, wie viele Screens Sie möchten

Standardmäßig generiert Flowstep einen einzelnen Screen. Wenn Sie mehrere Screens möchten, sagen Sie dies explizit in Ihrem Prompt — Flowstep kann bis zu 6 Screens aus einem Prompt generieren.
4

Generieren

Senden Sie Ihren Prompt ab. Flowstep erstellt Ihre Screens und zeigt sie im Editor an, bereit zum Überprüfen oder Verfeinern.

​
Single Screen vs. mehrere Screens

Sie können entweder einen Screen oder bis zu 6 Screens aus einem einzelnen Prompt generieren. Beide Ansätze eignen sich für unterschiedliche Phasen der Designarbeit.
  • Ein Screen – am besten zum Erkunden eines bestimmten UI-Status, einer Komponente oder eines fokussierten Konzepts.
  • Mehrere Screens – am besten zum Zuordnen von Abläufen, Vergleichen von Layout-Optionen oder schneller Abdeckung einer vollständigen User-Journey.
Wenn Sie mehrere Screens möchten, seien Sie explizit in Ihrem Prompt. Flowstep verwendet den Wortlaut Ihres Prompts, um zu entscheiden, wie viele Screens erstellt werden sollen, sodass vage Prompts normalerweise einen einzelnen Screen zurückgeben. Generierte Screens werden Screen 1, Screen 2 usw. genannt — verwenden Sie diese Namen, um auf einen bestimmten Screen in Follow-up-Prompts zu verweisen.

​
Weitere Möglichkeiten zum Eingeben von Prompts

Text ist nicht die einzige Eingabe. Sie können auch:
  • Dateien anhängen — fügen Sie Bilder (JPG, PNG, WEBP) oder Dokumente (PDF, MD, TXT) mit bis zu 3 MB jeweils per Drag-and-Drop, Dateiauswahl oder Einfügen hinzu. Beziehen Sie sich auf ein angehängtes Bild in Ihrem Prompt und Flowstep integriert es in die generierten Screens. Siehe Referenzen verwenden.
  • Diktieren Sie Ihren Prompt — klicken Sie auf die Schaltfläche „Mikrofon” in der Prompt-Leiste (oder drücken Sie Cmd+Shift+V auf Mac, Ctrl+Shift+V auf Windows) und sprechen Sie bis zu 60 Sekunden. Das Transkript wird an dem angehängt, was Sie bereits eingegeben haben.
  • Lassen Sie Flowstep das Web durchsuchen — wenn Ihr Prompt dies erfordert (z. B. „clone the Stripe pricing page”), kann Flowstep das Web durchsuchen und die Branding einer Seite lesen – Farben, Schriftarten, Logo, UI-Komponenten – und diese in den generierten Screens verwenden. Flowstep entscheidet selbst, ob eine Suche durchgeführt werden soll, sodass dies nicht unbedingt bei jedem Prompt ausgelöst wird. Beachten Sie, dass recreierte Websites unterschiedliche Bilder und Navigation als das Original verwenden.
  • Design-Richtlinien festlegen — definieren Sie standhafte Stilregeln, die für jede Generierung in der Datei gelten. Siehe Design-Richtlinien.

​
Effektive Prompts schreiben

Beispiel für Single-Screen-Prompt: “Design a mobile login screen for a fitness tracking app with email and password fields, a sign-in button, and a forgot password link.”
Beispiel für Multi-Screen-Prompt: “Generate multiple screens for a food delivery app onboarding flow—cover selecting cuisine preferences, entering a delivery address, and confirming the first order.”
Beispiel für vollständige Journey-Prompt: “Cover the full user journey in a expense reporting app, from submitting a receipt to manager approval.”
Beachten Sie diese Prinzipien beim Schreiben von Prompts:
  • Nennen Sie die Plattform (Mobil, Desktop, Tablet), damit Flowstep Screens richtig skaliert.
  • Beschreiben Sie das Ziel des Benutzers, nicht nur UI-Elemente – Flowstep leitet das Layout aus der Absicht ab.
  • Beziehen Sie wichtige Inhalte wie Labels, Aktionen oder Daten ein, wenn sie für das Design wichtig sind.
  • Verwenden Sie Ausdrücke wie „generate multiple screens” oder „cover the full user journey”, um die Multi-Screen-Ausgabe auszulösen.