Các công cụ Vibe Code

Color System & Typography: Nền Tảng Của Mọi Design

90% visual hierarchy đến từ typography và color. Master hai điều này, bạn đã có một design tốt.

Prompting Cho Color Palette

Cách Xây Dựng Palette:

Tạo color palette cho SaaS dashboard:

Primary: #10B981 (emerald) - CTAs, active states
Secondary: #6366F1 (indigo) - secondary actions
Neutral: slate scale (slate-50 đến slate-900)
Success: #22C55E
Warning: #F59E0B  
Error: #EF4444

Semantic colors:
- Background: slate-50
- Card: white
- Border: slate-200
- Text primary: slate-900
- Text secondary: slate-600
- Text muted: slate-400

60-30-10 Rule

Prompt Template:

Apply 60-30-10 color distribution:
- 60% Neutral (background, cards): slate-50, white
- 30% Secondary (text, icons): slate-600, slate-900
- 10% Primary (CTAs, highlights): emerald-500

Không bao giờ dùng primary color cho large areas.

Typography Scale

Prompt Cho Type System:

Setup typography scale:

Display: 48px/56px font-bold (hero headlines)
H1: 36px/44px font-bold
H2: 30px/36px font-semibold
H3: 24px/32px font-semibold
H4: 20px/28px font-medium
Body Large: 18px/28px font-normal
Body: 16px/24px font-normal
Small: 14px/20px font-normal
Caption: 12px/16px font-medium

Font: Inter variable, fallback system-ui

Font Pairing Rules

Practical Prompts

Cho Text Hierarchy:

Trong card này:
- Title: text-lg font-semibold text-slate-900
- Subtitle: text-sm text-slate-600
- Meta: text-xs text-slate-400

Khoảng cách giữa title và subtitle: mt-1
Khoảng cách giữa subtitle và meta: mt-2

Cho Dark Mode:

Convert color scheme sang dark mode:
- Background: slate-900 thay vì white
- Cards: slate-800 với border-slate-700
- Text primary: slate-100
- Text secondary: slate-400
- Primary color giữ nguyên nhưng tăng lightness 10%

Common Mistakes

🔥 Pro Tip: Khi review AI output, kiểm tra: "Có quá 5 màu khác nhau không? Có quá 4 font sizes không?" Nếu có, simplify.