Alat Tangkap
Berikan konteks visual yang tepat kepada AI. Screenshot, pemilihan elemen, dan gambar.
Semakin tepat konteks visual yang kamu berikan kepada AI, semakin baik hasil editnya. Proyecta menyediakan beberapa alat tangkap.
Pilih elemen (Visual Editor)
Section titled “Pilih elemen (Visual Editor)”Dalam mode Visual Editor, setiap elemen di preview menjadi dapat diklik. Arahkan kursor untuk menyorot, klik untuk memilih. Elemen yang dipilih akan disorot dengan overlay dan properti yang dapat diedit (teks, warna, jarak, font, border, efek) akan muncul di panel sidebar.
Setelah elemen dipilih, kamu bisa:
- Mengeditnya langsung — ubah properti secara inline tanpa perlu menulis prompt apapun
- Menanyakannya kepada AI — pilihan elemen diteruskan sebagai konteks sehingga kamu bisa mengatakan
"make this button bigger"atau"move this section above the hero"dan AI tahu persis apa yang kamu maksud
Elemen dinamis (computed classNames, conditional rendering, ekspresi) akan otomatis diteruskan ke chat AI dengan prompt terstruktur.
Lihat Visual Edit untuk daftar lengkap properti yang dapat diedit.
Tempel atau seret screenshot ke dalam chat
Section titled “Tempel atau seret screenshot ke dalam chat”Input chat menerima gambar secara langsung:
- Tempel — salin screenshot dengan pintasan OS kamu (Cmd+Shift+4 di Mac, Win+Shift+S di Windows) lalu tempel ke dalam chat
- Seret — jatuhkan file gambar apapun ke input chat
Format yang didukung: PNG, JPEG, WebP, GIF, AVIF. Ukuran maksimum: 10 MB per gambar.
Screenshot preview
Section titled “Screenshot preview”AI dapat mengambil screenshot sendiri dari preview kamu kapan saja melalui alat bawaan preview_screenshot. Kamu akan melihat hasil screenshot muncul secara inline di dalam chat. AI akan memanggilnya secara otomatis saat perlu memverifikasi perubahannya atau memahami kondisi terkini dari aplikasimu.
Alat screenshot ini dapat menargetkan route tertentu (misalnya, /dashboard, /settings) dan menangkap dimensinya, sehingga membantu AI memahami tata letak dan jarak antar elemen.
Bagaimana cara mengarahkan AI ke tombol atau teks tertentu?
Gunakan mode Visual Editor dan klik elemennya. Cara ini meneruskan referensi yang tepat dan terstruktur kepada AI — jauh lebih baik daripada mendeskripsikan elemen tersebut dengan kata-kata.
Segera hadir
Section titled “Segera hadir”Alat tangkap berikut sudah diimplementasikan secara internal namun belum tersedia di UI:
- Annotate — tangkap preview saat ini dan gambar tanda panah, persegi panjang, lingkaran, coretan bebas, serta label teks sebelum dikirim ke AI.
- Screen Record — rekam interaksi multi-langkah (klik, navigasi, animasi) dan lampirkan frame yang diambil ke pesan chat kamu. Ideal untuk bug yang sensitif terhadap waktu yang tidak bisa ditangkap dalam satu screenshot.