← Vibe coding với Next.js

Bài 2 · Cơ bản · 22 phút

Nghĩ như người làm sản phẩm

Biên soạn bởi Nguyễn Anh Tuấn

Kỹ năng cốt lõi không phải gõ code mà là MÔ TẢ chính xác: đi từ ý tưởng tới spec mà AI hiểu được - PRD gọn, user story, cắt phạm vi thành MVP, và tiêu chí "xong" (definition of done). Vì sao "mô tả mơ hồ thì kết quả mơ hồ" (garbage in, garbage out). Kèm một tài liệu BA (business analysis) mẫu cho dự án web bán hàng - tải về repo của bạn qua R2 rồi chỉnh theo nghiệp vụ riêng, để dự án bài bản như dân chuyên nghiệp.

Tưởng tượng mèo con thuê thợ xây nhà mà chỉ nói "xây cho tôi một căn nhà đẹp". Thợ giỏi tới đâu cũng chịu - vì "đẹp" với mèo con và "đẹp" với thợ là hai thứ khác nhau. Kết quả gần như chắc chắn không vừa ý. Lỗi không ở tay nghề người thợ, mà ở bản mô tả.

Với Claude Code y hệt. Nó gõ code rất nhanh, nhưng nó dựng đúng thứ bạn NÓI, không phải thứ bạn NGHĨ trong đầu. Vì thế kỹ năng quyết định của người vibe coding không phải là gõ code - mà là mô tả chính xác thứ mình muốn. Dân trong nghề gọi vui quy luật này là "rác vào, rác ra" (garbage in, garbage out).

🌫️Mô tả mơ hồ"làm web bán hàng đẹp"🤖 AISản phẩm lệch ý📋Spec rõ rànguser story + MVP + DoD🤖 AISản phẩm đúng ý
Cùng một AI: mô tả mơ hồ cho ra sản phẩm lệch ý, spec rõ ràng cho ra sản phẩm đúng ý.
  • AI dựng đúng thứ bạn MÔ TẢ, không phải thứ bạn nghĩ trong đầu.
  • Mô tả mơ hồ thì kết quả mơ hồ - "rác vào, rác ra".
  • Kỹ năng cốt lõi của khoá này là viết mô tả rõ, không phải gõ code.

Trước khi mô tả cho AI, hãy tự trả lời bốn câu hỏi nền. Đây chính là bộ khung mà người làm sản phẩm (product owner) dùng, gói gọn lại cho mình:

  • Cho AI? - người dùng là ai (khách mua hàng, hay admin quản lý)?
  • Họ làm được GÌ? - những việc chính họ cần làm trên sản phẩm.
  • MVP là gì? - bản nhỏ nhất vừa chạy được vừa có ích, ship trước.
  • "Xong" là gì? - tiêu chí kiểm được để biết một việc đã hoàn thành.

Lấy ví dụ xuyên suốt khoá - một web bán hàng có ví: người dùng gồm khách (tạo tài khoản, nạp tiền, mua hàng) và admin (quản lý hàng, kho, giao dịch). Trả lời xong bốn câu này là mèo con đã có bộ xương của một bản spec.

Cách gọn nhất để ghi "họ làm được gì" là user story - một câu kể nhu cầu theo đúng mẫu, nêu cả việc lẫn lý do:

user-story.md · mẫu user story (đây là tài liệu, không phải code chạy)

Mẫu: Là <vai>, tôi muốn <việc>, để <lợi ích>.

- Là khách, tôi muốn nạp tiền bằng quét QR, để mua hàng nhanh mà không cần thẻ.
- Là khách, tôi muốn xem số dư và lịch sử giao dịch, để biết mình còn bao nhiêu.
- Là admin, tôi muốn xem các giao dịch nạp tiền, để đối soát cuối ngày.

Vì mỗi story nêu rõ lợi ích ("để…"), nó giúp mèo con kiểm lại xem tính năng có đáng làm không - và giúp Claude hiểu ý ĐỒ đằng sau, chứ không chỉ thao tác bề mặt.

Trung thực

