Vibe Coding 101: Cara Developer Modern Menulis Kode Bersama AI
Vibe Coding 101: Cara Developer Modern Menulis Kode Bersama AI
Istilah vibe coding pertama kali dipopulerkan oleh Andrej Karpathy — mantan Director of AI di Tesla dan co-founder OpenAI — di awal 2025. Konsepnya sederhana tapi mengubah cara banyak developer bekerja: kamu mendeskripsikan apa yang ingin dibangun, AI yang menulis kodenya, dan kamu terus melanjutkan selama "vibe-nya" terasa benar.
Tapi vibe coding bukan berarti kamu bisa tidur sambil AI bekerja. Ini adalah workflow kolaborasi antara developer dan AI yang, kalau dilakukan dengan benar, bisa melipatgandakan produktivitas secara signifikan.
1. Apa Itu Vibe Coding Sebenarnya?
Vibe coding adalah pendekatan di mana developer:
- Mendeskripsikan tujuan dalam bahasa natural, bukan langsung menulis kode
- Membiarkan AI (Copilot, Cursor, Kiro, Claude, dll) menghasilkan implementasi awal
- Melakukan review, iterasi, dan refinement — bukan menulis dari nol
- Fokus pada arsitektur dan keputusan, bukan sintaks dan boilerplate
Ini berbeda dari sekadar "copy-paste dari ChatGPT". Vibe coding adalah mindset di mana AI menjadi pair programmer aktif sepanjang sesi kerja.
// Cara lama: kamu menulis semuanya dari nol
function calculateDiscount(price, userType, promoCode) {
let discount = 0;
if (userType === 'premium') discount += 0.1;
if (promoCode === 'SAVE20') discount += 0.2;
// ... 50 baris lagi
}
// Cara vibe coding: kamu deskripsikan, AI yang draft
// Prompt: "Buat fungsi calculateDiscount yang menerima price, userType
// (regular/premium/vip), dan promoCode opsional. Premium dapat 10% off,
// VIP 20% off, promo SAVE20 tambah 20% off, maksimal total diskon 50%.
// Gunakan TypeScript dengan proper error handling."
2. Setup Workflow Vibe Coding
Untuk mulai vibe coding secara efektif, kamu butuh tiga komponen:
A. AI Coding Tool yang Tepat
| Tool | Kelebihan | Cocok untuk |
|---|---|---|
| GitHub Copilot | Terintegrasi langsung di VS Code, autocomplete cepat | Completion dan snippet cepat |
| Cursor | Chat dengan codebase, edit multi-file | Refactoring dan fitur besar |
| Kiro (AWS) | Spec-driven development, agentic workflow | Proyek terstruktur dari requirements |
| Claude / ChatGPT | Penjelasan mendalam, debugging kompleks | Problem solving dan arsitektur |
B. Konteks yang Kaya
AI bekerja jauh lebih baik ketika diberi konteks yang cukup. Sebelum mulai, siapkan:
# Contoh konteks yang baik untuk diberikan ke AI di awal sesi
Proyek: REST API untuk aplikasi e-commerce
Stack: Node.js + Express + PostgreSQL + Prisma ORM
Auth: JWT dengan refresh token
Konvensi: camelCase untuk variabel, PascalCase untuk class
Error handling: selalu return { success, data, error } format
Testing: Jest + Supertest
Sekarang aku mau tambahkan fitur: [deskripsi fitur]
C. Iterasi yang Cepat
Vibe coding bukan "generate sekali, langsung pakai". Siklus yang benar:
1. Deskripsikan → AI generate draft
2. Review sekilas → identifikasi masalah
3. Berikan feedback spesifik → AI revisi
4. Test → temukan bug
5. Tunjukkan error ke AI → AI fix
6. Ulangi sampai selesai
3. Teknik Vibe Coding yang Efektif
Teknik 1: Describe the "What", Not the "How"
// ❌ Prompt yang terlalu teknis (kamu sudah tahu jawabannya)
"Buat loop for yang iterasi array users dan filter yang active === true"
// ✅ Prompt yang fokus pada tujuan bisnis
"Dari daftar users, ambil hanya yang aktif dan sudah verifikasi email,
urutkan berdasarkan tanggal bergabung terbaru, batasi 20 per halaman.
Gunakan Prisma ORM."
Teknik 2: Rubber Duck Debugging dengan AI
// Ketika stuck, ceritakan masalahnya seperti ke teman
"Aku punya bug aneh. Fungsi updateUserProfile berhasil update di database
(aku cek langsung di psql), tapi response API masih return data lama.
Ini kodenya: [paste kode]. Apa yang mungkin salah?"
// AI akan mendeteksi: kemungkinan caching, stale closure, atau
// kamu return data sebelum await selesai
Teknik 3: Incremental Building
Jangan minta AI membuat seluruh fitur sekaligus. Bangun secara bertahap:
// Sesi 1: Struktur dasar
"Buat skeleton Express router untuk /api/orders dengan endpoint
GET list, GET by id, POST create, PUT update, DELETE"
// Sesi 2: Tambah validasi
"Sekarang tambahkan Zod validation schema untuk POST dan PUT endpoint"
// Sesi 3: Tambah business logic
"Tambahkan logic: saat order dibuat, kurangi stock produk dan
kirim notifikasi email ke user"
// Sesi 4: Error handling
"Review semua endpoint dan pastikan error handling konsisten
dan tidak expose internal error ke client"
Teknik 4: Code Review dengan AI
// Setelah selesai menulis, minta AI review
"Review kode ini dari sisi:
1. Security vulnerabilities
2. Performance issues
3. Edge cases yang belum di-handle
4. Apakah sudah mengikuti SOLID principles?
[paste kode]"
4. Contoh Sesi Vibe Coding Nyata
Berikut contoh sesi membangun fitur autentikasi dari nol menggunakan vibe coding:
// === PROMPT 1: Mulai dengan gambaran besar ===
"Aku mau implementasi auth system untuk Express API.
Requirements:
- Register dengan email + password
- Login return JWT access token (15 menit) + refresh token (7 hari)
- Endpoint refresh token
- Middleware untuk protected routes
- Password di-hash dengan bcrypt
- Simpan refresh token di database (PostgreSQL + Prisma)
Mulai dari Prisma schema dulu."
// AI generate schema → kamu review → lanjut ke implementasi
// === PROMPT 2: Implementasi service layer ===
"Bagus. Sekarang buat AuthService class dengan method:
- register(email, password)
- login(email, password)
- refreshToken(token)
- logout(userId)
Gunakan schema Prisma yang tadi."
// === PROMPT 3: Controller dan routes ===
"Buat AuthController dan routes-nya. Gunakan AuthService yang tadi.
Tambahkan input validation dengan express-validator."
// === PROMPT 4: Testing ===
"Tulis Jest unit tests untuk AuthService.
Mock Prisma client dan bcrypt.
Cover: register sukses, register email duplikat,
login sukses, login password salah, refresh token expired."
Dalam waktu kurang dari 1 jam, kamu punya auth system lengkap dengan tests — yang normalnya butuh setengah hari.
5. Kapan Vibe Coding Tidak Cocok
Vibe coding punya batasan yang perlu kamu sadari:
- Algoritma kritis performa — AI sering menghasilkan solusi O(n²) padahal bisa O(n log n)
- Security-sensitive code — selalu review manual untuk kriptografi, auth, dan input sanitization
- Domain yang sangat spesifik — AI mungkin tidak tahu regulasi industri atau business rule unik perusahaanmu
- Legacy codebase tanpa dokumentasi — AI butuh konteks yang kamu sendiri mungkin tidak punya
Kesimpulan
Vibe coding bukan tentang membiarkan AI menulis semua kode sementara kamu santai. Ini tentang mengubah peran developer — dari tukang ketik kode menjadi arsitek dan reviewer yang berkolaborasi dengan AI. Developer yang menguasai vibe coding tidak digantikan AI; mereka menjadi 5-10x lebih produktif dari developer yang tidak menggunakannya.
Kuncinya: berikan konteks yang baik, iterasi dengan cepat, dan selalu pahami kode yang AI hasilkan. Karena pada akhirnya, kamu yang bertanggung jawab atas kode tersebut — bukan AI-nya.