MODULE 3

CODE-HOÁ BẰNG AI

Cô Lan đã có copy hoàn chỉnh 9 section từ Module 2 — chữ thật, đã soát lại, giữ đúng giọng khách hàng. Module này biến đúng chữ đó thành 1 trang web thật, mở được bằng trình duyệt, upload được lên Cloudflare Pages.

Cô Lan không tự viết một dòng HTML nào. AI viết toàn bộ. Việc của cô Lan là đưa đúng 2 thứ vào, và kiểm tra đúng chỗ cần kiểm tra.

Bước 3.1

Một khung mẫu + một prompt = một trang riêng của bạn

Xong bước này bạn có: Hiểu cơ chế 2 mảnh ghép ra 1 trang — và biết mình cần khung mẫu nào trước khi làm bước tiếp theo.

Hai mảnh ghép, không mảnh nào thiếu được

Mỗi mẫu trong Cửa hàng mẫu của kit gồm đúng 2 file:

DESIGN.md — hệ thống thiết kế: màu gì, font gì, khoảng cách bao nhiêu, nút bấm bo góc thế nào, và vì sao chọn vậy cho đúng mô hình kinh doanh của khung đó.
prompt-code-hoa.md — prompt sẵn, dán vào AI kèm 2 thứ: nội dung DESIGN.md và copy 9 section từ Module 2 của bạn.

Không có DESIGN.md, AI sẽ tự chọn màu/font theo "gu" riêng của nó — thường ra một trang xanh dương nhạt bo tròn rất quen mắt, giống hàng nghìn trang AI khác đã tạo. Đây là khác biệt giữa "nhờ AI viết code" và "nhờ AI viết code theo đúng một hệ thống thiết kế đã nghĩ kỹ".

Ba khung, ba hệ thống thiết kế khác hẳn nhau

Bạn đã chọn khung ở bước 2.1. Mỗi khung có một DESIGN.md riêng, thiết kế đúng cho cách bán hàng của khung đó — không phải đổi màu qua loa:

Khung	Cảm giác	Vì sao
KHOÁ HỌC	Ấm áp, biên tập — kem/nâu than, chữ serif, nút bo tròn	Giáo viên/chuyên gia cần cảm giác con người, đáng tin
COACHING 1-1	Tối giản, sang, ít chi tiết — nền đen ấm, vàng champagne tiết chế	Giá cao + giới hạn số lượng cần trông chọn lọc, không đại trà
WORKSHOP	Tương phản cao, chữ đặc, một màu rực — nền than, đỏ cam banner sự kiện	Bán sự khẩn cấp của một ngày giờ, không phải sự yên tâm dài hạn

Cô Lan đã chọn khung KHOÁ HỌC ở bước 2.1 — module này dùng đúng khung đó làm ví dụ chạy thật từ đầu đến cuối.

⚠️ Ba lỗi hay gặp

Dùng DESIGN.md của khung này cho copy đã viết theo khung khác. Copy khung WORKSHOP có nhắc "chỉ diễn ra một buổi duy nhất" nhưng lại dùng DESIGN.md khung KHOÁ HỌC (không có chỗ cho đồng hồ đếm ngược) — hai bên đá nhau.

Nghĩ có thể bỏ qua DESIGN.md, dán mỗi copy cho nhanh. Bạn sẽ nhận lại một trang chạy được nhưng nhìn như mọi trang AI khác — đúng thứ Module này cố tránh.

Chưa mua mẫu đã cố tự bịa một DESIGN.md. Viết hệ thống thiết kế cần biết rõ mình đang đánh đổi gì (màu này nói lên điều gì, spacing này phục vụ mục đích gì) — đây là công việc chuyên môn, không phải điền vào chỗ trống. Dùng mẫu có sẵn trong Cửa hàng mẫu trước, tự viết là chuyện của sau này khi đã quen.

Bước 3.2

Chạy prompt code-hoá, nhận về 1 file HTML

Xong bước này bạn có: 1 file index.html thật, mở được bằng trình duyệt ngay trên máy — chưa cần deploy.

📋 PROMPT — Code-hoá landing page từ DESIGN.md + copy

Đây đúng là prompt đi kèm mẫu KHOÁ HỌC trong Cửa hàng mẫu:

Bạn là một front-end developer. Nhiệm vụ: viết ra 1 file HTML DUY NHẤT,
hoàn chỉnh, có thể mở thẳng bằng trình duyệt và upload lên Cloudflare Pages
mà không cần bước build nào khác.

Tôi đính kèm:
- DESIGN.md: hệ thống thiết kế (màu, font, spacing, component) — BẮT BUỘC bám
  sát theo đúng các giá trị trong đó, không tự ý đổi màu/font/bo góc.
