Tutorial Vibe Coding: Membangun Proyek dengan AI tanpa Menulis Kode

Istilah vibe coding sedang viral di kalangan developer sejak dipopulerkan oleh Andrej Karpathy pada awal 2025. Konsep ini merevolusi cara kita membangun software: bukan dengan menulis kode baris per baris, melainkan dengan memberikan instruksi kepada AI dan membiarkan AI yang menulis kode. Simon Willison, developer berpengalaman dan creator Datasette, telah menulis analisis mendalam tentang fenomena ini dan mengklarifikasi apa yang sebenarnya dimaksud dengan vibe coding.

Artikel ini adalah panduan praktis untuk developer Indonesia yang ingin mencoba vibe coding. Kita akan membahas definisi yang tepat, tools yang dibutuhkan, cara memulai dengan aman, dan batasan yang perlu dipahami sebelum menggunakan teknik ini untuk proyek nyata.

Apa Itu Vibe Coding Sebenarnya

Vibe coding bukan sekadar menggunakan AI untuk membantu menulis kode. Definisi asli dari Karpathy lebih ekstrem: melupakan bahwa kode itu ada. Anda sepenuhnya menyerahkan kepada AI, tidak membaca diff, tidak memeriksa setiap perubahan, hanya melihat hasil dan memberikan instruksi berikutnya.

Simon Willison membedakan dengan tegas antara vibe coding dan AI-assisted programming yang bertanggung jawab. Jika Anda menggunakan LLM untuk membantu menulis kode, kemudian mereview kode tersebut, mengetesnya, dan memastikan Anda bisa menjelaskan cara kerjanya, itu bukan vibe coding. Itu adalah software engineering yang menggunakan AI sebagai alat bantu.

Vibe coding cocok untuk proyek low-stakes, eksperimen akhir pekan, atau prototype yang ingin dibuat dengan cepat tanpa perlu maintainability jangka panjang.

Tools yang Dibutuhkan untuk Vibe Coding

Beberapa tools populer untuk vibe coding saat ini antara lain:

• Claude Code: Agent AI dari Anthropic yang bisa beroperasi di terminal

• Cursor: IDE berbasis VS Code dengan AI integration yang mendalam

• GitHub Copilot Workspace: AI agent yang bekerja dari issue sampai merge

• Claude Artifacts: Sandbox untuk membuat prototype web dengan cepat

Panduan ini akan fokus pada Claude Code karena kemampuannya yang paling mendekati konsep vibe coding: sepenuhnya conversational dan bisa mengedit file, menjalankan command, dan deploy aplikasi.

Langkah 1: Instalasi Claude Code

Claude Code adalah tool command-line yang memungkinkan Anda berinteraksi dengan Claude sebagai coding partner. Untuk menginstalnya:

1. Pastikan Anda memiliki Node.js versi 18 atau lebih tinggi:

node --version

1. Install Claude Code via npm:

npm install -g @anthropic-ai/claude-code

1. Login dengan akun Anthropic:

claude-code login

1. Navigasi ke folder proyek Anda dan mulai Claude Code:

cd ~/proyek-saya
claude-code

Claude Code akan melakukan initial scan terhadap codebase Anda dan membuat index untuk pemahaman konteks.

Langkah 2: Membuat Proyek Pertama dengan Vibe Coding

Setelah Claude Code aktif, Anda bisa langsung memberikan instruksi dalam bahasa natural. Tidak perlu menulis kode sama sekali. Berikut contoh membuat aplikasi todo list:

Claude: buat aplikasi todo list sederhana dengan React dan Tailwind CSS. 
Aplikasi harus bisa menambah task, menandai selesai, dan hapus task.
Simpan semua file dalam folder src/.

Claude akan:

1. Membuat struktur folder proyek

2. Menulis file package.json dengan dependensi yang diperlukan

3. Membuat komponen React utama

4. Menambahkan styling dengan Tailwind

5. Menjalankan npm install untuk menginstal dependensi

Anda cukup melihat hasil dan memberikan instruksi selanjutnya. Contoh:

