Wireframe
Selamat Datang
Area Wireframe memungkinkan Anda mendesain dan membuat prototipe tata letak antarmuka secara visual. Buat wireframe untuk merencanakan struktur aplikasi Anda sebelum mulai coding. Saat pertama kali membuka Wireframe, Anda akan melihat layar selamat datang dengan kartu Buat Wireframe untuk memulai, atau gunakan tombol + Wireframe Baru di pojok kanan atas.
Fitur Utama
Desain Manual
Bangun wireframe secara manual menggunakan editor kanvas visual — seret dan lepas komponen untuk mendesain layar Anda.
Pembuatan Bertenaga AI
Jelaskan apa yang Anda inginkan dan biarkan AI menghasilkan dokumentasi wireframe dan bingkai untuk Anda secara otomatis.
Input Suara
Gunakan tombol mikrofon bawaan atau klik tengah untuk mendiktekan deskripsi wireframe Anda dengan suara.
Wireframe ke Kode
Setelah wireframe Anda siap, kirim langsung ke pembuatan kode — dari desain ke kode yang berfungsi dalam satu alur kerja yang mulus.
Membuat Wireframe
Klik Buat Wireframe atau + Wireframe Baru untuk membuka dialog pembuatan. Anda akan memasukkan judul, memilih platform target (Seluler, Desktop, atau Web), menulis deskripsi wireframe Anda, dan memilih antara mode Manual atau Didukung AI.
Bidang Pengaturan Proyek
Judul
Beri nama proyek wireframe Anda sehingga Anda dapat mengidentifikasinya nanti di daftar wireframe.
Platform
Pilih platform target — Mobile, Desktop, atau Web — untuk menyesuaikan tata letak dan batasan wireframe.
Deskripsi
Jelaskan apa yang ingin Anda bangun. Ini digunakan oleh mode Bertenaga AI untuk menghasilkan dokumentasi dan bingkai. Mendukung input suara melalui tombol mikrofon.
Mode
Pilih Manual untuk langsung masuk ke editor kanvas, atau Bertenaga AI agar AI menghasilkan dokumentasi dan bingkai untuk Anda.
Mode Manual
Saat Anda memilih tab Manual dan mengklik Buat, Anda akan langsung dibawa ke editor kanvas wireframe di mana Anda bisa mulai membangun layar segera. Ini adalah pilihan terbaik ketika Anda sudah memiliki gambaran desain yang jelas dan ingin kontrol penuh sejak awal.
Kapan Menggunakan Manual
Anda memiliki desain tertentu dalam pikiran dan ingin membangunnya sendiri.
Anda ingin membuat sketsa kasar dengan cepat sebelum menyempurnakannya.
Anda lebih suka kontrol penuh atas setiap elemen sejak awal.
Mode Bertenaga AI
Saat Anda memilih tab Didukung AI, opsi tambahan muncul. Anda dapat mengetik atau mendiktekan deskripsi Anda, secara opsional mendefinisikan bingkai individual, memilih model AI pilihan Anda dari dropdown di bagian atas, lalu klik Hasilkan agar AI membuat dokumentasi wireframe untuk Anda.
Cara Kerjanya
Masukkan Detail
Isi judul, pilih platform, dan tulis deskripsi proyek Anda.
Tentukan Bingkai (Opsional)
Beralih ke tab Tentukan Bingkai untuk menentukan layar atau tampilan individual yang Anda ingin AI hasilkan.
Pilih Model AI
Pilih model AI pilihan Anda dari dropdown (misalnya, Claude Code, Opus 4.6).
Hasilkan
Klik Hasilkan untuk memulai pembuatan dokumentasi AI. Proyek wireframe akan muncul di daftar Anda saat dokumentasi sedang dibuat.
Bangun Bingkai
Setelah dokumentasi selesai, Anda dapat mulai menghasilkan setiap bingkai individual dari editor wireframe.
Tingkatkan dengan AI
Dalam mode Didukung AI, mengklik tombol Tingkatkan dengan AI membuka dialog yang memungkinkan Anda menyempurnakan deskripsi menggunakan AI. Ini mengambil apa yang telah Anda tulis di kolom deskripsi dan meningkatkannya berdasarkan instruksi Anda — membuatnya lebih detail, terstruktur, atau lengkap sebelum menghasilkan wireframe.
Opsi Peningkatan
Model AI
Pilih model AI yang akan digunakan untuk meningkatkan deskripsi Anda (misalnya, Claude Code, Opus 4.6).
Instruksi Peningkatan
Opsional berikan instruksi spesifik tentang bagaimana AI harus meningkatkan deskripsi. Mendukung input suara.
Tingkatkan Deskripsi
Klik untuk menjalankan peningkatan. AI akan menulis ulang dan meningkatkan deskripsi Anda berdasarkan input dan instruksi Anda.
Pembuatan Dokumentasi
Setelah mengklik Hasilkan dalam mode Didukung AI, proyek wireframe Anda muncul di daftar wireframe dengan status Menghasilkan Dokumentasi.... AI sedang membuat dokumentasi terstruktur untuk proyek Anda berdasarkan judul, platform, deskripsi, dan bingkai yang telah Anda definisikan.
Apa yang Terjadi Selanjutnya
Pembuatan Dokumentasi
AI membuat dokumen terstruktur yang mendefinisikan setiap layar, komponen, dan tata letak berdasarkan deskripsi Anda.
Pembuatan Bingkai
Setelah dokumentasi selesai, Anda dapat membuka wireframe dan mulai menghasilkan setiap bingkai individual dari editor.
Penyempurnaan
Setelah bingkai dihasilkan, Anda dapat secara manual menyesuaikan, menambah, atau menghapus komponen di editor kanvas untuk menyempurnakan desain.