Apa Itu Vibe Coding?
Vibe coding adalah metodologi development di mana kamu mendeskripsikan apa yang ingin dibangun dalam bahasa natural, AI men-generate kodenya, lalu kamu me-review, me-refine, dan meng-iterate hasilnya sampai siap produksi. Istilah ini dicetuskan oleh Andrej Karpathy (ex-Tesla AI Director) pada 2025, dan kini menjadi Collins Dictionary Word of the Year.
Tapi vibe coding bukan "ketik prompt → jadi aplikasi." Workflow profesional membutuhkan struktur: spesifikasi yang jelas, desain UI, struktur file yang terencana, testing terorganisir, dan pipeline deployment yang solid. Panduan ini membongkar setiap fase secara detail.
Ideation & PRD (Product Requirements Document)
Fondasi yang menentukan segalanya
Ini adalah fase yang paling sering dilewatkan pemula — dan yang paling krusial. Tanpa PRD, AI akan membuat keputusan yang "masuk akal" di setiap langkah, tapi perlahan menyimpang dari yang kamu inginkan. PRD adalah instruksi manual untuk AI-mu.
File yang Harus Dibuat
├── prd.md # Product Requirements Document
├── user-personas.md # Siapa pengguna kamu
├── user-flows.md # Alur interaksi pengguna
└── scope.md # Apa yang IN dan OUT of scope
Isi PRD yang Efektif
Checklist PRD
- Product Vision — 1-2 kalimat tentang apa yang dibangun dan kenapa
- Target Users — Persona pengguna dengan pain points
- Functional Requirements — Daftar fitur spesifik per halaman
- Non-Functional Requirements — Performa, keamanan, kompatibilitas
- Tech Stack — Framework, bahasa, database, hosting
- File & Folder Structure — Konvensi yang harus diikuti AI
- Acceptance Criteria — Definisi "selesai" yang bisa diuji
- Out of Scope — Fitur yang TIDAK dibuat (mencegah scope creep)
- User login (email/password + Google OAuth)
- CRUD task dengan status pending/in-progress/done
- Filter dan sort berdasarkan tanggal, status, prioritas
- Dashboard dengan chart statistik penyelesaian
Tech stack: Next.js 15 + TypeScript + Supabase + Tailwind.
Sertakan: user personas, user flows, acceptance criteria,
folder structure, dan daftar out-of-scope items.
Tools untuk Fase Ini
ChatGPT / Claude Free Tier
Generate dan iterate PRD melalui percakapan multi-round.
Notion / Google Docs Free
Simpan dan kolaborasi PRD sebagai living document.
GitHub Spec-Kit Free
Template CLI untuk spec → plan → tasks otomatis.
Whimsical / FigJam Freemium
Visualisasi user flows dan mind mapping.
UI/UX Design & Wireframing
Merancang pengalaman sebelum menulis kode
Wireframe berfungsi sebagai "draft kasar" — UI pasti akan berubah selama build, tapi ini membantu kamu masuk ke perspektif pengguna. Di era vibe coding, wireframe juga berfungsi sebagai visual prompt — kamu bisa meng-upload screenshot ke AI dan berkata "buat seperti ini."
File yang Harus Dibuat
├── wireframes/ # Lo-fi wireframes per halaman
├── mockups/ # Hi-fi mockups (opsional)
├── design-system.md # Warna, font, spacing, komponen
├── component-library.md # Daftar komponen UI yang dibutuhkan
└── responsive-spec.md # Breakpoints & behavior mobile/desktop
Design System Essentials
Checklist Design
- Color palette — Primary, secondary, accent, semantic (error, success, warning)
- Typography — Font family, scale (h1-h6, body, caption), weights
- Spacing system — Base unit (4px/8px grid), padding/margin konvensi
- Component inventory — Button, input, card, modal, navbar, table, toast
- Responsive breakpoints — Mobile (375px), Tablet (768px), Desktop (1280px)
- Dark/Light mode — Variabel CSS untuk theming
- Accessibility — Kontras minimum WCAG 2.1 AA, focus states, alt text
Tools untuk Fase Ini
v0.dev (Vercel) Free
Generate komponen React/Next.js dari prompt teks atau screenshot.
Figma + AI Plugins Freemium
Wireframing profesional dengan MCP bridge ke Cursor.
Lovable $20/bln
Generate UI berkualitas tinggi langsung dari prompt — kuat di estetika.
Tempo Labs Beta
Visual builder yang generate React code + breakdown struktur otomatis.
Struktur File & Arsitektur Proyek
Menentukan fondasi teknis sebelum AI menulis kode
Tanpa struktur file yang didefinisikan, AI akan mengarang konvensi sendiri — dan setiap prompt bisa menghasilkan konvensi yang berbeda. Tentukan ini di awal agar AI konsisten.
Contoh Struktur Full-Stack (Next.js + Supabase)
├── .cursorrules # Aturan untuk Cursor AI
├── .env.example # Template environment variables
├── AGENTS.md # Instruksi untuk AI agents (Kilo/Cline)
├── prd.md # PRD sebagai referensi AI
├── package.json
├── tsconfig.json # TypeScript strict mode
├── tailwind.config.ts
├── next.config.ts
├── 📁 src/
│ ├── 📁 app/ # Next.js App Router pages
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ ├── 📁 dashboard/
│ │ ├── 📁 auth/
│ │ └── 📁 api/ # API routes
│ ├── 📁 components/ # Komponen UI reusable
│ │ ├── 📁 ui/ # Primitives (button, input, card)
│ │ └── 📁 features/ # Feature-specific components
│ ├── 📁 lib/ # Utilities, helpers, configs
│ ├── 📁 hooks/ # Custom React hooks
│ ├── 📁 types/ # TypeScript type definitions
│ └── 📁 styles/ # Global styles
├── 📁 tests/ # Unit & integration tests
├── 📁 e2e/ # End-to-end tests (Playwright)
├── 📁 supabase/ # Migrations & seed data
├── Dockerfile
└── .github/workflows/ci.yml # CI/CD pipeline
.cursorrules atau AGENTS.md yang berisi aturan coding kamu: "Gunakan TypeScript strict mode. Semua function harus punya JSDoc. Gunakan Tailwind, bukan CSS inline. Komponen dalam PascalCase." — Ini akan menjaga konsistensi output AI.
Coding dengan AI — Iterasi Terfokus
Core loop: Prompt → Generate → Review → Refine
Ini adalah inti vibe coding. Aturan emasnya: satu fitur per prompt, satu prompt per iterasi. Jangan coba bangun seluruh aplikasi dalam satu perintah.
Workflow per Fitur (Vertical Slice)
Langkah Coding per Fitur
- Referensikan PRD — "Berdasarkan PRD section 3.2, implementasikan..."
- Scope kecil — Satu komponen/endpoint per prompt
- Review diff — Baca setiap perubahan sebelum accept
- Test manual — Jalankan, klik, lihat hasilnya di browser
- Commit — Git commit setelah setiap fitur yang berjalan
- Lanjut ke fitur berikutnya — Ulangi siklus
1. API route POST /api/tasks di src/app/api/tasks/route.ts
2. Validasi: title (required, string), status (enum: pending|done)
3. Insert ke Supabase table "tasks"
4. Return 201 dengan task yang dibuat
5. Handle error 400 untuk validasi gagal
Ikuti konvensi di .cursorrules. Gunakan Zod untuk validasi.
Tools untuk Coding
Cursor $20/bln
IDE AI-first terbaik. Composer untuk multi-file edit, Tab autocomplete.
Cline Free (BYOK)
Agen otonom di VS Code. Plan/Act mode, browser automation, checkpoints.
Claude Code API
Terminal agent paling powerful. Full codebase awareness, git management.
Kilo Code Free (BYOK)
500+ model, Orchestrator mode untuk koordinasi multi-agen.
Testing — Jangan Skip Ini!
AI sering melewatkan edge cases, testing menangkapnya
Kode AI sering terlihat benar tapi gagal di edge cases. Testing bukan opsional — ini safety net kamu. Kabar baiknya: AI juga bisa menulis test.
Jenis Test yang Dibutuhkan
| Jenis Test | Apa yang Diuji | Tool | Kapan |
|---|---|---|---|
| Unit Test | Fungsi individual, utilities, helpers | Jest / Vitest | Setiap fitur baru |
| Integration Test | API endpoints, database queries | Jest + Supertest | Setiap endpoint |
| Component Test | Render, interaksi, state UI | Testing Library | Komponen kritis |
| E2E Test | User flow lengkap (login → action → result) | Playwright / Cypress | Happy paths |
| Security Scan | Dependencies vulnerability, secrets leak | npm audit / Snyk | Sebelum deploy |
├── 📁 unit/
│ ├── taskValidation.test.ts
│ └── dateUtils.test.ts
├── 📁 integration/
│ ├── api/tasks.test.ts
│ └── api/auth.test.ts
└── 📁 components/
├── TaskCard.test.tsx
└── Dashboard.test.tsx
📁 e2e/
├── auth-flow.spec.ts
├── task-crud.spec.ts
└── dashboard.spec.ts
Test cases yang harus dicakup:
- Title valid (string, 1-200 karakter) → return true
- Title kosong → throw ValidationError
- Title > 200 karakter → throw ValidationError
- Status valid (pending/done) → return true
- Status invalid → throw ValidationError
- Input tanpa title field → throw ValidationError
Gunakan Vitest. File output: tests/unit/taskValidation.test.ts
Code Review & Quality Assurance
Mata manusia tetap diperlukan
Aturan utama vibe coding: jangan pernah ship kode yang tidak bisa kamu jelaskan. Review setiap diff, pahami setiap fungsi. AI bisa membuat kode yang "berjalan" tapi memiliki security hole, performance leak, atau logic error yang subtle.
Checklist Code Review
- Baca setiap diff sebelum accept — jangan "Accept All" untuk produksi
- Cek error handling — Apakah semua edge case tertangkap?
- Cek security — API keys terekspos? SQL injection? XSS?
- Cek performance — N+1 queries? Memory leak? Bundle size?
- Cek accessibility — Alt text? ARIA labels? Keyboard navigation?
- Cek naming — Variabel dan fungsi deskriptif dan konsisten?
- Jalankan linter — ESLint + Prettier harus pass tanpa error
- Jalankan TypeScript compiler — tsc --noEmit harus bersih
Tools untuk Code Review
Cursor Bugbot $40/bln
AI review otomatis pada setiap PR di GitHub.
ESLint + Prettier Free
Linting dan formatting otomatis. Tangkap kesalahan AI secara programatik.
SonarQube / Snyk Freemium
Security scanning dan code quality analysis otomatis.
GitHub PR Review Free
Peer review manual — mata manusia tetap paling penting.
CI/CD Pipeline
Otomatisasi build, test, dan validasi sebelum deploy
Pipeline CI/CD adalah gatekeeper terakhir sebelum kode mencapai produksi. Setup ini sekali, lindungi selamanya.
File Pipeline
├── ci.yml # Lint + TypeScript + Unit Test + Build
├── e2e.yml # E2E test dengan Playwright
└── deploy.yml # Deploy ke staging/production
Dockerfile # Multi-stage build
docker-compose.yml # Local development
on: [push, pull_request]
jobs:
quality:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npm ci
- run: npm run lint # ESLint
- run: npx tsc --noEmit # TypeScript check
- run: npm test # Unit + Integration
- run: npm audit # Security scan
- run: npm run build # Build validation
Deployment & Monitoring
Dari staging ke production — dan memastikan tetap berjalan
Selalu deploy ke staging dulu sebelum production. Beberapa menit testing di staging bisa menghemat berjam-jam debugging di production.
Pilihan Platform Deployment
| Platform | Tipe | Cocok Untuk | Harga |
|---|---|---|---|
| Vercel | Serverless | Next.js, React, frontend-heavy | Free tier tersedia |
| Netlify | JAMstack | Static sites, SSG, edge functions | Free tier tersedia |
| Railway | Container | Full-stack, databases, backend | $5/bulan+ |
| Supabase | BaaS | Database, auth, storage, realtime | Free tier tersedia |
| AWS / GCP | Cloud IaaS | Enterprise, scaling, full control | Pay-as-you-go |
| Docker + VPS | Container | Full control, self-hosted | $5-20/bulan VPS |
Checklist Pre-Deployment
- Semua test CI/CD hijau (pass)
- Environment variables sudah di-set di platform hosting
- Database migrations sudah dijalankan
- HTTPS aktif dan domain terkonfigurasi
- Error monitoring terpasang (Sentry / LogRocket)
- Analytics terpasang (Vercel Analytics / PostHog)
- Backup database terjadwal
- Rate limiting aktif untuk API endpoints
Ringkasan: Tool Stack per Fase
| Fase | Tool Utama | Output |
|---|---|---|
| 1. PRD | ChatGPT/Claude + Notion | prd.md, user-flows.md, scope.md |
| 2. UI/UX | Figma, v0.dev, Lovable | Wireframes, design system, mockups |
| 3. Struktur | Manual + .cursorrules | Folder structure, config files |
| 4. Coding | Cursor / Cline / Claude Code | Source code (TypeScript + React) |
| 5. Testing | Vitest, Playwright, npm audit | Unit, integration, E2E, security tests |
| 6. Review | ESLint, Bugbot, Peer review | Clean, reviewed code |
| 7. CI/CD | GitHub Actions | Automated pipeline |
| 8. Deploy | Vercel / Railway + Sentry | Live production app |
Vibe Coding = Struktur + AI + Review
Vibe coding bukan magic — ini adalah workflow terstruktur di mana AI menjadi builder dan kamu menjadi arsitek. Semakin jelas instruksimu, semakin presisi hasilnya. Mulai dari PRD, bukan dari prompt.
Mulai dari Fase 1 →