Vibe Coding SDLC Bible Part 1: Requirements & Planning

Daftar Isi — Part 1: Requirements & Planning

Mengapa Planning? — 80% kegagalan dari requirements buruk
Vibe Coding SDLC Overview — 6 fase, AI di setiap langkah
Brain Dump ke Ide Terstruktur — Dari "mau bikin app" ke vision jelas
PRD (Product Requirements Document) — Template AI-assisted
CLAUDE.md — DNA Project Anda — File paling penting di Vibe Coding
User Stories & Acceptance Criteria — Apa yang user benar-benar butuhkan
Tech Stack Selection — Framework decision matrix
Project Scaffolding — Setup repo, struktur folder, boilerplate
Estimasi & Sprint Planning — Breakdown tasks dengan AI
Anti-patterns — Kesalahan fatal di fase planning
Checklist & Deliverables — Apa yang harus selesai sebelum mulai coding
Ringkasan & Preview Part 2

⚠

1. Mengapa Planning? — Fakta yang Mengejutkan

80% kegagalan software traceable ke fase requirements. Fixing bug di production 100x lebih mahal dari di planning.

Menurut studi NIST dan IBM Systems Sciences Institute, biaya memperbaiki error meningkat eksponensial seiring fase SDLC: error yang ditemukan di requirements phase biaya $1 untuk fix, di coding phase $6.5, di testing $15, dan di production $100. Artinya, setiap jam yang dihabiskan untuk planning yang baik menghemat 10-100 jam debugging di kemudian hari.

Dalam konteks Vibe Coding (development dengan bantuan AI), planning bahkan LEBIH penting: AI coding assistants (Claude Code, Cursor, Copilot) akan dengan senang hati menulis ribuan baris kode yang salah jika diberikan requirements yang buruk. AI mempercepat eksekusi, tapi tidak memperbaiki arah. Garbage requirements in, garbage code out — hanya lebih cepat.

Cost of Fixing Bugs per SDLC Phase

Prinsip Vibe Coding Planning

Dalam Vibe Coding, planning bukan berarti bikin 100 halaman dokumen. Ini berarti: (1) Punya vision jelas tentang apa yang dibangun, (2) Tulis CLAUDE.md yang memberi AI konteks lengkap, (3) Define user stories yang testable, (4) Pilih tech stack yang tepat. Total waktu: 2-4 jam untuk project medium. Hasilnya: coding phase 3-5x lebih cepat karena AI punya konteks yang benar.

🔄

2. Vibe Coding SDLC — 6 Fase dengan AI

Traditional SDLC + AI assistance di setiap langkah = Vibe Coding SDLC

Vibe Coding SDLC — 6 Fase (Seri Ini)

💡

3. Brain Dump ke Ide Terstruktur

Mulai dari "mau bikin app" ke vision yang jelas dan spesifik

Setiap project dimulai dari ide yang masih kabur: "Mau bikin app task manager" atau "Butuh dashboard analytics". Langkah pertama adalah mengubah ide kabur ini menjadi vision statement yang jelas. Gunakan AI sebagai brainstorming partner.

Prompt: Brain Dump to Structured Vision

## Prompt ke Claude/ChatGPT untuk Brain Dump

Saya mau bikin aplikasi web untuk manajemen proyek tim kecil (5-15 orang).
Fitur yang ada di kepala saya:
- Task board seperti Trello tapi lebih simple
- Time tracking per task
- Weekly report otomatis
- Integrasi Slack untuk notifikasi
- Mobile-friendly

Tolong bantu saya:
1. Validasi apakah ide ini masuk akal (market, competitors)
2. Identify core features vs nice-to-have
3. Define target user persona
4. Tulis one-paragraph vision statement
5. List 3 key differentiators dari competitors
6. Suggest MVP scope (minimum viable product)

## Output AI (structured, actionable):
## Vision Statement:
"TaskFlow adalah project management tool untuk tim kecil (5-15)
 yang menggabungkan task board, time tracking, dan automated
 reporting dalam satu interface sederhana — tanpa kompleksitas
 Jira atau keterbatasan Trello."
## MVP Scope: Task Board + Time Tracking + Basic Reports
## Phase 2: Slack integration, advanced analytics

Tulis Ide Mentah (5 menit)

Brain dump semua yang ada di kepala. Tidak perlu terstruktur. Bullet points acak tidak apa-apa. Tujuannya: keluarkan semua dari kepala ke teks.

AI-Assisted Structuring (15 menit)

Paste brain dump ke AI dengan prompt di atas. AI akan memvalidasi, mengorganisir, dan mengidentifikasi gaps. Ini yang akan menjadi bahan PRD.

