Vibe Coding — Nâng Cao

Mục tiêu

Biết viết PRD (Product Requirements Document) — tài liệu mô tả chi tiết sản phẩm trước khi code. Đây là kỹ năng quan trọng nhất để AI tạo ra đúng thứ bạn muốn.

Sau bài này, bạn sẽ:

• ✅ Hiểu tại sao PRD là bước quan trọng nhất khi xây sản phẩm với AI
• ✅ Viết được PRD hoàn chỉnh từ template có sẵn
• ✅ Biết cách dùng AI để tạo và cải thiện PRD nhanh hơn
• ✅ Nắm được kỹ thuật lặp lại (iterate) PRD cho đến khi đủ chi tiết

Nội dung chính

1.1 — Tại sao cần PRD?

Ở Course 1-2, bạn prompt từng phần nhỏ. Nhưng khi xây sản phẩm thật với 10-20 trang, hàng chục tính năng, prompt kiểu cũ sẽ hỗn loạn. PRD giúp:

KHÔNG CÓ PRD:                         CÓ PRD:
─────────────                          ────────
"Thêm cái này"                        AI đọc PRD → hiểu toàn bộ
"À thêm cái kia nữa"                  → code đúng kiến trúc từ đầu
"Quên mất, sửa cái này"               → ít phải sửa lại
"Tính năng A mâu thuẫn B"             → không mâu thuẫn vì đã plan sẵn
→ Sản phẩm chắp vá, lỗi nhiều        → Sản phẩm nhất quán, chuyên nghiệp

Mẹo: Hãy nghĩ PRD như bản vẽ nhà trước khi xây. Không ai xây nhà mà không có bản vẽ — và không ai nên xây app mà không có PRD. Dù chỉ là app nhỏ, 30 phút viết PRD sẽ tiết kiệm hàng giờ debug sau này.

1.2 — Template PRD cho Vibe Coding

# PRD: [Tên sản phẩm]

## 1. Tổng quan
- **Mô tả ngắn:** [1-2 câu sản phẩm này làm gì]
- **Đối tượng sử dụng:** [Ai dùng? Vấn đề gì họ đang gặp?]
- **Mục tiêu:** [Giải quyết vấn đề gì cho người dùng?]

## 2. Danh sách tính năng (Features)

### Tính năng ưu tiên cao (Must-have)
- [ ] Tính năng 1: [Mô tả chi tiết]
- [ ] Tính năng 2: [Mô tả chi tiết]

### Tính năng ưu tiên trung bình (Nice-to-have)
- [ ] Tính năng 3: [Mô tả]

### Tính năng tương lai (V2)
- [ ] Tính năng 4: [Mô tả]

## 3. Danh sách các trang (Pages)
- Trang 1: [Tên] — [Mô tả nội dung chính]
- Trang 2: [Tên] — [Mô tả]

## 4. Cấu trúc dữ liệu (Database Schema)
- Bảng [tên]: [danh sách cột và kiểu dữ liệu]

## 5. Công nghệ sử dụng (Tech Stack)
- Frontend: [React / Next.js / ...]
- Backend: [Supabase / ...]
- Deploy: [Vercel / ...]
- API bên ngoài: [Nếu có]

## 6. Phong cách thiết kế
- Bảng màu: [Liệt kê mã màu]
- Font: [Tên font]
- Phong cách chung: [Tối giản / vui nhộn / chuyên nghiệp...]

1.3 — Ví dụ PRD thật: App Ambient Sound + Pomodoro

# PRD: FocusFlow — Ứng dụng tập trung làm việc

## 1. Tổng quan
- **Mô tả:** App phát âm thanh nền (mưa, quán cà phê, sóng biển)
  kèm đồng hồ Pomodoro giúp tập trung làm việc.
- **Đối tượng:** Dân văn phòng, freelancer, sinh viên 20-35 tuổi.
- **Mục tiêu:** Giúp người dùng tập trung hơn, giảm phân tâm.

## 2. Tính năng

### Must-have
- [ ] Bộ phát 6 loại âm thanh nền (mưa, cà phê, sóng biển,
      lửa trại, rừng, đêm thành phố)
