AI coding agent build landing page rất nhanh, nhưng kết quả thường rơi vào một khuôn mẫu quen thuộc: font Inter, gradient tím-xanh, 3 card đều nhau, tên sản phẩm/placeholder nghe rất "AI". Landing Page Pro là bộ skill (nhiều file SKILL.md) dạy cho Claude Code hoặc bất kỳ AI coding agent nào cách build frontend có chủ đích thiết kế, né được các lỗi rập khuôn đó. Bài này hướng dẫn cài đặt và cách viết yêu cầu (brief) để ra kết quả tốt nhất.
Bạn sẽ học được gì
- Bộ skill này gồm những file gì, dùng skill nào cho trường hợp nào
- 2 cách cài đặt: gắn vào project có sẵn hoặc dùng nhanh không cần project
- Cách viết brief để skill tự suy ra đúng phong cách bạn muốn
- Mẹo nâng cao: tự chỉ định thông số, audit lại kết quả trước khi nhận
Bộ skill này gồm những gì?
Landing Page Pro là một bộ chỉ dẫn — không chỉ 1 file. Skill chính (flagship) là landing-page-pro, dùng cho hầu hết trường hợp. Các skill còn lại là lớp bổ sung: phong cách riêng, pipeline ảnh→code, audit project có sẵn... Phần hướng dẫn này tập trung vào skill chính; cách dùng các skill khác tương tự, chỉ đổi đường dẫn file. Bạn không cần biết code — chỉ cần mô tả rõ sản phẩm và mong muốn, Claude sẽ tự áp dụng quy tắc trong skill khi viết code.
Bước 1: Cài đặt
Mỗi skill là 1 file SKILL.md trong folder skills/<tên-skill>/. Có 2 cách dùng tùy bạn đã có project code hay chưa.
Cách 1 — Dùng với Claude Code (khuyến nghị)
- Copy toàn bộ folder skills/ (hoặc chỉ skill bạn cần) vào trong project code của bạn, cùng cấp với code
- Mở Claude Code trong project đó
- Gõ: "Đọc file skills/landing-page-pro/SKILL.md và áp dụng quy tắc đó khi build landing page cho tôi."
- Từ lúc này, mô tả yêu cầu landing page của bạn — Claude sẽ tự tuân theo skill
Mẹo: có thể kết hợp nhiều skill trong cùng 1 yêu cầu, ví dụ: "Áp dụng skills/landing-page-pro/SKILL.md làm chuẩn chính, cộng thêm skills/quiet-luxury/SKILL.md cho phong cách."
Cách 2 — Dùng nhanh, không cần project có sẵn
Mở Claude Code (hoặc Claude.ai), dán toàn bộ nội dung file SKILL.md vào đầu tin nhắn, theo sau là yêu cầu của bạn. Cách này phù hợp khi bạn muốn build nhanh 1 trang demo mà chưa có project sẵn.
Bước 2: Cách viết brief để có kết quả tốt nhất
Skill tự suy ra 3 thông số ẩn — STRUCTURE (bố cục), MOTION (chuyển động), DENSITY (mật độ thông tin) — dựa vào cách bạn mô tả. Bạn không cần biết thuật ngữ kỹ thuật, chỉ cần mô tả bằng lời tự nhiên, nhưng nên có đủ các phần sau:
- Sản phẩm/dịch vụ là gì — để nội dung không bị chung chung, ví dụ "Phần mềm quản lý lịch hẹn cho spa/salon"
- Đối tượng khách hàng — ảnh hưởng tới tông giọng, độ "an toàn" của thiết kế, ví dụ "Chủ salon nhỏ, không rành công nghệ"
- Phong cách mong muốn — ảnh hưởng trực tiếp tới 3 dial, ví dụ "Hiện đại nhưng đáng tin cậy, không quá phô trương"
- Font/màu thương hiệu nếu có — nếu không cung cấp, Claude tự chọn theo quy tắc skill (không dùng Inter, không tím-xanh)
- Các phần cần có — tránh thiếu/dư section, ví dụ "Cần có: hero, tính năng, bảng giá, FAQ, CTA cuối trang"
Mẹo dịch "cảm giác mong muốn" sang ngôn ngữ thường
- Muốn táo bạo, nổi bật, khác biệt → nói rõ "đừng sợ phá cách, làm nổi bật hơn bình thường"
- Muốn an toàn, cổ điển, đáng tin cậy → nói rõ "giữ phong cách điềm đạm, không cần quá sáng tạo về bố cục"
- Muốn nhiều animation, sống động → nói "có hiệu ứng chuyển động khi cuộn trang, sinh động"
- Muốn tối giản, ít chuyển động → nói "giữ tĩnh, chỉ cần hiệu ứng hover nhẹ"
- Muốn nhiều dữ liệu/thông tin trên 1 màn hình → nói "dạng cockpit, nhiều số liệu, không cần thoáng"
- Muốn thoáng, sang trọng, ít chữ → nói "nhiều khoảng trắng, cảm giác cao cấp"
Ví dụ prompt
Prompt yếu (thiếu thông tin):
"Làm landing page cho app của tôi."
Prompt tốt:
"Build landing page cho Pulsewave — phần mềm phân tích doanh số dành cho chủ shop online nhỏ (không phải doanh nghiệp lớn). Phong cách: hiện đại, chuyên nghiệp, đáng tin cậy, không phô trương. Cần có: hero, phần tính năng, demo trạng thái dữ liệu real-time, testimonial, bảng giá, FAQ, CTA cuối trang. Chưa có brand màu/font cố định, bạn tự chọn theo gu của bạn."Mẹo nâng cao
- Muốn kiểm soát chính xác hơn: tự nêu số dial trực tiếp, ví dụ "Dùng STRUCTURE=3, MOTION=2, DENSITY=4 theo SKILL.md" — Claude sẽ dùng đúng giá trị đó thay vì tự suy luận
- Muốn Claude tự kiểm tra chất lượng trước khi giao: thêm câu "Sau khi build xong, tự rà lại theo checklist Section 10 và Section 9 trong SKILL.md, báo PASS/FAIL từng dòng."
- Dùng cho website có sẵn (không phải làm mới): mô tả rõ "đây là chỉnh sửa trang có sẵn, không phải làm từ đầu" và dán/đường dẫn tới code hiện tại
- Dùng được với AI khác (GPT, Copilot, Cursor...), không chỉ Claude Code: dán nguyên nội dung SKILL.md làm chỉ dẫn hệ thống hoặc đầu prompt
Câu hỏi thường gặp
- AI vẫn ra giao diện chung chung, không theo skill? → Nhắc lại rõ hơn: "Tuân thủ nghiêm Section 9 (Forbidden Patterns) trong SKILL.md, đặc biệt là không dùng layout center mặc định và không dùng 3 card đều nhau."
- Có thể chỉnh sửa nội dung SKILL.md không? → Được, xem điều khoản trong LICENSE.md — tùy biến cho phù hợp phong cách riêng, chỉ không được phân phối lại file gốc/bản chỉnh sửa không đáng kể dưới dạng sản phẩm số riêng
- Skill có tự làm phần backend/database không? → Không, skill tập trung vào giao diện (frontend) — layout, style, component, animation
- Dùng được cho dự án ngoài landing page không (dashboard, app nội bộ)? → Được, các quy tắc về typography/màu/component/motion áp dụng chung cho frontend nói chung
Landing Page Pro là sản phẩm số, thanh toán một lần — không cần biết code để dùng, chỉ cần mô tả rõ yêu cầu cho AI coding agent của bạn.
Landing Page Pro phù hợp cho founder, freelancer, agency dùng AI coding agent để build landing page nhanh nhưng vẫn muốn giao diện có chủ đích thiết kế, không bị rập khuôn. Brief rõ ràng theo hướng dẫn trên là yếu tố quyết định chất lượng kết quả.