Claude: tambahkan fitur filter untuk menampilkan task yang aktif, 
selesai, atau semua. Tambahkan juga progress bar di bagian atas.

Langkah 3: Debugging dengan Copy-Paste Error

Salah satu karakteristik vibe coding adalah cara debugging yang unik. Alih-alih membaca stack trace dan memahami root cause, Anda cukup copy-paste error message ke Claude Code.

Contoh:

Claude: saya dapat error ini:
TypeError: Cannot read properties of undefined (reading 'map')
    at TodoList (src/components/TodoList.js:15)

Claude akan menganalisis error, mengidentifikasi bahwa array tasks mungkin belum diinisialisasi, dan memperbaiki kode dengan menambahkan default value atau conditional rendering.

Teknik ini sangat efektif untuk error yang umum, tetapi menjadi berbahaya untuk error yang melibatkan logic kompleks atau security vulnerability. Di sinilah batasan vibe coding mulai terlihat.

Langkah 4: Deploy dengan Instruksi Natural

Claude Code bisa membantu deploy aplikasi ke platform cloud. Contoh deploy ke Vercel:

Claude: deploy aplikasi ini ke Vercel. Pastikan environment variables sudah diatur.

Claude akan menjalankan:

npm run build
vercel --prod

Atau jika Anda menggunakan Docker:

Claude: buatkan Dockerfile dan docker-compose.yml untuk aplikasi ini.
Deploy ke VPS dengan Docker Compose.

Claude akan membuat konfigurasi container, memastikan port mapping benar, dan memberikan instruksi untuk menjalankan di server.

Batasan dan Risiko Vibe Coding

Vibe coding sangat powerful untuk eksperimen, tetapi memiliki risiko serius untuk proyek production:

• Security: Anda tidak tahu apa yang sebenarnya ditulis oleh AI. Ada risiko secret leakage, SQL injection, atau vulnerability lain yang tidak terdeteksi.

• Maintainability: Kode yang dihasilkan AI bisa sangat kompleks dan sulit dipahami nanti. Ini menjadi masalah besar untuk tim yang perlu maintain code.

• Cost: API call yang tidak terbatas bisa menghasilkan biaya tak terduga. Beberapa developer melaporkan tagihan ribuan dolar karena vibe coding terhadap API berbayar.

• Quality: Tanpa review, kode bisa mengandung bug subtle yang hanya muncul di edge case tertentu.

Simon Willison menekankan bahwa tidak ada kode yang boleh di-commit ke repository jika Anda tidak bisa menjelaskan apa yang dilakukan kode tersebut. Ini adalah golden rule yang membedakan vibe coding dari AI-assisted programming yang bertanggung jawab.

Kapan Vibe Coding Cocok Digunakan

Berdasarkan pengalaman Simon Willison yang telah membangun lebih dari 80 eksperimen dengan vibe coding, berikut skenario yang ideal:

• Proyek pribadi dan low-stakes yang tidak digunakan orang lain

• Prototyping untuk validasi ide sebelum implementasi serius

• Automasi tugas personal yang tidak melibatkan data sensitif

• Belajar dan membangun intuisi tentang kemampuan LLM

• Scripting throwaway untuk one-time task

Untuk proyek yang digunakan oleh orang lain, melibatkan data pribadi, atau memiliki implikasi finansial, selalu lakukan review manual dan security audit.

Kesimpulan

Vibe coding adalah fenomena menarik yang membuka pintu bagi non-programmer untuk membangun tools sendiri dan membantu developer berpengalaman membangun intuisi tentang LLM. Teknik ini memang mengurangi barrier to entry untuk software development secara drastis.

Namun, jangan keliru menganggap vibe coding sebagai pengganti software engineering. Ini adalah spektrum yang berbeda. Gunakan vibe coding untuk eksplorasi dan prototyping, tetapi tetap terapkan praktik software engineering yang bertanggung jawab untuk kode production.

Sumber utama artikel ini berdasarkan analisis dari Simon Willison: Not all AI-assisted programming is vibe coding. Untuk eksperimen menarik lainnya, kunjungi koleksi tools yang dibangunnya dengan vibe coding.