- Bab 2 dari 6
- 30 menit
- 1 latihan kode
- 4 soal kuis
Siklus Kerja dan Anatomi Prompt
Di bab ini (7 bagian)
Tujuan bab ini
- Menjalankan siklus inti vibe coding: deskripsikan, hasilkan, jalankan, nilai dan arahkan.
- Memahami pergeseran peranmu dari penulis kode menjadi sutradara.
- Menyusun prompt dengan lima elemen: konteks, tujuan, batasan, contoh, dan kriteria selesai.
- Mengubah kriteria selesai menjadi pemeriksaan yang bisa dijalankan.
Siklus inti vibe coding
Vibe coding berjalan dalam putaran pendek yang diulang terus. Setiap putaran punya empat tahap:
- Deskripsikan. Jelaskan apa yang kamu inginkan: fitur, tampilan, perilaku.
- Hasilkan. AI menulis atau mengubah kode, sering di banyak file sekaligus.
- Jalankan. Buka aplikasinya, klik, dan coba seperti pengguna sungguhan.
- Nilai dan arahkan. Tempel error, minta revisi, atau lanjut ke fitur berikutnya.
Satu putaran bisa hanya beberapa menit. Kuncinya ada di tahap ketiga: dalam vibe coding, hasil divalidasi dengan menjalankan, bukan dengan memeriksa kode baris demi baris.
Ada dua pelajaran praktis dari siklus ini. Pertama, kegagalan paling umum biasanya bukan karena AI-nya buruk, melainkan karena konteks yang kurang. AI tidak tahu proyekmu memakai apa, siapa penggunanya, atau bagian mana yang tidak boleh disentuh, kecuali kamu memberitahunya. Kedua, semakin kecil langkahnya, semakin mudah melacak kalau ada yang rusak. Kalau kamu meminta lima fitur sekaligus lalu aplikasinya error, kamu tidak tahu fitur mana penyebabnya. Kalau kamu meminta satu fitur, tersangkanya cuma satu.
Menilai lebih dari sekadar "jalan"
Tahap "jalankan" sering diartikan sempit: buka aplikasi, lihat tidak ada error, selesai. Supaya penilaianmu lebih tajam, biasakan mencoba tiga jenis input setiap kali menguji:
- Input normal, misalnya menambah barang "Susu".
- Input kosong atau aneh, misalnya nama barang kosong atau hanya spasi.
- Input berulang atau ekstrem, misalnya menambah barang yang sama dua kali, atau seratus barang sekaligus.
Banyak bug kode AI bersembunyi di dua jenis terakhir, karena contoh di prompt biasanya hanya menyebut kasus normal.
Peranmu bergeser: dari penulis kode ke sutradara
Analogi yang sering dipakai: kamu berpindah dari tukang batu menjadi arsitek, atau dari aktor menjadi sutradara. Kamu tidak lagi menyusun setiap bata, tetapi kamu yang menentukan bangunannya seperti apa dan memeriksa apakah hasilnya sesuai.
| Cara lama | Cara vibe coding |
|---|---|
| Mengetik sintaks baris demi baris | Menjelaskan tujuan dan hasil yang diharapkan |
| Mencari solusi di dokumentasi | Memberi AI konteks: file, contoh, dokumentasi |
| Debug dengan membaca kode | Menempel error dan menguji perilaku aplikasi |
| Fokus pada "bagaimana" | Fokus pada "apa" dan "mengapa" |
| Keahlian utama: bahasa pemrograman | Keahlian utama: berpikir jernih dan menilai hasil |
Artinya, kemampuan memecah masalah, menulis spesifikasi, dan menilai kualitas menjadi lebih penting daripada hafal sintaks. Namun perhatikan: sutradara yang baik tetap paham cara kerja kamera. Kamu tidak perlu hafal semua sintaks, tetapi kamu perlu cukup paham kode untuk tahu kapan AI keliru.
Anatomi prompt yang efektif
Prompt yang baik untuk fitur baru biasanya punya lima elemen:
| Elemen | Pertanyaan yang dijawab |
|---|---|
| Konteks | Proyek apa, teknologi apa, siapa penggunanya? |
| Tujuan | Satu hal spesifik apa yang ingin dicapai sekarang? |
| Batasan | Apa yang tidak boleh diubah atau dipakai? |
| Contoh | Seperti apa perilaku atau tampilan yang diharapkan? |
| Kriteria selesai | Bagaimana cara mengecek bahwa hasilnya sudah benar? |
Tidak semua prompt butuh kelimanya. Untuk memperbaiki salah ketik, satu kalimat cukup. Tetapi untuk fitur baru, struktur ini sangat mengurangi bolak-balik revisi.
Contoh: prompt lemah dan prompt kuat
Prompt lemah:
AI harus menebak banyak hal: centangnya disimpan di mana, apa yang terjadi dengan barang yang dicentang, boleh tidak mengubah struktur data. Tebakan yang salah berarti putaran revisi tambahan.
Prompt kuat:
Lihat bagaimana setiap baris menutup satu celah tebakan. Baris "Batasan" mencegah AI merombak struktur data yang sudah dipakai di bagian lain. Baris "Selesai bila" memberi kamu daftar uji yang jelas saat tahap "jalankan".
Dari kriteria selesai ke pemeriksaan
Kriteria selesai paling berguna kalau bisa diubah menjadi pemeriksaan otomatis. Misalkan logika "tandai sudah dibeli" dipisah menjadi satu fungsi. Kriteria dari prompt tadi bisa ditulis seperti ini:
Dengan pemeriksaan seperti ini, kamu tidak perlu membaca setiap baris kode AI untuk tahu apakah perilakunya sesuai spesifikasi. Kamu cukup menjalankan pemeriksaannya. Ini jembatan antara vibe coding yang cepat dan pengembangan yang bisa dipercaya.
Pemeriksaan juga berguna untuk percakapan berikutnya dengan AI. Daripada menulis "masih salah", kamu bisa menulis "pemeriksaan awal[0].dibeli === false gagal, artinya fungsimu mengubah array asli". Pesan yang spesifik seperti ini membuat putaran perbaikan jauh lebih pendek.
Kesalahan umum
- Prompt terlalu besar. "Buatkan aplikasi lengkap dengan login, keranjang, dan pembayaran" dalam satu prompt membuat hasilnya sulit diuji.
- Tidak menyebut batasan. AI dengan senang hati mengganti library atau struktur data kalau tidak dilarang.
- Tidak punya kriteria selesai. Tanpa kriteria, kamu tidak tahu kapan harus berhenti merevisi.
- Hanya menguji jalur normal. Coba juga input kosong, berulang, dan ekstrem.
Rangkuman
- Siklus inti vibe coding: deskripsikan, hasilkan, jalankan, nilai dan arahkan, diulang dalam langkah kecil.
- Kegagalan paling umum datang dari konteks yang kurang, bukan dari AI yang buruk.
- Peranmu bergeser dari penulis kode menjadi sutradara yang fokus pada "apa" dan "mengapa".
- Prompt efektif memuat konteks, tujuan, batasan, contoh, dan kriteria selesai.
- Kriteria selesai yang diubah menjadi pemeriksaan membuat hasil AI bisa dinilai dengan cepat dan pasti.
Slide 8 sampai 11 dari deck Vibe Coding: Membangun Software Bersama AI dengan Aman. Penjelasan lengkapnya ada di mode Baca.

