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

# Buat layar UI dari prompt teks dengan Flowstep

> Gunakan Flowstep untuk membuat satu layar atau hingga 6 layar sekaligus dari satu prompt teks — ideal untuk ideasi UI cepat dan mengeksplorasi alur lengkap.

<iframe src="https://www.youtube.com/embed/hHNwjKz_264" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

Flowstep menghasilkan layar UI dari prompt bahasa alami, memungkinkan Anda beralih dari ide ke desain visual dalam hitungan detik. Baik Anda membutuhkan satu layar untuk memvalidasi konsep atau rangkaian layar lengkap yang mencakup seluruh perjalanan pengguna, yang Anda butuhkan hanyalah prompt yang ditulis dengan baik untuk memulai.

## Buat desain

<Steps>
  <Step title="Buka proyek baru">
    Dari dasbor Flowstep Anda, buat proyek baru atau buka proyek yang ada di mana Anda ingin menambahkan layar.
  </Step>

  <Step title="Tulis prompt Anda">
    Ketik deskripsi layar atau layar yang ingin Anda buat. Berikan spesifik tentang jenis aplikasi, tujuan pengguna, dan konten yang Anda harapkan untuk melihat.
  </Step>

  <Step title="Tentukan berapa banyak layar yang Anda inginkan">
    Secara default, Flowstep menghasilkan satu layar. Jika Anda menginginkan beberapa layar, nyatakan dengan jelas dalam prompt Anda — Flowstep dapat menghasilkan hingga 6 layar dari satu prompt.
  </Step>

  <Step title="Buat">
    Kirimkan prompt Anda. Flowstep menghasilkan layar Anda dan menampilkannya di editor, siap untuk ditinjau atau disempurnakan.
  </Step>
</Steps>

## Satu layar vs. beberapa layar

Anda dapat menghasilkan satu layar atau hingga 6 layar dari satu prompt. Kedua pendekatan cocok untuk tahap berbeda dari pekerjaan desain.

* **Satu layar** — terbaik untuk mengeksplorasi status UI tertentu, komponen, atau konsep yang terfokus.
* **Beberapa layar** — terbaik untuk memetakan alur, membandingkan opsi tata letak, atau mencakup perjalanan pengguna lengkap dengan cepat.

Ketika Anda menginginkan beberapa layar, nyatakan dengan jelas dalam prompt Anda. Flowstep menggunakan redaksi prompt Anda untuk memutuskan berapa banyak layar yang akan diproduksi, jadi prompt yang tidak jelas biasanya mengembalikan satu layar. Layar yang dihasilkan dinamai **Screen 1**, **Screen 2**, dan seterusnya — gunakan nama-nama ini untuk merujuk ke layar tertentu dalam prompt tindak lanjut.

## Cara lain untuk memberikan prompt

Teks bukan satu-satunya input. Anda juga dapat:

* **Lampirkan file** — tambahkan gambar (JPG, PNG, WEBP) atau dokumen (PDF, MD, TXT) hingga 3 MB masing-masing ke prompt, melalui drag-and-drop, pemilih file, atau dengan menempel. Referensikan gambar yang dilampirkan dalam prompt Anda dan Flowstep menggabungkannya ke dalam layar yang dihasilkan. Lihat [Gunakan Referensi](/id/design-references).
* **Ucapkan prompt Anda** — klik tombol mikrofon di bilah prompt (atau tekan **Cmd+Shift+V** di Mac, **Ctrl+Shift+V** di Windows) dan bicara selama hingga 60 detik. Transkrip ditambahkan ke apa pun yang sudah Anda ketikkan.
* **Biarkan Flowstep meneliti web** — ketika prompt Anda memerlukan (misalnya, "tiru halaman harga Stripe"), Flowstep dapat mencari web dan membaca branding halaman — warna, font, logo, komponen UI — dan menggunakannya di layar yang dihasilkan. Flowstep memutuskan dengan sendirinya apakah akan meneliti, jadi tidak harus memicu pada setiap prompt; perhatikan bahwa situs web yang dibuat ulang menggunakan gambar dan navigasi yang berbeda dari aslinya.
* **Tetapkan panduan desain** — tentukan aturan gaya berdiri yang berlaku untuk setiap generasi dalam file. Lihat [Panduan Desain](/id/design-guidelines).

## Menulis prompt yang efektif

<Tip>
  **Contoh prompt layar tunggal:** "Desain layar login mobile untuk aplikasi pelacakan kebugaran dengan bidang email dan kata sandi, tombol masuk, dan tautan lupa kata sandi."
</Tip>

<Tip>
  **Contoh prompt multi-layar:** "Buat beberapa layar untuk alur penyambungan aplikasi pengiriman makanan—tutupi pemilihan preferensi masakan, memasukkan alamat pengiriman, dan mengonfirmasi pesanan pertama."
</Tip>

<Tip>
  **Contoh prompt perjalanan lengkap:** "Tutupi perjalanan pengguna lengkap di aplikasi pelaporan pengeluaran, dari mengirimkan kwitansi hingga persetujuan manajer."
</Tip>

Ingatlah prinsip-prinsip ini saat menulis prompt:

* Namai platform (mobile, desktop, tablet) sehingga Flowstep mengukur layar dengan benar.
* Jelaskan tujuan pengguna, bukan hanya elemen UI—Flowstep menyimpulkan tata letak dari niat.
* Sertakan konten kunci seperti label, tindakan, atau data jika penting untuk desain.
* Gunakan frasa seperti "generate multiple screens" atau "cover the full user journey" untuk memicu output multi-layar.