Ví dụ vibe coding: 10 loại app thực tế, prompt và những lỗi hay gặp

Các ví dụ vibe coding phổ biến nhất là những web app nhỏ mà hữu ích: app theo dõi, trang đặt lịch, công cụ nội bộ, cổng khách hàng, landing page, bài quiz, dashboard và các công cụ AI đơn giản. Dưới đây là mười ví dụ. Với mỗi cái, bạn sẽ thấy ai hay xây nó, prompt đầu tiên, lỗi thường gặp và prompt tiếp theo để sửa.

Đây là các ví dụ tổng hợp từ những dự án người ta hay mang đến các trình tạo app AI nhất, không phải nghiên cứu điển hình về một người cụ thể. Các prompt có thể sao chép. Các lỗi là những lỗi lặp đi lặp lại, và đó chính là phần hữu ích. Nếu bản thân vibe coding còn mới với bạn, hãy bắt đầu với vibe coding là gì.

1. App theo dõi ngân sách cá nhân

Ai xây: những người đã thử bảng tính rồi bỏ cuộc.

Prompt đầu tiên:

Hãy xây một app theo dõi ngân sách hàng tháng. Tôi thêm khoản chi với số tiền, danh mục (ăn uống, tiền nhà, đi lại, giải trí, khác), ngày và ghi chú. Hiển thị tổng chi tháng này theo từng danh mục bằng biểu đồ cột và danh sách các khoản chi gần đây. Tôi có thể đặt ngân sách cho mỗi danh mục và xem còn lại bao nhiêu.

Lỗi gặp phải: biểu đồ cộng mọi khoản chi từng nhập chứ không chỉ tháng này, nên sang tháng thứ hai danh mục nào cũng trông như đã chi quá tay. Ngoài ra, số tiền gõ có dấu phẩy ("1,200") bị lưu thành 1.

Prompt sửa lỗi:

Biểu đồ và các tổng chỉ được tính các khoản chi của tháng đang chọn. Thêm bộ chọn tháng ở đầu trang, mặc định là tháng hiện tại. Đồng thời chấp nhận số tiền gõ có dấu phẩy hoặc dấu cách và lưu chúng dưới dạng số.

Bài học: "tháng này" là một quy tắc. Hãy nói rõ các quy tắc ra.

2. Trang đặt lịch cho một tiệm làm tóc nhỏ

Ai xây: chủ doanh nghiệp nhỏ chán việc đặt lịch qua điện thoại và tin nhắn.

Prompt đầu tiên:

Hãy xây một trang đặt lịch cho tiệm làm tóc của tôi. Khách chọn dịch vụ, ngày và khung giờ còn trống, rồi nhập tên và số điện thoại. Tôi có một trang quản trị riêng, sau lớp đăng nhập, hiển thị các lịch hẹn theo ngày.

Lỗi gặp phải: hai khách đặt cùng khung 10:00 chỉ cách nhau một phút, vì trang chỉ kiểm tra còn trống hay không khi vừa tải. Một lịch nhuộm tóc 90 phút cũng không chặn các khung giờ liền sau.

Prompt sửa lỗi:

Khi khách gửi lịch hẹn, hãy kiểm tra trên server rằng mọi khung giờ lịch đó chiếm vẫn còn trống, và từ chối kèm thông báo "Khung giờ này vừa có người đặt" nếu không. Một dịch vụ chặn toàn bộ thời lượng của nó, nên lịch 90 phút lúc 10:00 chặn 10:00, 10:30 và 11:00.

Bài học: bất cứ việc gì hai người có thể làm cùng lúc đều cần kiểm tra phía server. Xem cách xây app đặt lịch để có bản đầy đủ.

3. Thực đơn nhà hàng có mã QR

Ai xây: chủ quán cà phê và nhà hàng hay phải in lại thực đơn.

Prompt đầu tiên:

Hãy xây một website thực đơn trên di động cho quán cà phê của tôi. Các mục bữa sáng, bữa trưa, đồ uống và tráng miệng, mỗi món có tên, giá, mô tả ngắn và nhãn ăn kiêng (thuần chay, không gluten). Tôi cần một trang quản trị để sửa món và đánh dấu hết hàng. Hiển thị mã QR để tôi in ra, dẫn tới thực đơn.

Lỗi gặp phải: không có gì hỏng, nhưng thực đơn chạy chậm trên Wi-Fi của quán vì ảnh chụp từ điện thoại nguyên kích thước được tải cho mọi món.

Prompt sửa lỗi:

Ảnh thực đơn quá nặng. Hãy thu nhỏ ảnh tải lên về tối đa rộng 800px, nén chúng và tải lười (lazy load) khi khách cuộn xuống.

Bài học: hãy thử trên kết nối chậm, đừng chỉ thử ở văn phòng.

