Vibe Coding
Vibe Coding Checklist: biến Toy Project thành Real Project
Những thứ nhỏ mà AI không tự thêm vào web app vibe coding: favicon, Open Graph, SEO, analytics, bot thông báo, Lighthouse, PWA, error boundary, trạng thái loading/empty, 404… để sản phẩm trông chuyên nghiệp và ổn định.
22/06/2026 · 5 phút đọc · Lê Huy Thái
Về vibe coding ra các web app nhỏ và vừa, bạn có thể thêm vài thứ nhỏ nhỏ sau để sản phẩm trở nên chuyên nghiệp, hoàn thiện và có tiềm năng lớn hơn. Đây là những thứ AI sẽ không chủ động đưa vào hay gợi ý — chúng ta phải gợi ý hoặc bảo nó. Đơn giản thôi, nhưng đôi khi chính chúng phân loại một Toy Project với một Real Project. Checklist
- Hỏi AI hoặc search nhanh xem nó là gì — hiểu rồi thì sau sẽ nhớ và không lúng túng.
- Check dự án đã có chưa — có rồi và ổn rồi thì bỏ qua, khỏi làm lại.
- Cần chuẩn bị nguyên liệu gì không? (logo, ảnh…) Có công cụ nào giúp chuẩn bị nhanh hơn không?
- Đưa nguyên liệu cho AI và bảo nó bổ sung vào dự án.
- 01Nhận diện & Tương tác mạng xã hội
- Favicon & Apple Touch Icon — hiển thị ở tab trình duyệt, lúc save về màn hình iPhone, ở kết quả tìm kiếm Google… Lười thì dùng luôn logo, hoặc dùng công cụ tạo favicon.
- Thẻ Open Graph & Twitter Cards — quyết định link website khi share lên Facebook, X (Twitter)… trông thế nào: ảnh gì, tiêu đề ra sao. (Đây là lý do nhiều web share lên social chỉ có mỗi text, không ảnh.) Cần chuẩn bị ảnh + tiêu đề nếu muốn.
- (Dynamic) Title & Meta Description — hiển thị ở tab trình duyệt và rất quan trọng cho SEO Google (giúp web dễ được tìm thấy hơn). Làm tốt bộ thẻ Title/Description rất đáng giá — search "Lê Huy Thái" thấy vài kết quả đầu là website của mình chính là ví dụ.
robots.txtvàsitemap.xml(nếu cần) — giúp Google index web nhanh hơn: có 5 page thì sớm thấy đủ 5 page trên kết quả tìm kiếm.
- 02Vận hành & Tương tác
Tạo web app vibe coding thì nhanh, nhưng đang có bao nhiêu người dùng, tháng qua bao nhiêu truy cập, có lỗi nghiêm trọng không…? Không biết mấy cái này thì khá thiếu sót.
- Web Analytics (ví dụ Google Analytics) — biết có bao nhiêu người truy cập, họ thích vào page nào, click vào đâu nhiều nhất. Tóm lại: biết thế giới đang dùng web app của bạn ra sao.
- Bot thông báo (Telegram / Discord…) — rất hữu ích giai đoạn đầu. Web app bắn message về cho bạn: lỗi nghiêm trọng (thường lúc gọi bên thứ 3, tác vụ nặng, logic chưa chắc) để lúc nào check, hoặc các sự kiện cần lưu ý (ví dụ có user mới mua hàng).
- 03Tối ưu hiệu suất & Độ ổn định
- Đo hiệu suất — dùng DevTools Lighthouse có sẵn (chuột phải > Inspect > Lighthouse > Analyze page load). Điểm quá thấp hoặc có vấn đề nghiêm trọng → copy đưa AI fix.
- Lazy Loading ảnh & tối ưu định dạng — AI thường để ảnh tải toàn bộ cùng lúc làm web chậm. Yêu cầu nó thêm
loading="lazy"vào thẻimgvà ưu tiên định dạng WebP. - Web App Manifest (PWA cơ bản) — bảo AI tạo
manifest.json. Đơn giản nhưng giúp trình duyệt nhận diện web như một ứng dụng, cho phép "Add to Home Screen" trên điện thoại. Coi như bạn có một mobile app từ web app với chi phí 0 đồng, dưới 30 phút. - Error Boundaries — nếu một component bị lỗi logic, cả màn hình có thể trắng xóa. Yêu cầu AI bọc app trong Error Boundary để khi lỗi chỉ hiện "Có chút sự cố, vui lòng tải lại trang" thay vì sập toàn bộ.
- 04Nâng cao trải nghiệm người dùng
Mấy cái này khả năng AI cũng có làm, nhưng mình cứ đưa vào làm checklist cho chắc:
- Trạng thái Loading cho màn hình, khu vực…
- Trạng thái Rỗng — chưa/không có data thì hiển thị sao.
- Thông báo hệ thống — xoá, tạo… nên có popup/toast nhỏ.
- Trang 404 — vào link không tồn tại thì hiển thị sao.
- Scroll to Top — cần cho những website dài.
- Header / Footer chuẩn chỉ — điều hướng đầy đủ, ổn định giữa các page.
- Cookie Consent Banner (nếu cần) — thanh nhỏ dưới đáy màn hình xin phép dùng cookie.