User story không phải bùa phép. Nó chỉ là cách ghi nhu cầu cho gọn và rõ. Một sản phẩm hoàn chỉnh còn cần nghĩ tới luồng dữ liệu, lỗi, bảo mật - những thứ khoá sẽ chạm tới ở các bài sau. Ở bước này, cứ tập diễn đạt nhu cầu cho sạch đã.

Ai cũng có một đống mơ ước: web bán hàng thì muốn có nạp tiền, khuyến mãi, đánh giá sao, chat với shop, gợi ý sản phẩm, app điện thoại… Ôm hết một lúc là công thức để không bao giờ ship. Người làm sản phẩm giỏi cắt xuống còn MVP (Minimum Viable Product) - bản nhỏ nhất vừa chạy vừa có ích:

mvp.md · cắt đống mơ ước xuống bản đầu tiên ship được

Mơ ước (để sau):  khuyến mãi, đánh giá sao, chat, gợi ý, app mobile…

MVP (làm trước):
  1. Đăng ký / đăng nhập
  2. Xem danh sách hàng
  3. Nạp tiền vào ví (quét QR)
  4. Mua hàng -> trừ số dư

Ship được bốn việc này là đã có một sản phẩm chạy được để đưa cho người dùng đầu tiên. Phản hồi của họ đáng giá hơn mọi tính năng mèo con đoán mò trong phòng kín.

Cách nghĩ này có tên: vòng dựng → đo → học (build-measure-learn). Mỗi MVP là một giả thuyết ("mình đoán khách cần X") đem ra cho người dùng để kiểm: đo xem họ có dùng không, rồi học và sửa ở vòng sau. Ship không phải đích đến, mà là cách học nhanh nhất xem mình đoán đúng hay sai.

Cảm hứng từ Lean Startup

Vòng dựng → đo → học là ý cốt lõi của The Lean Startup (Eric Ries, 2011). Với người vibe coding, AI làm khúc "dựng" nhanh tới mức gần như miễn phí - nên lợi thế dồn vào chỗ mèo con đo và học nhanh: cắt nhỏ, ship, nghe người dùng, sửa, lặp lại.

Gộp bốn câu hỏi + user story + phạm vi MVP lại, mèo con có một tài liệu BA (Business Analysis) - bản thiết kế bằng lời cho cả người và AI. Đây là thứ dân làm sản phẩm chuyên nghiệp luôn có trước khi code. Khung một tài liệu BA gọn:

BA-web-ban-hang.md · khung tài liệu BA (rút gọn)

# Web bán hàng có ví - Tài liệu BA

## 1. Bối cảnh & mục tiêu
## 2. Người dùng & vai trò (khách, admin)
## 3. User stories
## 4. Phạm vi MVP (làm trước)
## 5. Definition of done (tiêu chí "xong")
## 6. Ngoài phạm vi (để sau)

Tải tài liệu BA mẫu

Mèo Ham Học soạn sẵn một tài liệu BA đầy đủ cho web bán hàng có ví (đủ sáu mục trên, kèm user story và definition of done cụ thể). Tải về, đổi lại theo dự án của mèo con, rồi dùng làm điểm tựa cho cả khoá: 📄 Tải tài liệu BA mẫu (.zip)

Có tài liệu BA rồi, cách dùng rất đơn giản: đưa nó cho Claude Code ngay đầu phiên, bảo nó đọc và hỏi lại những chỗ chưa rõ trước khi dựng. Rồi bắt đầu từ một user story nhỏ thay vì đòi cả sản phẩm trong một câu. Ở bài sau, ta sẽ gắn tài liệu này vào bộ nhớ dự án (CLAUDE.md) để mọi phiên đều bám theo. Và với việc lớn, đừng để Claude lao vào sửa ngay - bảo nó lập kế hoạch trước từ BA (plan mode) để bạn duyệt hướng đi rồi mới cho dựng; cách dùng có ở bài Dựng app Next.js đầu tiên.

Bước tiếp theo

Để mô tả tốt, cũng nên hiểu sơ một sản phẩm số chạy ra sao - frontend, backend, database nằm ở đâu. Đó là bài kế: Sản phẩm số chạy thế nào.

Câu hỏi thường gặp

BA là viết tắt của Business Analysis (phân tích nghiệp vụ). Tài liệu BA mô tả sản phẩm cần làm GÌ, cho AI, giải quyết việc gì - chứ không phải code. Nó là bản thiết kế bằng lời để cả người và AI cùng hiểu đúng một thứ trước khi bắt tay làm.

