Landing Page Builder — CAE Pattern
Mô tả tổng quan
Skill này giúp bạn tạo một landing page chất lượng cao (theo pattern EEC của CAE Việt Nam) từ thông tin do người dùng cung cấp. Toàn bộ quy trình được thực hiện bởi Antigravity — user chỉ cần trả lời câu hỏi.
Output cuối cùng:
index.html+styles.css— landing page hoàn chỉnh, responsive, có animationsgoogle-apps-script.js— backend nhận form data → ghi Google Sheets → gửi email thông báo- Hướng dẫn từng bước deploy lên Cloudflare Pages
Kiến trúc trang EEC (blueprint chuẩn)
1. NAV — sticky, blur khi scroll, logo + links + CTA button
2. HERO — full-screen, gradient đỏ, particles, headline + subtext + 2 buttons
3. STATS BAR — 4 số liệu nổi bật, animate counter
4. WHY US — 6 feature cards với hover effects (3 cột)
5. INSTRUCTOR (tuỳ chọn) — YouTube Short embed + credentials
6. COURSES — 3 khóa học, card nổi bật ở giữa, price box
7. TIMELINE — lộ trình N tuần dạng grid
8. TESTIMONIALS — 3 review cards với stars
9. FAQ — accordion expand/collapse
10. CTA + FORM — gradient section, đăng ký form → Google Sheets + email
11. FOOTER — 3 cột: brand, khóa học, liên hệ
QUY TRÌNH (PHẢI THỰC HIỆN THEO THỨ TỰ)
PHASE 0: Scan & Context (LUÔN CHẠY ĐẦU TIÊN)
Trước khi hỏi bất cứ điều gì, kiểm tra môi trường và tìm context cũ:
-
Kiểm tra Mem0 có sẵn không:
- Thử gọi
search_memoryvới query:"landing page preference màu font domain" - Nếu tool KHÔNG tồn tại / báo lỗi → bỏ qua hoàn toàn, chuyển Phase 1 ngay, không thông báo lỗi với user
- Nếu tool có và tìm thấy → báo: "Em nhớ lần trước anh dùng [màu X / font Y / domain Z]. Lần này giữ nguyên hay thay đổi?"
- Nếu tool có nhưng không tìm thấy → tiến hành Phase 1 bình thường
- Thử gọi
-
Lưu context mới (nếu Mem0 có sẵn) — sau khi user confirm xong 7 nhóm, gọi
add_memory:Landing page [tên chiến dịch]: màu=[hex], font=Be Vietnam Pro, domain=[domain], email=[email], sheet=[link sheet]- Nếu Mem0 không có → bỏ qua bước này, không ảnh hưởng gì đến kết quả
Nguyên tắc thiết kế: Mem0 là tính năng bổ sung (progressive enhancement), không phải dependency bắt buộc. Skill phải hoạt động hoàn toàn bình thường trên máy không có Mem0.
PHASE 1: Thu thập thông tin (Hỏi từng nhóm, chờ trả lời)
⚠️ QUAN TRỌNG: Hỏi TỪNG NHÓM một. Không hỏi tất cả một lần. Sau khi user trả lời xong một nhóm mới hỏi nhóm tiếp theo.
Nhóm A — Thương hiệu & màu sắc
Hỏi:
Để tạo landing page, em cần biết một số thông tin cơ bản trước.
**Nhóm 1: Thương hiệu**
1. Tên thương hiệu/trung tâm là gì? (VD: CAE Việt Nam, Trung tâm ABC...)
2. URL logo PNG của bạn (hoặc nói "không có" để dùng text thay thế)
3. Màu chủ đạo muốn dùng?
- 🔴 Đỏ CAE (như trang EEC) — #8F1A1A + vàng gold #FEC46F
- 🔵 Xanh navy chuyên nghiệp — #1A3A5C + cyan #00C9FF
- 🟢 Xanh lá tươi — #0D6E3F + vàng #FFD700
- ✏️ Tôi muốn nhập màu khác (cung cấp mã hex)
4. Tên miền dự kiến? (VD: uudai.tentruongtoi.com hoặc "chưa có")
Nhóm B — Nội dung Hero
Sau khi nhận Nhóm A, hỏi:
**Nhóm 2: Phần đầu trang (Hero Section)**
1. Tiêu đề chính muốn hiển thị? (VD: "Học bổng 100% Tiếng Trung Học Thuật")
2. Khẩu hiệu nhỏ phía trên tiêu đề? (VD: "Chương trình thử nghiệm — Số lượng giới hạn")
3. Đoạn mô tả ngắn (1-2 câu) bên dưới tiêu đề?
4. Text nút CTA chính? (VD: "📝 Đăng ký ngay", "🎓 Nhận học bổng")
5. Có 4 con số thống kê muốn hiển thị không? (VD: 3 lớp, 100% miễn phí, 8 tuần, 15 HS/lớp)
Nhóm C — Điểm mạnh & Khóa học
Sau khi nhận Nhóm B, hỏi:
**Nhóm 3: Điểm mạnh & Sản phẩm**
1. Liệt kê 3-6 điểm mạnh của bạn (mỗi điểm gồm: emoji icon, tiêu đề ngắn, mô tả 1-2 câu)
VD: 🎓 Chương trình bản quyền | Mua bản quyền từ đối tác quốc tế...
2. Liệt kê 1-3 khóa học/gói dịch vụ (mỗi gói gồm):
- Tên khóa
- Badge nhỏ (VD: "Online · 8 tuần", "Offline · Hà Nội")
- 3-4 tính năng nổi bật
- Giá gốc (để gạch bỏ)
- Giá ưu đãi / "MIỄN PHÍ 100%" / phần trăm giảm
- Ghi chú (VD: "Chỉ 15 suất")
- Khóa nào là "nổi bật nhất"?
Nhóm D — Lộ trình & Giáo viên
Sau khi nhận Nhóm C, hỏi:
**Nhóm 4: Nội dung bổ sung**
1. Có lộ trình học theo tuần không? (Nếu có, liệt kê N tuần với tên chủ đề)
2. Có giáo viên/chuyên gia muốn giới thiệu không?
- Tên, chức danh
- Link video YouTube (optional)
- 3 chứng chỉ/thành tích nổi bật
3. Có 3 testimonials từ khách hàng không?
(Tên viết tắt, tên đầy đủ, vai trò, nội dung quote)
Nhóm E — FAQ & Liên hệ
Sau khi nhận Nhóm D, hỏi:
**Nhóm 5: FAQ & Liên hệ**
1. Liệt kê 5-7 câu hỏi thường gặp và câu trả lời?
2. Thông tin liên hệ:
- Địa chỉ văn phòng
- Hotline/Zalo
- Email
- Facebook page URL
3. Bản quyền footer: "© 2025 [Tên tổ chức]"
Nhóm F — Form & Backend
Sau khi nhận Nhóm E, hỏi:
**Nhóm 6: Form đăng ký & kết nối data**
1. Form cần thu thập những trường nào?
- [x] Họ tên (bắt buộc)
- [x] Số điện thoại (bắt buộc)
- [ ] Email
- [ ] Địa chỉ / Tỉnh thành
- [ ] Checkbox chọn khóa học
- [ ] Textarea ghi chú
- [ ] Trường khác?
2. Email nào sẽ nhận thông báo khi có người đăng ký?
(VD: [email protected])
3. Tiêu đề email thông báo muốn dùng?
(VD: "🔔 Có đăng ký mới từ Landing Page!")
4. Anh vui lòng gửi link Google Sheet mà anh muốn lưu data đăng ký vào.
(Em sẽ tạo script theo đúng các trường form ở trên, rồi hướng dẫn anh chạy trên Sheet đó)
⚠️ Sau khi user gửi link Sheet → DỪNG LẠI và chạy PHASE 2 ngay.
Nhóm G — Deploy Cloudflare
Sau khi nhận Nhóm F, hỏi:
**Nhóm 7: Thông tin deploy (bước cuối)**
1. Cloudflare Account ID của bạn?
(Vào dash.cloudflare.com → chọn tài khoản → xem URL: cloudflare.com/ACCOUNT_ID)
2. Cloudflare API Token?
(Vào My Profile → API Tokens → Create Token → dùng template "Edit Cloudflare Pages")
3. Tên project Cloudflare Pages? (chữ thường, gạch ngang, VD: my-landing-2025)
4. Custom domain muốn gán? (VD: uudai.domain.com hoặc "không cần")
PHASE 1.5 — VISION 10-STAR ⭐ (BẮT BUỘC trước khi generate)
"Không thiết kế cho hàng triệu người. Hãy thiết kế để MỘT NGƯỜI có trải nghiệm kinh ngạc nhất mà họ từng thấy." — Garry Tan
Dừng lại và trả lời 4 câu hỏi này TRƯỚC khi viết 1 dòng code:
-
Headline có "đóng đinh" không?
- Đọc headline trong 3 giây: khách hàng có biết ngay đây là dành cho họ không?
- Nếu chưa mạnh → áp dụng công thức Copy Formula trong skill này để viết lại
-
Trang này có 1 điều gì đó KHÔNG THỂ QUÊN không?
- Một con số ấn tượng? Một cam kết táo bạo? Một lợi ích bất ngờ?
- VD: "Học miễn phí 100% — Chỉ 15 suất" → rõ ràng, khan hiếm, hành động ngay
-
Điểm yếu chết người nào landing page này có thể mắc phải?
- Form quá nhiều trường? Hero không có social proof? CTA nhạt?
- Xác định và vá ngay trong design
-
Nếu Steve Jobs duyệt trang này, ông ấy sẽ cắt gì?
- Loại bỏ mọi thứ không phục vụ cho mục tiêu duy nhất: đăng ký
Output: Ghi chú Vision vào response trước khi tiếp tục:
🎯 VISION 10-STAR:
- Điểm mạnh độc đáo: [..]
- Headline chốt: [..]
- 1 điều không thể quên: [..]
- Đã cắt bỏ: [..]
FOUNDER CHALLENGE RULE (Áp dụng tại Vision Gate)
"Đóng vai CEO — nhiệm vụ là thách thức sự tầm thường, không phải ghi nhận nó."
Nếu user cung cấp headline yếu (generic, không rõ đối tượng, không có lợi ích cụ thể), KHÔNG được chấp nhận ngay. Thay vào đó:
⚡ Founder Mode:
Headline "[headline của user]" còn generic. Em đề xuất 3 alternatives mạnh hơn:
[A] [Lợi ích cụ thể] — [con số/thời gian] — [đối tượng rõ]
VD: "Học tiếng Trung học thuật miễn phí 100% — Chỉ 15 suất"
[B] [Hook câu hỏi] + [kết quả bất ngờ]
VD: "Con bạn học tiếng Trung 8 tuần — tự tin hơn học sinh quốc tế?"
[C] [Cam kết táo bạo] + [bằng chứng]
VD: "Không tiến bộ sau 4 buổi — hoàn tiền 100%, không hỏi lý do"
Anh chọn hướng nào, hoặc muốn em viết lại theo ý khác?
Khi nào challenge: Headline không có ít nhất 2 trong 3 yếu tố: (1) đối tượng rõ, (2) lợi ích cụ thể, (3) con số/cam kết.
PHASE 2: Tạo Google Apps Script (Backend)
Trigger: User đã gửi link Google Sheet (Nhóm F.4).
Bước 1 — Generate script tùy chỉnh:
Dựa trên template tại templates/google-apps-script.js, tạo ra đoạn script được customize theo đúng form của landing page:
- Điền
NOTIFICATION_EMAIL= email từ Nhóm F.2 - Điền
EMAIL_SUBJECT= tiêu đề từ Nhóm F.3 - Điền
CAMPAIGN_NAME= tên chiến dịch từ Nhóm A.1 - Cập nhật hàm
writeToSheet()để có đúng số cột khớp với trường form Nhóm F.1 - Cập nhật hàm
doPost()để parse đúng cáce.parametertheo trường đã chọn
Bước 2 — Output code block để user copy:
Sau khi generate xong, hiển thị TOÀN BỘ code trong một block duy nhất như sau:
✅ Em đã tạo xong script cho Google Sheet của anh!
Đây là mã anh cần copy và dán vào Sheet:
[CODE BLOCK]
📋 HƯỚNG DẪN CHẠY TRÊN GOOGLE SHEET CỦA ANH (5 bước):
① Mở Google Sheet anh vừa gửi link → Vào menu Extensions → Apps Script
(Hoặc click vào link Sheet đó, rồi tìm menu Extensions ở thanh trên)
② Xóa toàn bộ code mặc định trong ô soạn thảo (Ctrl+A → Delete)
③ Paste toàn bộ đoạn code em đã tạo ở trên vào (Ctrl+V)
④ Nhấn Ctrl+S để lưu → Đặt tên project là "Landing Page Handler" → OK
⑤ Deploy script:
• Click nút "Deploy" (góc phải trên) → "New deployment"
• Mục "Type": chọn "Web app"
• Mục "Execute as": chọn "Me (email của anh)"
• Mục "Who has access": chọn "Anyone"
• Click "Deploy" → Google sẽ hỏi quyền → Click "Authorize access" → Chọn tài khoản Google
• Copy URL dài xuất hiện (dạng: https://script.google.com/macros/s/.../exec)
📌 Sau khi có URL đó, paste vào đây để em gắn vào landing page.
Bước 3 — Chờ user xác nhận SHEETS_ENDPOINT URL trước khi tiếp tục PHASE 3.
PHASE 3: Generate Landing Page HTML
Dựa vào tất cả thông tin đã thu thập, tạo file index.html đầy đủ:
Cấu trúc file cần tạo:
- Một file
index.htmlduy nhất (CSS inline trong<style>tag, KHÔNG tách file riêng) - JavaScript form submission inline trong
<script>tag - Không phụ thuộc framework, chỉ vanilla HTML/CSS/JS
- Fully responsive (mobile-first)
- Sử dụng Be Vietnam Pro (load từ Google Fonts CDN) — hỗ trợ đầy đủ dấu tiếng Việt, thay thế Inter/Montserrat
Thiết kế theo pattern EEC:
- Color scheme từ Nhóm A.3
- Tất cả sections từ blueprint
- Nếu user không cung cấp instructor → bỏ section đó
- Nếu không có testimonials → bỏ section đó
- Nếu không có timeline → bỏ section đó
Form submission pattern (PHẢI DÙNG hidden iframe — tránh CORS):
const SHEETS_ENDPOINT = 'URL_GAS_CUA_USER'; // Điền URL từ Bước 2
const hiddenFrame = document.createElement('iframe');
hiddenFrame.name = 'hidden_iframe';
hiddenFrame.style.display = 'none';
document.body.appendChild(hiddenFrame);
// Khi submit: tạo form ẩn, POST đến GAS endpoint, target vào hidden iframe
// Không dùng fetch() — native form POST không bị CORS block
Backup localStorage:
// Luôn backup vào localStorage trước khi submit
const regs = JSON.parse(localStorage.getItem('lp_registrations') || '[]');
regs.push(data);
localStorage.setItem('lp_registrations', JSON.stringify(regs));
Optimistic UI + GAS Resilience (BẮT BUỘC):
// 1. Hiển thị success NGAY — không chờ GAS response
function submitForm(data) {
// Backup localStorage trước
backupToLocal(data);
// Hiện success message ngay lập tức (optimistic)
showSuccessMessage();
// Submit GAS ngầm — không block UI
submitToGAS(data).catch(() => {
// GAS fail nhưng localStorage đã có → silent retry
scheduleRetry(data);
});
}
// 2. Retry tự động nếu GAS fail
function scheduleRetry(data, attempt = 1) {
if (attempt > 3) return; // Bỏ sau 3 lần
setTimeout(() => {
submitToGAS(data).catch(() => scheduleRetry(data, attempt + 1));
}, attempt * 3000); // 3s, 6s, 9s
}
// 3. GAS timeout 10s (không để user chờ vô hạn)
async function submitToGAS(data) {
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 10000);
try {
// Dùng fetch mode no-cors (GAS không trả response body)
await fetch(SHEETS_ENDPOINT, {
method: 'POST', mode: 'no-cors',
body: new URLSearchParams(data),
signal: controller.signal
});
} finally {
clearTimeout(timeout);
}
}
Note: Mode
no-corsvớifetch+URLSearchParamslà cách thay thế hidden iframe, không bị CORS block. Dùng một trong hai tùy context.
PHASE 3.5 — BROWSER VERIFY (Trước khi deploy)
Trigger: File index.html đã được tạo xong.
Dùng browser tool để verify trước khi báo anh xem:
- Mở file trong browser (hoặc local server)
- Responsive check:
- Mobile 375px: menu không vỡ, form vừa màn hình, text không bị cắt
- Desktop 1440px: không quá rộng, layout cân đối
- UX check:
- CTA button visible above-the-fold không cần scroll
- Form submit: điền test data → kiểm tra console không có lỗi
- FAQ accordion mở/đóng hoạt động
- Scroll smooth, không giật
- Visual check:
- Màu sắc đúng palette đã chọn
- Font load đúng (Be Vietnam Pro)
- Không còn placeholder text nào
- Screenshot và báo cáo: Chụp màn hình desktop + mobile, gửi cho user xem trước
⚠️ PHẢI PASS hết checklist này trước khi chạy PHASE 3.6 Refine và PHASE 4 Deploy.
PHASE 3.6 — REFINE PASS (Đánh bóng)
Sau khi user confirm nội dung OK, thực hiện 1 lượt polish:
- Micro-animations: Thêm
fade-inkhi scroll vào từng section (IntersectionObserver) - Hover effects: Button scale nhẹ khi hover (
transform: scale(1.03)) - CTA pulse: Nút đăng ký chính có subtle pulse animation để thu hút mắt
- Counter animate: Các con số stats (3 lớp, 500+ HS) đếm lên khi vào viewport
- Form feedback: Hiển thị loading state khi submit, success message sau khi gửi
- Nav blur: Khi scroll xuống, nav có
backdrop-filter: blureffect
Nguyên tắc: Mỗi animation phải có mục đích — dẫn ánh mắt đến CTA, không làm xao nhãng.
PHASE 4: Deploy lên Cloudflare Pages
Sau khi có đủ thông tin Nhóm G:
- Tạo thư mục deploy:
landing-deploy/
├── public/
│ └── index.html
└── (không cần file khác)
- Deploy bằng Wrangler:
PowerShell (Windows):
$env:CLOUDFLARE_ACCOUNT_ID="ID_TU_NHOM_G"
$env:CLOUDFLARE_API_TOKEN="TOKEN_TU_NHOM_G"
npx wrangler pages deploy ./landing-deploy/public --project-name "PROJECT_NAME"
Bash (Mac/Linux):
CLOUDFLARE_ACCOUNT_ID="ID" CLOUDFLARE_API_TOKEN="TOKEN" \
npx wrangler pages deploy ./landing-deploy/public --project-name "PROJECT_NAME"
- Gán Custom Domain (nếu có):
Sau khi deploy thành công, vào Cloudflare Dashboard:
- Pages → [project] → Custom Domains → Add Custom Domain
- Nhập domain → Cloudflare sẽ tự thêm CNAME record nếu domain đang quản lý trên CF
- Nếu domain ở registrar khác: thêm CNAME record trỏ đến
*.pages.dev
- Thông báo hoàn thành:
✅ Landing page đã live!
🌐 URL mặc định: https://PROJECT_NAME.pages.dev
🔗 Custom domain: https://CUSTOM_DOMAIN (mất 1-5 phút propagate)
📊 Để xem data đăng ký: mở Google Sheets của bạn
📧 Email thông báo gửi đến: EMAIL_NHOM_F
- Production Verify (PHẢI LÀM — Evidence-based):
Sau khi URL live, dùng browser tool chạy production checklist:
🔍 PRODUCTION VERIFY:
[ ] Mở URL live trong browser → page load < 3s
[ ] Mobile 375px: layout đúng, không bị vỡ
[ ] Điền form test: Họ tên="Test User", SĐT="0900000000"
[ ] Submit → hiện success message ngay (optimistic)
[ ] Mở Google Sheet → confirm row mới xuất hiện
[ ] Check email admin → confirm email thông báo đến
[ ] Screenshot URL live + Sheet data → gửi anh xem
⛔ TUYỆT ĐỐI KHÔNG báo "Done" trước khi production verify pass. Proof of Work bắt buộc.
CHECKLIST HOÀN THÀNH
- Thu thập đủ 7 nhóm thông tin
- Tạo file google-apps-script.js và hướng dẫn user deploy
- User xác nhận đã có SHEETS_ENDPOINT URL
- Generate index.html đầy đủ (tất cả sections)
- User xem preview và confirm OK
- Deploy lên Cloudflare Pages thành công
- Test form: điền thông tin giả, kiểm tra data xuất hiện trong Sheet
- Gán custom domain (nếu có)
- Báo cáo URL live cho user
LƯU Ý QUAN TRỌNG
- Không bao giờ deploy trước khi user confirm nội dung HTML — phải cho user xem preview trước
- SHEETS_ENDPOINT phải được user xác nhận trước khi tạo HTML — không để placeholder trong file cuối
- Form submission PHẢI dùng hidden iframe pattern — không dùng fetch() với JSON vì bị CORS
- Luôn có localStorage backup — dữ liệu không bao giờ bị mất ngay cả khi GAS fail
- CSS phải inline trong
<style>— landing page 1 file duy nhất, dễ deploy
KHI GẶP VẤN ĐỀ
- Wrangler báo lỗi auth: Kiểm tra lại Account ID và Token permissions (cần "Edit Cloudflare Pages")
- GAS không nhận data: Kiểm tra "Execute as: Me" và "Who has access: Anyone" khi deploy
- Form submit nhưng không có data trong Sheet: Mở Google Sheet → Extensions → Apps Script → Executions để xem log lỗi
- Custom domain không hoạt động: Đợi 5-10 phút hoặc kiểm tra DNS propagation tại whatsmydns.net
DESIGN REFERENCE PROTOCOL (Khi user gửi screenshot / URL mẫu)
Khi user nói "làm như trang này", "tham khảo design này", hoặc cung cấp URL/ảnh chụp màn hình, thực hiện phân tích theo 8 chiều trước khi code:
Chiều 1 — Layout Architecture
- Cấu trúc tổng thể: single column, split-screen, asymmetric, grid-based?
- Thứ tự sections (hero, features, pricing, v.v.)
- Content width: full-bleed, contained (max-width), mixed?
- Vertical rhythm: section spacing compact / normal / generous?
Chiều 2 — Màu sắc
- Màu brand chính (dominant hue)
- Màu phụ / accent
- Màu CTA button
- Background từng section (gradient? solid? alternating?)
- Dark mode hay light mode?
→ Map sang CSS variables:
--primary: #HEX;
--secondary: #HEX;
--cta: #HEX;
--bg: #HEX;
Chiều 3 — Typography
- Font heading: sans-serif, serif, display, monospace?
- Font body: clean sans, humanist, geometric?
- Hierarchy: mức độ tương phản h1/h2/body?
- Letter-spacing, line-height đặc trưng?
- Hiệu ứng text đặc biệt: gradient text, outlined, rotated?
→ Map sang Google Fonts (Be Vietnam Pro ưu tiên cho tiếng Việt)
Chiều 4 — Components
Liệt kê mọi component nhìn thấy:
- Nav: fixed? transparent? floating pill?
- Hero: centered text, split image+text, video background?
- Cards: shadow, border, rounded, hover?
- Buttons: rounded, pill, ghost, gradient, icon+text?
- Forms: inline, stacked, multi-step?
- Badges/tags, Icons, Dividers, Footer
Chiều 5 — Spacing & Sizing
- Section padding: compact / normal / generous?
- Card gaps, Border radius, Shadow depth?
- Max-width content area?
Chiều 6 — Visual Effects
- Background patterns (dots, grid, noise, blobs)
- Scroll animations (fade-in, slide-up, parallax)
- Hover effects (scale, shadow, color change)
- Gradient, Blur, Glassmorphism?
- Decorative floating elements?
Chiều 7 — Content Density
- Text-heavy vs visual-heavy?
- Số lượng CTA trên trang?
- Social proof density?
- Whitespace: minimal, moderate, generous?
Chiều 8 — Vietnam Adaptation
- Font hỗ trợ dấu tiếng Việt không?
- Cần thêm VietQR/SePay không?
- Trust signals phù hợp thị trường VN?
- Mobile-first (70%+ người dùng VN dùng mobile)?
Build Plan Template
Sau phân tích 8 chiều, tạo bản kế hoạch:
DESIGN BUILD PLAN
==================
Layout: [mô tả]
Màu chính: [hex] | Phụ: [hex] | CTA: [hex]
Font heading: [font] | Body: [font]
Components cần: [list]
Effects đặc biệt: [list]
Sections (top→bottom):
1. [tên section] — [mô tả]
2. [tên section] — [mô tả]
Độ phức tạp: [Thấp/Trung/Cao]
Nguyên tắc quan trọng:
- Bắt chước tinh thần, không clone pixel-perfect
- Cải thiện điểm yếu của bản gốc (mobile UX kém, thiếu CTA...)
- Luôn adapt cho thị trường VN (font, VietQR, trust signals)
- Không copy logo/ảnh có bản quyền
COPY FORMULAS (Công thức viết nội dung)
Headlines
| Công thức | Ví dụ |
|---|---|
| [Lợi ích] mà không cần [nỗi đau] | "Học tiếng Trung bài bản mà không tốn cả đống tiền" |
| Từ [hiện tại] đến [mong muốn] trong [thời gian] | "Từ zero đến giao tiếp tự nhiên trong 8 tuần" |
| Câu hỏi hook: Bạn có muốn [kết quả]? | "Bạn có muốn con tự tin nói tiếng Trung trước lớp?" |
Subheadlines
| Công thức | Ví dụ |
|---|---|
| [Sản phẩm] giúp [đối tượng] [lợi ích] để [mục tiêu cao hơn] | "Khóa học giúp học sinh THPT nắm vững ngữ pháp để tự tin thi HSK" |
| Social Proof: Cùng [số lượng]+ [đối tượng] đã [kết quả] | "Cùng 500+ học viên đã nói được tiếng Trung sau 8 tuần" |
CTA Buttons
| Công thức | Ví dụ |
|---|---|
| [Hành động] + [lợi ích] | "Đăng ký ngay — Miễn phí 100%" |
| [Giải quyết rào cản] + [kết quả] | "Thử nghiệm 2 buổi — Không ưng hoàn tiền" |
Social Proof Snippets
[Số lượng]+ học viên đã tin tưởng[Đánh giá]/5 sao từ [số lượng] phụ huynhHọc bổng duy nhất tại [thành phố]Được [tổ chức uy tín] chứng nhận
SEPAY / VIETQR (Thanh toán online — Vietnam)
Thêm section này nếu landing page cần thu phí online:
<!-- SePay VietQR Embed -->
<section id="payment" class="payment-section">
<div class="container">
<h2>Hoàn tất đăng ký — Thanh toán ngay</h2>
<p>Quét mã QR bằng app ngân hàng để thanh toán trong 30 giây</p>
<div class="qr-wrapper">
<img
src="https://my.sepay.vn/qr?bank={{BANK_ID}}&acc={{ACCOUNT_NUMBER}}&amount={{AMOUNT}}&des={{ORDER_ID}}"
alt="VietQR Thanh toán"
width="256" height="256"
/>
</div>
<p class="order-id">Mã đơn: <strong>{{ORDER_ID}}</strong></p>
<p class="payment-note">Thanh toán tự động xác nhận trong vòng 30 giây</p>
</div>
</section>
Cần điền:
{{BANK_ID}}— Mã ngân hàng (VD: VCB, TCB, MB...){{ACCOUNT_NUMBER}}— Số tài khoản thụ hưởng{{AMOUNT}}— Số tiền (VD: 500000){{ORDER_ID}}— Mã đơn hàng (auto-generate bằng JS:LP_${Date.now()})
DESIGN SYSTEM REFERENCE
→ Xem bảng màu đầy đủ và font pairings tại: references/design-data.md
Quick pick theo loại sản phẩm:
| Loại | Màu chính | CTA | Font |
|---|---|---|---|
| Giáo dục / Khóa học | #0D9488 | #EA580C | Be Vietnam Pro |
| Restaurant / F&B | #DC2626 | #CA8A04 | Be Vietnam Pro |
| Luxury / Premium | #1C1917 | #CA8A04 | Playfair Display |
| SaaS / Software | #2563EB | #F97316 | Poppins |
| Healthcare | #0891B2 | #059669 | Lora |
| Fitness / Gym | #DC2626 | #16A34A | Space Grotesk |
| CAE (mặc định) | #8F1A1A | #FEC46F | Be Vietnam Pro |
QUALITY CHECKLIST (trước khi deliver)
Responsive
- Mobile 375px: menu, form, images đúng
- Tablet 768px: layout 2 cột nếu có
- Desktop 1440px: không quá rộng
Performance
- Không có ảnh nặng > 200KB
- Google Fonts load đúng
- Không có console errors
Conversion
- CTA chính visible above-the-fold
- CTA lặp lại ít nhất 2 lần
- Social proof có trong hero section
- Form không quá 5 trường
Nội dung
- Không còn placeholder text
- Font hỗ trợ tiếng Việt (Be Vietnam Pro)
- Tất cả ảnh có alt text
- Footer có địa chỉ + hotline
Backend
- Form submit test thành công
- Data xuất hiện trong Google Sheet
- Email thông báo gửi đến admin
- localStorage backup hoạt động
Technical
- HTML5 valid
- Meta tags đầy đủ (title, description, OG)
- Favicon có (dù chỉ là emoji favicon)