> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Bearbeiten und Iterieren von Flowstep-Designs über Chat oder Canvas

> Verfeinern Sie jeden von Flowstep generierten Screen durch manuelle visuelle Bearbeitung oder Chat-basierte Prompts — iterieren Sie beliebig oft, bis das Design stimmt.

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.25.48.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=0a67045dde91f73cae39afde3d359269" alt="Screenshot 2026 05 06 At 14 25 48" width="2338" height="1510" data-path="images/Screenshot-2026-05-06-at-14.25.48.png" />
</Frame>

Flowstep-Designs können nach der Generierung vollständig bearbeitet werden. Sie sind nicht auf das beschränkt, was die KI anfangs erstellt — Sie können Grafiken direkt im Editor anpassen, Chat verwenden, um Änderungen in einfacher Sprache zu beschreiben, oder Flowstep bitten, Variationen und neue Screens zu generieren. Verwenden Sie die Methode, die für die gewünschte Änderung am besten geeignet ist.

## Zwei Möglichkeiten zum Bearbeiten

<Tabs>
  <Tab title="Manuelle visuelle Bearbeitung">
    Nehmen Sie Änderungen direkt auf der Canvas vor, indem Sie Elemente auswählen und ändern. Diese Methode funktioniert am besten für präzise Anpassungen – verschieben einer Komponente, Ändern einer Farbe, Aktualisieren eines Labels oder Feinabstimmung von Abständen.

    <Steps>
      <Step title="Wählen Sie das zu ändernde Element aus">
        Klicken Sie auf eine beliebige Komponente oder Schicht in Ihrem Design, um sie auszuwählen.
      </Step>

      <Step title="Nehmen Sie Ihre Änderungen vor">
        Verwenden Sie die Editor-Steuerelemente, um Eigenschaften wie Farbe, Größe, Position oder Textinhalt anzupassen.
      </Step>

      <Step title="Überprüfen Sie das Ergebnis">
        Ihre Änderungen werden sofort auf der Canvas angewendet. Fahren Sie mit der Bearbeitung fort oder fahren Sie zum nächsten Screen fort.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Chat-basierte Bearbeitung">
    Beschreiben Sie die gewünschte Änderung in einfacher Sprache und Flowstep aktualisiert das Design für Sie. Diese Methode ist schneller für umfangreiche oder strukturelle Änderungen — Anpassung des Layouts, Neubewertung eines Abschnitts oder Anwendung einer Stilrichtung.

    <Steps>
      <Step title="Öffnen Sie das Chat-Panel">
        Wählen Sie den zu bearbeitenden Screen aus und öffnen Sie dann die Chat-Eingabe.
      </Step>

      <Step title="Beschreiben Sie Ihre Änderung">
        Geben Sie ein, was Flowstep aktualisieren soll. Seien Sie spezifisch, was sich ändern sollte und warum, wenn dies hilfreich ist.
      </Step>

      <Step title="Überprüfen Sie das aktualisierte Design">
        Flowstep wendet die Änderung an und zeigt Ihnen das Ergebnis. Wenn es nicht ganz richtig ist, senden Sie eine Folgenachricht, um weitere Verfeinerung durchzuführen.
      </Step>
    </Steps>

    Bearbeitungen und Regenerationen aktualisieren den ausgewählten Screen **an Ort und Stelle**, anstatt einen neuen Screen hinzuzufügen — während Flowstep die Änderung streamt, wird das gerade bearbeitete Element mit einem grünen gestrichelten Rand hervorgehoben. Das Generieren ohne ausgewählten Screen fügt stattdessen einen neuen Screen hinzu.
  </Tab>
</Tabs>

## Nur einen Teil eines Screens bearbeiten

Sie müssen keine ganzen Screens bearbeiten. Wählen Sie ein Unter-Element — eine Karte, eine Schaltfläche, ein Textlabel — aus und Ihr Chat-Prompt wird nur auf dieses angewendet, wobei der Rest des Screens unverändert bleibt.

* Wechseln Sie zum **Direct selection** Modus mit **Shift+V** (oder der Dropdown-Liste auf der Schaltfläche „Select toolbar") um das tiefste Element unter Ihrem Klick auszuwählen. Drücken Sie **V** für normale Auswahl oder halten Sie **Cmd** (Mac) / **Ctrl** (Windows) gedrückt, um direkte Auswahl temporär zu verwenden. **Escape** beendet die direkte Auswahl.
* Wählen Sie Unter-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 Eigenschaftenpanel angezeigt: Vorschau des Bildes anzeigen, es austauschen, indem Sie eine neue Bilddatei auf die Vorschau ziehen oder auf **Pick image** klicken, oder es mit **Download image** speichern.

## Vorherige Version wiederherstellen

Jede KI-Generierung im Chat-Verlauf behält sein ursprüngliches Ergebnis. Wenn ein Screen seit seiner Generierung bearbeitet oder gelöscht wurde, zeigt seine Chat-Nachricht eine **Restore** Schaltfläche – **Restore original** um Bearbeitungen rückgängig zu machen, oder **Restore** / **Restore all** um gelöschte Screens zurückzubringen. Verwenden Sie diese, um nach einer fehlgeleiteten Bearbeitung zu einem bekannten guten Status zurückzukehren.

## Einmal-Aktionen

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.29.34.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=52e0f38e4c4506adbecdccc7a95be652" alt="Screenshot 2026 05 06 At 14 29 34" width="2436" height="1528" data-path="images/Screenshot-2026-05-06-at-14.29.34.png" />
</Frame>

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

* **Versuchen Sie es erneut von Grund auf** — bitten Sie Flowstep, eine neue Version des aktuellen Screens mit einem anderen Layout oder einer anderen visuellen Richtung zu erstellen.
* **Zeigen Sie den nächsten Screen** — bitten Sie Flowstep, das zu generieren, was logisch als Nächstes in der User-Journey kommt.
* **Machen Sie es schöner** — passen Sie Abstände, Ausrichtung und Farben im gesamten Design an. Layout bleibt gleich.

Mit diesen Optionen können Sie schnell iterieren, ohne jedes Mal einen Prompt schreiben zu müssen.

## Iterieren zur Verfeinerung

Design landet 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 sich entsprechend an. Es gibt keine Grenze, wie oft Sie einen Screen iterieren können.

<Tip>
  Wenn Sie per Chat iterieren, beziehen Sie sich auf bestimmte Elemente nach Namen oder Standort, um präzisere Ergebnisse zu erhalten. Beispielsweise: „Move the call-to-action button to the bottom of the screen and make it full-width" ist wirksamer als „fix the button."
</Tip>
