Nhiều bạn khi mới bắt đầu tiếp cận phương pháp làm phần mềm bằng trí tuệ nhân tạo Vibe Coding thường có một thói quen rất nguy hiểm: Vừa mở khung trò chuyện lên là gõ lệnh bảo AI viết mã nguồn ngay lập tức. Kết quả là chỉ sau bốn đến năm câu lệnh, AI bắt đầu trả lời lung tung, làm sai lệch yêu cầu ban đầu, các đoạn mã chắp vá rối như một cuộn chỉ rối và cuối cùng bạn phải bấm xóa dự án để làm lại từ đầu trong sự chán nản. Trong bài chia sẻ thực chiến dài và chi tiết này, mình sẽ bóc tách toàn bộ quy trình chuẩn chỉ từ A đến Z mà mình đúc kết qua hàng chục dự án: Cách lên một bản kế hoạch sản phẩm chi tiết, cách thiết lập hàng rào bảo mật, cách vẽ bản phác thảo khung sườn và mẹo điều hướng để AI luôn đi đúng hướng một trăm phần trăm.
Vì Sao Bản Kế Hoạch PRD Lại Là Linh Hồn Của Một Web App?
Trước khi gõ bất kỳ một dòng mã nào, điều đầu tiên bạn bắt buộc phải có là một bản tài liệu mô tả yêu cầu sản phẩm, trong ngành công nghệ thường gọi là bản PRD. Để dễ hình dung, bạn hãy tưởng tượng bản PRD này giống hệt như một tập hồ sơ thiết kế kỹ thuật của một kiến trúc sư trước khi khởi công xây một ngôi biệt thự ngoài đời:
- Nếu không có bản thiết kế: Bạn ra lệnh cho thợ xây theo kiểu miệng: Hãy xây cho tôi một ngôi nhà đẹp. Chú thợ xây sẽ tự suy đoán theo ý của chú ấy, hôm nay xây bức tường này, ngày mai đập đi xây lại góc khác, kết quả là ngôi nhà méo mó, xiêu vẹo và tốn kém gấp mười lần tiền bạc.
- Khi có bản thiết kế chi tiết: Bản thiết kế ghi rõ ngôi nhà có mấy tầng, mỗi phòng rộng bao nhiêu mét vuông, cửa sổ quay hướng nào, cột trụ chịu lực ra sao. Chú thợ xây chỉ việc nhìn vào bản vẽ và đặt từng viên gạch chuẩn xác từng milimet.
- Con số kiểm chứng thực tế: Kinh nghiệm thực chiến cho thấy, nếu bạn ra lệnh chung chung thì mười lần AI làm việc chỉ có bốn đến năm lần là đạt yêu cầu. Nhưng khi bạn đưa cho AI một bản kế hoạch chi tiết ngay từ đầu, mười lần AI làm việc thì có tới tám đến chín lần chính xác tuyệt đối ngay ở lượt đầu tiên.
Bài Học Thực Tế: Xây Dựng Bản Kế Hoạch Cho Web App Quản Lý Kho Hàng
Để bạn hiểu rõ từng bước, chúng ta cùng đi vào một bài toán thực tế rất phổ biến: Xây dựng một ứng dụng web quản lý kho hàng cho một cửa hàng kinh doanh.
Trước hết, chúng ta cần phân chia ngôi nhà kho hàng này thành các gian phòng chức năng rõ ràng:
- Gian phòng 1 – Nhập kho từ nhà cung cấp: Ghi nhận ngày giờ nhập hàng, tên nhà cung cấp, số lượng từng mặt hàng, đơn giá nhập và tổng số tiền thanh toán.
- Gian phòng 2 – Xuất kho bán cho khách: Ghi nhận mã đơn hàng, người mua hàng, số lượng xuất đi và tự động trừ số lượng hàng trong kho.
- Gian phòng 3 – Bảng theo dõi tồn kho: Hiển thị danh sách toàn bộ mặt hàng còn lại trong kho theo thời gian thực.
- Gian phòng 4 – Chiếc chuông cảnh báo hàng sắp hết: Khi một mặt hàng trong kho tụt xuống dưới số lượng tối thiểu, ví dụ dưới mười sản phẩm, hệ thống tự động đổi màu đỏ để báo cho người chủ biết cần nhập thêm hàng gấp.
Cách Phối Hợp Nhịp Nhàng Giữa Các Công Cụ AI
Một mẹo nhỏ nhưng cực kỳ hiệu quả trong quy trình làm việc là biết cách dùng đúng công cụ cho đúng việc:
- Dùng ChatGPT thuần để soạn bản kế hoạch: Mở trang web ChatGPT trực tiếp để trò chuyện và lên bản kế hoạch PRD. Ở môi trường này, AI suy nghĩ rất nhanh, câu chữ mạch lạc và không bị phân tâm bởi các tệp mã nguồn xung quanh. Bạn có thể trao đổi qua lại năm đến mười câu để gọt giũa bản kế hoạch cho thật ưng ý.
- Chuyển bản kế hoạch sang phần mềm VS Code: Sau khi bản kế hoạch đã hoàn chỉnh, bạn xuất nội dung đó thành một tệp văn bản và đặt vào thư mục làm việc trong phần mềm viết mã VS Code.
- Để AI trong VS Code đọc kế hoạch và vẽ giao diện: Lúc này trợ lý AI trong phần mềm viết mã chỉ việc đọc bản kế hoạch đã có sẵn và tập trung toàn bộ năng lượng vào việc vẽ khung sườn giao diện và viết mã nguồn.
Bốn Thành Phần Sống Còn Trong Một Bản Kế Hoạch PRD Chuẩn
Một bản kế hoạch sơ sài sẽ khiến AI làm việc nửa vời. Một bản kế hoạch chuẩn chỉnh bắt buộc phải có đủ bốn chiếc chân bàn vững chắc sau đây:
- 1. Mục tiêu và đối tượng sử dụng: Nêu rõ ứng dụng này giải quyết nỗi đau gì và ai là người bấm nút hàng ngày. Ví dụ: Dành cho thủ kho dùng điện thoại quét mã vạch và chủ cửa hàng dùng máy tính xem báo cáo doanh thu.
- 2. Danh sách các tính năng cốt lõi: Liệt kê rành mạch từng tính năng từ cơ bản đến nâng cao. Mỗi tính năng phải mô tả rõ: Người dùng bấm vào nút nào, màn hình hiện ra cái gì và số liệu được lưu vào đâu.
- 3. Hệ thống hàng rào bảo mật nghiêm ngặt: Đây là phần rất nhiều người bỏ quên. Bạn phải dặn AI cài đặt cơ chế bảo vệ: Giấu kín các mã chìa khóa bí mật, phân quyền nghiêm ngặt để nhân viên kho không xem được giá vốn nhập hàng, và ngăn chặn việc người lạ bấm phím kiểm tra mã nguồn trên trình duyệt để đánh cắp dữ liệu kinh doanh của bạn.
- 4. Danh sách những thứ tuyệt đối không làm: Đây chính là chiếc vòng kim cô đắt giá nhất. Bạn phải ghi rõ những tính năng chưa làm trong phiên bản này, ví dụ: Chưa làm thanh toán thẻ quốc tế, chưa làm kết nối với máy in nhiệt. Nếu không có mục này, chú thợ xây AI sẽ tự ý vẽ thêm hàng chục tính năng rườm rà khiến dự án phình to và sập hoàn toàn.
Từ Bản Kế Hoạch Sang Bản Vẽ Khung Sườn Giao Diện
Sau khi bản kế hoạch bằng chữ đã hoàn thành, bước tiếp theo là chuyển đổi nó thành một bản vẽ khung sườn giao diện, thường gọi là bản vẽ Wireframe:
- Bạn ra lệnh cho trợ lý AI: Hãy đọc bản kế hoạch PRD vừa tạo và vẽ cho tôi khung giao diện của từng màn hình bằng mã hiển thị đơn giản.
- AI sẽ dựng nên các khối hộp rõ ràng: Phía trên là thanh tìm kiếm hàng hóa, bên trái là thực đơn chuyển đổi giữa nhập kho và xuất kho, ở giữa là bảng danh sách các mặt hàng có nút bấm màu cam để thêm hàng mới.
- Bạn mở bản vẽ lên xem thử bằng mắt thật. Nếu thấy nút bấm nào đặt chưa thuận tay hoặc bảng số liệu nào bị chật chội trên màn hình điện thoại di động, bạn yêu cầu AI sửa lại bản vẽ ngay lập tức trước khi đổ bê tông viết mã logic.
Mẹo Vàng Cất Tài Liệu Vào Thư Mục Docs Để AI Luôn Nhớ Việc
Một trong những nỗi bực mình lớn nhất khi làm việc với AI là tình trạng cá vàng: Làm được vài hôm thì AI quên mất hôm trước đã nói những gì.
Để khắc phục triệt để tình trạng này, bạn hãy áp dụng bí quyết sau:
- Tạo một thư mục riêng biệt đặt tên là docs ngay trong thư mục gốc của dự án.
- Cất toàn bộ tệp kế hoạch PRD, tài liệu mô tả cơ sở dữ liệu và quy chuẩn thiết kế vào trong thư mục docs này.
- Mỗi khi bạn mở một cuộc trò chuyện mới với AI để làm tiếp một tính năng mới, bạn chỉ cần gõ đúng một câu chỉ dẫn ngắn gọn: Hãy đọc toàn bộ tài liệu trong thư mục docs trước khi bắt đầu công việc.
- AI sẽ tự động đọc lại toàn bộ cuốn cẩm nang của dự án và làm việc chính xác một trăm phần trăm như một người đồng đội lâu năm hiểu ý bạn.
Đúc Kết Kinh Nghiệm
Làm phần mềm bằng AI không phải là gõ phím nhanh mà là tư duy điều hướng đúng đắn. Dành ra ba mươi phút đầu tiên để chuẩn bị một bản kế hoạch PRD chỉn chu sẽ giúp bạn tiết kiệm hàng tuần lễ sửa lỗi về sau. Chúc bạn áp dụng thành công quy trình này để tự tay tạo ra những ứng dụng web thông minh và vững chắc cho công việc của mình!