Define MVP Scope (10 menit)

Dari semua fitur, pilih 3-5 fitur inti yang HARUS ada di versi pertama. Sisanya masuk backlog. Prinsip: "If everything is important, nothing is important."

📋

4. PRD — Product Requirements Document

Dokumen yang mendefinisikan APA yang dibangun. Template AI-assisted.

PRD adalah "kontrak" antara Anda (product owner) dan developer (dalam hal ini, AI + Anda). Dokumen ini mendefinisikan apa yang dibangun, untuk siapa, dan bagaimana mengukur keberhasilannya. Dalam Vibe Coding, PRD juga menjadi konteks utama yang diberikan ke AI saat coding — semakin jelas PRD, semakin baik kode yang dihasilkan AI.

PRD-template.md — Template Product Requirements

# PRD: TaskFlow — Project Management for Small Teams

## 1. Vision & Goals
TaskFlow adalah tool PM sederhana untuk tim kecil (5-15 orang)
yang menggabungkan task board, time tracking, dan automated
reporting dalam satu interface.

## 2. Target Users
Primary: Tim startup (5-15 orang), tech & non-tech
Secondary: Freelancers managing multiple clients
Anti-persona: Enterprise teams (100+ orang) — NOT our target

## 3. Core Features (MVP)
F1: Kanban Board — Drag-drop task cards, columns customizable
F2: Time Tracking — Start/stop timer per task, daily log
F3: Weekly Report — Auto-generated, email to team lead
F4: User Auth — Email/password + Google OAuth
F5: Team Management — Invite, roles (admin/member)

## 4. Non-functional Requirements
Performance: Page load < 2s, API response < 200ms
Scalability: Support 1000 concurrent users
Security: OWASP Top 10 compliance, data encryption
Mobile: Responsive (not native app for MVP)

## 5. Success Metrics
KPI 1: 100 teams sign up in first month
KPI 2: 60% weekly active rate
KPI 3: NPS > 40

## 6. Out of Scope (Phase 2+)
- Slack/Discord integration
- Advanced analytics dashboard
- Native mobile app
- AI task suggestions
- Gantt chart view

📄

5. CLAUDE.md — DNA Project Anda

File PALING PENTING di Vibe Coding. Memberikan AI konteks lengkap tentang project.

CLAUDE.md (atau AGENTS.md, .cursorrules, dll) adalah file yang dibaca AI coding assistant setiap kali membantu Anda. File ini berisi: tech stack, coding conventions, project structure, database schema, API patterns, dan rules yang HARUS diikuti. Tanpa file ini, AI akan menebak-nebak dan sering salah. Dengan file ini, AI menjadi developer yang memahami context project Anda.

CLAUDE.md — Project Configuration File

# CLAUDE.md — TaskFlow Project

## Project Overview
TaskFlow: PM tool untuk tim kecil. Kanban + Time Tracking + Reports.
Target: MVP launch, web app responsive.

## Tech Stack
Frontend:  Next.js 15 (App Router), TypeScript, Tailwind CSS v4
Backend:   Next.js API Routes + Server Actions
Database:  PostgreSQL 16 via Prisma ORM
Auth:      NextAuth.js v5 (Google OAuth + credentials)
Hosting:   Vercel (frontend) + Neon (PostgreSQL serverless)
Testing:   Vitest + Playwright (E2E)

## Coding Rules (NON-NEGOTIABLE)
1. SELALU gunakan TypeScript strict mode
2. SELALU handle error — tidak boleh ada unhandled promise
3. SELALU validasi input (zod schema)
4. SELALU gunakan parameterized queries (no raw SQL)
5. TIDAK BOLEH hardcode secrets — gunakan env vars
6. TIDAK BOLEH commit ke main langsung — selalu PR
7. Setiap function HARUS punya JSDoc comment
8. Max 50 lines per function, max 200 lines per file

## File Structure
src/
  app/           # Next.js App Router pages
  components/    # Reusable UI components
  lib/           # Utilities, helpers, configs
  server/        # Server-side logic, API handlers
  prisma/        # Database schema & migrations
  tests/         # Unit & integration tests

## Database Schema (Key Tables)
User:    id, email, name, role, teamId, createdAt
Team:    id, name, ownerId, plan, createdAt
Board:   id, name, teamId, columns (json)
Task:    id, title, description, status, assigneeId, boardId
TimeLog: id, taskId, userId, startTime, endTime, duration

## API Patterns
- RESTful naming: /api/tasks, /api/tasks/[id]
- Always return { data, error, meta } format
- Use Next.js Server Actions for mutations
- Rate limit: 100 req/min per user

