Tạo Kế hoạch Xây dựng Giao diện UI/UX Tốt nhất

Bạn là một kỹ sư full-stack cấp cao và kiến trúc sư UX/UI với hơn 10 năm kinh nghiệm xây dựng 
các ứng dụng web đạt chuẩn vận hành thực tế (production-grade). Bạn chuyên sâu về các hệ thống thiết kế đáp ứng (responsive design systems), các mẫu UI/UX 
hiện đại và tối ưu hóa hiệu năng đa thiết bị.

---

## NHIỆM VỤ

Tạo một **kế hoạch phát triển toàn diện, có tính hành động cao** để xây dựng một ứng dụng web đáp ứng đa thiết bị 
thỏa mãn các tiêu chí sau:

### 1. KHẢ NĂNG ĐÁP ỨNG (RESPONSIVENESS) & TƯƠNG THÍCH ĐA THIẾT BỊ
- Thích ứng hoàn hảo với: điện thoại di động (320px+), máy tính bảng (768px+), máy tính để bàn (1024px+), màn hình lớn (1440px+)
- Định nghĩa một **chiến lược điểm ngắt (breakpoint strategy)** rõ ràng kèm theo cơ sở lý giải
- Chỉ định phương pháp tiếp cận **ưu tiên di động (mobile-first) hay ưu tiên máy tính (desktop-first)** kèm lý do thuyết phục
- Giải quyết triệt để: kích thước vùng chạm (touch targets), cử chỉ chạm, trạng thái di chuột (hover states), điều hướng bằng bàn phím
- Xử lý: vùng tai thỏ (notches), vùng hiển thị an toàn (safe areas), các đơn vị khung nhìn động (dvh/svh/lvh)
- Bao quát: co giãn phông chữ, tối ưu hóa hình ảnh (srcset, art direction), chữ co giãn linh hoạt (fluid typography)

### 2. HIỆU NĂNG & ĐỘ MƯỢT MÀ
- Mục tiêu: hoạt ảnh 60fps, LCP <2.5s, INP <100ms, CLS <0.1 (Core Web Vitals)
- Chiến lược cho: tải trễ (lazy loading), tách nhỏ mã nguồn (code splitting), tối ưu hóa tài nguyên
- Phương pháp tiếp cận đối với: cô lập kết xuất CSS (CSS containment), thuộc tính will-change, tổng hợp lớp bằng GPU cho hoạt ảnh
- Kế hoạch cho: hỗ trợ ngoại tuyến (offline support) hoặc suy giảm nhẹ nhàng (graceful degradation)

### 3. HỆ THỐNG THIẾT KẾ (DESIGN SYSTEM) HIỆN ĐẠI & THANH LỊCH
- Định nghĩa một **kiến trúc biến thiết kế (design token architecture)**: màu sắc, khoảng cách, phông chữ, độ nổi khối, chuyển động
- Chỉ định: chiến lược bảng màu (hỗ trợ chế độ sáng/tối), lý do kết hợp các cặp phông chữ
- Bao gồm: thang đo khoảng cách, triết lý bo góc (border radius), hệ thống đổ bóng
- Bao quát: phương pháp sử dụng biểu tượng (iconography), hướng dẫn phong cách minh họa/hình ảnh
- Chi tiết hóa: các quy tắc đảm bảo tính nhất quán thị giác ở cấp độ thành phần (component-level)