4. App theo dõi thiết bị hoặc tồn kho cho một nhóm

Ai xây: nhân sự vận hành muốn thay bảng tính dùng chung.

Prompt đầu tiên:

Hãy xây một công cụ quản lý kho cho đội kho của chúng tôi. Mặt hàng có tên, SKU, số lượng, vị trí và mức tối thiểu. Nhân viên đăng nhập, có thể nhập thêm hàng, xuất hàng kèm lý do, và xem danh sách mặt hàng dưới mức tối thiểu được tô đỏ. Lưu lịch sử mọi thay đổi và người thực hiện.

Lỗi gặp phải: lịch sử hiện "user 3" thay vì tên, và xuất nhiều hơn số đang có làm số lượng thành âm.

Prompt sửa lỗi:

Hiển thị tên người trong lịch sử, không hiển thị ID. Không cho phép xuất hàng làm số lượng xuống dưới 0; thay vào đó hiện "Chỉ còn 4 trong kho".

Bài học: hãy mô tả điều gì không được phép xảy ra, không chỉ điều gì được phép. Hướng dẫn xây app quản lý kho của chúng tôi bàn phần còn lại.

5. Cổng khách hàng cho freelancer hoặc studio

Ai xây: nhà thiết kế, kế toán, tư vấn viên và agency.

Prompt đầu tiên:

Hãy xây một cổng khách hàng. Tôi mời khách qua email. Mỗi khách đăng nhập và chỉ thấy dự án, tệp và hóa đơn của riêng họ, và có thể để lại bình luận. Tôi đăng nhập với vai trò admin và thấy tất cả.

Lỗi gặp phải: đây là lỗi quan trọng nhất trong danh sách. Các trang chỉ hiện cho mỗi khách dự án của họ, nhưng server trả về bất kỳ dự án nào nếu bạn đổi con số trên thanh địa chỉ. Bấm xem qua với tư cách một khách sẽ không bao giờ lộ ra điều này.

Prompt sửa lỗi:

Kiểm tra mọi route phía server trả về dự án, tệp, bình luận hoặc hóa đơn. Mỗi route phải xác nhận khách đang đăng nhập sở hữu bản ghi đó, và nếu không thì trả về "không tìm thấy". Sau đó hãy thử: đăng nhập là khách A và thử mở dự án của khách B bằng ID của nó.

Bài học: ẩn một thứ trên màn hình không giống với bảo vệ nó. Đọc thêm ở vibe coding có an toàn không?.

6. Trang ra mắt có danh sách chờ

Ai xây: nhà sáng lập thử ý tưởng trước khi xây.

Prompt đầu tiên:

Hãy xây một landing page cho app giúp gia sư xếp lịch học và thu tiền. Có tiêu đề chính, tiêu đề phụ, ô đăng ký email, ba lợi ích, phần cách hoạt động và phần câu hỏi thường gặp. Lưu các lượt đăng ký vào cơ sở dữ liệu kèm ngày, và cho tôi tải về dạng CSV từ một trang riêng tư.

Lỗi gặp phải: chỉ vài ngày sau danh sách đầy lượt đăng ký rác từ bot, và trang không có tiêu đề hay mô tả, nên khi chia sẻ liên kết thì bản xem trước trống trơn.

Prompt sửa lỗi:

Thêm bảo vệ chống bot cơ bản cho biểu mẫu đăng ký (một trường honeypot ẩn và giới hạn 5 lượt đăng ký mỗi IP mỗi giờ). Thêm tiêu đề trang, meta description và ảnh chia sẻ mạng xã hội.

Bài học: biểu mẫu công khai sẽ bị tìm ra. Xem cách xây trang danh sách chờ.

7. App quiz cho giáo viên

Ai xây: giáo viên và người đào tạo muốn thứ gì nhẹ hơn một LMS.

Prompt đầu tiên:

Hãy xây một app quiz cho lớp của tôi. Tôi tạo các bài quiz với câu hỏi trắc nghiệm, mỗi câu có một đáp án đúng. Học sinh vào bằng một mã và tên riêng, trả lời câu hỏi và xem điểm ở cuối. Tôi xem bảng kết quả theo từng bài quiz.

Lỗi gặp phải: đáp án đúng được gửi tới trình duyệt cùng với câu hỏi, nên một học sinh tò mò có thể đọc chúng trong mã nguồn trang. Học sinh cũng có thể nộp lại cho tới khi được 100%.

Prompt sửa lỗi:

Đừng gửi đáp án đúng tới trình duyệt. Hãy chấm đáp án trên server sau khi nộp. Chỉ cho phép mỗi tên học sinh nộp một lần cho mỗi bài quiz, và báo cho giáo viên nếu ai đó thử lại.

