Làm xong bài này, bạn có một website hoàn chỉnh cho quán cà phê "Little Fern" — menu tương tác, giờ mở cửa và phần vị trí — chạy thật trên một đường link chia sẻ được. Đây là bài thực hành để làm quen với vibe coding: lập trình bằng ý đồ thông qua ngôn ngữ tự nhiên.
Bạn cần một trình duyệt web, một địa chỉ email để đăng ký tài khoản và một ý tưởng cơ bản. Tập trung dựng ra sản phẩm, không sa đà vào các công đoạn thiết lập môi trường.
Bước 1 — Chọn ý tưởng đủ nhỏ để làm xong trong một buổi
Kiểm soát phạm vi dự án là yếu tố sống còn khi bắt đầu. Tránh những dự án phức tạp như sàn thương mại điện tử tích hợp thanh toán ngay từ đầu: rào cản bảo mật sẽ cắt ngang mạch học của bạn.
Hãy chọn một ý tưởng đủ nhỏ nhưng vẫn dùng được thật. Vài ví dụ: website giới thiệu quán cà phê, bảng tính chỉ số SEO, hoặc công cụ quản lý thiết bị nội bộ cho nhóm. Mục tiêu là hoàn thiện và đưa vào chạy trong khoảng 6–10 giờ làm việc tập trung.
Bước 2 — Tạo tài khoản và mở dự án mới
Truy cập Lovable tại lovable.dev và đăng ký bằng email, Google hoặc GitHub. Đăng nhập xong, bấm nút tạo dự án mới để vào giao diện Editor.
Bạn biết mình vào đúng chỗ khi thấy hai khu vực:
- Khung chat bên trái: nơi bạn gõ prompt mô tả ý đồ.
- Khung xem trước (Preview) bên phải: nơi ứng dụng chạy thật và cập nhật ngay theo thay đổi của AI.
Bước 3 — Viết prompt đầu tiên mô tả toàn bộ ứng dụng
Đừng mô tả vụn vặt. Mở đầu bằng một bản tóm tắt đầy đủ về cấu trúc và phong cách. Chép nguyên mẫu prompt sau vào khung chat:
Build a website for Little Fern, a neighborhood cafe. Include a warm hero section with a headline and a photo, an interactive menu where visitors filter items by category (coffee, breakfast, lunch, pastries), an opening hours section, and a location section with the address and a short "find us" description. Use realistic sample content throughout. Cozy, welcoming design. Works well on mobile. No login or database yet.Vài phút sau, phiên bản đầu tiên hiện ra trong khung Preview với nội dung mẫu sát thực tế. Dòng cuối cùng — "No login or database yet" — là dòng đáng giá nhất: tạm bỏ hệ thống đăng nhập giúp giảm nhiễu logic ở phiên bản đầu, để AI dồn sức vào giao diện trước khi đụng tới dữ liệu.
Bước 4 — Sửa từng thay đổi một
Chọn đúng một cách, bỏ qua cách còn lại.
Cách 1: Chat với AI
Dùng khung chat bên trái để yêu cầu thêm tính năng hoặc sửa lỗi. Ví dụ:
Add a "Today's specials" section between the menu and the opening hours, highlighting two menu items with a short description and price.Chỉ yêu cầu một thay đổi mỗi lần. Chấp nhận những sửa đổi "tạm ổn" sẽ đẩy dự án vào thế phụ thuộc lộ trình (path dependence): AI tích lũy quán tính ngữ cảnh (context momentum) lệch hướng, càng về sau càng khó nắn lại.
Cách 2: Chỉnh sửa trực tiếp trên giao diện
Dùng thanh công cụ Preview của Lovable: chọn thẳng phần tử trên màn hình rồi dùng tính năng "Edit text inline" để sửa nội dung. Đây là cách nhanh nhất để chỉnh chữ mà không tốn một lượt chat với AI.
Bước 5 — Tự kiểm thử trước khi xuất bản
Trước khi công khai, tự chạy qua danh sách này:
- Bấm thử mọi nút và liên kết để xác nhận điều hướng đúng chỗ.
- Kiểm tra bộ lọc menu theo từng danh mục.
- Bật chế độ "Mobile view" để xem hiển thị trên điện thoại.
Cảnh giác với thứ trông thì đúng mà chạy thì sai: AI dựng ra giao diện chuyên nghiệp nhưng bên dưới thiếu logic xử lý — nút bấm có hiệu ứng mà không làm gì cả. Gặp lỗi thì mô tả thật cụ thể, ví dụ: "In the menu, clicking the pastries filter shows no items. It should show the pastry items."
Bước 6 — Xuất bản và lấy đường link chia sẻ
Bấm nút "Publish" ở góc trên bên phải, xem lại tên và biểu tượng của trang rồi xác nhận. Ứng dụng của bạn có một địa chỉ lovable.app thật, gửi cho ai cũng mở được.
Trang công khai không tự cập nhật mỗi khi bạn chat với AI. Bản đã xuất bản là một ảnh chụp (snapshot) tại thời điểm bấm nút; những thay đổi sau đó chỉ nằm trong bản xem trước riêng của bạn cho tới khi bạn bấm "Publish → Update".
Mẫu prompt bạn sẽ dùng hằng ngày
| Mục tiêu | Mẫu prompt cần gõ |
|---|---|
| Thêm tính năng nhỏ | "Thêm [tên tính năng] vào giữa [phần A] và [phần B]. Giữ nguyên các phần khác." |
| Thay đổi phong cách | "Làm cho giao diện bớt khô khan, dùng tông màu ấm và phông chữ hiện đại hơn." |
| Sửa lỗi cụ thể | "Khi bấm vào [nút X], [lỗi Y] xảy ra. Hãy kiểm tra và sửa lại logic phần này." |
Khi AI làm sai: bảng xử lý sự cố
| Hiện tượng | Nguyên nhân có thể | Cách sửa |
|---|---|---|
| AI lặp lại lỗi cũ | Quán tính ngữ cảnh (context momentum) | Mở khung chat mới, hoặc tóm tắt lại đúng ý định quan trọng nhất. |
| Giao diện trắng xóa | Lỗi runtime hoặc thư viện không tồn tại | Mở Console trong trình duyệt, chép dòng lỗi rồi dán vào chat để AI sửa. |
| Tính năng không chạy | AI mới vẽ giao diện, chưa có logic xử lý bên dưới | Yêu cầu AI kiểm tra lại phần xử lý dữ liệu. |
Kiểm tra an toàn trước khi có người dùng thật
Bảo mật trong vibe coding là trách nhiệm của con người, không phải của AI. Chạy hết checklist này trước khi gửi link cho người lạ:
- Xác minh không có khóa API hay mật khẩu nào bị viết thẳng (hardcoded) trong mã nguồn.
- Kiểm tra xem có trang quản trị nào bị bỏ ngỏ, vào được mà không cần đăng nhập không — lỗi này đã xảy ra thật với ứng dụng thanh lý MacBook Moltbook: AI tự tạo ra một endpoint không xác thực.
- Soi lại danh sách thư viện (dependencies) có tên lạ. AI có thể bịa ra những gói cài đặt không tồn tại, và kẻ tấn công đăng ký sẵn đúng tên đó kèm mã độc — kiểu tấn công gọi là slopsquatting.
Việc nên làm ngay sau đó
Đừng ngồi tinh chỉnh mã nguồn một mình thêm nữa. Mang sản phẩm đi hỏi 2–3 người dùng thật và tìm ra chỗ khó chịu nhất trong cách họ đang làm việc đó. Phản hồi thật quan trọng hơn một mã nguồn hoàn hảo mà không ai dùng.
Tài liệu tham khảo
- What is vibe coding, exactly? — MIT Technology Review
- Vibe coding 101 — Replit Docs
- Quick start — Lovable Documentation
- Vibe coding: programming through conversation with artificial intelligence — arXiv
- I Built the Same App 5 Ways: Cursor vs Claude Code vs Windsurf vs Replit Agent vs GitHub Copilot — DEV Community
- Vibe Coding in 2026: Beginner Projects You Can Build (and Monetize) — Nucamp
- Vibe coding is fun and easy, but there's a major catch — The Conversation
- Vibe Coding Security Risks You Can't Ignore — Arnica