Selesaikan bab ini
- 1. Baca materi
- 2. Latihan kode (1)
- 3. Kuis (4 soal)
Latihan kode: Kode dari spesifikasi: tandai barang sudah dibeli
AI menulis toggleDibeli untuk aplikasi daftar belanja, tetapi hasilnya belum sesuai kriteria selesai di prompt. Perbaiki fungsinya sesuai spesifikasi:
toggleDibeli(daftar, id)membalik nilaidibelipada barang denganidtersebut.- Barang yang belum dibeli ada di atas, yang sudah dibeli di bawah. Urutan di dalam tiap kelompok tetap.
- Array asli dan objek di dalamnya tidak boleh diubah. Kembalikan array baru.
- Bila
idtidak ditemukan, kembalikan daftar dengan isi yang sama tanpa error.
Cek pemahaman
1Urutan siklus inti vibe coding yang benar adalah...
2Elemen prompt mana yang menjawab pertanyaan "bagaimana cara mengecek bahwa hasilnya sudah benar"?
3Menurut deck, kegagalan paling umum dalam vibe coding biasanya disebabkan konteks yang kurang, bukan AI yang buruk.
4Pada prompt ini, baris mana yang mencegah AI merombak struktur data?
Konteks: Aplikasi web daftar belanja keluarga, React + Tailwind. Tujuan: Tambahkan fitur menandai barang yang sudah dibeli. Batasan: Jangan ubah struktur data; simpan di localStorage. Contoh: Barang yang dicentang dicoret dan pindah ke bawah daftar. Selesai bila: Bisa centang/batal, dan data tetap ada setelah refresh.