# Trang 5.5: Thiết kế giao diện Premium chuẩn UI-UX với /ui-ux-pro-max.

## 1. Mục đích

**`/ui-ux-pro-max`** là workflow chuyên biệt để tạo ra **giao diện web chất lượng cao, đẹp mắt và có tỉ lệ chuyển đổi cao** — đặc biệt là các trang Landing Page — trong thời gian tối thiểu.

Điểm khác biệt so với các cách thiết kế thông thường:

- Không phải output mẫu chung chung.
- AI áp dụng đúng **phong cách nghệ thuật** và **bảng màu** bạn chọn.
- Kết quả là code hoàn chỉnh: HTML semantic, components tái sử dụng, animations.

---

## 2. Thư viện phong cách NextLevelBuilder

Workflow này được tối ưu hóa để làm việc cùng với thư viện **50 phong cách thiết kế chuyên nghiệp** tại:

🔗 [nextlevelbuilder.io — Style Gallery](https://ui-ux-pro-max-skill.nextlevelbuilder.io/#styles)

Thư viện cung cấp:

- **50 Style Prompts** (Glassmorphism, Claymorphism, Neubrutalism, Modern SaaS, Minimalist...)
- **21 Bảng màu** đã được thiết kế và kiểm tra cẩn thận.
- **50 Font Combinations** phù hợp từng phong cách.

---

## 3. Quy trình thực hiện (3 bước)

### Bước 1: Chọn phong cách (tùy chọn nhưng khuyến nghị)

Truy cập [nextlevelbuilder.io](https://ui-ux-pro-max-skill.nextlevelbuilder.io/#styles), duyệt qua các phong cách và chọn một cái phù hợp với thương hiệu của bạn.

*Nếu không chọn cụ thể, AI sẽ tự đề xuất phong cách phù hợp dựa trên mô tả của bạn.*

### Bước 2: Chạy lệnh với mô tả đầy đủ

```bash
bash
/ui-ux-pro-max [mô tả trang + yêu cầu về phong cách, màu sắc, sections]
```

### Bước 3: AI xây dựng và bàn giao

AI tạo ra đầy đủ:

- **Cấu trúc HTML semantic** (chuẩn SEO, đúng heading hierarchy).
- **Các UI component** có thể tái sử dụng.
- **Micro-animations** và hiệu ứng hover.
- **Responsive design** hoạt động tốt trên mobile.

---

## 4. Ví dụ phiên làm việc

### Ví dụ 1: Landing page cho công ty dịch vụ thú cưng

```html
👤 Bạn: /ui-ux-pro-max tạo landing page cho dịch vụ chăm sóc thú cưng
cao cấp. Phong cách: Claymorphism với màu ấm áp và vui tươi.
Cần có: hero section, danh sách dịch vụ, gallery ảnh thú cưng,
bảng giá 3 gói, testimonials từ chủ thú cưng, và form đặt lịch.


🤖 AI:
📊 Phân tích phong cách:
Style: Claymorphism (3D soft shadows, rounded shapes)
Colors: Warm Amber #F59E0B + Rose #FB7185 + Cream #FEF3C7
Typography: Nunito (playful, rounded) + Inter (body)
Effects: Soft shadows, bouncy hover animations, gradient backgrounds


🏗️ Đang xây dựng...
✅ Tạo xong Hero Section với animated pet illustrations
✅ Tạo xong Services Grid (6 dịch vụ với icon claymorphism)
✅ Tạo xong Photo Gallery (masonry layout)
✅ Tạo xong Pricing Cards (3 gói với highlight card)
✅ Tạo xong Testimonial Carousel
✅ Tạo xong Booking Form với validation


📄 Tạo xong app/page.tsx
Chạy /preview start để xem kết quả.
```

### Ví dụ 2: Landing page SaaS fintech

```html
👤 Bạn: /ui-ux-pro-max landing page cho SaaS phân tích tài chính doanh nghiệp.
Phong cách: Glassmorphism dark mode với màu xanh navy và tím.
Sections: Hero với demo video, Features grid, Pricing 3 plans,
Dashboard preview screenshot, FAQ, CTA cuối trang.


🤖 AI:
📊 Phân tích phong cách:
Style: Glassmorphism + Dark Mode
Colors: Navy #0F172A bg + Blue #3B82F6 primary + Violet #8B5CF6 accent
Typography: Inter (clean, professional)
Effects: Glass cards với backdrop-blur, gradient glow effects,
subtle particle animations


[AI triển khai từng section...]


✅ Hoàn thành! High-conversion SaaS landing page ready.
```

---

## 5. Cách mô tả yêu cầu hiệu quả

### Mô tả theo 4 yếu tố

```html
/ui-ux-pro-max [Loại trang] cho [Đối tượng/Ngành]
                        [Phong cách + Màu sắc]
                        [Danh sách sections]
                        [Yêu cầu đặc biệt nếu có]
```

**Ví dụ hoàn chỉnh:**

```html
/ui-ux-pro-max Landing page cho startup EdTech dạy lập trình online.
                        Phong cách: Modern SaaS với gradient tím-xanh, clean và chuyên nghiệp.
                        Sections: Hero (headline + CTA), Course Preview (3 khóa học),
                       Instructor bio, Student results/stats, Pricing (monthly/yearly),
                       FAQ, và footer với newsletter signup.
                       Đặc biệt: Thêm countdown timer cho giá khuyến mãi.
```

### Các từ khóa phong cách phổ biến

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-t%E1%BB%AB-kh%C3%B3a-gi%E1%BA%A3i-th%C3%ADch-g"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Từ khóa</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Giải thích</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`Glassmorphism`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Card kính trong suốt, blur background, thường dùng với dark mode</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`Claymorphism`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Hình khối 3D mềm mại, màu ấm, bóng đổ dày</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`Neubrutalism`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Viền đen dày, màu sắc bold, không gradient, phong cách "thô"</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`Modern SaaS`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Sạch, tối giản, tập trung vào product screenshot</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`Minimalist`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Nhiều khoảng trống, typography nổi bật</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`Gradient mesh`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Màu gradient phức tạp, hiệu ứng ánh sáng</td></tr></tbody></table>

</div>---

## 6. Kết quả bàn giao

Sau khi `/ui-ux-pro-max` hoàn thành, bạn nhận được:

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-th%C3%A0nh-ph%E1%BA%A7n-m%C3%B4-t%E1%BA%A3-app"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Thành phần</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mô tả</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20"><div>  
</div>**<span class="context-scope-mention"><span class="inline-flex items-center gap-0.5 rounded-md align-middle text-sm font-medium transition-[opacity,background-color] cursor-pointer hover:bg-gray-500/20 select-text translate-y-[-1px]" draggable="true"><span class="inline-flex break-all leading-tight">app/page.tsx</span></span></span>**</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Trang chính với tất cả sections</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">**`components/`**</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Các UI components tái sử dụng (Hero, Pricing, Testimonial...)</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">**CSS/Tailwind**</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Styles theo đúng phong cách đã chọn</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">**SEO meta tags**</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Title, description, OG tags</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">**Accessibility**</td><td class="px-3 py-2 leading-snug border border-gray-500/20">ARIA labels, keyboard navigation</td></tr></tbody></table>

</div>---

## 7. Bước tiếp theo sau khi tạo giao diện

```bash
bash
/preview start # Xem kết quả ngay tại localhost:3000
/enhance [thay đổi cụ thể] # Điều chỉnh màu sắc, nội dung...
/deploy # Đưa lên production khi hài lòng
```