Tutorial Vibe Coding dengan Cursor: Bangun CRUD App dari Sketsa

Vibe coding sedang menjadi metode paling populer di kalangan developer pada 2026. Konsep sederhana ini mengubah cara kita menulis software: daripada mengetik setiap baris kode secara manual, kita mendeskripsikan apa yang ingin dibangun dalam bahasa alami, lalu membiarkan AI menggenerasikan implementasinya. Cursor, editor kode yang terintegrasi dengan Claude 3.5 Sonnet, menjadi senjata andalan untuk praktik ini. Dalam tutorial ini, kita akan membangun aplikasi CRUD sederhana dari sketsa UI hingga kode production dalam waktu kurang dari 20 menit.

Metode ini bukan tentang malas menulis kode, melainkan tentang memindahkan fokus dari sintaksis ke arsitektur dan logika bisnis. Anda tetap harus memahami apa yang dihasilkan AI, menguji hasilnya, dan memastikan keamanan serta performa tetap optimal. Mari kita mulai dengan persiapan.

Persiapan Environment dan Instalasi Cursor

Langkah pertama adalah mengunduh dan menginstal Cursor dari situs resmi Cursor. Cursor tersedia untuk macOS, Windows, dan Linux. Setelah terinstal, buat akun dan aktifkan subscription Pro untuk akses penuh ke Claude 3.5 Sonnet dan fitur Composer.

Buat direktori proyek baru dan inisialisasi aplikasi Next.js dengan App Router. Cursor memiliki integrasi native dengan terminal, jadi Anda bisa menjalankan perintah langsung dari dalam editor:

npx create-next-app@latest crud-vibe-app --typescript --tailwind --eslint --app --src-dir --no-import-alias
cd crud-vibe-app
npm install prisma @prisma/client @trpc/server @trpc/client @trpc/react-query zod

Setelah proyek terbuat, buka folder tersebut di Cursor. Pastikan Anda sudah login ke akun Cursor agar fitur AI Chat dan Composer aktif sepenuhnya.

Langkah 1: Generate Schema Database dari Deskripsi Bahasa Alami

Buka file schema.prisma yang akan kita buat di folder prisma/. Gunakan shortcut Ctrl+K (atau Cmd+K di macOS) untuk membuka jendela AI Chat inline. Ketik prompt berikut:

Buat schema Prisma untuk aplikasi manajemen tugas dengan model Task yang memiliki field: id (uuid), title (string), description (text), status (enum: TODO, IN_PROGRESS, DONE), priority (enum: LOW, MEDIUM, HIGH), createdAt, updatedAt. Tambahkan juga model User dengan relasi one-to-many ke Task.

Cursor akan menggenerate schema lengkap beserta enum dan relation. Periksa hasilnya, lalu tekan Tab untuk menerima saran. Jika ada kesalahan, cukup tambahkan instruksi koreksi dalam chat yang sama. Setelah schema valid, jalankan migrasi:

npx prisma migrate dev --name init
npx prisma generate

Langkah 2: Bangun API Router dengan tRPC menggunakan Composer

Fitur Composer di Cursor (shortcut Ctrl+I) memungkinkan Anda menggenerate banyak file sekaligus berdasarkan satu instruksi kompleks. Buat folder src/server/api/routers/ lalu buka Composer dan beri prompt:

Buat tRPC router untuk model Task dengan operasi CRUD lengkap: create, read (list dan byId), update, dan delete. Gunakan Zod untuk validasi input. Integrasikan dengan Prisma client. Simpan di file task.ts dan update root router di app.ts.

Composer akan membuat atau mengedit beberapa file secara simultan. Periksa setiap diff sebelum menerima. Pastikan error handling dengan TRPCError sudah termasuk. Uji endpoint dengan membuat request dari frontend atau menggunakan HTTP client seperti Postman.

Langkah 3: Generate Komponen UI dari Referensi Sketsa

Anda bisa menggunakan sketsa UI dari Figma, Balsamiq, atau bahkan gambar hand-drawn. Simpan screenshot sketsa ke dalam proyek, misalnya di public/wireframe.png. Kemudian buat file baru di src/app/page.tsx dan gunakan AI Chat dengan referensi gambar:

@wireframe.png Buat halaman utama Next.js yang menampilkan daftar tugas dalam tabel. Gunakan Tailwind CSS untuk styling. Tambahkan tombol Add, Edit, dan Delete. Form untuk create/update gunakan modal atau sheet component.

Cursor akan membaca gambar dan menghasilkan JSX yang sesuai dengan layout visual. Jika menggunakan shadcn/ui, Anda bisa menambahkan instruksi spesifik: Gunakan komponen Table, Dialog, Button, dan Input dari shadcn/ui. Instal komponen yang diperlukan dengan CLI shadcn.

Langkah 4: Iterasi Debugging dengan Context Aware AI Chat

Setelah kode pertama dihasilkan, biasanya ada bug kecil atau styling yang kurang pas. Cursor memungkinkan Anda menyorot bagian kode spesifik dan memberi instruksi koreksi. Contohnya, jika tombol delete belum memiliki konfirmasi, sorot bagian handler dan ketik:

Tambahkan dialog konfirmasi sebelum menghapus task. Gunakan komponen AlertDialog dari shadcn/ui.

Anda juga bisa menggunakan @ untuk mereferensikan file lain, database schema, atau dokumentasi eksternal. Jika menemukan error runtime, cukup copy-paste stack trace ke AI Chat dan Cursor akan menyarankan perbaikan beserta penjelasan root cause.

Langkah 5: Optimasi dan Deploy ke Vercel

Sebelum deploy, jalankan build lokal untuk memastikan tidak ada error kompilasi:

npm run build

Perbaiki semua TypeScript error yang muncul. Cursor biasanya bisa mengauto-fix masalah tipe data dengan satu prompt. Setelah build sukses, inisialisasi repository Git dan push ke GitHub. Kemudian deploy ke Vercel dengan import proyek. Pastikan environment variable DATABASE_URL diatur di dashboard Vercel agar Prisma dapat terhubung ke database production.

Verifikasi aplikasi berjalan dengan mengakses URL deployment dan mencoba operasi CRUD lengkap. Jika ada masalah koneksi database, periksa log runtime di Vercel dan tanyakan Cursor untuk menganalisis log tersebut.

Kesimpulan dan Best Practices Vibe Coding

Vibe coding dengan Cursor memang mempercepat delivery, tetapi memerlukan disiplin review kode. Jangan pernah menerima semua saran AI tanpa membaca dan memahami implikasinya. Selalu jalankan test, periksa keamanan input user, dan pastikan tidak ada secret atau API key yang terbawa ke client-side.

Untuk dokumentasi lebih lanjut, kunjungi dokumentasi resmi Cursor. Selamat mencoba, dan semoga iterasi produk Anda semakin cepat dengan bantuan AI agent di dalam editor.