Apa itu vibe coding? Vibe coding adalah cara membuat software dengan menjelaskan apa yang kamu inginkan dalam bahasa sehari-hari, lalu membiarkan AI yang menulis kodenya. Istilah ini dipopulerkan Andrej Karpathy pada Februari 2025. Panduan ini memakai contoh nyata: website portofolio satu halaman yang dibuat dengan VS Code, Claude Code, dan Next.js, lalu di-deploy ke Vercel.
Dari perintah /init sampai website bisa dibuka orang lain, prosesnya memakan sekitar 25 menit dengan satu kali permintaan revisi. Hasilnya belum sempurna, dan itu sengaja kami tunjukkan, karena langkah memeriksa hasil adalah bagian yang paling sering dilewati pemula. Semua informasi alat dan harga dicek pada 11 Oktober 2026.
Apa Itu Vibe Coding?
Karpathy menggambarkannya sebagai gaya bekerja yang menyerahkan urusan kode ke AI: kamu menyebutkan keinginan, menjalankan hasilnya, melihat apa yang terjadi, lalu meminta perbaikan. Kamu tidak perlu membaca setiap baris kode untuk mendapat hasil yang berjalan.
Kata kuncinya adalah hasil yang berjalan, bukan hasil yang benar. Di sinilah kebanyakan masalah muncul, dan itu yang dibahas di bagian pemeriksaan dan risiko di bawah.
Bedanya dengan Coding Biasa
Dalam coding biasa, kamu menulis kode sendiri baris demi baris. Dalam vibe coding, kamu menulis permintaan dan AI yang menulis kodenya. Pekerjaanmu bergeser dari mengetik kode menjadi menjelaskan keinginan dengan jelas dan menilai hasilnya.
Cocok untuk Website Seperti Apa
Contoh di artikel ini adalah website statis: halaman yang isinya tetap, seperti portofolio, company profile, atau landing page. Jenis ini paling aman untuk pemula, karena tidak ada server, database, atau data pengguna yang harus dijaga.
Untuk toko online, sistem booking, atau apa pun yang menyimpan data pelanggan, vibe coding tanpa pemeriksaan serius berisiko. Itu dibahas di bagian risiko.
Yang Perlu Disiapkan
- VS Code, editor kode gratis dari Microsoft. Claude Code membutuhkan versi 1.94.0 atau lebih baru.
- Claude Code, asisten coding berbasis AI yang bisa dipasang sebagai ekstensi VS Code. Syaratnya akun Anthropic: langganan Claude berbayar (Pro, Max, Team, atau Enterprise) atau akun Claude Console. Kalau kamu ingin alat yang bisa dicoba gratis, lihat panduan OpenCode.
- Node.js atau Bun, untuk menjalankan project Next.js. Salah satu cukup.
- Akun Vercel, untuk langkah deploy.
- Bahan brief: teks tentang dirimu atau bisnismu, gambar referensi tampilan, foto, dan daftar warna serta font.
Langkah 1: Pasang VS Code dan Claude Code
Pasang VS Code, lalu buka menu Extensions (tombol Ctrl+Shift+X di Windows dan Linux, Cmd+Shift+X di macOS), cari "Claude Code", dan klik Install. Setelah itu buka panel Claude Code lewat ikon percikan di toolbar editor atau tulisan Claude Code di status bar bawah. Saat pertama kali dibuka, kamu diminta masuk lewat browser.
Langkah pemasangan dan login bisa berubah dari waktu ke waktu, jadi untuk detail terbaru ikuti dokumentasi resmi Claude Code untuk VS Code.
Untuk Node.js atau Bun, pasang salah satunya dari situs resminya. Pada praktik kami, Claude Code mencoba memakai Node.js lebih dulu, menemukan bahwa Node.js tidak ada, lalu memakai Bun yang sudah terpasang di komputer kami. Perilaku ini kami lihat sekali, jadi jangan dianggap pasti terjadi di komputermu.
Langkah 2: Tulis Brief Sebelum Meminta AI Bekerja
Hasil vibe coding ditentukan oleh seberapa jelas kamu menjelaskan keinginan. Permintaan samar menghasilkan website generik. Karena itu, sebelum memulai, kami menyiapkan satu folder bernama briefs berisi empat jenis bahan:
SPEC.md: konsep desain, teknologi, warna, font, dan aturan teknis.ABOUT.md: isi teks website, seperti nama, pendidikan, pengalaman, tech stack, project, dan tautan.- Folder
references: enam gambar referensi tampilan. - Folder
assets: foto yang akan dipakai.
Isi SPEC.md kami singkat. Ini bentuknya, yang bisa kamu tiru:
# KONSEP
Website bergaya neo-brutalism seperti di folder references.
# TECH
Next.js, TailwindCSS, react-icons.
# COLOR
Warna dasar krem dan hitam pekat, ditambah 2 sampai 4 warna aksen
(kuning, pink, biru, lime, oranye, atau lavender).
# FONT
Heading: Syne atau Plus Jakarta Sans (tebal).
Isi: Inter atau Plus Jakarta Sans.
# RULES
- Selalu pakai token Tailwind, jangan nilai arbitrary kalau tidak perlu.
- Buat token warna 50 sampai 900 untuk tiap warna yang dipakai.
- Buat token font yang proper.Tiga hal membuat brief ini efektif. Aturan teknis (RULES) memaksa hasil yang rapi, bukan sekadar yang jalan. Teks isi dipisah di ABOUT.md supaya AI tidak mengarang. Gambar referensi memberi gambaran tampilan yang sulit ditulis dengan kata-kata.
Satu catatan soal gambar dan font: pastikan referensi yang kamu pakai sebagai inspirasi tidak kamu tiru persis, dan periksa lisensi font dan foto yang dipakai di website.
Langkah 3: Buat CLAUDE.md dengan /init
Ketik /init di kotak perintah. Pada folder yang belum berisi kode, perintah ini membuat file CLAUDE.md, catatan yang dibaca Claude Code di awal setiap sesi. Dalam kasus kami, isinya ringkasan brief: tujuan folder briefs, ringkasan spesifikasi, dan aturan token.
Perhatikan satu hal: Claude Code menulis bahwa ia tidak membuka enam gambar referensi saat /init, sehingga catatan itu tidak menggambarkan tampilan dari gambar. Project Next.js sendiri baru dibuat di langkah berikutnya.
Langkah 4: Perintahkan Claude Code Mulai Mengerjakan
Kami hanya mengetik "Oke mulai kerjakan". Claude Code lalu membuat project Next.js, mengatur token warna, font, dan bayangan keras, membuat halaman satu layar dengan tujuh bagian, dan mengisi teksnya dari ABOUT.md.
Hasil akhirnya mengikuti gambar referensi, termasuk elemen yang tidak tertulis di teks brief. Supaya tidak bergantung pada keberuntungan, sebaiknya perintahmu lebih eksplisit, misalnya: "Baca semua file di folder briefs, termasuk gambar di folder references, lalu buat websitenya sesuai SPEC.md dan ABOUT.md." Ini saran kami, bukan kalimat yang kami pakai.
Dua hal di ringkasan itu layak dicatat. Claude Code menyebut bahwa ia belum melihat hasilnya di browser, dan ia tidak menaruh email di situs karena email tidak ada di brief. Itu perilaku yang kamu inginkan: AI mengaku batasnya dan tidak mengarang data.
Langkah 5: Periksa Hasilnya Sebelum Dianggap Selesai
Jalankan bun run dev atau npm run dev, lalu buka alamat lokal yang muncul di terminal (biasanya localhost:3000). Bandingkan dengan referensi.
Dalam contoh kami, tampilan mengikuti referensi dengan baik. Kami meminta satu revisi kecil: foto dibuat hitam putih, dan Claude Code mengerjakannya dengan satu baris kelas Tailwind. Namun ada satu cacat yang masih ada: kata terakhir di judul utama terpotong menjadi "DEVELOP" pada tampilan yang kami uji, baik di komputer lokal maupun di versi online. Cacat seperti ini hanya ketahuan kalau kamu melihat sendiri.
Checklist yang kami pakai sebelum website dianggap siap:
- Tampilan di HP dan layar lebar. Cari teks yang terpotong, gambar yang meluber, dan menu yang tidak bisa diklik.
- Semua tautan. Klik satu per satu, termasuk tautan sosial media.
- Isi teks. Cocokkan dengan bahan yang kamu berikan. Pastikan tidak ada nama, angka, atau kontak karangan AI.
- Form kontak. Website statis tidak punya server untuk menerima isi form. Pakai tautan WhatsApp atau email, atau layanan form pihak ketiga.
- Gambar. Ukurannya wajar, tidak berat, dan punya teks alternatif.
- Judul halaman dan deskripsi. Pastikan ada dan sesuai isi, karena itu yang tampil di hasil pencarian.
- Rahasia. Pastikan tidak ada API key, kata sandi, atau token di dalam kode atau file yang ikut diunggah.
Langkah 6: Simpan Versi dan Amankan Rahasia
Dalam contoh ini kami langsung deploy lewat CLI tanpa memakai Git. Untuk website yang akan dirawat, kami menyarankan sebaliknya: simpan project di Git (misalnya GitHub) dan buat satu commit setiap kali satu bagian beres. Dengan begitu kamu bisa kembali ke versi sebelumnya kalau AI merusak sesuatu.
Simpan rahasia di file .env dan pastikan file itu tidak ikut tersimpan ke repositori. Untuk website statis sederhana seperti ini biasanya tidak ada rahasia, tetapi kebiasaan ini penting begitu kamu menambah fitur.
Langkah 7: Deploy ke Vercel sampai Website Bisa Dibuka
Deploy artinya menaruh hasil website ke server supaya bisa dibuka siapa saja lewat internet. Vercel menyediakan tiga cara yang relevan untuk pemula:
- Vercel Drop: buka vercel.com/drop, seret folder project, pilih nama project, lalu klik Deploy. Tanpa Git dan tanpa CLI.
- Git: hubungkan repositori GitHub, GitLab, atau Bitbucket. Setelah itu setiap push otomatis membuat deploy baru.
- CLI: jalankan perintah dari terminal. Ini yang kami pakai.
Dengan CLI, kami meminta Claude Code memasang Vercel CLI. Ia memasangnya lewat Bun (versi 63.1.2 pada saat kami mencoba) dan memberi tahu tiga langkah: vercel login untuk masuk lewat browser, vercel untuk deploy percobaan, dan vercel --prod untuk deploy ke production. Claude Code sengaja tidak menjalankan login dan deploy sendiri karena keduanya membuat project di akun Vercel kami, jadi kami login dulu, baru ia melanjutkan.
Setelah login, Claude Code menjalankan vercel --prod. Vercel membuat project dengan nama dari nama folder dan memberi alamat berakhiran .vercel.app. Next.js dikenali otomatis, jadi tidak ada pengaturan tambahan.
Ada satu jebakan yang kami temui: Deployment Protection masih aktif secara default, sehingga pengunjung yang belum login ke Vercel diminta login saat membuka alamat itu. Untuk website yang ingin dibuka publik, matikan di dashboard Vercel pada project yang bersangkutan, menu Settings, lalu Deployment Protection. Setelah itu uji alamatnya di jendela incognito, supaya kamu melihat apa yang dilihat pengunjung.
Memasang Domain Sendiri
Alamat .vercel.app bisa diganti domain milikmu. Buka project di Vercel, pilih Settings, lalu Domains, dan klik Add Domain. Domain utama (misalnya contoh.com) diatur dengan A record, sedangkan subdomain dengan CNAME. Nilainya muncul di dashboard dan berbeda untuk setiap project, jadi salin dari sana, bukan dari artikel. Perubahan DNS butuh waktu untuk menyebar.
Perhatikan Syarat Paket Gratis
Paket gratis Vercel (Hobby) dibatasi untuk pemakaian pribadi dan non-komersial. Dokumentasi Vercel mendefinisikan pemakaian komersial secara luas, yaitu deployment yang dipakai demi keuntungan finansial pihak mana pun yang terlibat, termasuk pegawai berbayar yang menulis kodenya. Kalau websitemu untuk bisnis, periksa kebijakannya dan pertimbangkan paket berbayar atau hosting lain. Kalau ragu, tanyakan ke tim dukungan Vercel.
Kalau Memakai Hosting Statis Lain
Vercel tidak mewajibkan static export untuk Next.js. Kalau kamu memilih hosting statis lain, aktifkan output: 'export' di next.config.js. Perintah next build lalu menghasilkan folder out berisi HTML, CSS, dan JavaScript yang bisa diunggah ke server file mana pun. Dokumentasi Next.js mencatat beberapa fitur tidak didukung pada mode ini, di antaranya redirect, header, rewrite, Server Actions, dan optimasi gambar bawaan tanpa loader khusus. Sebutkan batasan ini di file brief supaya AI tidak memakainya.
Risiko Vibe Coding dan Kapan Sebaiknya Tidak Dipakai
Vibe coding cepat, tetapi ada empat risiko yang perlu kamu tahu.
- Hasil yang berjalan belum tentu benar. Kode yang tidak dibaca manusia bisa menyimpan celah keamanan atau kesalahan yang baru terlihat di kondisi nyata.
- Sulit dirawat. Kalau kamu tidak memahami kodenya, memperbaiki atau menambah fitur nanti bergantung pada AI.
- Data dan rahasia. Jangan menaruh kata sandi, token, atau data pelanggan di brief atau kode.
- Lisensi dan keaslian. Gambar, font, dan teks tetap tanggung jawabmu.
Kalau website-mu akan menerima pembayaran, menyimpan data pelanggan, atau punya akun pengguna, libatkan developer untuk memeriksa hasilnya sebelum dipakai. Untuk gambaran bagaimana AI bisa dihubungkan ke website dengan aman, baca artikel tentang AI agent dan MCP.
Pertanyaan yang Sering Muncul
Apakah harus bisa coding untuk vibe coding?
Untuk membuat website statis sederhana, tidak harus. Tetapi kamu tetap perlu memeriksa hasilnya, karena AI bisa salah, dan itu bagian yang tidak bisa diserahkan.
Apakah vibe coding gratis?
Tidak sepenuhnya. VS Code gratis, tetapi Claude Code butuh langganan Claude berbayar atau akun Console. Ada alat lain yang menawarkan model gratis. Vercel punya paket gratis, tetapi hanya untuk pemakaian non-komersial.
Alat apa yang cocok untuk pemula?
Contoh di artikel ini memakai Claude Code di VS Code. Alternatifnya antara lain OpenCode, yang kami bahas di panduan OpenCode. Pilih yang bisa kamu pakai tanpa merasa terhambat di langkah pemasangan.
Apakah website hasil vibe coding aman?
Tidak otomatis. Website statis tanpa data pengguna relatif rendah risikonya. Begitu ada form, login, atau pembayaran, perlu pemeriksaan keamanan oleh orang yang paham.
Bisakah vibe coding dipakai untuk toko online?
Secara teknis bisa, tetapi bukan untuk pemula. Toko online menyimpan data pelanggan dan memproses pembayaran, sehingga kesalahan kecil bisa berdampak besar.
Apa bedanya dengan website builder?
Website builder menyediakan editor visual dan templat dalam satu layanan. Vibe coding menghasilkan kode project yang bisa kamu simpan dan pindahkan sendiri, tetapi kamu yang bertanggung jawab memeriksa dan merawatnya.
Batasan Panduan Ini
Contoh di artikel ini dibuat satu kali, di Windows, memakai Claude Code sebagai ekstensi VS Code dengan model Sonnet 5.5, Next.js, dan Bun. Kami hanya menguji deploy lewat Vercel CLI. Vercel Drop, Git, dan hosting lain mengikuti dokumentasi dan belum kami coba. Estimasi waktu sekitar 25 menit berasal dari satu sesi dan bisa berbeda untukmu. Harga, syarat paket, dan langkah di layar bisa berubah.
Sumber
Semua informasi dicek pada 11 Oktober 2026. Halaman deploy Vercel tertera diperbarui 3 September 2026, halaman domain Vercel 16 September 2026, dan dokumentasi static export Next.js (versi 16.4.0) 9 Agustus 2026.
