Đây là dự án thực hành kết hợp kiến thức từ các bài Vibe Coding là gì và Cursor AI — bạn sẽ tự xây một landing page hoàn chỉnh, từ ý tưởng đến sản phẩm thật, trong một buổi thực hành.
Trả lời nhanh
Dự án xây landing page bằng Vibe Coding gồm 4 giai đoạn: mô tả ý tưởng cho Cursor AI, xem và tinh chỉnh kết quả, hoàn thiện nội dung, publish qua Netlify/Vercel. Hoàn thành trong một buổi, có thể đưa vào portfolio cá nhân.
Mục tiêu dự án
Tạo một landing page giới thiệu sản phẩm/dịch vụ (hoặc bản thân) hoàn chỉnh: có phần giới thiệu, hình ảnh, danh sách lợi ích, và form thu thập thông tin (email/số điện thoại) — hoàn toàn bằng Vibe Coding, không viết tay một dòng code.
Chuẩn bị trước khi bắt đầu
- Cài đặt Cursor (xem hướng dẫn cài đặt ở bài “Cursor AI là gì”)
- Xác định rõ: landing page này giới thiệu cái gì? Đối tượng xem là ai? Hành động muốn họ thực hiện là gì (để lại email, mua hàng, đăng ký)?
- Chuẩn bị nội dung văn bản cơ bản: tiêu đề chính, 3-5 lợi ích/tính năng, lời kêu gọi hành động (CTA)
Giai đoạn 1: Mô tả ý tưởng cho AI (15 phút)
Mở Cursor, mở khung Chat/Agent, mô tả chi tiết: “Tạo một landing page HTML đơn giản giới thiệu [sản phẩm/dịch vụ của bạn]. Cấu trúc gồm: phần hero với tiêu đề lớn và nút CTA, phần giới thiệu ngắn, phần liệt kê 4 lợi ích chính có icon, và form thu email ở cuối trang. Màu chủ đạo là [màu bạn muốn], phong cách tối giản, hiện đại.”
Giai đoạn 2: Xem kết quả và tinh chỉnh (30 phút)
- Mở file HTML được tạo bằng trình duyệt để xem kết quả ban đầu
- Yêu cầu chỉnh sửa cụ thể: “Đổi màu nút CTA thành xanh đậm hơn”, “Thêm ảnh ở phần hero”, “Làm phần lợi ích thành dạng 2 cột trên desktop”
- Lặp lại bước xem-chỉnh sửa nhiều lần đến khi đạt yêu cầu
Giai đoạn 3: Hoàn thiện nội dung (20 phút)
Thay thế nội dung mẫu (placeholder) bằng nội dung thật của bạn — tiêu đề, mô tả, lợi ích cụ thể. Yêu cầu Cursor giúp viết lại nội dung nếu cần văn phong hấp dẫn hơn.
Giai đoạn 4: Publish landing page (15 phút)
Có nhiều cách đưa landing page lên internet thật, miễn phí:
- Netlify/Vercel — kéo-thả file HTML lên, có link công khai ngay
- GitHub Pages — phù hợp nếu bạn đã có tài khoản GitHub
Kết quả mong đợi sau dự án
Một landing page thật, có thể chia sẻ link cho người khác xem — không phải file demo trên máy bạn. Đây là sản phẩm thực tế bạn có thể đưa vào portfolio cá nhân (xem bài Xây portfolio cá nhân của NEU.vn).
Mở rộng dự án (tùy chọn)
Sau khi hoàn thành landing page cơ bản, có thể nâng cấp tiếp: kết nối form với Google Sheets qua Zapier/n8n để tự động lưu thông tin người đăng ký, hoặc thêm animation đơn giản cho phần hero.
Câu hỏi thường gặp
1. Dự án này mất bao lâu để hoàn thành?
Khoảng 1.5-2 giờ nếu làm theo đúng 4 giai đoạn, có thể nhanh hơn nếu đã quen thuộc với Cursor.
2. Có cần biết HTML/CSS trước khi làm dự án này không?
Không cần — đây chính là điểm mạnh của Vibe Coding, bạn chỉ cần mô tả bằng ngôn ngữ tự nhiên.
3. Publish landing page có mất phí không?
Không — Netlify và Vercel đều có bản miễn phí đủ dùng cho landing page cá nhân.
4. Có thể dùng landing page này cho mục đích gì sau khi hoàn thành?
Có thể dùng giới thiệu sản phẩm/dịch vụ thật, hoặc đưa vào portfolio cá nhân để thể hiện kỹ năng thực hành.
5. Nếu gặp lỗi khi làm theo hướng dẫn thì sao?
Mô tả lỗi cụ thể cho Cursor (chụp ảnh lỗi hoặc copy thông báo lỗi), AI thường tự sửa được phần lớn lỗi cơ bản.
Hoàn thành dự án này, bạn sẽ tự tin rằng việc tạo ra sản phẩm số không còn là rào cản chỉ dành riêng cho người biết lập trình.