- COPY: chữ thật cho từng section, đã đánh số theo thứ tự.

YÊU CẦU KỸ THUẬT:
1. Một file HTML duy nhất. Dùng Tailwind qua thẻ
   <script src="https://cdn.tailwindcss.com"> ở <head>. Không dùng npm/build
   step nào khác.
2. KHÔNG chèn bất kỳ ảnh nào từ URL ngoài (không <img src="https://...">).
   Toàn bộ hình ảnh/trang trí dựng bằng CSS (gradient, shape, border) hoặc SVG
   viết inline ngay trong HTML.
3. Responsive đầy đủ ở 3 mốc: 375px (điện thoại), 768px (tablet), 1280px
   (desktop). Chữ không tràn, nút CTA không vỡ dòng xấu.
4. Giữ đúng thứ tự section như trong COPY, không thêm section nào ngoài danh
   sách, không bớt section nào.
5. Giữ NGUYÊN VĂN mọi câu trích dẫn khách hàng trong COPY — không viết lại,
   không sửa dấu câu.
6. Ở vị trí cuối cùng (sau CTA cuối), chèn 1 khối
   <div id="thanh-toan"></div> trống — đây là chỗ dành cho khối thanh toán QR
   sẽ được thêm ở Module 4. ĐỪNG tự viết nội dung thanh toán vào đây.
7. Toàn bộ chữ, số liệu phải lấy đúng từ COPY tôi đưa — không tự thêm
   testimonial, tên người, hay con số nào không có trong đó. Nếu thấy COPY
   thiếu gì để trang hoàn chỉnh, hỏi tôi trước khi tự bịa.

Sau khi xong, lưu thành file index.html.

--- DESIGN.md ---
[DÁN NỘI DUNG FILE DESIGN.md CỦA KHUNG BẠN ĐÃ MUA]

--- COPY ---
[DÁN COPY 9 SECTION TỪ MODULE 2 Ở ĐÂY]

Lý do dòng số 2 (không ảnh ngoài) đứng riêng thành một yêu cầu kỹ thuật: đây là nguyên nhân phổ biến nhất khiến trang "chạy tốt trên máy AI" nhưng vỡ ảnh khi đưa lên Cloudflare Pages — link ảnh AI tự chèn (thường là ảnh minh hoạ từ một nguồn ngẫu nhiên) không tồn tại thật.

✅ Kết quả thật — đã chạy, không phải mô phỏng

Đoạn này không phải ví dụ dựng sẵn. Prompt trên đã được dán vào một phiên Claude hoàn toàn mới, không biết gì về cô Lan trước đó — đúng như học viên sẽ trải nghiệm — kèm DESIGN.md khung KHOÁ HỌC và copy 9 section ở Module 2. Sau 164 giây, kết quả trả về:

Đã tạo file index.html hoàn chỉnh với: ✅ Một file HTML duy nhất — Tailwind qua CDN, không cần build step ✅ Không có ảnh từ URL ngoài — toàn bộ hình ảnh/trang trí dùng CSS, gradient, và SVG inline ✅ Responsive đầy đủ (375px / 768px / 1280px) ✅ Bám sát DESIGN.md — màu cream/charcoal/terracotta/olive, font Source Serif 4 + Inter, spacing đúng quy cách ✅ Giữ nguyên văn COPY — testimonial, giá, bonus, FAQ đều y hệt ✅ Thứ tự section đúng — Hero → Nỗi đau → Nhận diện → Cơ chế → Nội dung → Giá & Bonus → Bảo đảm → FAQ → CTA cuối ✅ Khối #thanh-toan trống để bạn thêm QR code sau

Mở file bằng trình duyệt thật: trang hiển thị đúng, 0 lỗi console, câu "Em nghe hiểu hết mà tới lượt em nói là đứng hình." xuất hiện nguyên văn, giá 2.900.000đ đúng khớp Brief Offer, không có testimonial bịa nào chen vào. File nặng 24.5KB — nhẹ, tải tức thì.

Đây là bằng chứng prompt này chạy được thật, không chỉ đọc nghe hợp lý.

⚠️ Ba lỗi hay gặp

Quên dán DESIGN.md, chỉ dán copy. AI vẫn viết ra một trang — nhưng là trang theo gu riêng của nó, không phải hệ thống thiết kế bạn đã mua.

Dán copy chưa soát ở bước 2.4. Trang code xong rồi mới phát hiện câu nguyên văn bị sai — sửa lại lúc này phải sửa trong code HTML, khó hơn nhiều so với sửa văn bản thường.

Thấy AI hỏi lại vì thiếu dữ liệu rồi tự trả lời bừa cho xong. Nếu AI báo "COPY thiếu phần X", quay lại Module 2 bổ sung thật, đừng bịa tại chỗ chỉ để trang trông đầy đủ.

