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

# Apa itu Flowstep?

> Flowstep adalah alat desain AI yang menghasilkan layar UI yang dipoles dari prompt teks. Pelajari apa yang dilakukannya, untuk siapa, dan apa yang dapat Anda bangun dengannya.

<iframe src="https://www.youtube.com/embed/ziyHZVaSbvQ" 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 />

Deskripsikan layar yang Anda inginkan, dapatkan antarmuka yang dirancang dalam hitungan detik.

Untuk pengembang, ini adalah cara tercepat untuk menspesifikasi UI sebelum menulis kode. Untuk PM dan pendiri, ini adalah cara untuk mengomunikasikan ide produk tanpa ambiguitas. Untuk desainer, ini adalah titik awal yang melewatkan kanvas kosong.

## Apa yang dapat Anda lakukan dengan Flowstep

* **Hasilkan layar dari teks** — deskripsikan apa yang Anda inginkan, dapatkan UI yang dirancang dalam hitungan detik
* **Iterasi melalui prompt atau pengeditan langsung** — perbaiki tata letak, salinan, dan gaya tanpa meninggalkan kanvas
* **Pratinjau sebagai prototipe interaktif** — Flowstep menautkan layar Anda menjadi aliran yang dapat diklik secara otomatis. Lihat [Prototipe](/id/prototypes).
* **Hubungkan ke IDE Anda melalui MCP** — buat dan edit layar dari Cursor, Claude Code, Windsurf, atau Claude Desktop. Lihat [MCP Server](/id/mcp/overview).
* **Ekspor ke Figma, kode, atau file gambar** — tempel langsung ke file Figma yang sudah ada, ekspor kode, atau unduh layar sebagai PNG/JPG
* **Bagikan dengan satu tautan** — peninjau tidak perlu akun Flowstep untuk melihat atau berkomentar

## Untuk Siapa Flowstep

* **Pengembang** membangun UI produk tanpa desainer di sekitar, atau yang ingin menspesifikasi layar secara visual sebelum mengimplementasikannya
* **Manajer produk dan pendiri** mengomunikasikan ide secara visual atau memvalidasi ide
* **Desainer** melewatkan kanvas kosong — mulai dari tata letak yang dihasilkan dan edit dari sana

<Note>
  Tidak perlu pengalaman desain. Jika Anda dapat menggambarkan layar dalam bahasa Inggris biasa, Flowstep dapat menghasilkannya.
</Note>

## Ke mana selanjutnya

<CardGroup cols={2}>
  <Card title="Memulai dengan Cepat" icon="rocket" href="/id/getting-started">
    Buat layar pertama Anda dalam waktu kurang dari lima menit.
  </Card>

  <Card title="MCP Server" icon="terminal" href="/id/mcp/overview">
    Gunakan Flowstep dari Cursor, Claude Code, atau klien kompatibel MCP apa pun.
  </Card>

  <Card title="Membuat desain" icon="wand-magic-sparkles" href="/id/generating-designs">
    Cara menulis prompt yang menghasilkan layar yang benar-benar Anda inginkan.
  </Card>

  <Card title="Integrasi Figma" icon="figma" href="/id/figma-integration">
    Tempel desain Flowstep ke file Figma yang sudah ada dengan satu pintasan.
  </Card>
</CardGroup>