Xây dựng sản phẩm

Vibe coding cùng Claude Code

Tóm tắt các bước để xây dựng ứng dụng bằng Claude Code.

12 phút đọc

Quy trình xây dựng ứng dụng bằng AI (mang tính tham khảo, không cần theo quá chính xác)

Để xây dựng sản phẩm, mình hay dùng Claude Code chạy trong Visual Studio Code (VS Code). Nhưng các bước trong bài viết này vẫn áp dụng được nếu bạn dùng công cụ khác — từ các trình soạn code khác như Cursor, đến các công cụ làm sản phẩm bằng AI cho người mới hoàn toàn không cần biết code như Base44, Bolt.new (chỉ cần lược bớt những phần kỹ thuật như Git/GitHub nếu công cụ bạn dùng không có). Nếu bạn muốn dùng Claude Code trong VS Code, xem hướng dẫn cài đặt tại đây: https://code.claude.com/docs/en/vs-code.

Danh sách các bước bên dưới là tóm gọn những bước chính để xây dựng ứng dụng cơ bản. Tuy nhiên, nó chưa bao gồm các bước cần thiết để chính thức ra mắt sản phẩm trên thị trường (giai đoạn này cần có các bước quan trọng khác như kiểm tra bảo mật / an ninh, v.v. — chúng mình sẽ quay lại phần này sau nhé).

Bước 1, 2, và 3 chỉ làm một lần khi bắt đầu quá trình xây dựng sản phẩm. Từ bước 4 trở đi là một vòng lặp — làm xong một tính năng, quay lại bước 4 để chọn tính năng tiếp theo, cứ thế cho đến khi xong app. Mình sẽ dùng quá trình xây dựng Xào Lab để làm ví dụ cho mỗi bước bên dưới nhé.