Không. Bạn chỉ cần trả lời bốn câu hỏi nền (cho ai, làm được gì, MVP, "xong" là gì) và viết vài user story theo mẫu có sẵn. Thậm chí có thể nhờ chính Claude phỏng vấn ngược bạn để mài cho rõ. Cái khó duy nhất là chịu khó NGHĨ trước khi gõ.

MVP (Minimum Viable Product) là bản NHỎ NHẤT vừa chạy được vừa có ích cho người dùng. Cắt bớt để ship sớm và học từ người dùng, thay vì ôm một danh sách mơ ước khổng lồ rồi không bao giờ xong. Tính năng hay luôn có thể thêm sau.

Đủ để một người lạ (hoặc AI) làm theo mà không phải đoán những chỗ quan trọng. Nhưng đừng cố vẽ hết mọi ngóc ngách - chừa chỗ để điều chỉnh khi gặp thực tế. Quy tắc kinh nghiệm: rõ ở phần "làm được gì" và "xong là gì", linh hoạt ở phần "làm thế nào".

Mô tả tính năng nói bạn MUỐN gì; definition of done (DoD) là tiêu chí KIỂM ĐƯỢC để biết việc đã xong hay chưa. Ví dụ tính năng "nạp tiền"; còn DoD là "khách nạp 50.000đ thì số dư tăng đúng 50.000đ và nhận một email biến động". DoD đo được nên không cãi nhau "xong hay chưa".

Tick những điều em tự tin làm được. Càng lên cao, em càng hiểu sâu.

Tick những điều em tự tin làm được sau khi học bài này. 0/6

Trả lời vài câu để chắc rằng em đã nắm bài.

Câu 1/3 Điểm: 0

Khi vibe coding, kỹ năng quyết định chất lượng sản phẩm là gì?

Bài tập về nhà

  1. 1

    Một dòng sản phẩm

    Viết MỘT câu theo mẫu: "Sản phẩm <tên> giúp <ai> làm được <việc gì>".

    ✅ Hoàn thành khi: Có một câu nêu rõ đối tượng người dùng và việc chính họ làm được - đọc lên người khác hiểu ngay sản phẩm để làm gì.

  2. 2

    Vai & 3 user story

    Xác định các vai người dùng của sản phẩm bạn, rồi viết 3 user story theo mẫu "Là <vai>, tôi muốn <việc>, để <lợi ích>".

    ✅ Hoàn thành khi: Có danh sách vai + đúng 3 user story đúng mẫu, mỗi câu nêu được cả việc lẫn lợi ích.

  3. 3

    Đống mơ ước → khoanh MVP

    Liệt kê ít nhất 8 tính năng mèo con MUỐN có, rồi khoanh tròn 3-4 tính năng cho bản MVP.

    ✅ Hoàn thành khi: Có danh sách >= 8 tính năng và 3-4 cái được khoanh; giải thích một câu vì sao phần còn lại để sau.

  4. 4

    Viết definition of done

    Chọn một user story và viết tiêu chí "xong" (DoD) đo được cho nó.

    ✅ Hoàn thành khi: DoD nêu được điều kiện KIỂM ĐƯỢC (con số/hành vi cụ thể), vd "nạp 50k → số dư +50k + có email", không phải mô tả chung chung.

  5. 5

    Tải & điền tài liệu BA

    Tải tài liệu BA mẫu trong bài, rồi điền lại theo dự án của mèo con (đổi người dùng, user story, MVP, DoD cho đúng ý tưởng của bạn).

    ✅ Hoàn thành khi: Có một file BA của RIÊNG bạn: đủ các mục bối cảnh, vai, user story, phạm vi MVP, definition of done, ngoài phạm vi.

  6. 6

    Đưa BA cho Claude đọc

    Mở Claude Code, đưa file BA vừa điền và bảo nó đọc rồi nêu 3 điểm còn chưa rõ; mèo con trả lời từng điểm.

    ✅ Hoàn thành khi: Claude nêu được vài điểm mơ hồ; bạn bổ sung vào BA - tài liệu sau buổi này rõ hơn lúc đầu.