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

# Sunting dan iterasi desain Flowstep melalui chat atau kanvas

> Perbaiki desain layar yang dihasilkan Flowstep melalui penyuntingan visual manual atau prompt berbasis chat — iterasi berkali-kali sampai desain sempurna.

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

Desain Flowstep dapat disunting sepenuhnya setelah dibuat. Anda tidak terkunci pada apa yang pertama kali dihasilkan AI—Anda dapat menyesuaikan visual langsung di editor, menggunakan chat untuk mendeskripsikan perubahan dalam bahasa biasa, atau meminta Flowstep menghasilkan variasi dan layar baru. Gunakan metode mana pun yang sesuai dengan perubahan yang ingin Anda lakukan.

## Dua cara untuk menyunting

<Tabs>
  <Tab title="Penyuntingan visual manual">
    Buat perubahan langsung pada kanvas dengan memilih dan memodifikasi elemen. Metode ini paling baik untuk penyesuaian presisi—memindahkan komponen, mengubah warna, memperbarui label, atau menyesuaikan spasi.

    <Steps>
      <Step title="Pilih elemen yang ingin Anda ubah">
        Klik komponen atau lapisan apa pun dalam desain Anda untuk memilihnya.
      </Step>

      <Step title="Buat perubahan Anda">
        Gunakan kontrol editor untuk menyesuaikan properti seperti warna, ukuran, posisi, atau konten teks.
      </Step>

      <Step title="Tinjau hasilnya">
        Perubahan Anda diterapkan segera pada kanvas. Lanjutkan penyuntingan atau pindah ke layar berikutnya.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Penyuntingan berbasis chat">
    Deskripsikan perubahan yang Anda inginkan dalam bahasa biasa dan Flowstep memperbarui desain untuk Anda. Metode ini lebih cepat untuk perubahan luas atau struktural—menyesuaikan tata letak, mempertimbangkan kembali bagian, atau menerapkan arah gaya.

    <Steps>
      <Step title="Buka panel chat">
        Pilih layar yang ingin Anda sunting, kemudian buka input chat.
      </Step>

      <Step title="Deskripsikan perubahan Anda">
        Ketikkan apa yang ingin Anda perbarui di Flowstep. Bersifat spesifik tentang apa yang harus berubah dan mengapa, jika membantu.
      </Step>

      <Step title="Tinjau desain yang diperbarui">
        Flowstep menerapkan perubahan dan menampilkan hasilnya kepada Anda. Jika tidak cukup tepat, kirim pesan lanjutan untuk menyempurnakan lebih lanjut.
      </Step>
    </Steps>

    Penyuntingan dan regenerasi memperbarui layar pilihan **in place** daripada menambahkan layar baru — saat Flowstep melakukan streaming perubahan, elemen yang sedang dikerjakan disorot dengan batas garis putus-putus hijau. Menghasilkan tanpa layar yang dipilih menambahkan layar baru sebagai gantinya.
  </Tab>
</Tabs>

## Sunting hanya bagian dari layar

Anda tidak harus menyunting seluruh layar. Pilih sub-elemen — kartu, tombol, label teks — dan prompt chat Anda berlaku hanya untuk itu, membiarkan sisa layar tidak tersentuh.

* Beralih ke mode **Direct selection** dengan **Shift+V** (atau dropdown di tombol toolbar Select) untuk memilih elemen terdalam di bawah klik Anda. Tekan **V** untuk pemilihan normal, atau tahan **Cmd** (Mac) / **Ctrl** (Windows) untuk menggunakan pemilihan langsung sementara. **Escape** keluar dari pemilihan langsung.
* Pilih sub-elemen di seluruh beberapa layar dengan **Cmd+Shift** — satu prompt dapat menyunting hingga 6 layar per pesan.

Ketika elemen gambar dipilih (di luar mode wireframe), panel **Image** muncul di panel properti: pratinjau gambar, tukarkan dengan menyeret file gambar baru ke pratinjau atau mengklik **Pick image**, atau simpan dengan **Download image**.

## Pulihkan versi sebelumnya

Setiap generasi AI dalam riwayat chat menyimpan hasil aslinya. Jika layar telah disunting atau dihapus sejak dibuat, pesan chatnya menampilkan tombol **Restore** — **Restore original** untuk mengembalikan penyuntingan, atau **Restore** / **Restore all** untuk membawa kembali layar yang dihapus. Gunakan ini untuk kembali ke keadaan yang dikenal baik setelah penyuntingan berjalan ke arah yang salah.

## Tindakan sekali 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>

Di luar penyuntingan langsung, Anda dapat meminta Flowstep untuk menjelajahi alternatif:

* **Try again from scratch** — minta Flowstep menghasilkan versi segar dari layar saat ini dengan tata letak atau arah visual yang berbeda.
* **Show the next screen** — minta Flowstep menghasilkan apa yang secara logis datang selanjutnya dalam aliran pengguna.
* **Make it pretty** — sesuaikan spasi, perataan, dan warna di seluruh desain. Tata letak tetap sama.

Opsi ini memungkinkan Anda untuk melakukan iterasi dengan cepat tanpa harus menulis prompt setiap kali.

## Iterasi untuk penyempurnaan

Desain jarang mendarat sempurna pada upaya pertama. Gunakan penyuntingan berbasis chat untuk setiap putaran umpan balik—deskripsikan apa yang berfungsi dan apa yang tidak, dan Flowstep menyesuaikan dari sana. Tidak ada batas berapa kali Anda dapat melakukan iterasi pada layar.

<Tip>
  Ketika melakukan iterasi melalui chat, referensikan elemen tertentu berdasarkan nama atau lokasi untuk mendapatkan hasil yang lebih akurat. Misalnya: "Pindahkan tombol call-to-action ke bagian bawah layar dan buat lebar penuh" lebih efektif daripada "perbaiki tombol."
</Tip>