1
Trước khi bắt đầu xây dựng sản phẩm, bạn cần thiết lập Git và GitHub cho dự án. Git là công cụ theo dõi lịch sử các thay đổi trong code; GitHub là nơi lưu trữ dự án đó trên mạng. Nhờ đó, bạn có thể:
Lưu lại từng điểm dừng (commit) trong quá trình xây dựng, để quản lý tiến độ dự án tốt hơn.
Quay lại phiên bản code đang chạy tốt trước đó, nếu một thay đổi mới làm hỏng thứ gì đó.
Giữ một bản sao lưu đầy đủ lịch sử của những gì bạn đã xây.
Nếu chưa có tài khoản, tạo một tài khoản miễn phí tại github.com, rồi nhờ Claude Code giúp bạn khởi tạo Git cho dự án và kết nối với một repository trên GitHub — Claude có thể chạy các câu lệnh để quản lý dự án trên Github giúp bạn, bạn không cần tự nhớ cú pháp. Dưới đây là câu lệnh mình dùng để bắt đầu.
Hãy giúp tôi khởi tạo Git cho dự án này (nếu chưa có), rồi hướng dẫn tôi từng bước để tạo một repository mới trên GitHub và kết nối dự án với nó. Sau đó, giúp tôi tạo lần lưu (commit) đầu tiên. Tôi chưa quen với Git — giải thích ngắn gọn mỗi lệnh đang làm gì trước khi chạy.
Muốn hiểu thêm về Git và GitHub? Đọc thêm tại đây: https://docs.github.com/en/get-started/quickstart/hello-world
2
Mình làm trong ngành quản lý phát triển sản phẩm (Product Management) đã lâu. Và là một product manager thì một trong những công việc quan trọng nhất là viết Product Requirement Doc (viết tắt là PRD, tạm dịch: văn bản với các yêu cầu chi tiết cho tính năng cần xây dựng). Văn bản này sẽ có thông tin như 1) ứng dụng này để làm gì, dùng cho ai, và 2) danh sách các tính năng cùng chi tiết trải nghiệm người dùng cho tính năng đó.
Khi xây dựng ứng dụng bằng AI, việc viết PRD vẫn cần thiết, nhưng cái hay là bạn không cần phải tự viết mà có thể nhờ Claude viết rồi chỉnh sửa nếu cần. Và để Claude viết với đầy đủ chi tiết, cách hay nhất là ra lệnh cho Claude "hỏi bạn các câu hỏi cần thiết để ghi lại thông tin quan trọng và đủ chi tiết về sản phẩm / tính năng". Nó giống như khi một thành viên mới vào dự án thì họ phải cần hỏi rõ chi tiết, ghi lại những yêu cầu đã thống nhất trong nhóm, thì họ mới có thể bắt đầu làm việc được.
Đây là câu lệnh (prompt) mình hỏi Claude Code cho bước này.
Tôi muốn xây dựng [một mạng xã hội để mọi người chia sẻ tiến độ xây dựng ứng dụng của họ (build-in-public), gọi là xào.lab. Nó sẽ có tính năng cơ bản ...]. Đừng viết code vội, thay vào đó, làm theo các bước sau. Trước hết, phỏng vấn tôi từng câu một để ghi lại thông tin quan trọng và chi tiết về sản phẩm — ứng dụng cần làm gì, dành cho ai, và phiên bản đầu tiên "hoàn thành" trông như thế nào, v.v. Có những khái niệm tưởng đơn giản nhưng cần hỏi kỹ để tránh xây nhầm — ví dụ: ["theo dõi" (follow) là theo dõi một người dùng, hay theo dõi một dự án của họ?]. Đồng thời, giúp tôi xếp hạng các tính năng theo độ quan trọng — tính năng nào quan trọng nhất với người dùng lần đầu, người dùng mới quay lại, v.v. Cho mỗi câu hỏi, gợi ý một số phương án câu trả lời để tôi chỉ cần xác nhận hoặc sửa lại. Khi không còn câu hỏi nào nữa, hãy lưu tất cả những gì chúng ta đã thống nhất vào file requirements.md, với các tính năng được sắp xếp theo độ quan trọng.
3
Trước khi đi sâu thiết kế từng tính năng chi tiết, mình thường hay tạo "khung sườn" của ứng dụng trước. Có nghĩa là tạo một web chạy được, có đủ các trang chính, menu để đi từ trang này sang trang khác, nhưng mỗi trang vẫn còn trống. Nó giống như khi xây nhà bạn cần cột kèo và chia phòng trước, rồi mới trang trí từng phòng sau.
Nếu bạn bỏ qua bước này và đi thẳng vào thiết kế chi tiết một tính năng nào đó, ứng dụng có thể dễ thành một mớ các màn hình rời rạc, không ăn khớp với nhau.
Ví dụ câu lệnh (prompt) mình hỏi Claude Code cho bước này.
Dựa trên requirements.md, hãy dựng một ứng dụng chạy được cơ bản bao gồm trang chính (home) với menu rõ ràng ở [bên trái] với danh mục các trang khác cho mỗi tính năng chính. Khi ấn vào các danh mục này, dẫn người dùng tới trang đó với thiết kế cơ bản (ta sẽ đi vào thiết kế chi tiết sau). Không cần kết nối dữ liệu hay có logic, backend gì ở các trang. Mục tiêu là tạo ra ứng dụng với cảm giác là một thể thống nhất trước khi chúng ta đi sâu vào từng tính năng.
Sau khi có khung sườn hoạt động tốt, bạn có thể tiếp tục làm cho ứng dụng có phong cách và thiết kế đẹp hơn. Nếu bạn không phải là dân thiết kế tốt và không có nhiều ý tưởng thiết kế, một cách phổ biến các builder thường dùng là lấy cảm hứng từ các thiết kế khác trên mạng. Đây không phải là copy hoàn toàn, mà là lấy những thành phần, yếu tố bạn yêu thích từ một số nơi khác nhau để tạo thành phong cách trang riêng. Bên dưới là ví dụ prompt mình dùng.
Dựa trên những ảnh chụp và phong cách đính kèm, hãy tạo một trang "cẩm nang phong cách" lấy cảm hứng từ chúng. Tập trung vào bảng màu họ dùng, font chữ, và phong cách thiết kế nút bấm, thẻ card. Lưu ý: Không cần theo đúng cấu trúc trang của các thiết kế này vì ta sẽ có cấu trúc riêng hợp hơn với ứng dụng. Sau khi tạo cẩm nang xong, thay đổi thiết kế của ứng dụng để làm theo nó. Và từ giờ, mọi trang tôi nhờ bạn thiết kế sẽ dùng cẩm nang để cả ứng dụng nhất quán với nhau.
Cẩm nang phong cách sẽ có ích cho các bước tiếp theo khi bạn thiết kế giao diện cho từng tính năng. Vì khi đi theo một cẩm nang chung, tất cả các trang của ứng dụng sẽ đồng nhất, dễ nhìn hơn. Một số trang hay bạn có thể tham khảo các thiết kế tốt trên thị trường:
Mobbin.com
màn hình và luồng thao tác thật của các ứng dụng di động, web
Dribbble.com
ý tưởng từng màn hình riêng lẻ, khám phá màu sắc/font chữ
Awwwards.com
các trang landing page và website cao cấp, từng đoạt giải
Land-book.com
bố cục landing page, được tuyển chọn theo ngành
Onepagelove.com
thiết kế site một trang, hợp cho sản phẩm/portfolio đơn giản
Godly.design/sites
thiết kế web hiện đại, theo xu hướng mới nhất
Minimal.gallery/websites
thiết kế tối giản, nhiều khoảng trắng
Pageflows.com
luồng tương tác và animation của các website/app khác

