​
1. Font chữ (Typography)

Tiêu chíChecklist
Font đồng nhấtChỉ dùng 1 - 2 font family cho toàn trang (ví dụ: Poppins + Inter)
Kích thước hợp lýBody: 16 - 18px, Heading: 24 - 48px, theo thứ bậc rõ ràng
Line-height1.5 - 1.7 cho text dễ đọc
Font load nhanhDùng Google Fonts → thêm display=swap để tránh chờ
Prompt mẫu:
Dùng font Poppins từ Google Fonts, body 16px, heading theo thứ bậc h1→h3.
Dùng font Inter cho nội dung, Poppins cho tiêu đề. Body 16px, h1 48px, h2 36px, h3 24px. Thêm display=swap khi load font từ Google Fonts để tránh chờ.

​
2. Màu sắc (Color)

Tiêu chíChecklist
Bảng màu cố địnhChỉ chọn 3 - 5 màu: nền, chính (primary), phụ (secondary), chữ, accent
Tương phản đủChữ trắng trên nền tối → contrast ≥ 4.5:1
Dùng CSS variablesKhai báo màu trong :root để đổi theme dễ dàng
Prompt mẫu:
“Bảng màu: nền #0f172a, primary #3b82f6, text #f8fafc. Dùng CSS variables.”

​
3. Responsive (Mobile-first)

Tiêu chíChecklist
Mobile trướcViết CSS cho màn nhỏ trước, rồi mở rộng lên
Breakpoints chuẩnMobile <640px, Tablet 640 - 1024px, Desktop >1024px
Hình ảnh co giãnmax-width: 100%, height: auto
Menu mobileHamburger menu cho màn < 768px
Prompt mẫu:
“Thiết kế mobile-first. Breakpoint tablet 768px, desktop 1024px.”

​
4. Tailwind CSS

Tiêu chíChecklist
Utility-firstDùng class có sẵn, không viết CSS thủ công khi có thể
Cấu trúc rõTách tailwind.config.js cho màu/tiêu đề riêng
Purge/CSSCấu hình content paths để file CSS nhỏ nhất
Đồng nhất spacingDùng scale sẵn: p-4, gap-6, m-8 — không đẻ random p-37
Prompt mẫu:
“Dùng Tailwind CSS. Spacing theo scale mặc định, không tự chế.”

​
5. Icons

Tiêu chíChecklist
1 thư viện duy nhấtChỉ dùng 1 bộ icon: Lucide, Heroicons, hoặc Font Awesome
Kích thước chuẩn16px, 20px, 24px — không lẫn lộn
Màu thống nhấtIcon cùng màu với text hoặc dùng accent color
SVG inlineƯu tiên SVG inline thay vì icon font để tránh FOUC
Prompt mẫu:
“Dùng Lucide Icons, kích thước 20px, màu trùng với text.”

​
6. Tính nhất quán (Consistency)

Tiêu chíChecklist
1 style cho buttonCùng shape, padding, border-radius, hover effect
Khoảng cách đềuSection padding: py-12 → py-16, không lộn xộn
Heading styleCùng font-weight, màu, line-height cho mọi h1
Shadow/hover的统一Nếu card có shadow → mọi card đều có shadow
Prompt mẫu:
“Giữ nhất quán: button như nhau, spacing đều nhau, heading style cố định.”

​
🔖 Checklist nhanh khi Prompt

✅ Font: 1 - 2 family, kích thước chuẩn, display=swap
✅ Màu: 3 - 5 màu, CSS variables, contrast đủ
✅ Responsive: mobile-first, 3 breakpoints phổ biến
✅ Tailwind: utility-first, spacing scale, config riêng
✅ Icons: 1 thư viện, kích thước cố định, SVG inline
✅ Consistency: button/heading/spacing/card đồng nhất
Mẹo: Gắn checklist này vào prompt cuối mỗi lần yêu cầu tạo trang — AI sẽ tuân theo ngay.