🎨 Thiết Kế UI/UX Có "Não" — Không Còn Chọn Màu Cảm Tính Nữa

UI/UX Pro Max v2.11.0 — Công cụ giúp AI hiểu thiết kế, tự động chọn style phù hợp sản phẩm của bạn

Bạn đã bao giờ ngồi đắn đo:

🤔 "Web SaaS nên dùng màu gì cho chuyên nghiệp?"
🤔 "Font nào dễ đọc nhất cho app y tế?"
🤔 "Dashboard phân tích cần layout kiểu gì?"
🤔 "App thương mại điện tử và app giáo dục thiết kế khác nhau ra sao?"

Trước đây: Bạn phải scroll hàng giờ trên Dribbble, Pinterest, xem hàng trăm thiết kế rồi tự đoán cái nào phù hợp.

Bây giờ với UI/UX Pro Max: Bạn chỉ cần bảo AI "tạo dashboard y tế bằng React" — nó tự tìm style, màu sắc, font, layout, UX guidelines phù hợp cho đúng ngành đó.

Giống như bạn có một chuyên gia thiết kế senior luôn sẵn sàng, biết 192 loại sản phẩm khác nhau và gợi ý chính xác cho từng loại.

🧠 UI/UX Pro Max là gì?

UI/UX Pro Max là một hệ thống tri thức thiết kế dành cho AI assistant (như Codex). Thay vì để AI "bịa" giao diện dựa trên những gì nó học được từ internet, công cụ này cho nó:

📚 Database thiết kế có cấu trúc — 84 style, 192 palette màu, 74 cặp font, 192 loại sản phẩm
🔍 Tìm kiếm cục bộ — search đúng domain (style, color, typography, UX...) thay vì đoán mò
🏥 Reasoning theo ngành — app y tế khác app game, dashboard SaaS khác app thương mại điện tử
⚙️ Hướng dẫn theo stack — React, Vue, Flutter, SwiftUI, HTML+Tailwind... mỗi stack có cách implement riêng
✅ Quality gate trước bàn giao — kiểm tra accessibility, touch target, contrast, responsive...

84UI Styles

192Color Palettes

74Font Pairings

192Product Types

98UX Guidelines

22Tech Stacks

🎯 7 Skills — 7 Công Cụ Thiết Kế

UI/UX Pro Max không chỉ là một skill duy nhất. Nó gồm 7 skill definitions phục vụ các nhu cầu khác nhau:

Skill	Chức năng	Khi nào dùng
ui-ux-pro-max	Core skill — design intelligence chính	Thiết kế web/mobile, chọn visual system, cải thiện UX
banner-design	Thiết kế banner social, quảng cáo, hero image	Cần cover, header, display ad, campaign asset
brand	Quản lý brand voice, visual identity, tone	Tạo/review style guide, brand guidelines
design-system	Tokens ba lớp, CSS variables, component specs	Cần hệ thống hóa UI, Tailwind theme
design	Router điều phối tất cả design tasks	Yêu cầu thiết kế bao phủ nhiều loại deliverable
slides	HTML presentation với design tokens, chart	Pitch deck, marketing presentation
ui-styling	Implement UI accessible với shadcn/ui, Radix, Tailwind	Tạo responsive layout, form, dialog, dark mode

🚀 Cách Sử Dụng — 4 Bước Đơn Giản

Chỉ cần Node.js và Python 3.x. Search script dùng pure Python, không cài package, không gọi mạng.

1. Cài CLI

npm install -g ui-ux-pro-max-cli

2. Setup cho Codex

# Tại thư mục project
uipro init --ai codex

3. Yêu cầu tự nhiên

Trong Codex, chỉ cần nói tự nhiên:

Build a responsive SaaS dashboard with accessible dark mode

Skill tự kích hoạt khi nhận ra yêu cầu liên quan UI/UX — không cần slash command.

4. Kiểm tra design system trước khi code

AI sẽ tạo design system dựa trên product type, industry, tone bạn mô tả. Review xong rồi mới code.

⚙️ Design Dials — Điều Chỉnh "Cá Tính" Giao Diện

UI/UX Pro Max có 3 "nút vặn" (dials) từ 1-10 để tinh chỉnh giao diện theo ý thích:

Dial	Ý nghĩa	Thấp (1-3)	Cao (8-10)
variance	Độ táo bạo	An toàn, quen thuộc	Độc đáo, phá cách
motion	Mức độ animation	Tĩnh, tối giản	Nhiều chuyển động, GSAP
density	Mật độ thông tin	Rộng rãi, thoáng	Nhiều dữ liệu, compact

Ví dụ: --variance 8 --motion 7 --density 8 sẽ tạo giao diện táo bạo, nhiều animation, density cao — phù hợp dashboard analytics.

✅ Quality Gate — Kiểm Tra Trước Bàn Giao

Trước khi bàn giao UI, skill tự động kiểm tra 8 tiêu chí quan trọng:

👁️ Contrast ≥ 4.5:1 — đảm bảo đọc được trên mọi nền
👆 Touch target ≥ 44×44px — dễ bấm trên mobile
⌨️ Keyboard/focus — điều hướng bằng bàn phím được
📱 Responsive — hiển thị tốt mọi kích thước màn hình
🚫 No horizontal scroll — không bị tràn ngang
⏳ Loading feedback — có trạng thái loading rõ ràng
📐 CLS (Cumulative Layout Shift) — layout không bị nhảy
♿ Reduced motion — tôn trọng người dùng không muốn animation

💡 Thứ tự ưu tiên: Accessibility → Touch/Interaction → Performance → Style → Layout → Typography/Color → Animation

🔍 Workflow Tìm Kiếm

Bạn có thể search trực tiếp các domain thiết kế:

python3 .agents/skills/ui-ux-pro-max/scripts/search.py \
  "SaaS dashboard" \
  --design-system \
  -p "MyApp"

Các domain hỗ trợ:

--domain style — UI styles
--domain color — color palettes
--domain typography — font pairings
--domain ux — UX guidelines
--domain chart — chart types
--domain icons — icon suggestions
--domain gsap — animation presets
--stack react — guidance cho React (và 21 stack khác)

💡 Tại Sao Nên Dùng?

Trước khi có UI/UX Pro Max:

❌ AI bịa style dựa trên training data cũ
❌ Không nhất quán giữa các trang
❌ Thiếu accessibility, responsive
❌ Code không đúng pattern của stack

Sau khi có UI/UX Pro Max:

✅ Quyết định có cơ sở — gợi ý theo loại sản phẩm
✅ Nhất quán xuyên dự án — Master design system + page overrides
✅ Đúng stack triển khai — guidance riêng cho 22 stack
✅ Có quality gate — accessibility, performance, contrast...

📋 Update & Uninstall

uipro versions
uipro update
uipro update --global
uipro uninstall
uipro uninstall --global

🎯 Kết Luận

UI/UX Pro Max biến việc thiết kế UI từ "chọn cảm tính" thành "quyết định có cơ sở". Bạn không cần là designer chuyên nghiệp — chỉ cần mô tả sản phẩm của bạn là gì, dành cho ai, và AI sẽ tìm ra visual system phù hợp nhất.

Đặc biệt useful khi bạn:

🚀 Build SaaS product từ đầu
🏥 Làm app cho ngành đặc thù (y tế, fintech, education...)
🎨 Cần design system nhất quán
♿ Quan tâm accessibility và UX quality

    🔗 Package chính thức: ui-ux-pro-max-cli, lệnh uipro. Các bản uipro-cli cũ đã stale.
  

🎨 UI/UX 🤖 AI Design ⚙️ Codex 📝 Guide 🚀 Productivity