Trước hết, bạn có thể lựa chọn tính năng bạn muốn tập trung làm. Tuy nhiết nếu bạn muốn Claude đề nghị tính năng nào nên làm trước thì có thể theo câu lệnh bên dưới.

Nhìn vào requirements.md, tính năng nào chúng ta nên xây tiếp theo? Hãy đi theo thứ tự quan trọng đối với người dùng — quan trọng nhất trước, không phải cái nào dễ nhất. Xác nhận lại với tôi tính năng tiếp theo trước khi chúng ta bắt đầu lên kế hoạch cho nó.

Sau khi lựa chọn xong, ta sẽ bắt đầu hỏi Claude lên kế hoạch chi tiết nếu là tính năng có độ phức tạp trung bình - cao. Nếu tính năng nhỏ, đơn giản thì bạn có thể vào bước 5 ngay. Lưu ý nên đọc để duyệt kế hoạch Claude viết ra và sửa đổi nếu cần. Bước lên kế hoạch này trong Claude gọi là plan mode.

Trước khi viết bất kỳ dòng code nào, hãy chuyển sang plan mode.

Tôi muốn xây dựng [tính năng theo dõi (follow) người dùng khác. Trang chủ cũng sẽ cần chia thành hai tab: Post từ những người tôi đang theo dõi, và post từ những người tôi chưa theo dõi (discover)].

Hỏi tôi bất cứ điều gì bạn cần rồi viết một bản kế hoạch ngắn gọn và dừng lại để tôi xem qua trước khi bạn bắt đầu code.

