Lối tắt dễ mắc
Style đẹp là đủ.
Cách làm đúng
Accessibility, touch và performance cấp critical quan trọng hơn trang trí.
Ctrl K
Tóm tắt nhanh / Lệnh
Bộ Marketing
/ak:ui-ux-pro-max
Trí tuệ thiết kế UI/UX
Trí tuệ thiết kế cho UI sản phẩm: hệ style, màu, chữ, layout, accessibility, trạng thái tương tác, responsive, form, chart và review app.
01
Phân loại yêu cầu
02
Trích nhu cầu
03
Tạo design system
04
Lưu nếu cần
Nguyên tắc 01
Design system trước, tìm chi tiết sau.
Nguyên tắc 02
Accessibility và touch interaction ưu tiên cao hơn style trang trí.
Nguyên tắc 03
UI chuyên nghiệp dựa trên token ngữ nghĩa, asset vector, state ổn định và spacing nhất quán.
Nguyên tắc 04
Review cả light và dark mode; không suy đoán theme này từ theme kia.
Bản đồ thực thi
Các nhánh chính từ đầu vào đến kết quả, bám theo cách command chạy khi dùng thật.
01
Khởi động
Đầu vào, phạm vi, route
- 1 Phân loại yêu cầu Xác nhận tác vụ làm thay đổi cách tính năng trông, cảm nhận, chuyển động hoặc được thao tác; nếu không thì bỏ qua skill.
- 2 Trích nhu cầu Ghi lại loại sản phẩm, người dùng mục tiêu, bối cảnh sử dụng, từ khóa phong cách và stack trước khi chọn luật thiết kế.
02
Xử lý
Agent / skill thực thi
- 3 Tạo design system Bắt đầu bằng tìm kiếm design-system để kết hợp product, style, color, landing, typography, effect và reasoning về anti-pattern.
- 4 Lưu nếu cần Khi cần nhất quán qua nhiều phiên, lưu master design system và override theo page để truy xuất phân cấp.
03
Kiểm chứng
Gate, review, xác thực
- 5 Tìm sâu Dùng tìm kiếm theo domain cho product, style, typography, color, landing, chart, UX, React, web hoặc prompt chi tiết.
- 6 Luật theo stack Bổ sung hướng dẫn React Native cho component, navigation và list khi làm UI app.
04
Đóng
Báo cáo, bàn giao, artifact
- 7 Review ưu tiên Áp dụng ưu tiên 1→10: accessibility và touch trước, rồi performance, style, layout, typography, motion, form, navigation, chart.
- 8 Kiểm trước bàn giao Trước khi bàn giao, kiểm các mục critical/high: contrast, touch target, phone nhỏ, landscape, reduced motion, Dynamic Type, dark mode và safe area.
Đừng bỏ qua bước bắt buộc
Mỗi mục đối chiếu một lối tắt dễ mắc với cách làm đúng mà skill yêu cầu.
Lối tắt dễ mắc
Light mode ổn thì dark mode cũng ổn.
Cách làm đúng
Contrast, border, màu state và scrim của dark mode phải được kiểm riêng.
Lối tắt dễ mắc
Icon emoji làm UI thân thiện.
Cách làm đúng
Icon cấu trúc nên là SVG/vector nhất quán, không dùng emoji phụ thuộc nền tảng.
Prompt mẫu
Ví dụ gọi command theo từng flag, subcommand, mode hoặc route dùng được trong workflow thực tế.
Landing page mới Khuyến nghị
/ak:ui-ux-pro-max build hệ thống thiết kế trang landing SaaS- Dùng khi:
- Dùng trước khi tạo page hiển thị hoặc định hướng UI sản phẩm.
- Kết quả:
- Khuyến nghị design-system gồm style, màu, typography, effect, anti-pattern và lưu ý triển khai.
Review UI
/ak:ui-ux-pro-max đánh giá màn hình ứng dụng di động này về khả năng truy cập và độ hoàn thiện- Dùng khi:
- Dùng khi UI chưa đủ chuyên nghiệp hoặc cần review trước launch.
- Kết quả:
- Các phát hiện UX, accessibility, responsive và visual consistency theo mức ưu tiên.
Hướng dẫn chart
/ak:ui-ux-pro-max add biểu đồ bảng điều khiển phân tích- Dùng khi:
- Dùng khi tác vụ có lựa chọn trực quan hóa dữ liệu.
- Kết quả:
- Hướng dẫn loại chart, legend, tooltip, màu, accessibility và responsive cho bối cảnh dashboard.
Phạm vi xử lý
- Design system và định hướng thị giác
- Accessibility và touch target
- Responsive layout và safe area
- Kỷ luật typography, màu và icon
- Review chart, form, navigation và motion