Trung cấp ⏱️ 22:00 🔥 Nổi bật

Design cho Developer: UI pro khi không có designer

Founder solo không có budget thuê designer. Nhưng user đánh giá sản phẩm qua giao diện TRƯỚC KHI dùng tính năng. App xấu = "chắc amateur làm" → không tin → không trả tiền. Bài này dạy 20% design knowledge cho 80% kết quả.

3 thứ quyết định 90% “đẹp hay xấu”

Yếu tố	Sai thường gặp	Fix nhanh
Spacing	Mọi thứ sát nhau, chật chội	Dùng hệ 4px/8px: padding 8, 16, 24, 32, 48. Khoảng trắng = sang
Typography	5 font khác nhau, size random	1 font (Inter/Geist), 3 size: 14 body, 18 heading, 24 title. Xong.
Color	Quá nhiều màu, contrast yếu	1 primary + 1 neutral (gray) + 1 accent (success/error). Dùng oklch hoặc HSL

// File: design-tokens.css
/* Design system tối thiểu — copy paste dùng ngay */
:root {
  /* Typography: chỉ 1 font, 4 sizes */
  --font: "Inter", system-ui, sans-serif;
  --text-xs: 0.75rem;   /* 12px - caption */
  --text-sm: 0.875rem;  /* 14px - body */
  --text-md: 1.125rem;  /* 18px - subheading */
  --text-lg: 1.5rem;    /* 24px - heading */

  /* Spacing: hệ 8px */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 48px; --sp-8: 64px;

  /* Color: chỉ 3 nhóm */
  --primary: oklch(0.55 0.2 250);    /* xanh dương đậm */
  --primary-soft: oklch(0.95 0.03 250);
  --neutral-900: oklch(0.15 0 0);    /* text chính */
  --neutral-600: oklch(0.45 0 0);    /* text phụ */
  --neutral-200: oklch(0.90 0 0);    /* border */
  --neutral-50: oklch(0.98 0 0);     /* background */
  --success: oklch(0.55 0.15 150);
  --error: oklch(0.55 0.2 25);

  /* Border radius */
  --radius: 8px;
}

Component library: đừng design từ đầu

Library	Stack	Ưu điểm	Dùng khi
shadcn/ui	React + Tailwind	Copy-paste, full control, đẹp sẵn	Next.js project, cần customize
Radix UI	React (headless)	Accessible, unstyled, tự theme	Cần brand riêng
Mantine	React	All-in-one, 100+ components	Ship nhanh, ít customize
DaisyUI	Tailwind (any)	Class-based, đẹp, nhẹ	Không dùng React

Figma cho dev: 30 phút học, tiết kiệm 2 ngày code

Đừng code UI rồi sửa → code lại → sửa. Vẽ trước trong Figma (miễn phí): kéo thả → xong layout → rồi mới code. 3 thao tác Figma cần biết: Frame (tạo khung), Auto Layout (flex/grid visual), Text + Rectangle (nội dung).

Không cần sáng tạo — copy layout từ SaaS đẹp: Linear.app, Vercel.com, Stripe.com, Notion.so. Mở DevTools → xem spacing, font, color. Clone layout, đổi nội dung. Đây là cách designer thật sự làm.

❓ 3 yếu tố nào quyết định 90% việc UI "trông pro"?