5
Ở bước này, ta sẽ thiết kế chi tiết giao diện của tính năng nhưng không kết nối với bất kỳ logic hay dữ liệu nào đằng sau giao diện. Ví dụ khi thiết kế tính năng "theo dõi / follow" người dùng của xào.lab, ở bước này mình chỉ cần nút bấm "Follow / unfolow" nhưng không cần phải có dữ liệu lưu lại những người mình follow sau khi bấm nút. Các dữ liệu trên trang chỉ cần là dữ liệu tạm Claude tự tạo ra.
Lý do ta thường nên làm giao diện trước, sau đó mới làm logic backend và kết nối dữ liệu là vì nếu làm tất cả cùng một lúc thì khả năng có lỗi sẽ cao hơn nhiều, và việc tìm và sửa lỗi sẽ tốn thời gian hơn vì có quá nhiều thay đổi cùng một lúc.
Mẹo — Tương tự nhứ bước 3, bạn có thể chụp màn hình một trang web có tính năng hay giao diện bạn thích, rồi nhờ Claude làm theo bố cục hoặc phong cách đó, kèm theo những thay đổi bạn muốn. Hoặc phác thảo bố cục của bạn trên giấy, chụp lại, rồi đưa cho Claude.
Theo kế hoạch bên trên, hãy xây giao diện màn hình chi tiết cho [tính năng "trang chủ của một dự án"]. Đừng code phần backend hay kết nối database. Cái đó ta sẽ làm sau khi xây dựng xong UI / giao diện. Cứ dùng dummy data (dữ liệu tự bịa ra) nếu cần. Đính kèm là ảnh chụp một số thiết kế tôi thích từ [ứng dụng X]. Hãy dùng nó làm cảm hứng cho [trang chủ dự án]. Vẫn theo phong cách chung trong cẩm nang phong cách đã tạo ra cho toàn bộ trang, tuy nhiên cho tính năng này, ta có thể học hỏi thêm từ thiết kế đính kèm: - Bố cục của trang (chia làm hai phần - timeline và phần danh sách bài viết) - Phong cách hình ảnh banner và profile Giữ nguyên nội dung và chức năng của trang.
Mẹo — khi có gì đó trông chưa ổn, chụp lại chính trang bạn vừa thiết kế và mô tả cụ thể điều chưa ổn ("bóng đổ ở card quá đậm", "tiêu đề gần icon quá") — thay vì mô tả lại toàn bộ trang từ đầu.
Mẹo: Nhờ Claude tự phê bình thiết kế giao diện trước. Ví dụ câu lệnh: "Hãy nhìn trang này và tự phê bình thiết kế của chính mình — một nhà thiết kế sản phẩm tốt sẽ muốn thay đổi những gì?"
Mẹo: Tái sử dụng thiết kế của các component một cách có chủ đích. Khi một kiểu nút, thẻ, hay modal đã được duyệt, nói rõ với Claude là lưu lại thiết kế đó trong cẩm nang ở bước 3, để ta có thể dùng lại ở các nơi khác trong ứng dụng.
6
Trước khi kết nối backend và dữ liệu vào giao diện, bạn cần tự đi qua thử nghiệm kỹ càng xem các tương tác và thiết kế đã hoạt động tốt chưa — bấm thử tất cả các nút trên màn hình, xem nó có dẫn tới đúng trang tiếp theo hoặc popup không. Kiểm tra và điều chỉnh ngay từ lúc này, khi dữ liệu vẫn còn là giả, sẽ dễ hơn nhiều so với làm sau khi đã nối dữ liệu thật — lúc đó, sửa một chỗ nhỏ có thể ảnh hưởng tới dữ liệu đã lưu hoặc cấu trúc dữ liệu, nên sẽ khó hơn một chút.
Nếu bạn muốn Claude làm phần kiểm tra giao diện trước khi bạn tự tay kiểm tra, có thể dùng câu lệnh sau:
Chụp màn hình của tính năng ta vừa xây dựng, và giải thích cho tôi cách nó hoạt động với dữ liệu mẫu. Chỉ ra bất kỳ điều gì không khớp với kế hoạch, trước khi chúng ta chuyển sang nối dữ liệu thật. [Ví dụ: thử bấm vào tab Khám phá và tab Đang theo dõi — nếu người dùng chưa theo dõi ai cả thì tab "Đang theo dõi" phải trống trơn.]
Mẹo — cũng như khi thiết kế giao diện, khi kiểm tra giao diện mà bạn thấy có gì đó không ổn và không diễn tả rõ bằng lời được, hãy chụp màn hình lại rồi gửi cho Claude. Một tấm ảnh chỉ đúng chỗ bị lỗi sẽ giúp Claude sửa nhanh hơn nhiều so với việc giải thích dài dòng.

Khi giao diện đã ổn, bạn sẽ tiếp tục xây dựng logic đằng sau giao diện và kết nối với dữ liệu cho tính năng đó. Ví dụ: nếu tính năng đang làm là "lưu ghi chú", thì khi người dùng bấm nút "Lưu", ta phải lưu lại nội dung đó vào kho dữ liệu — để khi người dùng tắt rồi mở lại ứng dụng, nội dung đó vẫn còn đó, được lấy ra từ kho dữ liệu này mà không bị mất.

Tiếp theo, ta sẽ làm cho tính năng "follow" này hoạt động được, và có thể hoạt động với dữ liệu thật thay vì là dummy data.

1. Tạo một bảng dữ liệu để lưu trữ danh sách người follow người dùng và người mà người dùng chính follow.
2. Khi người dùng ấn nút follow, hoặc unfollow, dữ liệu này cần được cập nhật. Và con số lượng người theo dõi trên trang cũng cần cập nhật ngay lập tức.

