CẨM NANG VIBE CODING CHO NGƯỜI “MÙ CÔNG NGHỆ”
Tự tay tạo website bán hàng, tích hợp thanh toán VietQR SePay tự động và tự động bắn email giao sản phẩm số sau 1 buổi tối mà không cần biết code.
📚 Mục Lục Cuốn Sách
- Lời nói đầu: Câu chuyện của một người từng sợ code
- Chương 1: "Vibe Coding" là cái quái gì? (Giải thích cho bé lớp 5)
- Chương 2: Chuẩn bị "Hộp đồ nghề" 0 đồng
- Chương 3: Bắt đầu Vibe Coding — Tạo Landing Page đầu tiên trong 15 phút
- Chương 4: Gắn "Máy hút tiền tự động" SePay (Quét QR là tiền về tài khoản)
- Chương 5: Tự động bắn email gửi sản phẩm số (Khách không phải chờ 1 giây)
- Chương 6: Đưa website lên toàn thế giới với Cloudflare Pages (3 phút)
- Phụ lục: Bộ 10 Prompt "Vibe Coding Thần Thánh"
- Lời kết: Bấm nút là thắng!
Lời Nói Đầu: Câu Chuyện Của Một Người Từng Sợ Code
Chào bạn, mình là Hiền Đỗ.
Nếu bạn đang đọc cuốn cẩm nang này với nỗi sợ: "Mình gõ Word còn chậm, nhìn vào mấy dòng code loằng ngoằng dấu chấm phẩy là hoa mắt chóng mặt, liệu có làm nổi không?" — thì xin chúc mừng, cuốn sách này sinh ra là dành riêng cho bạn!
Trước đây, mỗi khi muốn làm một cái Landing Page để bán một cuốn ebook, một khóa học hay một sản phẩm số, chúng ta thường có 3 lựa chọn:
- Thuê coder / agency: Mất từ 5 đến 20 triệu. Đợi 2 tuần. Đến khi sửa một cái nút bấm hay đổi màu nền lại phải nhắn tin van nài, chờ họ rảnh mới sửa giúp.
- Dùng các nền tảng kéo thả: Tháng nào cũng phải trả tiền thuê bao tiền triệu. Muốn tích hợp thanh toán tự động QR code hay gửi mail chuẩn chỉnh lại phải mò mẫm cắm plugin phức tạp, lỗi lên lỗi xuống.
- Bỏ cuộc: Thôi bán hàng thủ công, khách mua thì bảo khách “Chụp màn hình chuyển khoản gửi em kiểm tra nhé”. Nửa đêm khách mua mà mình ngủ quên, sáng hôm sau dậy khách đòi hủy đơn vì chờ lâu.
Nhưng thế giới đã thay đổi hoàn toàn nhờ AI và một khái niệm mới toanh có tên là VIBE CODING.
Trong 21 ngày thử thách thực chiến với AI Agent, mình đã tự tay dựng website, kết nối thanh toán tự động SePay, cho AI tự viết bài, tự chốt đơn và gửi hàng cho khách 24/7 mà không cần viết một dòng code nào bằng tay.
Hôm nay, mình gói gọn toàn bộ công thức “thần thánh” này vào cuốn cẩm nang bạn đang đọc. Mình sẽ không dùng bất kỳ thuật ngữ đao to búa lớn nào. Mọi thứ sẽ được ví von sinh động như đồ chơi Lego, để bạn vừa đọc vừa cười, vừa làm theo vừa thấy sướng khi thấy hệ thống tự động “ting ting” tiền về tài khoản.
Chương 1: "Vibe Coding" Là Cái Quái Gì?
1.1. Coder ngày xưa vs. Vibe Coder ngày nay
Hãy tưởng tượng việc xây một ngôi nhà:
- Lập trình truyền thống (Coding kiểu cũ): Bạn phải tự tay trộn từng xô xi măng, đặt từng viên gạch, tính toán từng milimet đường ống nước. Sai một dấu chấm phẩy (;) là cả ngôi nhà sập, màn hình báo lỗi đỏ lòm, ngồi mò 3 đêm không ngủ.
- Vibe Coding (Thời đại AI): Bạn là Chủ Nhà kiêm Giám Đốc Sáng Tạo. Bạn ngồi rung đùi uống trà, còn AI là một anh Thợ Xây Siêu Phàm biết làm mọi thứ trong 3 giây.
- Bạn chỉ cần bảo: “Ê anh thợ, xây cho tôi cái phòng khách màu kem hiện đại, có cái ghế sofa màu be và một cái tivi 85 inch treo tường nhé!”
- Anh AI: “Dạ xong ngay thưa sếp!” (Xoạch một cái, phòng khách hiện ra).
- Bạn nhìn vào bảo: “Ừm, cái ghế hơi to, dịch sang trái 20cm và đổi sang màu xanh pastel cho tôi.”
- Anh AI gật đầu: “Xong luôn sếp ơi!”
👉 Vibe Coding hiểu đơn giản là: Bạn chỉ cần giữ “VIBE” (tâm trạng, mong muốn, ý tưởng), diễn đạt bằng tiếng Việt đời thường, còn việc viết code, máy móc, cú pháp thì để AI làm 100%!
1.2. Giải ngố 4 thuật ngữ nghe phát hiểu luôn
| Thuật ngữ kỹ thuật | Nhân vật đời thực dễ hiểu | Nhiệm vụ trong hệ thống |
|---|---|---|
| Landing Page (Trang đích) | Tờ rơi điện tử biết nói | Trang web 1 trang duy nhất, giới thiệu sản phẩm thật cuốn hút và có nút bấm “Mua Ngay”. |
| SePay (Cổng VietQR) | Anh Kế Toán ngồi canh tài khoản 24/7 | Tạo mã QR ngân hàng cho khách quét. Khách vừa chuyển tiền xong là anh soi thấy ngay trong 1 giây. |
| Webhook | Tiếng còi hú báo tin | Khi SePay thấy tiền vào, nó sẽ “bấm còi” hú cho website biết: “Này, đơn hàng số 123 đã trả đủ 49.000đ rồi nhé, giao hàng mau!” |
| Email Tự Động (Resend / Mailer) | Chú bồ câu đưa thư siêu tốc | Ngay khi nghe tiếng còi, chú bồ câu lập tức ngậm mã code đăng nhập bay thẳng vào hộp thư của khách. |
Chương 2: Chuẩn Bị “Hộp Đồ Nghề” 0 Đồng
Để bắt đầu, bạn không cần phải mua máy tính cấu hình khủng hay phần mềm đắt đỏ. Tất cả những gì bạn cần đều MIỄN PHÍ:
Dụng cụ 1: "Người thợ xây AI" (Cursor / Claude / Antigravity / ChatGPT)
Tải Cursor AI (cursor.com) hoặc mở trình duyệt chat với Claude 3.7 / ChatGPT 4o. Bạn chỉ cần gõ yêu cầu bằng tiếng Việt, AI sẽ tạo toàn bộ mã lệnh.
Dụng cụ 2: "Ngôi nhà trên mạng" (Cloudflare Pages hoặc Workers)
Bình thường thuê hosting bạn mất 1-2 triệu/năm. Với Cloudflare, bạn được lưu trữ website MIỄN PHÍ TRỌN ĐỜI, tải trang cực nhanh, bảo mật HTTPS và gắn tên miền riêng miễn phí như vibecode.dothihien.com.
Dụng cụ 3: "Anh kế toán canh tiền" (SePay.vn)
Đăng ký tài khoản tại sepay.vn và kết nối tài khoản ngân hàng (MB Bank, Techcombank, Vietcombank...). Tiền khách chuyển chạy thẳng 100% vào tài khoản của bạn, không bị giữ tiền hay qua trung gian.
Chương 3: Bắt Đầu Vibe Coding — Tạo Landing Page Đầu Tiên Trong 15 Phút
3.1. Công thức "Ra Lệnh 3 Tầng" cho người không biết code
Đừng bao giờ nói với AI một câu cộc lốc: “Làm cho tôi cái web bán sách”. Hãy ra lệnh theo 3 tầng:
- Tầng 1: Đặt vai trò + Đối tượng (Role & Audience): “Bạn là chuyên gia thiết kế web chuyển đổi cao. Hãy làm cho tôi một trang bán cuốn Ebook Vibe Coding dành cho người không biết kỹ thuật.”
- Tầng 2: Cung cấp nội dung & cảm xúc (Content & Vibe): “Phong cách tối giản, hiện đại, nền tối sang trọng phối cam rực rỡ. Đầy đủ các phần: Tiêu đề, Nỗi đau, Giải pháp, 6 chương, Bảng giá và Form đặt mua.”
- Tầng 3: Yêu cầu kỹ thuật đóng gói (Tech Spec): “Viết tất cả vào đúng 1 file index.html duy nhất, có sẵn CSS làm đẹp và JS cuộn mượt xuống khung thanh toán.”
3.2. Mẫu Prompt “Ăn Ngay” (Copy - Paste là có web đẹp)
Bạn là một chuyên gia UI/UX và lập trình viên Frontend hàng đầu.
Hãy tạo cho tôi một Landing Page bán Ebook "Vibe Coding Cho Người Mù Công Nghệ" hoàn chỉnh, chuyên nghiệp, tỷ lệ chuyển đổi cao, nằm gọn trong ĐÚNG 1 FILE index.html duy nhất (chứa cả HTML, CSS hiện đại và JS).
Yêu cầu chi tiết về thiết kế và cấu trúc:
1. Về thẩm mỹ (Vibe):
- Phong cách hiện đại, typography font Plus Jakarta Sans / Inter sắc nét.
- Màu sắc chủ đạo: Xanh Đen Navy (#0B0F19), Trắng xám (#F8FAFC), điểm nhấn Nút Mua màu Cam rực (#F97316 hoặc #EA580C).
- Giao diện chuẩn Mobile-first, hiển thị mượt mà trên cả điện thoại và máy tính.
2. Cấu trúc các khối (Sections):
- Header: Logo VibeCode, Nút "Đọc Ebook Online".
- Hero Section: Tiêu đề cuốn hút (Học sinh lớp 5 cũng tự làm được web bán hàng tự động), mô tả 2 dòng, mock-up cuốn sách, giá ưu đãi 49.000đ (giá gốc 197.000đ) và nút kêu gọi hành động (CTA).
- Section 1 (Nỗi đau): 3 rào cản lớn nhất (Sợ code, Thuê ngoài tốn kém, Bán hàng thủ công mất ngủ).
- Section 2 (Bên trong cuốn sách): 6 chương học thực chiến (Mỗi chương có icon và 3 gạch đầu dòng tóm tắt).
- Section 3 (Quà tặng kèm): 3 bonus cực giá trị (Bộ 50 Prompt Vibe Coding, File mẫu kết nối SePay 1-click, Danh sách 10 công cụ AI 0 đồng).
- Section 4 (Bảng giá & Đặt hàng): Form điền thông tin (Họ tên, Email nhận sách, Số điện thoại) và hiển thị khung thanh toán Quét mã VietQR.
- Section 5 (FAQ & Cam kết): 4 câu hỏi thường gặp và chính sách hoàn tiền nếu không làm được.
Hãy viết code đầy đủ, sạch đẹp, không dùng mã rút gọn để tôi có thể lưu file và chạy được ngay!
Chương 4: Gắn "Máy Hút Tiền Tự Động" SePay (Quét QR Là Tiền Về)
Khách thanh toán quét mã QR là tiền về tài khoản ngân hàng chính chủ của bạn trong tích tắc.
Cách hoạt động của cổng VietQR SePay:
- Khi khách điền Họ tên và Email trên web, hệ thống sinh ra mã đơn (ví dụ:
DH8899). - Hệ thống hiển thị mã VietQR động theo chuẩn link SePay:
https://qr.sepay.vn/img?acc=0550115713008&bank=MBBank&amount=49000&des=MA_DON - Khách mở App ngân hàng (MB, Vietcombank, Techcombank...) quét mã và bấm Chuyển khoản.
- SePay phát hiện tiền đã vào tài khoản, gửi webhook tự động thông báo giao dịch thành công.
Chương 5: Tự Động Gửi Mã Xác Nhận Đăng Nhập Qua Email
Sau khi khách thanh toán thành công, hệ thống không bắt khách phải nhớ mật khẩu rườm rà.
Mỗi lần vào đọc tại vibecode.dothihien.com/ebook, khách hàng chỉ cần nhập Email của mình. Hệ thống sẽ tự động gửi một Mã code xác thực 6 số về hộp thư. Nhập đúng mã là vào đọc ngay lập tức!
Cách làm này vừa bảo mật tuyệt đối, vừa tiện lợi vì khách hàng không bao giờ sợ bị "quên mật khẩu".
Chương 6: Đưa Website Lên Toàn Thế Giới Với Cloudflare (3 Phút)
Chỉ cần triển khai qua Cloudflare Workers, bạn đã có một website chạy toàn cầu với tên miền riêng tuyệt đẹp như vibecode.dothihien.com.
- Không lo sập web khi có hàng nghìn người truy cập cùng lúc.
- Bảo mật SSL / HTTPS ổ khóa xanh miễn phí.
- Chi phí máy chủ: 0 đồng!
Phụ Lục: Bộ 10 Prompt "Vibe Coding Thần Thánh"
- Sửa giao diện vỡ trên Mobile: “Trang web hiện trên iPhone tiêu đề bị tràn lề. Hãy kiểm tra CSS media query và chỉnh lề 16px hai bên cân đối.”
- Đổi phong cách giao diện: “Đổi toàn bộ tông màu sang Dark Mode hiện đại (nền xám đen #0B0F19, viền xanh neon #38BDF8, nút bấm cam rực).”
- Viết lại giọng văn: “Viết lại các đoạn giới thiệu theo phong cách tâm tình, đời thường, vui vẻ của một người bạn.”
- Thêm đồng hồ đếm ngược: “Thêm thanh countdown timer 2 giờ 15 phút tạo tính cấp bách ở đầu trang.”
- Thêm thông báo mua hàng: “Thêm popup thông báo nhảy lên ở góc màn hình: 'Anh Nam vừa đăng ký Ebook cách đây 2 phút'.”
- Tối ưu tốc độ tải trang: “Dọn dẹp mã nguồn, tối ưu font và script để web tải dưới 1 giây.”
- Tạo trang Cảm Ơn: “Tạo trang thông báo thành công với thông tin tài khoản đăng nhập đọc sách và nút vào đọc ngay.”
- Kịch bản video ngắn TikTok/Reels: “Viết kịch bản video 60 giây quay màn hình chứng minh làm web trong 30 giây.”
- Biểu mẫu đánh giá: “Thêm form chấm 5 sao và để lại nhận xét ở cuối trang.”
- Xử lý từ chối trong FAQ: “Liệt kê 5 lý do người mới ngần ngại và viết câu trả lời thuyết phục.”
Lời Kết: Bấm Nút Là Thắng!
Sự khác biệt duy nhất giữa một người có nguồn thu nhập thụ động trên mạng và một người mãi loay hoay không phải là ai giỏi code hơn, mà là ai dám bắt đầu và đưa sản phẩm ra trước mắt khách hàng sớm hơn.
Khoảnh khắc điện thoại của bạn rung lên: “Ting ting! +49.000 VND — Thanh toan don hang Ebook Vibe Coding”, đó sẽ là giây phút bạn nhận ra: Cuộc chơi kinh doanh online đã chính thức thuộc về bạn!
Hiền Đỗ
Từ Thử Thách AI Agent 21 Ngày — Khu Phố 3