## Security Rules
- Input validation on EVERY endpoint (zod)
- CSRF protection enabled
- Helmet headers configured
- SQL injection prevention via Prisma
- XSS prevention via React default escaping

Tanpa CLAUDE.md: AI akan menebak tech stack, naming conventions, dan patterns. Setiap file akan inkonsisten. Anda akan menghabiskan waktu lebih banyak untuk memperbaiki daripada menulis. Dengan CLAUDE.md: AI konsisten di setiap file, mengikuti patterns yang sama, dan menghasilkan kode yang bisa langsung di-merge.

👤

6. User Stories & Acceptance Criteria

"As a [user], I want to [action] so that [benefit]" — format yang membuat requirements testable

User stories menerjemahkan fitur PRD menjadi unit kerja yang testable. Setiap story harus punya acceptance criteria yang jelas: kapan story dianggap "selesai"? Format standar: "As a [role], I want to [action] so that [benefit]."

user-stories.md — Contoh User Stories TaskFlow

## US-001: Create Task
As a team member
I want to create a new task on the kanban board
So that I can track my work items

### Acceptance Criteria:
1. User can click "+" button on any column to add task
2. Task form has: title (required), description (optional),
   assignee (dropdown), due date (date picker)
3. Task appears in the correct column after creation
4. Other team members see the new task in real-time
5. Validation: title min 3 chars, max 100 chars
6. Error handling: show toast if creation fails

## US-002: Drag-Drop Task
As a team member
I want to drag a task card from one column to another
So that I can update task status visually

### Acceptance Criteria:
1. Drag-drop works on desktop (mouse) and mobile (touch)
2. Column highlights when task is dragged over it
3. Task status updates in database immediately
4. Other team members see the move in real-time
5. Undo available for 5 seconds after move

## US-003: Start Time Tracking
As a team member
I want to start/stop a timer on a task
So that I can track how long I spend on each task

### Acceptance Criteria:
1. Each task card has a play/pause button
2. Timer shows elapsed time in real-time (HH:MM:SS)
3. Only one timer can run at a time per user
4. Time log saved when timer is stopped
5. Daily total visible in sidebar

🛠

7. Tech Stack Selection

Pilih berdasarkan: AI compatibility, team expertise, scalability, cost

Dalam Vibe Coding, tech stack selection punya dimensi tambahan: seberapa baik AI coding assistant mendukung stack ini? AI tools bekerja lebih baik dengan framework populer yang punya banyak training data. Next.js, React, Python/FastAPI, PostgreSQL mendapat dukungan excellent dari semua AI tools. Framework niche atau sangat baru mungkin menghasilkan kode yang kurang akurat.

Category	Recommended	Alternatives	AI Support	Why
Frontend	Next.js 15 + TypeScript	Nuxt, SvelteKit, Remix	Excellent	SSR, SEO, massive ecosystem, top AI support
Styling	Tailwind CSS v4	CSS Modules, styled-components	Excellent	AI generates Tailwind very well, utility-first
Backend	Next.js API Routes / Server Actions	FastAPI, Express, Hono	Excellent	Fullstack in one repo, simpler deployment
Database	PostgreSQL + Prisma ORM	MySQL, MongoDB, Drizzle	Excellent	Type-safe, migrations, great AI generation
Auth	NextAuth.js v5	Clerk, Supabase Auth, Lucia	Good	Free, flexible, well-documented
Hosting	Vercel + Neon	Railway, Fly.io, AWS	N/A	Zero-config deploy, serverless, free tier
Testing	Vitest + Playwright	Jest, Cypress	Good	Fast, modern, ESM-native

📁

8. Project Scaffolding — Setup Repo

Dari zero ke project structure yang siap coding

Terminal — Project Setup (5 menit)

# 1. Create Next.js project
$ npx create-next-app@latest taskflow --typescript --tailwind --app --eslint
$ cd taskflow

# 2. Install dependencies
$ npm install prisma @prisma/client next-auth@beta zod
$ npm install -D vitest @playwright/test

# 3. Initialize Prisma
$ npx prisma init --datasource-provider postgresql

# 4. Create CLAUDE.md (copy template from above)
$ touch CLAUDE.md

# 5. Create folder structure
$ mkdir -p src/{components,lib,server,tests}

# 6. Initialize Git + first commit
$ git init
$ git add -A
$ git commit -m "feat: initial project scaffolding"

# 7. Push to GitHub
$ gh repo create taskflow --private --push

# Project ready! Sekarang buka di IDE + AI assistant
# Claude Code: claude code di terminal
# Cursor: buka folder di Cursor IDE

⏱

9. Estimasi & Sprint Planning

Breakdown tasks dengan AI, estimate effort, plan sprints