Lưu ý 1: Đừng động đến dữ liệu giả ở các tính năng khác. Ta sẽ làm việc với các tính năng khác sau.

Lưu ý 2: nếu có con số nào trên giao diện là dữ liệu giả (dummy data) được mã hoá cứng (hardcode) mà không được lấy ra từ tính toán từ dữ liệu thật, hãy liệt kê cho tôi biết.

Trước khi coi tính năng này là xong, để Claude tự chạy các khâu kiểm tra tự động và chụp lại màn hình tính năng đang chạy với dữ liệu thật — việc này giúp bắt được một số lỗi cơ bản.

Trước khi hoàn thành tính năng, hãy chạy test, typecheck, và chụp màn hình xem nó hoạt động từ đầu đến cuối với dữ liệu thật có ổn không.

Sửa lỗi, hoặc những gì trông không tốt hiện ra trong ảnh chụp màn hình, trước khi báo lại cho tôi. Lưu ý: nếu tính năng này khi chạy trên môi trường thật (thay vì local host) có thể sẽ bị lỗi thì nhắc tôi kiểm tra lại trên môi trường chạy thật. Ví dụ: một số lỗi chỉ hiện ra khi chạy qua các dịch vụ trung gian như Railway, vì logic có thể gửi dữ liệu tới URL / địa chỉ nội bộ thay vì địa chỉ công khai thật.

Sau khi Claude kiểm tra xong, bạn sẽ cần tự kiểm tra lại từ đầu tới cuối bằng cách bấm và tương tác thử với tính năng để xem dữ liệu và logic có hoạt động đúng như dự tính không.

9
Sau khi một tính năng đã hoàn thành, bạn cần phải làm 3 bước sau:
1. Lưu lại (commit) nghĩa là ghi lại điểm mốc để bạn có thể quay lại phiên bản code này trong tương lai, nếu lỡ làm hỏng gì đó. Nó cũng giúp bạn theo dõi tiến trình tốt hơn khi bạn xem lại danh sách các bản lưu lại (commits).
git add . git commit -m "thêm tính năng Theo dõi và trang chủ hai tab" git push
2. Ghi chú những thay đổi quan trọng và lỗi mà bạn không muốn gặp lại trong tương lai. Claude có 2 văn bản CLAUDE.md và AGENTS.md để lưu lại những cấu trúc và thay đổi, quyết định quan trọng trong quá trình phát triển sản phẩm. Đây là file ghi chú mà Claude sẽ tự đọc lại trong mỗi lần làm việc ở các phòng chat tiếp theo. Và nhờ đó nó không giống như người bị mất trí nhớ :)
Lưu lại những gì cần nhớ (bao gồm cả các lỗi quan trọng đã sửa) và những quyết định quan trọng trong lần chat này vào CLAUDE.md và AGENTS.md.
Lưu ý 1: Một cuộc trò chuyện quá dài trong một thread / phòng chat với Claude sẽ khiến cho bạn tiêu tốn token khá nhiều vì Claude phải gửi nguyên cả lịch sử trong chat thread đó cho mỗi câu lệnh mới. Vì thế, nếu bạn xong một thay đổi nào đó và chuyển sang tính năng khác, bạn nên qua một cuộc trò chuyện mới, hoặc xoá đi lịch sử nói chuyện bằng câu lệnh /clear.
Lưu ý 2: Nếu như bạn vẫn đang làm việc cho tính năng đó, nhưng vì nó phức tạp nên phòng chat trở nên dài hơn, bạn có thể dùng câu lệnh /compact để Claude tóm tắt lại cuộc nói chuyện và thay vì đưa hết lịch sử nói chuyện vào các câu lệnh tiếp theo, Claude sẽ chỉ đưa tóm tắt của cuộc nói chuyện.
↻
Quay lại bước 4 — chọn tính năng quan trọng tiếp theo

Mẹo xây dựng sản phẩm bằng AI tốt hơn bạn có thể dùng sau khi đã quen dần với việc phát triển sản phẩm bằng AI

