Alur Kerja Agent

Apa yang Diberikan ke Agent

Snapdown dibaca oleh agent, bukan dikendalikan olehnya. Tidak ada server MCP atau API lokal: agent tidak bisa memulai penangkapan atau mengambil data dari pustaka Anda. Anda menyerahkan buktinya dari Pustaka:

• Copy Markdown: pilih di baris bundle, lalu tempel hasilnya ke chat agent. Tautan gambarnya berupa path lengkap ke vault Anda, jadi memuat nama pengguna Windows Anda, dan hanya agent yang berjalan di komputer yang sama yang bisa membuka gambarnya.
• Copy image: salin gambar satu temuan, dengan atau tanpa anotasi burn-in, lalu tempel ke chat yang menerima gambar.

Salin satu bundle untuk satu sesi review yang utuh. Markdown-nya berisi satu bagian per temuan, tautan gambarnya, catatannya, dan satu baris bernomor per pin beserta posisi pin itu.

Bundle harus menjawab empat pertanyaan tanpa perlu ditanya ulang: apa yang terlihat, di mana letaknya, apa yang seharusnya terjadi, dan bagaimana agent bisa mereproduksinya? Pin bernomor membuat jawaban untuk “di mana” tidak ambigu.

Siklus Review yang Bisa Diulang

1. Reproduksi Dulu, Baru Tangkap Layar

   Mulai dari rute, viewport, tingkat penskalaan, status akun, data uji, atau feature flag yang jelas. Tulis kondisi itu di temuan, jangan hanya diingat.

2. Tangkap Area yang Relevan dan Blur Data Sensitif

   Pakai loupe piksel untuk batas yang tepat. Blur kredensial, API key, informasi pribadi, data pelanggan, dan apa pun yang tidak pantas masuk ke percakapan dengan agent.

3. Tulis Temuan yang Bisa Diperiksa

   Pakai pin bernomor, lalu tulis perilaku saat ini, perilaku yang diharapkan, dan fakta reproduksinya. Utamakan hal yang terlihat daripada tebakan soal implementasinya.

4. Serahkan Bundle dan Minta Tindakan yang Terbatas

   Tempel Markdown yang disalin, lalu minta agent membuka gambar yang ditautkannya, menemukan bagian UI penyebabnya, mengusulkan atau menerapkan perbaikan minimal, dan melaporkan cara memverifikasi hasilnya.

5. Tangkap Ulang Setelah Perubahan

   Periksa kondisi baru dengan temuan baru. Pasangan gambar sebelum dan sesudah lebih bisa menjelaskan regresi di kemudian hari daripada sekadar “sudah beres”.

Template Prompt

Claude Code

Tempel Markdown yang disalin sesudah permintaan singkat beserta batas verifikasinya:

Markdown di bawah ini adalah bundle Snapdown. Buka gambar yang ditautkannya.

Reproduksi kondisi yang tercantum di bundle. Untuk setiap temuan:
1. temukan komponen dan stylesheet penyebabnya,
2. jelaskan perbaikan paling kecil yang aman,
3. terapkan perbaikannya,
4. verifikasi hasilnya pada viewport dan display scale yang disebutkan.

Jangan ubah tata letak lain yang tidak berkaitan. Sebutkan file mana yang diubah dan apa yang belum terverifikasi.

(tempel Markdown yang disalin di sini)

Cursor dan Windsurf

Tempel bundle di chat workspace dan minta agent mengaitkan setiap kesimpulan dengan nomor temuan dan pin:

Gunakan bundle Snapdown di bawah ini sebagai acuan penerimaan visual.
Buka gambarnya sebelum mengubah apa pun. Selesaikan pin 1 dan 2 dari Finding 1 saja.
Untuk setiap perbaikan, sebutkan nomor temuan dan pin, nama file sumbernya, dan jalankan
pemeriksaan lokal yang paling relevan. Bila gambar tidak membuktikan perubahan yang diusulkan,
ajukan pertanyaan yang spesifik, jangan menebak.

Untuk bundle yang lebih besar, batasi hasil yang diminta agar tugasnya tidak melebar menjadi perombakan desain:

Anggap catatan pin bernomor di bundle Snapdown di bawah ini sebagai kriteria penerimaan.
Terapkan perubahan paling kecil untuk memenuhi pin di Finding 1 dan Finding 2,
pertahankan perilaku di luar kondisi itu, lalu rangkum: langkah reproduksi yang dipakai,
file yang diubah, validasi yang dijalankan, dan asumsi apa pun yang perlu dikonfirmasi manusia.

Hemat Token: Area Dulu, Ukuran Kemudian

Biaya token gambar berbeda di tiap model dan produk agent, dan cara hitungnya bisa berubah, jadi halaman ini tidak memberi angka persentase. Perbandingan yang tetap berlaku bersifat struktural: screenshot penuh 4K memuat banyak area yang tidak dibutuhkan agent; tangkapan satu area ditambah temuan singkat yang diberi pin membuat detail yang penting jadi jelas.

Pakai screenshot penuh atau satu halaman penuh bila konteks keseluruhan justru masalahnya: hierarki halaman, hubungan antarpanel, modal yang muncul tiba-tiba, atau overflow selebar viewport. Dalam kasus itu pun, tandai masalah setempatnya dengan pin, dan jangan ikut mengirim monitor lain, notifikasi pribadi, atau kredensial.

Contoh Catatan Masalah Visual yang Bisa Direproduksi

Format bundle ini sengaja dibuat eksplisit. Format ini bisa dipakai rekan kerja maupun agent karena bukti dan instruksinya dipisahkan.

# Review checkout 2026-09-24 10:15

## Finding 1

![Finding 1](<C:/Users/you/Pictures/SnapdownVault/bundles/…/finding_1_burned.png>)

### Notes

Checkout pada 1440 × 900, Windows 11, zoom browser 100%.
Rute: /checkout. Kondisi: keranjang berisi satu barang fisik; masuk dengan akun uji; feature flag checkout_v2 aktif.
Build: branch lokal feature/checkout-summary pada commit <commit-id>.

### Marker Notes

1. [loc:62%,78%] Tombol utama menimpa baris total pesanan. Seharusnya: ada jarak 16 px yang terlihat dan tidak saling menimpa pada viewport ini.
2. [loc:30%,54%] Label diskon terpotong setelah kata "promosi". Seharusnya: label turun ke baris baru atau melebar tanpa menyembunyikan nilainya.

Tulis permintaannya di prompt, bukan di temuan: cari aturan layout penyebabnya, terapkan perbaikan paling kecil untuk pin 1 dan 2, verifikasi pada rute, kondisi, viewport, zoom, dan skala layar yang sama, lalu laporkan file yang diubah beserta tangkapan baru sesudah perbaikan.

Jangan cantumkan API key, data pelanggan asli, cookie sesi, atau URL khusus produksi di blok reproduksi. Pakai akun uji, data contoh, dan gambar yang sudah di-blur. Snapdown membuat nilai sensitif di gambar tidak terbaca; catatan teksnya perlu kehati-hatian yang sama dari Anda.