User Story	Subtasks	Estimate (Vibe Coding)	Traditional Estimate	Savings
US-001: Create Task	UI form + API + DB + validation	2-3 hours	8-12 hours	~4x
US-002: Drag-Drop	DnD library + state + API + real-time	3-5 hours	16-24 hours	~4x
US-003: Time Tracking	Timer UI + start/stop API + log table	2-4 hours	10-16 hours	~4x
US-004: Weekly Report	Query aggregation + PDF + email	3-5 hours	12-20 hours	~4x
US-005: Auth	NextAuth config + Google + protect routes	1-2 hours	6-10 hours	~5x
TOTAL MVP		11-19 hours	52-82 hours	~4x faster

Estimasi Vibe Coding: Dengan AI assistant yang baik (Claude Code, Cursor) + CLAUDE.md yang komprehensif, development time bisa 3-5x lebih cepat dari traditional coding. Tapi ini HANYA berlaku jika requirements dan planning sudah solid. Tanpa planning yang baik, AI mempercepat pembuatan kode yang salah — dan debugging tetap manual.

🚫

10. Anti-patterns — Kesalahan Fatal di Planning

Jangan lakukan ini, atau Anda akan menyesal di fase coding

Anti-pattern	Apa yang Terjadi	Solusi
No CLAUDE.md	AI generate kode inkonsisten, salah framework, salah pattern	SELALU buat CLAUDE.md sebelum coding apa pun
Scope Creep	"Satu fitur lagi" terus-menerus, project tidak pernah selesai	Define MVP scope, stick to it. Phase 2 untuk sisanya.
No User Stories	Koding tanpa tahu "selesai" itu seperti apa. Fitur setengah jadi.	Setiap fitur HARUS punya acceptance criteria SEBELUM coding.
Wrong Tech Stack	Pilih framework baru/niche, AI support buruk, banyak bug	Pilih stack populer (Next.js, React, PostgreSQL) untuk AI support terbaik.
Skip Scaffolding	Mulai coding di folder kosong, structure berantakan	5 menit setup awal save 5 jam refactoring nanti.
Over-planning	2 minggu planning, 0 lines of code. Analysis paralysis.	Planning = 2-4 jam untuk project medium. Lalu MULAI.

✅

11. Checklist — Siap Mulai Coding?

Semua item ini harus centang sebelum pindah ke Part 2 (Design)

#	Item	Deliverable	Time
1	Vision statement jelas (1 paragraf)	Bagian dari PRD	15 min
2	Target user defined (persona + anti-persona)	Bagian dari PRD	10 min
3	MVP scope defined (3-5 core features)	Feature list + out-of-scope	20 min
4	PRD complete (template filled)	PRD.md file	30 min
5	CLAUDE.md written	CLAUDE.md file di root repo	30 min
6	User stories with acceptance criteria	user-stories.md	45 min
7	Tech stack decided & documented	In CLAUDE.md	15 min
8	Project scaffolded (repo, structure, deps)	GitHub repo with initial commit	10 min
9	Sprint plan (rough estimate per story)	Sprint board or task list	15 min
TOTAL TIME			~3 hours

📝

12. Ringkasan Part 1

Requirements & Planning essentials

Konsep	Key Takeaway
Planning ROI	$1 fix di planning = $100 fix di production. Planning save 10-100x effort.
Brain Dump	Mulai dari ide mentah, gunakan AI untuk structure dan validate.
PRD	Dokumen yang define WHAT: vision, users, features, metrics, scope.
CLAUDE.md	DNA project. File paling penting di Vibe Coding. Berikan AI semua konteks.
User Stories	"As a [user], I want [action] so that [benefit]" + acceptance criteria.
Tech Stack	Pilih stack populer untuk AI support terbaik. Next.js + PostgreSQL = safe bet.
Scaffolding	5 menit setup save 5 jam. Create-next-app + Prisma + CLAUDE.md.
Estimasi	Vibe Coding = 3-5x faster, TAPI hanya jika planning solid.
Anti-patterns	No CLAUDE.md, scope creep, skip user stories = guaranteed pain.

📐

Next: Part 2 — Design & Architecture

Dari requirements ke blueprint teknis. Database schema design (ERD), API endpoint design, UI wireframes dengan AI, component architecture, state management strategy, dan security architecture. Semua sebelum menulis satu baris kode production.

SDLC

Tech Review Desk — Vibe Coding SDLC Bible

Sumber: IBM Systems Sciences Institute, NIST, Anthropic CLAUDE.md best practices, Next.js docs, Prisma docs, Agile/Scrum methodology.

rominur@gmail.com • t.me/Jekardah_AI — For collaboration & discussion