Những mẹo bên dưới sẽ giúp bạn làm nhanh hơn, nhưng không phải bắt buộc phải áp dụng ngay khi bắt đầu.

Sau khi lưu lại, bạn có thể gọi câu lệnh này bằng dấu "/". Để tạo command mới, tạo một file .md trong folder /claude/commands, rồi thêm nội dung câu lệnh sẵn vào file .md đó. Xem thêm chi tiết tại đây nha: https://code.claude.com/docs/en/agent-sdk/slash-commands#creating-custom-slash-commands
Bạn có thể nhờ Claude tạo một "nhánh" (branch), nó giống như là một bản sao riêng của dự án, để làm thử. Nếu đi sai hướng thì bản đang chạy tốt không bị ảnh hưởng. Và nếu tốt thì bạn có thể kết hợp (merge) nó vào lại nhánh chính.
Khi bạn làm xong sản phẩm cơ bản và muốn đưa lên thử nghiệm live, bạn sẽ cần phải nghiên cứu và lựa chọn nhiều dịch vụ như mua tên miền, chọn dịch vụ hosting, v.v. Bạn có thể nhờ Claude nghiên cứu và so sánh các lựa chọn tốt dựa trên những yêu cầu và đặc tính của ứng dụng bạn đang làm. Khi nghiên cứu và lựa chọn xong, nên nhớ lưu lại những lựa chọn này và lý do vào trong một file .md nào đó trong dự án để những lần sau Claude sẽ nhớ được các chi tiết này và không cần phải nghiên cứu lại. Hoặc khi có vấn đề khi ứng dụng chạy live, Claude sẽ biết được ngay là cần phải kiểm tra nền tảng / công cụ nào.
Khi quy trình đã quen tay, những tính năng không liên quan đến nhau có thể nhờ Claude làm song song trong nhiều cuộc trò chuyện khác nhau.
Khi bạn dán API key, mật khẩu database, hay bất kỳ thông tin nhạy cảm nào trực tiếp vào đoạn hội thoại, thông tin đó có thể bị lưu lại trong lịch sử chat hoặc vô tình lọt vào code mà Claude tạo ra. Thay vào đó, hãy lưu những thông tin này vào một file riêng, thường được đặt tên là .env, và luôn thêm file này vào .gitignore để nó không bao giờ bị đẩy lên GitHub hay bất kỳ kho lưu trữ công khai nào. Trong code, bạn chỉ cần gọi các biến môi trường này (ví dụ process.env.API_KEY) thay vì viết cứng giá trị thật. Claude thường sẽ chủ động nhắc bạn làm điều này khi phát hiện bạn sắp đưa thông tin nhạy cảm vào code, nhưng nhiều lúc bạn có thể không để ý, hoặc chỉ đơn giản làm theo mà không thực sự hiểu vì sao bước này lại quan trọng đến vậy — cho đến khi khóa bị lộ và bị người khác lạm dụng, gây tốn kém hoặc rò rỉ dữ liệu người dùng.
Một số điều nên kiểm tra bao gồm: dữ liệu người dùng có được xác thực và phân quyền đúng cách không, các API endpoint có đang vô tình để mở cho bất kỳ ai truy cập không, dữ liệu nhạy cảm có được mã hóa khi lưu trữ và truyền tải không, và ứng dụng có xử lý tốt các input "bẩn" hoặc cố tình phá hoại từ người dùng hay không. Bạn có thể nhờ chính Claude Code rà soát lại toàn bộ codebase và chỉ ra những điểm yếu tiềm ẩn, nhưng tốt nhất vẫn nên tự mình hiểu qua những nguyên tắc bảo mật cơ bản, vì công cụ AI dù giỏi đến đâu cũng không thể thay thế hoàn toàn sự cẩn trọng của người xây dựng sản phẩm. Bảo mật không phải là việc làm một lần rồi thôi — đó là thói quen cần được xây dựng ngay từ những dòng code đầu tiên, để khi ứng dụng của bạn phát triển lớn hơn, bạn không phải quay lại vá víu những lỗ hổng đáng lẽ đã có thể tránh được từ đầu.

Đăng nhập để đọc tiếp

Tạo tài khoản miễn phí để đọc tiếp phần còn lại của bài viết.

Đăng nhập Đăng ký