# Bộ prompt và design system tạo landing page bằng AI > Phát hành miễn phí bởi MonkeyTech (https://monkeytech.vn) trong series "Tạo landing page chuyên nghiệp bằng AI". > Trang thư viện: https://monkeytech.vn/thu-vien/landing-page > > Cách dùng: với Claude Code, đặt file này trong thư mục dự án (hoặc chép vào CLAUDE.md) rồi dùng prompt ở phần I. > Với ChatGPT hoặc Claude, đính kèm file này và dán prompt I.2. > 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ộ. --- ## A. Năm nguyên tắc vàng 1. **Không bịa.** Không số liệu, testimonial, logo khách, giá, chính sách hoàn tiền, "chỉ còn X suất" nếu chủ sản phẩm chưa xác nhận. Thiếu thì hỏi, hoặc bỏ section đó. Số liệu thật phải ghi mốc thời gian ("tính đến tháng 09/2026") và làm tròn có dấu `+`. 2. **Tính năng phải đối chiếu với sản phẩm thật** (code, tài liệu, màn hình). Viết theo tài liệu giới thiệu cũ rất dễ dính tính năng không có thật. Luôn lập danh sách "KHÔNG được ghi". 3. **Hành văn bản địa, không phải bản dịch.** Tiếng Việt viết như phần mềm Việt chuyên nghiệp, tiếng Anh viết như SaaS quốc tế. 4. **Mỗi section một bố cục, mọi lưới phải cân.** Lặp mãi một kiểu "lưới thẻ có icon" là dấu hiệu trang do AI làm. Không để ô lẻ, không để một chữ rơi xuống dòng cuối, hai khối cạnh nhau phải cao bằng nhau. 5. **Kiểm bằng mắt trước khi báo xong.** Chụp toàn trang ở desktop 1280px và mobile 390px, sáng và tối, rồi tự soi từng đoạn. Đo độ mượt khi cuộn. "Chắc là ổn" là chưa xong. --- ## B. Sườn trang bán hàng dài (20 section, bản trung thực) Sườn trang bán hàng dài, đã đổi những section dễ thành "bịa" (khan hiếm giả, hoàn tiền chưa có chính sách) sang bản dùng dữ kiện thật. | # | Section | Mục đích | Bố cục nên dùng | Ghi chú trung thực | |---|---|---|---|---| | 1 | Thanh ưu đãi | Lý do hành động ngay | Dải gradient một dòng trên cùng | Chỉ ghi ưu đãi có thật (dùng thử, miễn phí cài đặt). Không đếm ngược giả | | 2 | Hero | Ai, được gì, vì sao tin | 2 cột: chữ trái, 1-2 khung điện thoại phải | H1 là tên sản phẩm, dòng phụ là định vị; 3 dòng tạo tin có thật | | 3 | Dải nền tảng | Kết nối với thứ khách đang dùng | Logo chạy ngang, mờ 2 mép, thu hẹp 4xl | Chỉ ghi kết nối thật, không ghi thứ chỉ "hiện mã QR" | | 4 | Khó khăn | Khách thấy mình trong đó | **Bảng so sánh** Truyền thống / Dùng sản phẩm | Cột phải nổi khối, có logo; mobile thành thẻ trên-dưới | | 5 | Lợi ích | Vì sao chọn | 4 cột chữ có vạch trên, không bọc thẻ | Mỗi ý 1 tiêu đề + 2-3 câu | | 6 | Ba trụ cột tính năng | Giải pháp sâu | Một khung lớn, hàng xen kẽ chữ/hình, nền gạch chéo | Mỗi hàng: nhãn, tiêu đề, đoạn, 4 gạch đầu dòng, 1 mockup | | 7 | Tính năng phụ | Đủ đầy | **Lưới bento** 3 cột, ô rộng ở vị trí 1, 4, 5 | 6 ô, 3 hàng đều đủ 3 phần | | 8 | Câu chuyện | Người dẫn đường | Khối có **tab**: Câu chuyện / Cam kết / Cách triển khai + 3 ô số | Chỉ kể sự kiện có thật (năm bắt đầu, số bản cập nhật) | | 9 | Lộ trình | Biết sẽ diễn ra gì | Các bước số 01-06 nối bằng đường kẻ, không thẻ | Không ghi số ngày nếu chưa chắc | | 10 | Nhận được gì | Giá trị cụ thể | Danh sách check + ô ghi chú yêu cầu kỹ thuật ở đáy | | | 11 | Ưu đãi / quà | Đẩy quyết định | Khối gradient vàng cạnh khối 10, cao bằng nhau | Quà phải có thật và chi phí đã tính | | 12 | Đội hỗ trợ | Sau khi mua có ai lo | 4 cột chia vạch trong 1 khung (khe 1px) | Pháp nhân, MST, kênh hỗ trợ thật | | 13 | Chi phí | Minh bạch | 1 khung chia đôi: "đã bao gồm" / "phát sinh", dải CTA ở đáy | Không có giá thì ghi "báo giá theo quy mô", vẫn liệt kê khoản phát sinh | | 14 | Khách hàng | Bằng chứng xã hội | Khối **kính mờ**: logo khách nổi khối + tên | Chỉ khách thật, đã đồng ý; logo lấy từ chính website khách | | 15 | Số liệu | Quy mô thật | Số vàng dày kiểu 3D, chia vạch dọc, cùng khối 14 | Ghi nguồn và mốc thời gian | | 16 | Cam kết | Giảm rủi ro | Nằm trong tab của section 8 | Không viết "hoàn tiền 100%" nếu chưa có chính sách | | 17 | Vì sao triển khai trực tiếp | Thay cho "lý do giới hạn" | Nằm trong tab của section 8 | Giải thích thật, không tạo khan hiếm giả | | 18 | 3 bước bắt đầu | Hành động dễ | 3 thẻ căn giữa + nút | | | 19 | Hỏi đáp | Gỡ phản đối | 2 cột: tiêu đề + nút đứng yên bên trái, accordion bên phải | 10-14 câu, mỗi câu đánh vào một nỗi đau ở section 4. Khai báo JSON-LD FAQPage | | 20 | Lời kêu gọi cuối | Chốt | Khối gradient, chữ trái, mockup phải | Lặp lại ưu đãi | --- ## B2. Thành phần cơ bản bắt buộc (ngoài các section) | Thành phần | Yêu cầu tối thiểu | |---|---| | Header | Logo (bấm về trang chủ), menu 4-6 mục, nút CTA chính, đổi ngôn ngữ/giao diện nếu có; mobile có menu gọn hoặc thanh dưới | | Footer | Tên pháp nhân, mã số thuế, địa chỉ, điện thoại, email; liên kết chính sách dữ liệu cá nhân, điều khoản, thanh toán, hoàn tiền, khiếu nại; mạng xã hội | | Logo | Bản ngang (header), bản biểu tượng vuông (favicon, app), bản trên nền sáng và nền tối | | Favicon | `favicon.ico` 32px, PNG 192 và 512 (PWA), `apple-touch-icon` 180, `manifest.webmanifest` | | Ảnh chia sẻ (OG) | 1200x630 có tên + câu định vị; ảnh vuông 1200x1200 chỉ logo; khai `og:title`, `og:description`, `og:image`, `twitter:card` | | Tiêu đề, mô tả | `` 50-60 ký tự, meta description 140-160 ký tự, có từ khoá chính | | SEO kỹ thuật | `robots.txt`, `sitemap.xml`, canonical, JSON-LD, trang 404 riêng | | `llms.txt` | Tóm tắt sản phẩm cho trợ lý AI, đặt ở `/llms.txt` | | Biểu mẫu liên hệ | Có kiểm dữ liệu, giới hạn gửi, thông báo về Zalo/email/Lark | | Đo truy cập | Đếm không cookie hoặc có banner đồng ý nếu dùng công cụ bên thứ ba | --- ## D. Bố cục và độ cân đối (checklist cho người khó tính) - Tiêu đề, phụ đề: `text-wrap: balance`; đoạn văn, gạch đầu dòng: `text-wrap: pretty`. Khung tiêu đề căn giữa rộng `max-w-4xl`, phụ đề `max-w-3xl`. Hết cảnh một chữ rơi xuống dòng cuối. - Số ô trong lưới chia hết cho số cột ở **mọi** cỡ màn hình. 5 ô trên mobile 2 cột thì ô cuối `col-span-2`. - Hai khối cạnh nhau: `flex flex-col` + nút/ghi chú `mt-auto` dồn xuống đáy, để không có khoảng trống lơ lửng. - Hai khối nội dung dài ngắn khác nhau (chi phí) thì gộp vào **một khung chia đôi**, đừng để 2 thẻ lệch. - Tiêu đề cột trong bảng so sánh: chữ to, có biểu tượng mỗi bên, tên dài thì `whitespace-nowrap` từ `lg`. - Khung điện thoại: cao theo nội dung; khi đặt 2 cái cạnh nhau thì `items-stretch` để bằng nhau, thanh tab ghim đáy bằng `mt-auto`. - Vạch chia nhiều cột: dùng khe `gap-px` trên nền màu vạch, đúng ở mọi số cột (đỡ phải tính border từng ô). - Mỗi section cách nhau đều (`mt-20 md:mt-28`), container `max-w-6xl`, lề `px-4 sm:px-6 md:px-10`. --- ## E. Hình ảnh và logo - **Mockup bằng code** (HTML/Tailwind) với dữ liệu mẫu ("Tiệm Demo"), ghi rõ "Giao diện minh hoạ với dữ liệu mẫu". Không chụp màn hình khách thật (lộ tên, số điện thoại). - **Avatar người thật**: bộ ảnh demo TailAdmin (giấy phép MIT), kèm file `LICENSE` trong thư mục ảnh. - **Logo nền tảng**: lấy từ https://thesvg.org (CC0, có `api/registry.json` để tìm). Không vẽ lại. Nền tảng nào không có thì dùng chữ, hoặc bỏ nếu không phải kết nối thật. - **Logo khách**: lấy từ chính website khách (khách đã đồng ý), để thư mục riêng `public/clients/`. - **Logo sản phẩm của bạn**: lấy từ bộ nhận diện gốc, không tự vẽ lại. - Ảnh chia sẻ: OG 1200x630 có chữ + ảnh vuông 1200x1200 chỉ có logo (Google cắt vuông). --- ## F. Chuyển động và hiệu năng (lỗi rung khi cuộn đã gặp) - **Không** để lớp lớn (phủ cả màn hình) chạy animation liên tục: sao lấp lánh, nền trôi, quầng sáng `filter: blur` + `scale`. Trên màn Retina GPU phải vẽ lại suốt lúc cuộn, gây rung. Nền để tĩnh; muốn có chuyển động thì dùng phần tử nhỏ chỉ đổi `transform/opacity` (ví dụ vệt sao băng). - Quầng sáng dùng `radial-gradient(closest-side, ...)` để tắt hẳn trước mép hộp, không bị cạnh cứng. - `backdrop-filter` (kính mờ) chỉ dùng cho 1-2 khối, nền phía sau phải tĩnh. - Dải logo chạy ngang: `will-change: transform`, chậm (khoảng 48s một vòng), giãn cách rộng, **tạm dừng khi trang đang cuộn**, mờ 2 mép bằng `mask-image`, tắt hẳn khi `prefers-reduced-motion`. - Cuộn mượt (Lenis): `lerp` khoảng 0.12. Thấp hơn thì đuôi cuộn dài, trackpad Mac bị rung. - Đo: cuộn bằng Playwright, CPU chậm 4 lần, đếm khung hình trên 25ms; rồi thử thật trên máy Retina. --- ## G. SEO và AI tìm thấy - Dựng sẵn HTML (SSG) cho từng trang; canonical đúng; sitemap tự sinh; JSON-LD `SoftwareApplication` + `FAQPage` + `BreadcrumbList`. - Slug theo tên sản phẩm. **Đổi slug thì chuyển hướng 301 phía máy chủ** (giữ UTM), cập nhật mọi liên kết nội bộ, sitemap, ảnh OG, rồi xin Google index URL mới trong Search Console. - Đo lượt xem không cookie, không lưu IP để khỏi vướng chính sách dữ liệu cá nhân. --- ## H. Bảo mật chuẩn dev (tối thiểu trước khi lên mạng) - **Bí mật** (API key, token, mật khẩu) chỉ ở biến môi trường hoặc kho bí mật; không vào git, ảnh chụp, video, ghi chú. Quét trước khi commit (`gitleaks` hoặc tương đương). Quay video thì che `.env` và thanh địa chỉ có token. - **HTTP header**: `Strict-Transport-Security`, `X-Content-Type-Options: nosniff`, `X-Frame-Options: SAMEORIGIN`, `Referrer-Policy: strict-origin-when-cross-origin`, `Permissions-Policy` tắt camera, micro, vị trí, thanh toán. Nên thêm `Content-Security-Policy`. - **Form và API**: kiểm dữ liệu phía máy chủ, giới hạn số lần gửi (rate limit), kiểm `Origin`, chặn bot (honeypot hoặc Turnstile), không đặt thông tin cá nhân trên URL, trả lỗi chung chung. - **Phụ thuộc**: `npm audit`, ghim phiên bản, script ngoài chỉ từ CDN có phiên bản cố định. - **Pháp lý**: trang chính sách dữ liệu cá nhân, điều khoản, thông tin pháp nhân ở footer; giấy phép ảnh, logo. - **Quy trình**: nếu đẩy mã lên nhánh chính là tự đưa lên mạng thì phải có người duyệt; mỗi bản phát hành một commit `release: vX.Y.Z`, chi tiết ở `CHANGELOG.md`; không `git push --force`. --- ## I. Bộ prompt ### I.1 Prompt chính cho Claude Code (dự án có code) ``` 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> tại <đường dẫn>, song ngữ VI/EN, sáng/tối, đủ thành phần cơ bản ở phần B2 (header, footer, logo, favicon, ảnh OG, robots, sitemap, llms.txt, 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ục B, mỗi section đúng bố cục đã ghi, không lặp kiểu lưới thẻ. 2. Nội dung tách riêng một file dữ liệu (vi + en), component chỉ hiển thị. 3. Mockup điện thoại bằng code, dữ liệu mẫu, ghi "giao diện minh hoạ". 4. Logo nền tảng lấy từ thesvg.org, avatar từ bộ có giấy phép, kèm file giấy phép. 5. Theo mục D (cân đối), F (hiệu năng), G (SEO), H (bảo mật). 6. Xong thì build, chụp toàn trang desktop 1280 và mobile 390, sáng và tối, tự soi 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 commit, chưa deploy khi tôi chưa duyệt. ``` ### I.2 Prompt rút gọn cho ChatGPT / Claude chat (không có môi trường code) ``` Đó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 CTA), footer (pháp nhân, chính sách, liên hệ), favicon và ảnh chia sẻ. Viết nội dung trang theo 20 section: ưu đãi, hero, dải nền tảng, bảng so sánh cách cũ/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, 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 đề cụm danh từ có định vị, tính năng là cụm động từ, khó khăn dạng 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 CDN có phiên bản cố định, chạy được khi mở trực tiếp. ``` ### I.3 Prompt góp ý (dùng mỗi vòng sửa) ``` Ả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, animation nặng), nói ngắn nguyên nhân, sửa 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. ``` ### I.4 Prompt soát cuối trước khi lên mạng ``` Soát trang <URL local> 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ữ mồ côi; mobile không cuộn ngang; sáng/tối đều đọc được; cuộn không rung; canonical, sitemap, JSON-LD, ảnh OG đúng; header bảo mật đủ; không lộ bí mật trong code. Liệt kê lỗi theo mức độ, chưa sửa khi tôi chưa đồng ý. ```