Tổng kết

​

1. Font chữ (Typography)

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)

“Bảng màu: nền #0f172a, primary #3b82f6, text #f8fafc. Dùng CSS variables.”

​

3. Responsive (Mobile-first)

“Thiết kế mobile-first. Breakpoint tablet 768px, desktop 1024px.”

​

4. Tailwind CSS

“Dùng Tailwind CSS. Spacing theo scale mặc định, không tự chế.”

​

5. Icons

“Dùng Lucide Icons, kích thước 20px, màu trùng với text.”

​

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

“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.