Bộ prompt và design system tạo landing page bằng AI
Bốn prompt dùng xuyên suốt series và file design system landing page (sườn 20 section, thành phần cơ bản, luật cân đối, hiệu năng, SEO, bảo mật). Không cần đăng ký.
Năm nguyên tắc làm landing page không bị "giọng AI"
Sườn 20 section và bố cục nên dùng cho từng section
Thành phần cơ bản: header, footer, logo, favicon, ảnh chia sẻ, sitemap, llms.txt
Checklist cân đối, hiệu năng, SEO và bảo mật
Bốn prompt bên dưới
Cách dùng
Claude Code: chép file vào thư mục dự án, rồi dán prompt dựng trang.
ChatGPT hoặc Claude: đính kèm file, dán prompt viết nội dung.
Mỗi vòng sửa: chụp màn hình chỗ chưa ưng, dán prompt góp ý.
Trước khi đăng: dán prompt soát cuối.
1
Prompt dựng trang (Claude Code)
Dùng khi bạn có thư mục dự án và muốn AI dựng trang hoàn chỉnh.
Bạn là designer kiêm dev front-end. Đọc file landing-page-ai-kit.md (design system) trước khi làm.
Nhiệm vụ: dựng trang bán hàng dài cho <tên sản phẩm>, song ngữ Việt/Anh, giao diện sáng/tối,
đủ thành phần cơ bản: header, footer, logo, favicon, ảnh chia sẻ, robots.txt, sitemap, llms.txt, trang 404.
Dữ kiện thật (chỉ được dùng những thứ này):
- Sản phẩm làm được: <danh sách tính năng đã kiểm>
- KHÔNG được ghi: <danh sách tính năng chưa có>
- Khách thật đã đồng ý nêu tên: <tên, logo, website>
- Số liệu: <số, nguồn, mốc thời gian>
- Ưu đãi, cam kết, giá: <có gì ghi đó; không có thì bỏ section>
Yêu cầu:
1. Theo sườn 20 section, mỗi section một bố cục riêng, không lặp kiểu lưới thẻ.
2. Nội dung để riêng một file dữ liệu (vi + en), component chỉ hiển thị.
3. Mockup điện thoại vẽ bằng code, dữ liệu mẫu, ghi rõ "giao diện minh hoạ".
4. Logo đối tác lấy từ nguồn có giấy phép, kèm file giấy phép.
5. Tuân thủ phần cân đối, hiệu năng, SEO, bảo mật trong design system.
6. Xong thì build, chụp toàn trang ở máy tính 1280px và điện thoại 390px, sáng và tối, tự soát từng đoạn,
sửa hết lỗi lệch rồi mới báo. Báo cáo 4 nhóm: Đã xác nhận, Giả định, Còn thiếu, Việc tiếp theo.
Chưa đưa lên mạng khi tôi chưa duyệt.
2
Prompt viết nội dung (ChatGPT / Claude)
Dùng khi bạn chưa có môi trường lập trình, cần nội dung và một file HTML.
Đóng vai copywriter và designer landing page cho thị trường Việt Nam.
Sản phẩm: <tên>. Khách hàng: <ai>. Dữ kiện thật: <dán>. Không được bịa số liệu, khách hàng, giá, chính sách.
Trang gồm header (logo, menu, nút kêu gọi), footer (pháp nhân, chính sách, liên hệ), favicon và ảnh chia sẻ.
Viết nội dung theo 20 section: ưu đãi, hero, dải nền tảng, bảng so sánh cách cũ và cách mới, lợi ích,
3 trụ cột tính năng, tính năng phụ, câu chuyện, lộ trình, nhận được gì, ưu đãi, đội hỗ trợ, chi phí,
khách hàng, số liệu, cam kết, lý do triển khai trực tiếp, 3 bước bắt đầu, 12 câu hỏi thường gặp, lời kêu gọi cuối.
Hành văn như các phần mềm Việt chuyên nghiệp: tiêu đề là cụm danh từ có định vị, tính năng là cụm động từ,
khó khăn của khách viết thành câu hỏi, xưng "chúng tôi", câu đủ chủ vị, không câu cụt kiểu dịch, không dùng dấu gạch dài.
Section nào thiếu dữ kiện thì ghi [CẦN BỔ SUNG: ...] thay vì tự nghĩ ra.
Sau đó xuất 1 file HTML dùng Tailwind từ CDN (ghi rõ phiên bản), mở trực tiếp là chạy.
Ảnh đính kèm là chỗ tôi chưa ưng: <mô tả>. Tìm nguyên nhân gốc trước (ví dụ độ rộng khung, số ô lưới,
hiệu ứng nặng), nói ngắn nguyên nhân, sửa cách nhỏ nhất an toàn, rồi chụp lại đúng đoạn đó gửi tôi so.
Rà luôn những chỗ khác trên trang bị cùng lỗi.
4
Prompt soát cuối trước khi đăng
Dùng trước khi đưa trang lên mạng.
Soát trang <địa chỉ chạy thử> theo checklist: không số liệu bịa; mọi tính năng có trong danh sách đã kiểm;
không dấu gạch dài; lưới không ô lẻ; không chữ đứng một mình ở dòng cuối; điện thoại không bị cuộn ngang;
sáng và tối đều đọc được; cuộn không rung; canonical, sitemap, dữ liệu có cấu trúc, ảnh chia sẻ đúng;
header bảo mật đủ; không lộ khoá bí mật trong mã nguồn. Liệt kê lỗi theo mức độ, chưa sửa khi tôi chưa đồng ý.
Bạn được dùng cho dự án của mình và của khách hàng. Vui lòng không bán lại nguyên bộ.
Tham gia cộng đồng MonkeyTech
Nơi hỏi đáp về AI Agent, bot Zalo, Telegram và tự động hoá, cùng tin công cụ và bài viết mới.