Tutorial: Kirim Screenshot ke Chat Buat Kasih Konteks ke AI

Kadang kata-kata aja nggak cukup buat jelasin desain yang kamu mau. Daripada capek-capek deskripsiin "warna gradient ungu-pink, tombol biru di kiri, ada badge testimoni" — tinggal screenshot referensinya, lampirkan ke chat, dan biarkan AI "lihat" sendiri. Builder TanpaNgoding AI punya fitur attachment buat kebutuhan ini, baik lampirkan file dokumen maupun gambar.

Sebelum lanjut, pastikan kamu sudah tahu cara bikin project baru dan kirim prompt pertama — baca dulu Tutorial: Bikin Aplikasi Toko Kue Online dari Nol kalau belum. Di sini kita fokus langsung ke fitur lampiran gambarnya.

Video Tutorial

1. Buka Chat dan Cari Tombol "Lampirkan"

Di panel chat sebelah kiri builder, ada dua opsi lampiran di bawah kotak input: Lampirkan (untuk file umum) dan Media (khusus gambar). Arahkan kursor ke ikon paperclip dan tooltip "Lampirkan file" akan muncul.

2. Penting: Ganti ke Model AI yang Punya Vision

Ini bagian yang sering kelewat — nggak semua model AI di builder bisa "melihat" gambar. Kalau kamu lampirkan screenshot tapi model yang dipakai nggak support vision, AI akan balas "tidak bisa melihat isi screenshot" dan minta kamu jelaskan secara teks. Klik selector model di pojok kiri bawah composer, lalu pilih model yang ada ikon mata (👁) di sampingnya — misalnya Kimi k2.7, Gemma 4, GLM 5.2, atau Qwen 3.5. Detail soal ikon vision ini juga dibahas di Tutorial: Ganti Model AI di Builder.

3. Siapkan Screenshot Referensi yang Relevan

Satu hal yang perlu diperhatikan: pastikan screenshot yang kamu lampirkan benar-benar berisi desain yang mau ditiru — bukan sembarang gambar. Kalau kamu screenshot halaman kosong atau UI yang nggak relevan, AI bisa salah tangkap maksudmu dan malah mereplikasi elemen yang nggak diinginkan. Contoh di bawah ini screenshot landing page produk SaaS asli sebagai referensi gaya visual (hero besar, gradient warna, badge testimoni).

4. Lampirkan Gambar dan Tulis Instruksi

Klik Media, pilih file gambar dari komputer, dan thumbnail-nya akan muncul di atas kotak input. Lengkapi dengan instruksi teks singkat — misalnya "Buatkan landing page produk SaaS yang gayanya mirip screenshot ini" — lalu kirim.

5. AI Membaca Gambar dan Membangun Halamannya

Dengan model vision aktif, AI akan mengonfirmasi pemahamannya ("Saya akan membuat landing page SaaS bergaya Stripe seperti pada screenshot") lalu mulai membangun halaman — lengkap dengan struktur hero, warna, dan elemen visual yang meniru gaya referensi.

Tips Biar Hasilnya Maksimal

• Pakai screenshot yang jelas dan fokus — bukan campuran banyak halaman sekaligus.
• Tetap kasih instruksi teks, jangan cuma kirim gambar tanpa konteks. Sebutkan bagian mana yang mau ditiru (warna, layout, tipografi, dsb).
• Kalau AI bilang tidak bisa melihat gambar, cek dulu model yang dipakai — ganti ke yang ada ikon mata (vision).