Flowstep-Designs über Chat oder Canvas bearbeiten und verfeinern

Flowstep-Designs sind nach der Generierung vollständig bearbeitbar. Sie sind nicht auf das erste Ergebnis der KI beschränkt – Sie können Elemente direkt im Editor anpassen, mit Chat Änderungen in natürlicher Sprache beschreiben oder Flowstep auffordern, Variationen und neue Screens zu generieren. Wählen Sie die Methode, die am besten zu der gewünschten Änderung passt.

​

Zwei Möglichkeiten zum Bearbeiten

​

Nur einen Teil eines Screens bearbeiten

Sie müssen nicht ganze Screens bearbeiten. Wählen Sie ein Teil-Element aus – eine Karte, einen Button, ein Text-Label – und Ihr Chat-Prompt wird nur auf dieses Element angewendet, während der Rest des Screens unverändert bleibt.

• Wechseln Sie zum Modus Direct selection mit Shift+V (oder dem Dropdown im Select-Schaltflächen-Menü), um das tiefste Element unter Ihrem Klick auszuwählen. Drücken Sie V für normale Auswahl oder halten Sie Cmd (Mac) / Ctrl (Windows), um direkte Auswahl temporär zu nutzen. Escape beendet die direkte Auswahl.
• Wählen Sie Teil-Elemente über mehrere Screens mit Cmd+Shift aus – ein einzelner Prompt kann bis zu 6 Screens pro Nachricht bearbeiten.

Wenn ein Bildelement ausgewählt ist (außerhalb des Wireframe-Modus), wird ein Image-Panel im Property-Panel angezeigt: Zeigen Sie eine Vorschau des Bildes, ersetzen Sie es, indem Sie eine neue Bilddatei auf die Vorschau ziehen oder auf Pick image klicken, oder speichern Sie es mit Download image.

​

Elemente kopieren und einfügen

Kopieren Sie eine Auswahl und fügen Sie sie überall wieder ein, wo Sie sie brauchen – in derselben Datei, in einer anderen Datei oder in einem anderen Browser-Tab, da Kopien in Ihre Systemzwischenablage gelegt werden.

• Kopieren Sie mit Cmd+C (Mac) / Ctrl+C (Windows), schneiden Sie mit Cmd+X / Ctrl+X aus und fügen Sie mit Cmd+V / Ctrl+V ein.
• Duplizieren Sie eine Auswahl direkt an Ort und Stelle mit Cmd+D / Ctrl+D.
• Eingefügte Elemente landen leicht versetzt zu den Originalen, damit sie diese nicht verdecken.

Diese Tastenkombinationen wirken auf die ausgewählten Elemente. Während Sie Text bearbeiten, greifen sie auf das normale Kopieren und Einfügen von Text zurück.

​

Screens auf dem Canvas benennen

Jeder Screen zeigt seinen Namen auf einem Label oberhalb davon auf dem Canvas. Ein Screen, den Sie noch nicht benannt haben, trägt die Bezeichnung Screen.

• Doppelklicken Sie auf das Label, um den Screen umzubenennen, und drücken Sie dann Enter, um zu speichern. Ein Klick außerhalb speichert ebenfalls. Namen können bis zu 100 Zeichen lang sein.
• Klicken Sie einmal auf das Label, um den Screen auszuwählen, und ziehen Sie ihn dann, um ihn auf dem Canvas zu verschieben.

​

Deckkraft, Mischmodus und Ecken anpassen

Wählen Sie ein Element aus, um sein Erscheinungsbild im Property-Panel fein abzustimmen:

• Opacity (Deckkraft) – Legen Sie fest, wie transparent das Element ist, von 0 bis 100 %. Im selben Panel finden Sie einen Mischmodus (Normal, Multiply, Screen, Overlay und weitere), der steuert, wie sich das Element mit dem darunterliegenden Inhalt vermischt.
• Corners (Ecken) – Runden Sie die Ecken des Elements ab. Legen Sie einen einzelnen Corner radius für alle vier Ecken fest oder aktivieren Sie Per corner, um der oben links, oben rechts, unten rechts und unten links liegenden Ecke jeweils einen eigenen Radius zu geben. Jeder Wert kann ein Token aus Ihrem Theme oder ein Custom-Betrag sein.

​

Auf einzelne Pixel zoomen

Zoomen Sie die Canvas bis auf 25.600 %, um Abstände und Ausrichtung genau zu prüfen. Ab 200 % erscheinen pixelgenaue Rasterlinien, die umso deutlicher werden, je weiter Sie hineinzoomen, sodass Sie Elemente exakt ausrichten können.

​

Frühere Version wiederherstellen

Jede KI-Generierung in der Chat-Historie behält ihr ursprüngliches Ergebnis. Wenn ein Screen seit seiner Generierung bearbeitet oder gelöscht wurde, zeigt seine Chat-Nachricht eine Restore-Schaltfläche – Restore original zum Rückgängigmachen von Bearbeitungen oder Restore / Restore all zum Zurückbringen gelöschter Screens. Nutzen Sie dies, um zu einem bekannten guten Zustand zurückzukehren, falls eine Bearbeitung in die falsche Richtung geht. Fahren Sie über eine beliebige Nachricht im Chat-Panel, um zu sehen, wann sie gesendet wurde. Aktuelle Nachrichten zeigen die Uhrzeit; ältere zeigen, wie lange sie gesendet wurde (z. B. „vor 1 Tag”), mit dem vollständigen Datum und der Uhrzeit in einem Tooltip.

​

Aktionen mit einem Klick

Neben direkten Bearbeitungen können Sie Flowstep auffordern, Alternativen zu erkunden:

• Try again from scratch – fordern Sie Flowstep auf, eine neue Version des aktuellen Screens mit einem anderen Layout oder einer anderen Stilrichtung zu erzeugen.
• Show the next screen – fordern Sie Flowstep auf zu generieren, was logisch nächstes im User Flow kommt.
• Make it pretty – passen Sie Abstände, Ausrichtung und Farben im Design an. Das Layout bleibt gleich.

Diese Optionen ermöglichen Ihnen schnelle Iterationen, ohne jedes Mal einen Prompt schreiben zu müssen.

​

Iterativ verfeinern

Design ist selten beim ersten Versuch perfekt. Verwenden Sie Chat-basierte Bearbeitung für jede Feedback-Runde – beschreiben Sie, was funktioniert und was nicht, und Flowstep passt von dort aus an. Es gibt keine Grenze, wie oft Sie einen Screen verfeinern können.