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

# Muokkaa ja iteroi Flowstep-suunnitelmia chatissa tai kanvaassa

> Hioi mitä tahansa Flowstepissä luotua näyttöä käyttämällä manuaalista visuaalista muokkaamista tai chat-pohjaisia kehotteita — iteroi niin monta kertaa kuin tarvitaan kunnes suunnitelma on oikea.

<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-suunnitelmat ovat täysin muokattavia luomisen jälkeen. Et ole sidottu siihen, mitä tekoäly alun perin luo — voit säätää visuaalisuutta suoraan editorissa, kuvata muutoksia chatissa tavallisella kielellä tai pyytää Flowstepia generoimaan vaihteluja ja uusia näyttöjä. Käytä menetelmää, joka sopii tekemäsi muutokselle.

## Kaksi tapaa muokata

<Tabs>
  <Tab title="Manuaalinen visuaalinen muokkaaminen">
    Tee muutokset suoraan kanvaassa valitsemalla ja muokkaamalla elementtejä. Tämä menetelmä toimii parhaiten tarkoille säädöille — komponentin siirtäminen, värin muuttaminen, otsikon päivittäminen tai välilyönnin hienosäätö.

    <Steps>
      <Step title="Valitse muokattava elementti">
        Napsauta mitä tahansa komponenttia tai kerrosta suunnitelmassasi valitaksesi sen.
      </Step>

      <Step title="Tee muutoksesi">
        Käytä editorin säätöjä muuttaaksesi ominaisuuksia, kuten väriä, kokoa, sijaintia tai tekstisisältöä.
      </Step>

      <Step title="Tarkista tulos">
        Muutoksesi tulevat voimaan välittömästi kanvaalla. Jatka muokkaamista tai siirry seuraavaan näyttöön.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Chat-pohjainen muokkaaminen">
    Kuvaa muutoksesi tavallisella kielellä ja Flowstep päivittää suunnitelman sinulle. Tämä menetelmä on nopeampi laajoille tai rakenteellisille muutoksille — asettelun säätämiselle, osan uudelleenmietinnälle tai tyylin suunnan soveltamiselle.

    <Steps>
      <Step title="Avaa chat-paneeli">
        Valitse muokattava näyttö ja avaa chat-syöte.
      </Step>

      <Step title="Kuvaa muutoksesi">
        Kirjoita, mitä haluat Flowstepin päivittävän. Ole tarkka siitä, mitä pitäisi muuttua ja miksi, jos se auttaa.
      </Step>

      <Step title="Tarkista päivitetty suunnitelma">
        Flowstep soveltaa muutoksen ja näyttää tuloksen. Jos se ei ole aivan oikein, lähetä seurantaviesti hiomiseen.
      </Step>
    </Steps>

    Muokkaukset ja uudelleengeneroinnit päivittävät valitun näytön **paikalla** sen sijaan, että lisäisivät uuden näytön — kun Flowstep virtaa muutosta, muokkaama elementti korostuu vihreällä katkoviivalla. Generoiminen ilman valittua näyttöä lisää sen sijaan uuden näytön.
  </Tab>
</Tabs>

## Muokkaa vain osaa näytöstä

Sinun ei tarvitse muokata kokonaisia näyttöjä. Valitse osaelementti — kortti, painike, tekstinimi — ja chat-kehote koskee vain sitä, jättäen loput näytöstä muuttumattomiksi.

* Siirry **Direct selection** -tilaan **Shift+V**-näppäimillä (tai valintapainikkeen pudotusvalikolla) valitaksesi syvimmän napsautuksella olevan elementin. Paina **V** normaalissa valinnassa, tai pidä **Cmd** (Mac) / **Ctrl** (Windows) pohjassa käyttääksesi suoraa valintaa väliaikaisesti. **Escape** poistuu suorasta valinnasta.
* Valitse osaelementit useilta näytöiltä **Cmd+Shift**-näppäimillä — yksittäinen kehote voi muokata jopa 6 näyttöä per viesti.

Kun kuvaelementti on valittuna (kuvatilan ulkopuolella), **Image** -paneeli ilmestyy ominaisuuspaneeliin: esikatsele kuva, vaihda se vetämällä uutta kuvatiedostoa esikatselulle tai napsauttamalla **Pick image**, tai tallenna se **Download image** -toiminnolla.

## Palauta edellinen versio

Jokainen chat-historian tekoälygenerointi säilyttää alkuperäisen tuloksensa. Jos näyttöä on muokattu tai poistettu siitä lähtien kun se luotiin, sen chat-viestissa näkyy **Restore** -painike — **Restore original** -linkki muutoksien peruuttamiseen tai **Restore** / **Restore all** -linkki poistettujen näyttöjen palauttamiseen. Käytä sitä päästäksesi takaisin tunnettuun hyvään tilaan, jos muokkaus menee väärään suuntaan.

## Yhden napsautuksen toiminnot

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

Suorien muokkausten lisäksi voit pyytää Flowstepia tutkimaan vaihtoehtoja:

* **Try again from scratch** — pyydä Flowstepia tuottamaan nykyisen näytön tuore versio eri asettelulla tai visuaalisella suunnalla.
* **Show the next screen** — pyydä Flowstepia generoimaan, mitä loogisesti seuraa käyttäjän vuorovaikutteessa.
* **Make it pretty** — säädä välilyöntejä, kohdistusta ja värejä suunnitelmassa. Asettelu pysyy samana.

Nämä asetukset antavat sinulle mahdollisuuden iteroida nopeasti kirjoittamatta kehotetta joka kerta.

## Iteroiminen hiomiseen

Suunnitelma harvoin laskeutuu täydellisesti ensimmäisellä yrityksellä. Käytä chat-pohjaista muokkaamista jokaisessa palautekierroksessa — kuvaa, mikä toimii ja mikä ei, ja Flowstep säätää sieltä. Näytön iteroimiskertojen määrälle ei ole rajaa.

<Tip>
  Chat-pohjaisen muokkaamisen aikana viittaa tiettyihin elementteihin nimellä tai sijainnilla saadaksesi tarkempia tuloksia. Esimerkiksi: "Siirrä kutsu-toiminto-painike näytön pohjaan ja tee siitä koko levyinen" on tehokkaampi kuin "korjaa painike."
</Tip>