> ## 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.

# Flowstep-designs bewerken en verfijnen via chat of canvas

> Verfijn elk door Flowstep gegenereerd scherm door handmatige visuele bewerking of chat-gebaseerde prompts — zeg maar hoe lang je nodig hebt tot het ontwerp klopt.

<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 zijn volledig bewerkbaar na generatie. Je bent niet vastgezet op wat de AI eerst produceert — je kunt visuele elementen rechtstreeks in de editor aanpassen, chat gebruiken om wijzigingen in natuurlijke taal te beschrijven, of Flowstep vragen om variaties en nieuwe schermen te genereren. Gebruik welke methode past bij de wijziging die je wilt maken.

## Twee manieren om te bewerken

<Tabs>
  <Tab title="Handmatige visuele bewerking">
    Breng wijzigingen rechtstreeks aan op het canvas door elementen te selecteren en aan te passen. Deze methode werkt het beste voor nauwkeurige aanpassingen — een component verplaatsen, een kleur veranderen, een label bijwerken, of de afstand aanpassen.

    <Steps>
      <Step title="Selecteer het element dat je wilt wijzigen">
        Klik op een component of laag in je ontwerp om het te selecteren.
      </Step>

      <Step title="Breng je wijzigingen aan">
        Gebruik de editorbesturingselementen om eigenschappen aan te passen, zoals kleur, grootte, positie of tekstinhoud.
      </Step>

      <Step title="Bekijk het resultaat">
        Je wijzigingen worden onmiddellijk op het canvas toegepast. Ga door met bewerking of ga naar het volgende scherm.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Chat-gebaseerde bewerking">
    Beschrijf de wijziging die je wilt in natuurlijke taal en Flowstep werkt het ontwerp voor je bij. Deze methode is sneller voor brede of structurele wijzigingen — lay-out aanpassen, een sectie herdenken, of een stijlrichting toepassen.

    <Steps>
      <Step title="Open het chatpaneel">
        Selecteer het scherm dat je wilt bewerken en open vervolgens de chatinvoer.
      </Step>

      <Step title="Beschrijf je wijziging">
        Typ wat je Flowstep wilt bijwerken. Wees specifiek over wat er moet veranderen en waarom, als dat helpt.
      </Step>

      <Step title="Bekijk het bijgewerkte ontwerp">
        Flowstep past de wijziging toe en toont je het resultaat. Als het niet helemaal goed is, stuur een vervolgbericht om verder aan te scherpen.
      </Step>
    </Steps>

    Bewerkingen en regeneraties werken het geselecteerde scherm **ter plaatse** bij in plaats van een nieuw scherm toe te voegen — terwijl Flowstep de wijziging streamt, wordt het element waar het momenteel aan werkt gemarkeerd met een groene gestippelde rand. Genereren zonder een geselecteerd scherm voegt een nieuw scherm toe.
  </Tab>
</Tabs>

## Bewerk slechts een deel van een scherm

Je hoeft niet alle schermen te bewerken. Selecteer een subelement — een kaart, een knop, een tekstlabel — en je chat-prompt wordt alleen op dit element toegepast, waardoor de rest van het scherm ongewijzigd blijft.

* Schakel naar de modus **Direct selection** met **Shift+V** (of de dropdown in de knop **Select** in de werkbalk) om het diepste element onder je klik te selecteren. Druk op **V** voor normale selectie, of houd **Cmd** (Mac) / **Ctrl** (Windows) ingedrukt om directe selectie tijdelijk te gebruiken. **Escape** sluit de directe selectie af.
* Selecteer subelementen in meerdere schermen met **Cmd+Shift** — één prompt kan tot 6 schermen per bericht bewerken.

Wanneer een afbeeldingselement is geselecteerd (buiten de wireframe-modus), verschijnt een **Image**-paneel in het eigenschappenpaneel: geef een voorbeeld van de afbeelding, verwissel deze door een nieuw afbeeldingsbestand naar de preview te slepen of klik op **Pick image**, of sla het op met **Download image**.

## Een vorige versie herstellen

Elke AI-generatie in de chatgeschiedenis behoudt het oorspronkelijke resultaat. Als een scherm sinds de generatie is bewerkt of verwijderd, toont het chat-bericht een **Restore**-knop — **Restore original** om bewerkingen ongedaan te maken, of **Restore** / **Restore all** om verwijderde schermen terug te brengen. Gebruik dit om na een mislukte bewerking terug te gaan naar een bekende goede staat.

## Acties met één klik

<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>

Buiten directe bewerkingen kun je Flowstep vragen om alternatieven te verkennen:

* **Try again from scratch** — vraag Flowstep om een frisse versie van het huidige scherm met een ander ontwerp of visuele richting te produceren.
* **Show the next screen** — vraag Flowstep om te genereren wat logischerwijs volgt in de gebruikersstroom.
* **Make it pretty** — pas afstand, uitlijning en kleuren over het ontwerp aan. De lay-out blijft hetzelfde.

Met deze opties kun je snel herhalen zonder telkens een prompt te hoeven schrijven.

## Herhalen om aan te scherpen

Ontwerp beperkt zich zelden tot de eerste poging. Gebruik chat-gebaseerde bewerking voor elke feedback-ronde — beschrijf wat werkt en wat niet, en Flowstep past zich daar van af aan. Er is geen limiet aan hoe vaak je een scherm kunt herhalen.

<Tip>
  Bij het herhalen via chat verwijst je naar specifieke elementen op naam of locatie voor nauwkeurigere resultaten. Bijvoorbeeld: "Verplaats de call-to-action-knop naar de onderkant van het scherm en maak deze volledig breed" is effectiever dan "repareer de knop."
</Tip>