- [ ] Trộn (mix) nhiều âm thanh, chỉnh âm lượng riêng từng loại
- [ ] Đồng hồ Pomodoro: 25 phút làm / 5 phút nghỉ
- [ ] Thông báo khi hết session
- [ ] Đếm số Pomodoro trong ngày

### Nice-to-have
- [ ] Dark mode / Light mode
- [ ] Lưu preset (ví dụ: "Quán cà phê lúc mưa" = cà phê 70% + mưa 50%)
- [ ] Thống kê tuần: bao nhiêu phút tập trung

## 3. Trang
- Trang chính: Bảng điều khiển âm thanh + Pomodoro timer
- Trang thống kê: Biểu đồ số giờ tập trung theo tuần
- Trang cài đặt: Tuỳ chỉnh thời gian Pomodoro, chọn âm thanh thông báo

## 4. Database (Supabase)
- users: id, email, created_at
- sessions: id, user_id, duration_minutes, date, pomodoro_count
- presets: id, user_id, name, sound_config (JSON)

## 5. Tech Stack
- Frontend: React + Vite
- Styling: Tailwind CSS
- Backend/Auth: Supabase
- Audio: Howler.js
- Deploy: Vercel

## 6. Thiết kế
- Bảng màu: Tối (#0F172A nền, #6366F1 accent tím, #22D3EE accent xanh)
- Font: Inter
- Phong cách: Tối giản, dark mode mặc định, gradient mềm,
  animation nhẹ nhàng

1.4 — Mẹo: Dùng AI viết PRD

Bạn không cần viết PRD từ đầu. Dùng AI:

Tôi muốn xây một ứng dụng giúp người dùng [mô tả vấn đề cần giải quyết].

Hãy viết cho tôi PRD hoàn chỉnh theo cấu trúc sau:
1. Tổng quan (mô tả ngắn, đối tượng sử dụng, mục tiêu)
2. Danh sách tính năng chia theo ưu tiên:
   - Must-have: tính năng bắt buộc phải có ở V1
   - Nice-to-have: tính năng nên có nhưng có thể thêm sau
   - V2: tính năng cho phiên bản tiếp theo
3. Danh sách tất cả các trang, mỗi trang mô tả nội dung chính
4. Database schema chi tiết: tên bảng, tên cột, kiểu dữ liệu
5. Tech stack gợi ý
6. Phong cách thiết kế: bảng màu cụ thể (mã hex), font, tone

Lưu ý:
- Tech stack: React + Vite + Tailwind CSS + Supabase + Vercel
- Đối tượng: [mô tả cụ thể — tuổi, nghề nghiệp, thói quen]
- Phong cách thiết kế: [mô tả — tối giản, vui nhộn, chuyên nghiệp...]
- Tập trung vào V1 trước, đừng quá tham vọng
- Viết bằng tiếng Việt

Sau khi AI viết xong, bạn review và chỉnh sửa — vì bạn mới là người hiểu sản phẩm nhất.

Mẹo: Đừng chấp nhận PRD ngay lần đầu. Hãy iterate (lặp lại) 2-3 lần. Sau khi AI viết PRD, hỏi tiếp: “PRD này còn thiếu gì? Có tính năng nào mâu thuẫn không? User flow có logic không?” — AI sẽ tự tìm ra lỗ hổng.

1.5 — Kỹ thuật iterate PRD với AI

PRD lần đầu thường chưa hoàn hảo. Đây là quy trình iterate:

VÒNG 1: AI viết PRD từ mô tả của bạn
         ↓
VÒNG 2: Bạn hỏi "PRD này còn thiếu gì?"
         → AI bổ sung edge cases, error handling
         ↓
VÒNG 3: Bạn hỏi "User flow có logic không? User mới vào app sẽ làm gì?"
         → AI bổ sung onboarding, empty states
         ↓
VÒNG 4: Bạn hỏi "Database schema đủ chưa? Có cần bảng nào thêm không?"
         → AI chuẩn hoá schema, thêm quan hệ giữa bảng

Prompt nâng cao — để AI tự review PRD:

Đây là PRD tôi vừa viết cho app [tên app]:

[Paste toàn bộ PRD vào đây]

Hãy review PRD này với vai trò Product Manager có 10 năm kinh nghiệm.
Kiểm tra:
1. Có tính năng nào mâu thuẫn nhau không?
2. Database schema có thiếu bảng hoặc cột quan trọng nào không?
3. User flow từ đăng ký → sử dụng → quay lại có mượt không?
4. Có tính năng nào quá phức tạp cho V1 nên chuyển sang V2?
5. Tính năng must-have đã đủ để giải quyết vấn đề chính chưa?
6. Có edge case nào chưa được xử lý? (ví dụ: user mất mạng,
   user nhập sai, user dùng lần đầu chưa có dữ liệu)

Trả lời từng điểm và đề xuất sửa đổi cụ thể.

Mẹo: Lưu PRD thành file PRD.md ở thư mục gốc của project. Khi dùng Agent mode (Bài 2), AI sẽ đọc file này để hiểu toàn bộ sản phẩm. Đặt tên rõ ràng, dễ tìm — đừng đặt trong thư mục con.

Lỗi thường gặp

Vấn đề: PRD quá chung chung — “App quản lý công việc” mà không mô tả cụ thể tính năng nào. → Giải pháp: Mỗi tính năng phải trả lời được: “User bấm gì → thấy gì → kết quả gì?” Ví dụ: “User bấm nút + → hiện form nhập task → bấm Save → task xuất hiện trong danh sách.”

Vấn đề: Quá tham vọng — V1 có 20 tính năng, code mãi không xong. → Giải pháp: V1 chỉ cần 3-5 tính năng must-have. Nếu bạn giải thích app cho bạn bè trong 1 câu, tính năng nào nằm trong câu đó? Đó là must-have. Còn lại chuyển hết sang V2.

Vấn đề: Database schema thiếu hoặc sai kiểu dữ liệu. → Giải pháp: Với mỗi tính năng, hỏi: “Data nào cần lưu? Ai sở hữu data đó? Data đó liên kết với bảng nào?” Ví dụ: tính năng “lưu preset” → cần bảng presets → liên kết với users qua user_id.

Vấn đề: Không biết chọn tech stack nào. → Giải pháp: Nếu mới bắt đầu, cứ dùng: React + Vite + Tailwind CSS + Supabase + Vercel. Đây là combo được cộng đồng vibe coding dùng nhiều nhất, AI hỗ trợ tốt nhất.

Vấn đề: PRD viết xong rồi nhưng không biết đã đủ chi tiết chưa. → Giải pháp: Test bằng cách paste PRD cho AI và nói: “Đọc PRD này và liệt kê các câu hỏi bạn cần hỏi trước khi bắt đầu code.” Nếu AI hỏi nhiều câu → PRD chưa đủ chi tiết, cần bổ sung.

Bài tập thực hành

Nhiệm vụ: Viết PRD cho đồ án cuối khoá của bạn. Chọn 1 trong 3 gợi ý hoặc tự chọn:

Gợi ý	Mô tả
FocusFlow	App ambient sound + Pomodoro (ví dụ trên)
HabitStack	App theo dõi thói quen, biểu đồ tiến bộ hàng ngày
FanZone	App tra cứu thông tin, thống kê vui vẻ cho fan bóng đá
Tự chọn	Bất kỳ ý tưởng nào bạn muốn biến thành sản phẩm

Các bước thực hiện:

1. Dùng AI viết PRD draft đầu tiên (~10 phút)
2. Review và hỏi AI “PRD này còn thiếu gì?” (~5 phút)
3. Iterate thêm 1-2 vòng cho đến khi hài lòng (~10 phút)
4. Lưu thành file PRD.md ở thư mục gốc project (~2 phút)
5. Commit lên GitHub (~3 phút)

Tiêu chí hoàn thành:

• PRD có đủ 6 phần theo template
• Mỗi tính năng must-have mô tả rõ user làm gì → thấy gì
• Database schema có ít nhất 3 bảng với kiểu dữ liệu rõ ràng
• File PRD.md đã commit lên GitHub

Gợi ý nếu bị stuck: Bắt đầu bằng cách trả lời 3 câu: “App này giải quyết vấn đề gì? Cho ai? Khác gì với cái đã có?” Paste 3 câu trả lời cho AI, AI sẽ viết PRD cho bạn.

Thời gian: 30 phút Deliverable: File PRD hoàn chỉnh (Markdown), commit lên GitHub