UI IntelligenceDesktopWebAI Agent Skill
ui-ux-pro-max
Hệ thống tri thức thiết kế UI/UX chuyên sâu cho web và desktop, chuẩn hóa micro-interaction và trạng thái tương tác.
Tuỳ chọn cài đặt
Cài đặt vào Claude Code, Cursor, Codex hoặc Antigravity bằng lệnh sau:
$ npx skills add nextlevelbuilder/ui-ux-pro-max-skill@ui-ux-pro-max
Tình huống thực tế ứng dụng Skill này
AI làm UI kiểu "AI slop" - cần nâng lên chất lượng cao cấp
“AI dựng xong giao diện nhưng nhìn là biết ngay "kiểu AI làm" - cần sửa gì trước khi ra mắt?”
Khung hành động 5 bước
- 1Kiểm tra khoảng trắng và căn lề - AI hay dùng padding/margin mặc định đều tăm tắp, thiếu phân cấp thị giác. Tăng khoảng cách giữa các nhóm, giảm trong 1 nhóm.
- 2Kiểm tra bảng màu - AI hay dùng gradient tím-xanh mặc định hoặc quá nhiều màu nhấn cùng lúc. Giới hạn còn 1 màu nhấn chính, còn lại là trung tính.
- 3Kiểm tra font và kiểu chữ - AI hay dùng 1 cỡ chữ cho mọi cấp nội dung. Tạo phân cấp rõ: tiêu đề, phụ đề, nội dung phải khác cỡ/độ đậm rõ rệt.
- 4Kiểm tra icon và minh hoạ - AI hay chèn icon chung chung (bóng đèn, tên lửa, biểu tượng check) không gắn với nội dung thật. Thay bằng icon/hình ảnh cụ thể cho đúng ngữ cảnh sản phẩm.
- 5So sánh với 1 sản phẩm bạn thấy đẹp thật (không phải AI làm) - liệt kê 3 điểm khác biệt cụ thể, rồi sửa từng điểm đó.
Trước khi dùng Skill
"Giao diện có đủ nút, đủ chữ, chạy được - để vậy ra mắt cho nhanh."
Sau khi áp dụng Skill
"Rà lại: bỏ gradient tím mặc định, đổi icon bóng đèn generic thành icon riêng cho tính năng, tăng khoảng cách giữa các card từ 8px lên 24px, giảm còn 1 màu nhấn (xanh) thay vì 4 màu."
Nội dung chỉ dẫn SKILL.md
SKILL.md • Read-only preview# UI/UX Pro Max Skill Enforce strict component states, high-contrast focus rings, smooth easing curves, and accessible surface colors.