### 4. THỰC HÀNH TỐT NHẤT VỀ UX/UI HIỆN ĐẠI
Áp dụng và lập kế hoạch cho các nguyên lý UX/UI sau đây:
- **Phân cấp & Khả năng đọc lướt (Hierarchy & Scannability)**: bố cục theo mẫu mắt đọc chữ F/Z, trọng lượng thị giác, chiến lược khoảng trắng
- **Phản hồi & Gợi ý tương tác (Feedback & Affordance)**: trạng thái đang tải, màn hình khung xương (skeleton screens), vi tương tác, trạng thái lỗi
- **Mẫu Điều hướng (Navigation Patterns)**: điều hướng đáp ứng (hamburger, thanh điều hướng đáy, thanh bên), đường dẫn phân cấp (breadcrumbs), định hướng vị trí (wayfinding)
- **Khả năng Tiếp cận (Accessibility - tối thiểu đạt chuẩn WCAG 2.1 AA)**: tỷ lệ tương phản, vai trò ARIA, quản lý tiêu điểm (focus management), hỗ trợ trình đọc màn hình
- **Biểu mẫu & Nhập liệu (Forms & Input)**: trải nghiệm xác thực dữ liệu, báo lỗi nội tuyến, tự động điền (autofill), kiểu bàn phím nhập liệu theo từng thiết bị
- **Thiết kế Chuyển động (Motion Design)**: hoạt ảnh có mục đích (đường cong gia tốc easing, biến thời lượng), hỗ trợ tùy chọn giảm chuyển động (reduced-motion)
- **Trạng thái Trống & Trường hợp Biên (Empty States & Edge Cases)**: chưa có dữ liệu, lỗi hệ thống, hết thời gian chờ (timeouts), từ chối quyền truy cập

### 5. KẾ HOẠCH KIẾN TRÚC KỸ THUẬT
- Khuyến nghị một **bộ công nghệ (tech stack)** kèm lý giải (framework, phương pháp CSS, quản lý trạng thái)
- Định nghĩa: kiến trúc thành phần (thiết kế nguyên tử atomic design hoặc phương pháp thay thế), cấu trúc thư mục
- Chỉ định: cách triển khai hệ thống chủ đề giao diện (theming system), chiến lược CSS (modules, utility-first, CSS-in-JS)
- Bao gồm: chiến lược kiểm thử khả năng đáp ứng (công cụ, các điểm ngắt cần test, thiết bị kiểm thử)

---

## ĐỊNH DẠNG ĐẦU RA

Cấu trúc bản kế hoạch của bạn theo các phần mục sau:

1. **Tóm tắt Điều hành (Executive Summary)** – Một đoạn văn tổng quan về phương pháp tiếp cận
2. **Chiến lược Đáp ứng (Responsive Strategy)** – Các điểm ngắt, hệ thống bố cục, phương pháp co giãn linh hoạt
3. **Bản thiết kế Hiệu năng (Performance Blueprint)** – Các chỉ số mục tiêu, kỹ thuật áp dụng, bộ công cụ đo lường
4. **Đặc tả Hệ thống Thiết kế (Design System Specification)** – Các biến token, bảng màu, phông chữ, các thành phần giao diện
5. **Kế hoạch Thư viện Mẫu UX/UI (UX/UI Pattern Library Plan)** – Các mẫu giao diện chính, tương tác, danh sách kiểm tra khả năng tiếp cận
6. **Kiến trúc Kỹ thuật (Technical Architecture)** – Bộ công nghệ, cấu trúc thư mục, thứ tự triển khai
7. **Kế hoạch Triển khai theo Giai đoạn (Phased Rollout Plan)** – Các cột mốc ưu tiên (MVP → trau chuốt → tối ưu hóa)
8. **Danh sách Kiểm tra Chất lượng (Quality Checklist)** – Xác minh trước khi ra mắt trên tất cả các thiết bị và tiêu chí

---

## RÀNG BUỘC & PHONG CÁCH

- Hãy **cụ thể và có tính hành động cao** — tránh những lời khuyên chung chung mơ hồ
- Cung cấp **các giá trị định lượng cụ thể** ở những nơi áp dụng được (ví dụ: "thang khoảng cách cơ sở 8px", "400ms ease-out cho hộp thoại modal")
- Cảnh báo **những cạm bẫy thường gặp** và cách phòng tránh chúng
- Ở những khâu có nhiều hướng tiếp cận, **hãy khuyến nghị một phương án tốt nhất kèm lý do** thay vì chỉ liệt kê tất cả các lựa chọn
- Giả định ứng dụng mục tiêu là một **[INSERT APP TYPE: e.g., SaaS dashboard / e-commerce / portfolio / social app]**
- Người dùng mục tiêu là **[INSERT: e.g., non-technical consumers / enterprise professionals / mobile-first users]**

---

Hãy bắt đầu bằng phần Tóm tắt Điều hành, sau đó đi lần lượt qua từng phần mục.