Bài 15: Sản phẩm bị lỗi? — Cách nhờ AI “sửa chữa” giúp bạn
Giai đoạn 4: BIẾT KIỂM 🔍 Thời lượng: 45-90 phút (đọc + thực hành + bài tập) Công cụ: Google AI Studio — aistudio.google.com
🎯 Mục Tiêu Bài Học
- Sau bài này, bạn sẽ biết cách phát hiện các loại lỗi phổ biến khi tạo sản phẩm bằng AI
- Sau bài này, bạn sẽ biết “công thức” báo lỗi cho AI để nó sửa đúng và nhanh
- Sau bài này, bạn sẽ tự tin xử lý được 80% lỗi thường gặp
💡 Ví Dụ Thực Tế
Chị Trang tạo xong landing page bán mỹ phẩm, nhưng gặp 3 vấn đề: (1) nút “Mua ngay” bấm không có phản ứng, (2) hình ảnh sản phẩm hiển thị méo trên điện thoại, (3) phần bảng giá bị tràn ra ngoài màn hình. Chị không biết code nên rất lo lắng. Nhưng thực ra, chị chỉ cần “báo lỗi” cho AI giống như báo thợ sửa: “Nút Mua ngay không hoạt động khi click. Hình sản phẩm bị méo trên mobile. Bảng giá tràn ra ngoài.” AI sẽ tìm và sửa. Debug (sửa lỗi) bằng AI giống như gọi thợ sửa điện — bạn chỉ cần nói “cái gì hỏng” chứ không cần biết “dây điện nào đứt.”
📚 Kiến Thức Cần Biết
Debug (đọc là “đi-bấc”) nghĩa là tìm và sửa lỗi — giống như sửa lỗi chính tả trong văn bản. Trong Vibe Coding, bạn không cần tự tìm lỗi trong code — bạn chỉ cần mô tả “triệu chứng” cho AI, và AI sẽ tìm “nguyên nhân” rồi sửa.
5 loại lỗi phổ biến nhất khi tạo sản phẩm bằng AI: Lỗi hiển thị (nhìn thấy — trang bị vỡ, méo, tràn, phần tử đè lên nhau); Lỗi tương tác (nút bấm không hoạt động, form không gửi được, menu không mở); Lỗi nội dung (nội dung bằng tiếng Anh thay vì tiếng Việt, thông tin sai, thiếu phần); Lỗi responsive (đẹp trên máy tính nhưng xấu trên điện thoại); Lỗi logic (tool tính ra kết quả sai, bộ đếm chạy ngược thay vì xuôi).
Công thức báo lỗi hiệu quả — gọi là “Công thức 3W”: What (Cái gì bị lỗi?), Where (Ở đâu trên trang?), Want (Bạn muốn nó thế nào?). Ví dụ: “Nút ‘Đặt hàng’ (what) ở cuối phần hero banner (where) không hoạt động khi click. Tôi muốn khi click vào nút này, trang cuộn xuống form đặt hàng (want).”
🧪 Thực Hành Từng Bước
- Mở lại landing page hoặc website bạn đã tạo ở các bài trước
- Kiểm tra hệ thống theo checklist sau (ghi lại tất cả lỗi tìm thấy):
CHECKLIST KIỂM TRA:
□ Menu/navigation hoạt động khi click?
□ Tất cả nút CTA hoạt động?
□ Form điền được và gửi được?
□ Hình ảnh hiển thị đúng (không méo, không mất)?
□ Nội dung đúng tiếng Việt, đúng chính tả?
□ Cuộn trang mượt, không bị giật?
□ Thu nhỏ cửa sổ → trang vẫn đẹp (responsive)?
□ Link mạng xã hội ở footer hoạt động?
□ Logo click về trang chủ?
□ Phần nào bị tràn ra ngoài khung?- Với mỗi lỗi tìm được, viết báo lỗi theo “Công thức 3W”. Ví dụ:
Lỗi 1: Menu hamburger trên mobile (what) không mở ra khi click vào biểu tượng 3 gạch (where). Tôi muốn khi click thì menu mở ra hiển thị danh sách trang (want).
Lỗi 2: Phần đánh giá khách hàng (what) bị tràn ra ngoài khung trên điện thoại (where). Tôi muốn nó hiển thị vừa trong khung, có thể cuộn ngang nếu cần (want).- Gửi từng lỗi vào chat AI Studio — mỗi lần gửi 1-2 lỗi, không gửi hết cùng lúc
- Sau khi AI sửa, kiểm tra lại lỗi đó đã hết chưa
- Nếu lỗi vẫn còn, cung cấp thêm chi tiết:
Lỗi vẫn chưa được sửa. Cụ thể hơn: khi tôi click nút "Đặt hàng", không có gì xảy ra. Console có hiện lỗi gì không? Hãy kiểm tra lại event handler của nút này.- Thử kỹ thuật “reset” nếu lỗi quá nhiều:
Trang hiện tại có nhiều lỗi. Hãy kiểm tra toàn bộ code, tìm tất cả lỗi JavaScript, CSS và logic, rồi sửa tất cả cùng lúc. Liệt kê những gì đã sửa.- Kiểm tra lại toàn bộ checklist — đảm bảo tất cả đã hoạt động
✅ Kết Quả Đầu Ra
Bạn sẽ có khả năng tự phát hiện lỗi bằng checklist và “chữa bệnh” cho sản phẩm bằng cách mô tả triệu chứng cho AI. Sản phẩm của bạn sau bài này sẽ hoạt động trơn tru hơn nhiều.
💡 Mẹo & Lưu Ý
- Mẹo “Hỏi AI tự kiểm tra”: bạn có thể gõ “Hãy kiểm tra toàn bộ code và liệt kê bất kỳ lỗi hoặc vấn đề tiềm ẩn nào” — AI sẽ tự rà soát code và báo lại. Rất hữu ích khi bạn không biết bắt đầu từ đâu
- Khi mô tả lỗi, chụp screenshot lỗi và gửi kèm — AI “nhìn” ảnh rất giỏi, đôi khi nhìn ảnh nhanh hơn đọc mô tả
- ⚠️ Lỗi thường gặp: Sau nhiều lần sửa, đôi khi AI “sửa chỗ này hỏng chỗ kia.” Nếu vậy, gõ: “Dừng lại, đừng thay đổi gì. Hãy review toàn bộ code hiện tại, xác nhận trạng thái hoạt động, rồi mới sửa lỗi [mô tả lỗi cụ thể].”
📝 Bài Tập Về Nhà
Chạy checklist kiểm tra cho tất cả sản phẩm bạn đã tạo (card visit, landing page, mini tool, website). Sửa hết các lỗi tìm được. Nhờ 1 người dùng thử sản phẩm và ghi lại bất kỳ lỗi nào họ gặp mà bạn không phát hiện.
🏆 Achievement Bài 15
- [ ] Hoàn thành đọc phần kiến thức
- [ ] Làm xong các bước thực hành
- [ ] Nộp bài tập về nhà
- [ ] Ghi chú những điều học được
Bài tiếp theo: Tối ưu giao diện và UX 🚀