Zum Hauptinhalt springen
Flowstep generiert UI-Screens aus natürlichsprachlichen Prompts, sodass Sie in Sekunden von der Idee zum visuellen Design gelangen. Ob Sie einen einzelnen Screen zur Validierung eines Konzepts brauchen oder einen vollständigen Satz von Screens, der eine ganze User Journey abdeckt – mit einem gut formulierten Prompt ist der Einstieg schon getan.

​
Ein Design generieren

1

Neues Projekt öffnen

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

Schreiben Sie Ihren Prompt

Beschreiben Sie den oder die gewünschten Screens. Seien Sie konkret bei der Art der App, dem Ziel der Nutzer und den Inhalten, die Sie erwarten.
3

Legen Sie fest, wie viele Screens Sie möchten

Standardmäßig generiert Flowstep einen einzelnen Screen. Wenn Sie mehrere Screens möchten, sagen Sie das ausdrücklich 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 zur Überprüfung oder Verfeinerung.
Wenn Sie eine neue Datei erstellen und ihren ersten Prompt senden, benennt Flowstep die Datei anhand dieses Prompts für Sie, damit Sie sie später leicht wiederfinden. Eine Datei, die bereits einen Namen oder frühere Prompts hat, behält ihren Namen. Sie können jede Datei jederzeit selbst umbenennen.

​
Eine Generierung stoppen

Während Flowstep antwortet, verwandelt sich die Senden-Schaltfläche in eine Stopp-Schaltfläche (Stop Flowstep response). Klicken Sie darauf, um die Generierung zu stoppen. Bei einer Anfrage mit mehreren Screens bleiben bereits fertige Screens auf Ihrer Canvas, und noch nicht fertige werden entfernt. Ein Stopp, nachdem Flowstep mit dem Erstellen von Screens begonnen hat, verbraucht trotzdem die Nachricht. Siehe Nachrichten und Limits.

​
Ein Screen oder mehrere Screens

Sie können aus einem einzigen Prompt entweder einen Screen oder bis zu 6 Screens generieren. Beide Ansätze eignen sich für unterschiedliche Phasen der Designarbeit.
  • Ein Screen – ideal, um einen bestimmten UI-Zustand, eine Komponente oder ein fokussiertes Konzept zu erkunden.
  • Mehrere Screens – ideal, um Flows abzubilden, Layout-Optionen zu vergleichen oder eine vollständige User Journey schnell abzudecken.
Wenn Sie mehrere Screens möchten, seien Sie in Ihrem Prompt ausdrücklich. Flowstep nutzt den Wortlaut Ihres Prompts, um zu entscheiden, wie viele Screens entstehen. Vage Prompts liefern daher meist nur einen Screen. Generierte Screens heißen Screen 1, Screen 2 und so weiter. Verwenden Sie diese Namen, um in Folgeprompts auf einen bestimmten Screen zu verweisen.

​
Weitere Eingabemöglichkeiten

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 jeweils bis zu 3 MB per Drag-and-Drop, über die Dateiauswahl oder durch Einfügen an den Prompt an. Verweisen Sie in Ihrem Prompt auf ein angehängtes Bild, und Flowstep bezieht es in die generierten Screens ein. Siehe Referenzen nutzen.
  • Ihren Prompt diktieren – klicken Sie auf die Mikrofon-Schaltfläche in der Prompt-Leiste (oder drücken Sie Cmd+Shift+V auf dem Mac beziehungsweise Ctrl+Shift+V unter Windows) und sprechen Sie bis zu 60 Sekunden lang. Das Transkript wird an alles angehängt, was Sie bereits eingegeben haben.
  • Flowstep das Web recherchieren lassen – wenn Ihr Prompt es erfordert (zum Beispiel „clone the Stripe pricing page“), kann Flowstep im Web suchen und das Branding einer Seite auslesen – Farben, Schriften, Logo, UI-Komponenten – und in den generierten Screens verwenden. Flowstep entscheidet selbst, ob es recherchiert. Das wird daher nicht bei jedem Prompt ausgelöst. Beachten Sie, dass nachgebaute Websites andere Bilder und eine andere Navigation verwenden als das Original.
  • Design-Richtlinien festlegen – definieren Sie dauerhafte Stilregeln, die für jede Generierung in der Datei gelten. Siehe Design-Richtlinien.

​
Effektive Prompts schreiben

Beispiel für einen Prompt mit einem Screen: “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 einen Prompt mit mehreren Screens: “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 einen Prompt zur vollständigen Journey: “Cover the full user journey in a expense reporting app, from submitting a receipt to manager approval.”
Beachten Sie diese Grundsätze beim Schreiben von Prompts:
  • Nennen Sie die Plattform (Mobile, Desktop, Tablet), damit Flowstep die Screens richtig dimensioniert.
  • Beschreiben Sie das Ziel der Nutzer und nicht nur UI-Elemente. Flowstep leitet das Layout aus der Absicht ab.
  • Nennen Sie wichtige Inhalte wie Labels, Aktionen oder Daten, wenn sie für das Design wichtig sind.
  • Verwenden Sie Formulierungen wie “generate multiple screens” oder “cover the full user journey”, um Ausgaben mit mehreren Screens auszulösen.