Pembuatan Kode & Wireframe
Ikhtisar
Setelah Anda menganotasi gambar Anda dengan kotak pembatas dan menetapkan perilaku, Anda dapat menghasilkan kode komponen yang berfungsi atau tata letak wireframe. AI menggunakan posisi kotak pembatas, tipe elemen, dan arah perilaku untuk menghasilkan output yang akurat.
Sidebar Asisten AI
Panel Asisten AI adalah sidebar sisi kanan yang digunakan untuk mengkonfigurasi dan memicu pembuatan kode atau wireframe. Ini berisi kontrol berikut:
Pemilih Model Visi
Pilih model visi AI mana yang akan digunakan untuk menganalisis gambar Anda dan menghasilkan output. Model yang berbeda dapat menghasilkan tingkat detail dan akurasi yang berbeda.
Pemilih Framework
Pilih framework target untuk pembuatan kode (misalnya, React, Vue, Svelte). Kode yang dihasilkan akan menggunakan sintaks dan pola framework yang dipilih.
Tab Komponen / Wireframe
Beralih antara menghasilkan kode komponen (tab Komponen) atau tata letak wireframe (tab Wireframe) dari gambar beranotasi Anda.
Grup Gambar
Mencantumkan semua grup gambar Anda untuk proyek rekayasa balik saat ini. Pilih grup untuk mempratinjau gambar dan mengkonfigurasi pembuatan. Setiap grup menampilkan jumlah gambarnya.
Hasilkan Blok
Klik untuk memulai proses pembuatan AI. AI menganalisis gambar grup yang dipilih bersama anotasi kotak pembatas dan perilaku apa pun untuk menghasilkan output.
Mode Output
Hasilkan Kode
Konversi gambar beranotasi menjadi kode komponen yang berfungsi untuk framework target Anda (React, Vue, Svelte, dll.). Kode yang dihasilkan mencakup tata letak, styling, dan perilaku apa pun yang Anda definisikan pada kotak pembatas.
Hasilkan Wireframe
Ekspor gambar beranotasi sebagai tata letak wireframe yang terbuka di alat Wireframe. Setiap kotak pembatas menjadi elemen wireframe yang dapat Anda sempurnakan lebih lanjut, atur ulang, dan hubungkan ke layar lain.
Fitur Pembuatan Kode
Pemilihan Framework
Pilih framework target Anda sebelum menghasilkan. Framework yang didukung termasuk React, Vue, Svelte, SolidJS, Angular, dan lainnya.
Pemetaan Perilaku
Perilaku yang ditetapkan ke kotak pembatas diterjemahkan menjadi event handler, logika navigasi, modal, dan kode interaktif lainnya dalam output.
Akurasi Tata Letak
AI menggunakan posisi dan ukuran kotak pembatas dari gambar untuk menghasilkan tata letak yang sangat cocok dengan desain visual asli.
Simpan ke Blok
Komponen yang dihasilkan dapat disimpan langsung ke pustaka Blok Anda untuk digunakan kembali di seluruh proyek.
Tambahkan ke Proyek
Sisipkan kode yang dihasilkan langsung ke proyek Anda saat ini sebagai file komponen baru.
Tips
Untuk hasil terbaik, gunakan gambar resolusi tinggi dengan elemen UI yang jelas. Gambar kotak pembatas dengan ketat di sekitar setiap elemen untuk pembuatan kode yang lebih akurat. Tetapkan perilaku spesifik alih-alih deskripsi yang samar — "opens signup modal" bekerja lebih baik daripada "does something." AI bekerja paling baik dengan tata letak web standar dan pola UI umum.