Tutorial: Kasih Feedback Visual ke AI Pakai Annotate Tool

Daripada jelasin panjang lebar lewat teks, tinggal lingkari elemen di preview dan AI langsung ngerti bagian mana yang mau diubah.

Kadang lebih gampang nunjuk daripada jelasin panjang lebar. Misalnya kamu mau ubah warna satu tombol spesifik di halaman yang isinya banyak tombol serupa — daripada nulis instruksi ribet biar AI nebak tombol mana yang dimaksud, tinggal lingkari langsung di preview. TanpaNgoding AI punya fitur Annotate buat ini.

Sebelum lanjut, pastikan kamu sudah tahu cara bikin project baru dan kirim prompt pertama — baca dulu Tutorial: Bikin Aplikasi Toko Kue Online dari Nol Pakai TanpaNgoding AI kalau belum. Tutorial ini fokus langsung ke cara pakai tool anotasinya saja.

1. Pastikan model yang dipilih support vision

Fitur Annotate ngirim gambar ke AI, bukan cuma teks — jadi model yang dipilih di dropdown chat harus yang support vision (ada ikon mata di sebelah nama model, misal GLM 5.2, MiniMax m3, Gemma 4). Kalau pilih model tanpa vision, gambar anotasinya bakal diabaikan.

Tampilan awal project dengan dropdown pilih model AI

2. Klik tool Annotate di preview

Di floating toolbar bagian bawah preview, ada beberapa ikon tool (Select, Text edit, dan Annotate/pensil). Klik ikon pensil buat masuk mode anotasi — cursor berubah jadi mode gambar di atas preview.

Klik tool Annotate di floating toolbar preview

3. Lingkari elemen yang mau diubah

Gambar langsung di atas preview — lingkaran, kotak, atau coretan apa pun buat nunjuk elemen spesifik. Di contoh ini, tombol "Hubungi Kami" dilingkari merah karena itu yang mau diubah warnanya.

Melingkari tombol Hubungi Kami dengan tool anotasi

4. Screenshot anotasi otomatis nempel di chat

Setelah selesai gambar, screenshot preview (lengkap dengan coretannya) otomatis ke-attach sebagai thumbnail di kotak chat. Kamu tidak perlu screenshot manual atau upload file sendiri.

Thumbnail screenshot anotasi otomatis nempel di kotak chat

5. Tulis instruksi yang merujuk ke anotasinya

Tinggal tulis instruksi singkat yang merujuk ke apa yang dilingkari — AI sudah "lihat" sendiri elemen mana yang dimaksud dari gambarnya, jadi instruksinya bisa sesingkat "ubah warna button ini ke warna hijau".

Menulis instruksi perubahan yang merujuk ke elemen yang dilingkari

6. Kirim, AI langsung proses

Kirim seperti biasa. AI baca kode halaman terkait, cocokkan sama elemen yang ditunjuk di gambar anotasi, lalu terapkan perubahannya — tanpa kamu perlu sebut nama komponen atau class CSS-nya.

Build berjalan setelah instruksi dengan anotasi dikirim

7. Hasil: elemen yang dilingkari berubah sesuai instruksi

Selesai — tombol yang tadi dilingkari merah sekarang warnanya sudah hijau, tanpa perlu jelasin lokasi elemennya lewat teks panjang.

Tombol berhasil berubah warna sesuai anotasi

Tool Annotate paling berguna buat kasih feedback visual yang susah dijelaskan pakai kata-kata — posisi elemen, ukuran, atau "yang ini bukan yang itu" saat ada beberapa elemen mirip di satu halaman. Kombinasikan dengan model AI yang support vision, dan revisi kecil jadi jauh lebih cepat.