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.
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.
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.
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.
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".
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.
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.
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.
Video Tutorial
Mau lihat langsung alurnya jalan? Tonton video singkatnya di bawah ini:
Artikel Terkait
Tutorial: Edit Teks Langsung di Preview Tanpa Chat
Nggak semua perubahan teks perlu chat ke AI. Kenalan sama tool "T" di floating toolbar preview — klik, edit, commit, selesai.
Tutorial: Select Element Tool - Klik Langsung Elemen Buat Kasih Konteks ke AI
Mau ubah satu elemen spesifik tanpa jelasin lokasinya panjang lebar? Klik aja langsung elemennya di preview, AI otomatis paham konteksnya.
Tutorial: Bikin Aplikasi Toko Kue Online dari Nol Pakai TanpaNgoding AI
Panduan step-by-step bikin aplikasi toko kue online sederhana — dari buka builder, kirim prompt, sampai preview jadi — tanpa nulis kode sama sekali.
Riset ICSE 2026: Muncul Kelas Baru Pembuat Aplikasi yang Bisa Bikin tapi Tidak Bisa Memperbaiki
Sebuah riset yang dipresentasikan di konferensi rekayasa perangkat lunak ICSE 2026 memberi nama untuk fenomena yang selama ini cuma jadi bahan candaan: vulnerable developer class, orang yang sanggup menghasilkan software yang jalan tapi tidak bisa men-debug atau mengamankannya. Amazon sudah lebih dulu merasakan akibatnya, dan solusi yang mereka pilih bukan berhenti memakai AI.
Empat Model AI Besar Rilis dalam Satu Minggu, dan Kenapa Kamu Tidak Perlu Ikut Pusing
Anthropic, Meta, Google, dan OpenAI sama-sama merilis model baru dalam satu minggu awal September. CNBC menyebut pembeli di perusahaan sudah terlalu lelah untuk membandingkannya, dan tiga tabel benchmark yang terbit di minggu yang sama masing-masing menempatkan vendornya sendiri di posisi teratas.
Enam Jam dari Prompt ke Serangan: Laporan Google soal Peretas yang Menyerahkan Pekerjaan ke AI Agent
Google Threat Intelligence Group melaporkan satu kelompok peretas berhasil merancang, membangun, dan menjalankan kampanye pencurian kredensial berskala besar dalam waktu kurang dari enam jam, cukup bermodal chatbot AI dan satu set instruksi. Pertahanan lama yang mengandalkan lambatnya penyerang jadi tidak relevan.
Mau bikin aplikasi seperti ini?
Ceritakan kebutuhanmu satu prompt — AI TanpaNgoding membangun aplikasi web lengkap dengan admin panel, database, dan siap publish.
Mulai Bikin Gratis arrow_forward