Bài học: trình duyệt thuộc về người dùng. Bất cứ gì ở đó đều đọc được.

8. Một công cụ AI nhỏ

Ai xây: marketer, người viết và nhà sáng lập muốn một trợ lý AI tập trung.

Prompt đầu tiên:

Hãy xây một công cụ biến mô tả sản phẩm thành năm bài đăng mạng xã hội với các giọng điệu khác nhau (thân thiện, chuyên gia, vui tươi, ngắn, dài). Dùng một API AI. Tôi dán mô tả, chọn nền tảng, và nhận các bài đăng kèm nút sao chép.

Lỗi gặp phải: phiên bản đầu gọi dịch vụ AI thẳng từ trình duyệt với khóa API nằm trong trang, nơi ai cũng có thể sao chép và chạy làm hóa đơn tăng vọt.

Prompt sửa lỗi:

Chuyển lệnh gọi AI sang server. Lưu khóa API dưới dạng secret, không bao giờ để trong code frontend. Giới hạn mỗi khách 20 lần tạo mỗi ngày.

Bài học: khóa thuộc về secret trên server. Xem cách giữ an toàn khóa API và cách thêm tính năng AI vào app.

9. Website doanh nghiệp song ngữ Ả Rập và Anh

Ai xây: doanh nghiệp ở vùng Vịnh và thế giới Ả Rập phục vụ hai ngôn ngữ.

Prompt đầu tiên:

Hãy xây một website cho công ty thiết kế nội thất của tôi bằng tiếng Ả Rập và tiếng Anh, có nút chuyển ngôn ngữ. Các trang: trang chủ, dịch vụ, portfolio, giới thiệu và liên hệ. Tiếng Ả Rập phải hoàn toàn từ phải sang trái.

Lỗi gặp phải: chữ Ả Rập được căn phải nhưng bố cục không được lật gương: mũi tên vẫn chỉ sai hướng và menu nằm sai bên. Số điện thoại cũng hiển thị ngược ở vài chỗ.

Prompt sửa lỗi:

Với tiếng Ả Rập, hãy lật gương toàn bộ bố cục: đặt hướng trang là từ phải sang trái, đặt menu ở bên phải, lật các biểu tượng có hướng, và giữ số điện thoại và email theo hướng từ trái sang phải bên trong văn bản tiếng Ả Rập.

Bài học: từ phải sang trái là một bố cục, không phải một kiểu căn lề. Mythex xử lý tiếng Ả Rập và các bố cục phải sang trái khác, và bạn có thể viết prompt trực tiếp bằng tiếng Ả Rập.

10. App theo dõi trở thành app điện thoại

Ai xây: huấn luyện viên, phòng gym và nhóm cộng đồng có người dùng sống trên điện thoại.

Prompt đầu tiên:

Hãy xây một nhật ký tập luyện cho các khách hàng tập cá nhân của tôi. Mỗi khách đăng nhập, xem giáo án tôi giao trong tuần, đánh dấu các bài tập đã xong và ghi mức tạ. Tôi xem tiến độ của từng khách trên một biểu đồ.

Lỗi gặp phải: web app chạy được, nhưng trên điện thoại các nút quá nhỏ để bấm giữa buổi tập và biểu đồ không đọc nổi.

Prompt sửa lỗi:

Thiết kế cho việc dùng một tay trên điện thoại: vùng chạm lớn ở cuối màn hình, mỗi màn hình một bài tập với nút Tiếp và Xong lớn, và một biểu đồ tiến độ tuần đơn giản.

Bài học: nếu người ta sẽ dùng trên điện thoại, hãy thiết kế cho điện thoại trước. Trên Mythex Pro, app đã xuất bản có thể trở thành app Android cho Google Play và app iPhone gửi tới TestFlight; app điện thoại mở app đã xuất bản của bạn, nên mỗi lần Publish đều cập nhật nó. Xem trang trình tạo app di động.

Các mẫu hình đằng sau những ví dụ này

Qua cả mười ví dụ, lỗi rơi vào vài nhóm:

Không cái nào đòi hỏi bạn đọc code. Chúng đòi hỏi bạn thử như một người dùng tò mò, hơi khó chịu, và mô tả chính xác những gì mình thấy.

Tự thử một cái

Chọn ví dụ gần ý tưởng của bạn nhất, sao chép prompt đầu tiên và đổi các chi tiết. Rồi dùng prompt sửa lỗi như một danh sách kiểm tra trước khi chia sẻ. Bảng prompt vibe coding của chúng tôi có thêm 30 prompt nữa, và cách xây app bằng vibe coding dẫn một dự án từ ý tưởng đến app đã xuất bản. Khi sẵn sàng, hãy bắt đầu trong trình tạo app AI hoặc duyệt mẫu để có điểm khởi đầu.

Câu hỏi thường gặp