Landing Page Builder

Giới thiệu

Phần lớn landing page do AI sinh ra đều hỏng theo cùng một kiểu: đẹp nhưng không bán được gì. Vì agent nhảy thẳng vào viết code sau một câu mô tả mơ hồ, nên ra một trang trông ổn mà không ai biết nó nói với ai và muốn người đọc làm gì. Skill này chặn đúng chỗ đó bằng cách ép đi qua ba pha, không cho tắt đường. Pha một, nó đặt lên bàn danh sách 23 khối chuẩn của một trang bán hàng — từ hero, dải logo tin cậy, khối khoét nỗi đau, lưới tính năng, các bước hoạt động, đánh giá khách hàng, bảng so sánh, bảng giá, FAQ, cho tới khối chốt cuối — để bạn chọn lấy và xếp thứ tự. Rồi hỏi 20 câu: sản phẩm là gì, khách hàng là ai, nỗi đau lớn nhất của họ, hành động bạn muốn họ làm, đã có sẵn nội dung hay chưa, dùng stack nào, tông muốn nghiêm túc hay đời thường. Pha hai, mọi câu trả lời được chốt thành một file plan trong dự án: thứ tự khối, nội dung từng khối, bảng màu, cặp font, kiến trúc component, phần nào bạn tự viết chữ và phần nào để AI viết. Bạn đọc và sửa file này trước khi có một dòng code nào được tạo — đây là lúc chỉnh hướng còn rẻ. Pha ba mới là dựng, làm xong gọn từng khối một và báo tiến độ. Phần code bám các nguyên tắc chuyển đổi cụ thể chứ không chỉ cho đẹp: tiêu đề chính dưới 10 từ, nút hành động phải nổi bật hẳn về thị giác, thẻ giá nêu rõ gói khuyến nghị, đánh giá phải đủ tên - vai trò - công ty. Về thẩm mỹ, skill chủ động né những dấu vết khiến người ta nhận ra ngay là AI làm: font mặc định, gradient tím, bố cục rập khuôn. Không khoá bạn vào một stack nào. HTML thuần, React, Next.js, Vue, Astro hay Tailwind đều được, chọn ở pha một.

Điểm nổi bật

• 23 khối landing page chuẩn bày sẵn để chọn, không phải tự nhớ thiếu khối nào
• 20 câu hỏi ép làm rõ khách hàng và mục tiêu chuyển đổi trước khi viết dòng code đầu tiên
• Chốt plan thành file để bạn sửa — đổi hướng ở bước này rẻ hơn nhiều so với sửa code
• Quy tắc chuyển đổi cụ thể: tiêu đề dưới 10 từ, nút hành động áp đảo thị giác, thẻ giá nêu rõ gói khuyến nghị
• Chủ động né dấu vết AI: không font mặc định, không gradient tím, không bố cục rập khuôn
• Dựng xong từng khối là báo, không đổ một cục code khổng lồ cuối cùng
• Kèm chuẩn kỹ thuật: HTML ngữ nghĩa, mobile-first, tương phản màu và trạng thái focus đạt yêu cầu tiếp cận
• Không khoá stack: HTML thuần, React, Next.js, Vue, Astro, Tailwind

Skill chạy thế nào

1. Skill bày danh sách 23 khối chuẩn để bạn chọn và xếp thứ tự
2. Hỏi 20 câu về sản phẩm, khách hàng, mục tiêu chuyển đổi, nội dung sẵn có, stack và tông giọng
3. Sinh file LANDING_PAGE_PLAN.md: thứ tự khối, bảng màu, cặp font, kiến trúc component, phần nội dung ai viết
4. Bạn đọc plan, sửa hoặc duyệt — chưa có dòng code nào được tạo ở bước này
5. Dựng lần lượt từng khối theo plan, xong khối nào báo khối đó
6. Tổng kết: liệt kê nội dung giữ chỗ cần thay và gợi ý bước tiếp theo như deploy hay gắn analytics