Langsung ke konten utama
Flowstep menghasilkan layar UI dari prompt bahasa alami, sehingga Anda dapat beralih dari ide ke desain visual dalam hitungan detik. Baik Anda memerlukan satu layar untuk memvalidasi sebuah konsep maupun serangkaian layar lengkap yang mencakup seluruh perjalanan pengguna, prompt yang ditulis dengan baik sudah cukup untuk memulai.

​
Hasilkan desain

1

Buka proyek baru

Dari dasbor Flowstep Anda, buat proyek baru atau buka proyek yang sudah ada tempat Anda ingin menambahkan layar.
2

Tulis prompt Anda

Ketik deskripsi layar atau layar yang Anda inginkan. Jelaskan jenis aplikasinya, tujuan pengguna, dan konten yang Anda harapkan untuk dilihat.
3

Tentukan berapa banyak layar yang Anda inginkan

Secara default, Flowstep menghasilkan satu layar. Jika Anda menginginkan beberapa layar, nyatakan secara eksplisit dalam prompt Anda. Flowstep dapat menghasilkan hingga 6 layar dari satu prompt.
4

Hasilkan

Kirim prompt Anda. Flowstep membuat layar Anda dan menampilkannya di editor, siap untuk ditinjau atau disempurnakan.
Saat Anda membuat file baru dan mengirim prompt pertamanya, Flowstep memberi nama file berdasarkan prompt tersebut agar mudah ditemukan nanti. File yang sudah memiliki nama, atau yang sudah memiliki prompt sebelumnya, mempertahankan namanya. Anda dapat mengganti nama file kapan saja.

​
Hentikan generasi

Saat Flowstep sedang merespons, tombol kirim berubah menjadi tombol berhenti (Stop Flowstep response). Klik tombol ini untuk menghentikan generasi. Dalam permintaan multi-layar, layar yang sudah selesai tetap ada di kanvas Anda, dan layar yang belum selesai akan dihapus. Menghentikan generasi setelah Flowstep mulai membangun layar tetap menggunakan pesan. Lihat pesan dan batas.

​
Satu layar vs. beberapa layar

Anda dapat menghasilkan satu layar atau hingga 6 layar dari satu prompt. Kedua pendekatan ini cocok untuk tahap pekerjaan desain yang berbeda.
  • Satu layar — paling cocok untuk menjelajahi kondisi UI, komponen, atau konsep tertentu yang terfokus.
  • Beberapa layar — paling cocok untuk memetakan alur, membandingkan opsi tata letak, atau mencakup seluruh perjalanan pengguna dengan cepat.
Saat Anda menginginkan beberapa layar, nyatakan secara eksplisit dalam prompt Anda. Flowstep menggunakan kata-kata dalam prompt Anda untuk menentukan berapa banyak layar yang dibuat, sehingga prompt yang samar biasanya hanya menghasilkan satu layar. Layar yang dihasilkan diberi nama Screen 1, Screen 2, dan seterusnya. Gunakan nama-nama ini untuk merujuk layar tertentu dalam prompt lanjutan.

​
Cara lain untuk membuat prompt

Teks bukan satu-satunya input. Anda juga dapat:
  • Lampirkan file — tambahkan gambar (JPG, PNG, WEBP) atau dokumen (PDF, MD, TXT) hingga 3 MB per file ke prompt, melalui seret-dan-lepas, pemilih file, atau dengan menempel. Rujuk gambar yang dilampirkan dalam prompt Anda, dan Flowstep akan menyertakannya dalam layar yang dihasilkan. Lihat Gunakan Referensi.
  • Dikte prompt Anda — klik tombol mikrofon di bilah prompt (atau tekan Cmd+Shift+V di Mac, Ctrl+Shift+V di Windows) lalu bicara hingga 60 detik. Transkrip akan ditambahkan ke teks yang sudah Anda ketik.
  • Biarkan Flowstep meneliti web — saat prompt Anda memerlukannya (misalnya, “clone the Stripe pricing page” atau “klon halaman harga Stripe”), Flowstep dapat mencari di web dan membaca identitas merek halaman — warna, font, logo, komponen UI — lalu menggunakannya di layar yang dihasilkan. Flowstep memutuskan sendiri apakah perlu meneliti, sehingga tidak selalu terpicu pada setiap prompt. Perhatikan bahwa situs web yang dibuat ulang menggunakan gambar dan navigasi yang berbeda dari aslinya.
  • Atur panduan desain — tentukan aturan gaya tetap yang berlaku untuk setiap generasi dalam file. Lihat Panduan Desain.
Contoh prompt satu layar: “Rancang layar login mobile untuk aplikasi pelacak kebugaran dengan kolom email dan kata sandi, tombol masuk, dan tautan lupa kata sandi.”
Contoh prompt multi-layar: “Hasilkan beberapa layar untuk alur onboarding aplikasi pesan antar makanan—mencakup pemilihan preferensi masakan, memasukkan alamat pengantaran, dan mengonfirmasi pesanan pertama.”
Contoh prompt perjalanan lengkap: “Cakup seluruh perjalanan pengguna di aplikasi pelaporan biaya, mulai dari mengirim struk hingga persetujuan manajer.”
Perhatikan prinsip-prinsip berikut saat menulis prompt:
  • Sebutkan platformnya (mobile, desktop, tablet) agar Flowstep menyesuaikan ukuran layar dengan benar.
  • Jelaskan tujuan pengguna, bukan hanya elemen UI—Flowstep menyimpulkan tata letak dari maksudnya.
  • Sertakan konten penting seperti label, aksi, atau data jika berpengaruh pada desain.
  • Gunakan frasa seperti “hasilkan beberapa layar” atau “cakup seluruh perjalanan pengguna” untuk memicu keluaran multi-layar.