Bước 3.3

Sửa lỗi AI hay mắc khi code

Xong bước này bạn có: Danh sách kiểm tra 5 lỗi phổ biến nhất, và câu lệnh sửa nhanh cho từng lỗi mà không cần đọc hiểu code.

Vì sao vẫn phải kiểm tra dù prompt đã chặn kỹ

Prompt ở bước 3.2 đã cấm ảnh ngoài, đã ép responsive, đã ép giữ nguyên văn — nhưng AI viết code vẫn có tỷ lệ sai sót riêng của việc sinh mã, khác với sai sót viết chữ ở Module 2. Đây là 5 lỗi hay gặp nhất, xếp theo tần suất:

Lỗi	Cách phát hiện	Cách sửa
Nút CTA trỏ `#thanh-toan` nhưng không cuộn tới đúng chỗ	Bấm thử nút, xem có nhảy đúng xuống cuối trang	Báo AI: "nút CTA số X không cuộn đúng tới #thanh-toan, sửa lại anchor"
Chữ tràn khung ở màn hình điện thoại	Thu nhỏ cửa sổ trình duyệt xuống ~375px, cuộn hết trang	Báo AI: "ở màn hình 375px, section Y bị tràn chữ, sửa cho khớp khung"
Màu chữ chìm vào màu nền (không đọc được)	Nhìn bằng mắt ở cả 2 kiểu nền (sáng/tối) nếu khung có xen kẽ	Báo AI: "chữ ở section Z bị chìm màu nền, tăng độ tương phản đúng theo DESIGN.md"
Emoji hoặc icon lạ không có trong DESIGN.md tự xuất hiện	Đọc lướt tìm icon "vui vẻ" không hợp phong cách khung đã chọn	Báo AI: "bỏ icon ở mục này, DESIGN.md không có icon kiểu này"
Số trong bảng giá/bonus bị làm tròn hoặc gõ nhầm 1 số 0	Đối chiếu từng con số với Brief Offer gốc, không đọc lướt	Báo AI: "giá ở section GIÁ đang ghi sai, số đúng là [X], sửa lại"

Nguyên tắc khi báo lỗi cho AI

Không cần viết prompt dài — chỉ cần nói đúng 3 phần: section nào, sai cái gì, nên thành gì. AI đang giữ nguyên toàn bộ file trong ngữ cảnh, chỉ cần chỉ đúng chỗ là đủ, không cần dán lại cả file.

✅ Kết quả mẫu — Kiểm tra bản của cô Lan

Chạy đủ 5 mục kiểm tra ở trên: cả 5 đều qua ngay từ lần đầu — không cần sửa. File có 9 thẻ <section>, không dòng nào gọi <img src="http...">, nút CTA cả hai chỗ đều trỏ đúng href="#thanh-toan". Đây không phải lúc nào cũng may mắn — nhờ prompt ở 3.2 đã chặn đúng từ đầu, phần lớn lỗi không có cơ hội xảy ra.

⚠️ Ba lỗi hay gặp

Kiểm tra trên máy tính rồi bỏ qua điện thoại. Hơn một nửa người xem trang bán khoá học sẽ xem trên điện thoại trước — lỗi tràn chữ chỉ hiện ở đó.

Sửa lỗi bằng cách tự mở code chỉnh tay dù không biết code. Rủi ro gõ sai một dấu ngoặc làm hỏng cả file. Luôn nhờ AI sửa lại và gửi trả bản đầy đủ mới.

Kiểm tra một lần, sửa xong không kiểm tra lại. Mỗi lần AI sửa 1 lỗi có rủi ro nhỏ tạo lỗi khác ở chỗ AI vừa đụng vào. Lặp lại đủ 5 mục sau mỗi lần sửa.

Bước 3.4

🔒 Trước khi sang Module 4

Mở index.html bằng cách nhấp đúp vào file — không cần deploy gì để kiểm tra bước này.

Tự kiểm bốn câu:

Đã kiểm đủ 5 mục ở bước 3.3 chưa, kể cả trên khung điện thoại?
Khối <div id="thanh-toan"></div> còn ở cuối trang, chưa bị AI tự viết nội dung vào chưa?
Mở Developer Tools (F12) → tab Console — có dòng đỏ nào không? Có thì báo AI sửa trước khi qua Module 4.
File có đặt đúng tên index.html chưa? Cloudflare Pages cần đúng tên này để nhận diện trang chủ.

Nếu có ô chưa tick, quay lại bước 3.3. Module 4 sẽ chèn thẳng khối thanh toán vào file này — file càng sạch, khối thanh toán càng ít khả năng đụng lỗi có sẵn.

← Module 2 Module 4 →