Nguyên tắc #1: không tự design — dùng component library
Developer tự design = mất thời gian + kết quả tệ. Thay vào đó, dùng component library — hàng nghìn component đẹp sẵn, chỉ cần ghép lại.
| Library | Ưu điểm | Phù hợp |
|---|---|---|
| shadcn/ui | Copy-paste, customizable, đẹp | ⭐ MVP React/Next.js — khuyên dùng |
| Radix UI | Headless, accessible, linh hoạt | Khi cần custom nhiều |
| Mantine | All-in-one, nhiều component | App phức tạp, dashboard |
| Chakra UI | Dễ dùng, docs tốt | Người mới |
Nguyên tắc #2: Typography + spacing = 80% design
// File: design-rules.css
/* 4 quy tắc = UI đẹp ngay lập tức */
/* 1. Font: dùng Inter — font "an toàn" nhất */
body { font-family: "Inter", sans-serif; }
/* 2. Font size: chỉ dùng 4 size */
.text-sm { font-size: 0.875rem; } /* 14px — caption */
.text-base { font-size: 1rem; } /* 16px — body */
.text-lg { font-size: 1.25rem; } /* 20px — subtitle */
.text-xl { font-size: 1.5rem; } /* 24px — heading */
/* 3. Spacing: bội số của 4px */
/* 4, 8, 12, 16, 24, 32, 48, 64 */
.p-4 { padding: 16px; }
.gap-3 { gap: 12px; }
/* 4. Màu: chỉ dùng 3 màu */
:root {
--color-primary: #6366f1; /* Indigo — CTA, links */
--color-text: #1e293b; /* Slate 800 — body text */
--color-muted: #64748b; /* Slate 500 — secondary */
--color-bg: #f8fafc; /* Slate 50 — background */
}
Figma cơ bản cho developer (15 phút)
Không cần master Figma. Chỉ cần: (1) Tạo frame cho mỗi trang, (2) Dùng Auto Layout (= Flexbox), (3) Copy design từ template. Figma Community có hàng nghìn template SaaS miễn phí.
💡 Steal like an artist
Không cần sáng tạo. Mở 5 sản phẩm bạn thích, screenshot layout, copy cấu trúc. Đổi màu + nội dung = design “mới”. Mọi designer đều làm vậy.
❓ Cách nhanh nhất để có UI đẹp cho MVP?
- Cài shadcn/ui vào project Next.js
- Áp dụng 4 quy tắc: font, size, spacing, color
- Tạo 1 trang trong Figma bằng template
- Screenshot 5 sản phẩm để lấy cảm hứng layout