Agent UI/UX Designer

Agent UI/UX designer tạo ra các giao diện đẳng cấp với HTML/CSS/JS thuần, trải nghiệm 3D Three.js, hệ thống thiết kế đáp ứng (responsive) và bố cục được tối ưu hóa cho tỷ lệ chuyển đổi.

Mục đích

Nghiên cứu các xu hướng thiết kế, tạo bản phác thảo độ nét cao (mockups), triển khai hệ thống thiết kế và tối ưu hóa trải nghiệm người dùng trên mọi thiết bị với trọng tâm là khả năng truy cập (accessibility) và tỷ lệ chuyển đổi.

Khi nào được kích hoạt

Agent UI/UX designer kích hoạt khi:

Sử dụng các lệnh /design:fast, /design:good, /design:3d
Sử dụng lệnh /design:screenshot [path] (thiết kế từ ảnh chụp màn hình)
Sử dụng lệnh /design:describe [path] (phân tích thiết kế)
Khi cần xem xét thiết kế (design review)
Khi triển khai các bố cục đáp ứng hoặc hệ thống thiết kế.

Khả năng

Nghiên cứu & Cảm hứng

Phân tích các thiết kế hàng đầu từ Dribbble, Behance, Awwwards, TheFWA. Nghiên cứu các mẫu UI từ Mobbin, phân tích đối thủ cạnh tranh và các tiêu chuẩn ngành.

Tạo thiết kế

Wireframing & Prototyping: Từ phác thảo sơ bộ đến nguyên mẫu tương tác bằng HTML/CSS/JS thuần.
Thiết kế hình ảnh: Hệ thống phân cấp hình ảnh, lý thuyết màu sắc, kiểu chữ (typography).
Hiệu ứng & Chuyển động: Micro-animations, hiệu ứng Parallax, CSS transitions.
Trải nghiệm 3D: Three.js, WebGL shaders, mô hình hóa 3D.

Hệ thống thiết kế (Design Systems)

Tokenization: Thiết lập token cho màu sắc, khoảng cách, kiểu chữ.
Thư viện thành phần: Các thành phần UI có thể tái sử dụng.
Khả năng truy cập: Tuân thủ tiêu chuẩn WCAG 2.1 AA.
Đáp ứng (Responsive): Thiết kế ưu tiên di động (Mobile-first).
Tiếng Việt: Hỗ trợ font chữ Google Fonts với ký tự Tiếng Việt đầy đủ.

Tối ưu hóa UX

Tối ưu hóa tỷ lệ chuyển đổi (CRO), phân tích luồng người dùng, kiểm tra khả năng truy cập (bàn phím, trình đọc màn hình), tối ưu hóa hiệu suất (Core Web Vitals, ảnh WebP), và các trạng thái tải (Skeleton screens).

Triển khai kỹ thuật

Sử dụng HTML/CSS/JS thuần không phụ thuộc framework, Three.js/WebGL cho đồ họa nâng cao, CSS Grid/Flexbox, biến CSS (CSS Variables) và tối ưu hóa tài nguyên.

Ví dụ sử dụng

Thiết kế trang Landing Page

Đầu vào: /design:good [tạo trang landing page hiện đại cho nền tảng phân tích AI] Quy trình:

Nghiên cứu: Tìm xu hướng thiết kế AI SaaS 2024.
Chiến lược: Xác định mục tiêu chuyển đổi (đăng ký dùng thử).
Phác thảo: Cấu trúc Hero, Value Prop, Features (Bento grid), Pricing, FAQ.
Thiết kế hình ảnh: Bảng màu tối (dark theme), kiểu chữ Inter hỗ trợ Tiếng Việt.
Triển khai: Tạo file HTML, CSS, JS và cảnh 3D Three.js.
Tối ưu hóa: Nén ảnh WebP, kiểm tra điểm Lighthouse (mục tiêu 90+).

Các chỉ số thành công

Một thiết kế thành công đạt được:

✅ Điểm hiệu suất Lighthouse: 90+
✅ Khả năng truy cập Lighthouse: 100
✅ Tuân thủ WCAG 2.1 AA.
✅ Hiển thị tốt trên mọi thiết bị.
✅ Tốc độ tải nhanh (LCP < 1.2s).
✅ Luồng chuyển đổi rõ ràng.

Thông điệp chính: Agent UI/UX designer tạo ra các thiết kế đạt giải thưởng, tối ưu hóa chuyển đổi với nghiên cứu chuyên sâu, công nghệ hiện đại và cách tiếp cận ưu tiên khả năng truy cập.