UI UX Pro Max là gì: skill giúp AI thiết kế UI/UX có gu

Thử hình dung chị chủ spa nhờ cậu em làm IT dựng giúp trang giới thiệu dịch vụ bằng AI. Mười phút sau có trang: nền gradient tím, chữ xám nhạt, ba thẻ bo góc xếp hàng. Chị gật gù, rồi tối đó lướt thấy trang của một công ty phần mềm, một tiệm bánh, một phòng khám... cũng gradient tím, cũng ba thẻ bo góc. Trang spa của chị hóa ra mặc "đồng phục".

UI UX Pro Max là skill ra đời để AI thôi may đồng phục cho mọi khách hàng. Bản v1.0.0 phát hành trên GitHub ngày 02/12/2025.

Đọc nhanh trong 30 giây

• UI UX Pro Max là skill mã nguồn mở của nhóm nextlevelbuilder cho Claude Code, Cursor, Windsurf, Antigravity, bản v1.0.0 ra ngày 02/12/2025.
• Nó cho AI một kho dữ liệu thiết kế (phong cách, bảng màu, cặp font, biểu đồ, nguyên tắc UX) để tra trước khi viết code giao diện.
• Cài bằng npm install -g uipro-cli rồi uipro init --ai claude; máy cần Python 3.
• Hợp với người không có nền thiết kế phải tự làm trang web. Giấy phép CC BY-NC 4.0: không dùng thương mại khi chưa xin phép.

UI UX Pro Max là gì?

UI UX Pro Max là một skill của nhóm nextlevelbuilder, gồm kho dữ liệu thiết kế dạng bảng CSV và một script Python để AI tìm trong kho đó theo từ khóa. Nhờ vậy AI chọn phong cách theo đúng loại sản phẩm thay vì đoán.

Ví von cho dễ hình dung: AI viết giao diện giống một thợ may mới vào nghề, tay nghề ổn nhưng khách nào cũng may một kiểu áo. UI UX Pro Max đưa cho thợ một cuốn catalogue mẫu vải và kiểu dáng chia theo ngành, kèm lời dặn: lật catalogue trước rồi hãy cắt.

Cùng một yêu cầu làm trang spa, hai cách chọn giao diện rất khác nhau.

Trong cuốn catalogue có gì?

Kho dữ liệu của UI UX Pro Max gồm sáu nhóm theo README bản v1.0.0:

Sáu ngăn của cuốn catalogue, số lượng theo README bản v1.0.0.

Một điểm nhỏ cần biết: phần mô tả trong file SKILL.md cùng phiên bản ghi số khác (50 phong cách, 21 bảng màu, 50 cặp font). Tôi lấy số trong README, anh chị đếm lại trong thư mục data/ nếu cần chính xác.

AI lật catalogue bằng cách nào?

UI UX Pro Max hoạt động theo bốn bước mà README mô tả: anh chị yêu cầu, skill tự kích hoạt, AI tìm trong kho thiết kế, rồi AI viết code theo kết quả tìm được. Phần lõi là lệnh tìm kiếm mà AI tự chạy:

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

Các domain có trong SKILL.md: product (loại sản phẩm), style, typography, color, landing (cấu trúc trang, cách đặt nút kêu gọi), chart, ux và prompt. Riêng nền tảng code dùng cờ --stack, mặc định là html-tailwind nếu anh chị không nói gì.

Ngoài kho dữ liệu, SKILL.md còn có một bộ luật để AI tự soát trước khi giao code, giống danh sách kiểm hàng trước khi xuất xưởng: không dùng emoji làm icon mà dùng SVG, thẻ bấm được phải có cursor-pointer, chữ nội dung ở chế độ sáng không dùng màu xám quá nhạt, hiệu ứng hover không làm xô lệch bố cục.

Cài UI UX Pro Max trong 3 lệnh

Yêu cầu theo README: máy có Python 3 để chạy script tìm kiếm.

Kiểm Python, cài CLI, chọn trợ lý AI đang dùng là xong.

1. Kiểm tra Python:

python3 --version

2. Cài công cụ dòng lệnh:

npm install -g uipro-cli

3. Vào thư mục dự án và cài cho trợ lý AI đang dùng:

cd /path/to/your/project
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai antigravity # Antigravity (.agent + .shared)
uipro init --ai all         # All assistants

4. Không muốn dùng CLI thì chép tay thư mục: với Claude Code là .claude/skills/ui-ux-pro-max/; với Cursor, Windsurf, Antigravity là file workflow tương ứng cộng thư mục .shared/ui-ux-pro-max/.

Nếu anh chị chưa rõ skill là gì và nằm ở đâu trong Claude Code, đọc trước bài Agent Skills là gì.

Thử ngay với trang spa và dashboard

Landing page cho spa. Ví dụ mẫu trong SKILL.md viết bằng tiếng Việt: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp". Khi nhận câu này, AI được hướng dẫn tìm lần lượt loại sản phẩm (beauty spa wellness), phong cách (elegant minimal soft), font, bảng màu, cấu trúc trang (hero, social proof), rồi các nguyên tắc UX về hiệu ứng và khả năng tiếp cận. Chị chủ spa ở đầu bài chỉ cần gõ:

Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp, dùng Next.js, tông nhẹ nhàng sang trọng

Dashboard cho phòng kinh doanh. Với dashboard, skill tìm thêm ở nhóm chart để chọn biểu đồ đúng loại dữ liệu:

Tạo dashboard theo dõi doanh số theo tuần và theo nhân viên, HTML + Tailwind, ưu tiên dễ đọc trên laptop

Mẹo

Có brand guideline thì dán màu, font của công ty vào ngay trong yêu cầu. Skill không biết nhận diện của anh chị; không được dặn thì AI sẽ chọn theo ngành, đẹp nhưng không phải màu nhà mình.

Lưu ý

• Giấy phép CC BY-NC 4.0: README bản v1.0.0 ghi rõ dùng miễn phí cho mục đích cá nhân, phi thương mại, phải ghi công "UI UX Pro Max", không dùng thương mại khi chưa xin phép. Làm web cho khách hàng hay cho sản phẩm bán ra thì liên hệ tác giả trước.
• Cần Python trên máy: máy văn phòng bị khóa quyền cài phần mềm sẽ vướng ở bước này.
• Chi phí: skill miễn phí, nhưng mỗi lần tìm kiếm là thêm lệnh và thêm token cho AI đọc kết quả.

Nhận xét của chuyên gia

Tôi thấy UI UX Pro Max hợp nhất với người không có nền thiết kế nhưng phải tự làm trang web, trang sự kiện, dashboard. Cái được lớn nhất là AI bị buộc chọn có căn cứ theo ngành, thay vì lặp lại một kiểu giao diện cho mọi thứ.

Hợp với ai: marketer, chủ shop, nhân viên vận hành tự dựng trang bằng Claude Code, Cursor, Windsurf hoặc Antigravity cho mục đích nội bộ, phi thương mại.

Chưa hợp với ai: công ty đã có design system riêng, vì skill dễ kéo AI ra khỏi chuẩn của mình, viết skill nội bộ dựa trên brand guideline sẽ đúng hơn; đơn vị làm web thuê, vì giấy phép phi thương mại là rủi ro pháp lý thật.

Cách bắt đầu của tôi: cài vào một dự án thử, giao AI làm lại một trang sẵn có, đặt hai bản cạnh nhau cho trưởng nhóm chọn. Kết quả "đẹp hơn" vẫn cần người duyệt bằng mắt, nhất là độ tương phản chữ và hiển thị trên điện thoại.

Một câu để nhớ: UI UX Pro Max không biến AI thành nhà thiết kế, nó chỉ bắt AI xem catalogue trước khi cắt vải.

Câu hỏi thường gặp

UI UX Pro Max có miễn phí không?

Có, mã nguồn và dữ liệu tải miễn phí trên GitHub. Nhưng bản v1.0.0 dùng giấy phép CC BY-NC 4.0, chỉ miễn phí cho mục đích phi thương mại.

UI UX Pro Max dùng được với những công cụ nào?

README bản v1.0.0 hỗ trợ Claude Code, Cursor, Windsurf và Antigravity, cài bằng lệnh uipro init --ai <tên> hoặc chép thư mục thủ công.

UI UX Pro Max có thay được designer không?

Không. Skill giúp AI tránh các lỗi phổ biến và chọn phong cách hợp ngành, còn bản sắc thương hiệu và trải nghiệm riêng của sản phẩm vẫn cần người làm thiết kế quyết định.

Xem các mốc khác trong chuỗi bài dòng thời gian AI.

Nguồn: nextlevelbuilder/ui-ux-pro-max-skill, bản v1.0.0 trên GitHub, 02/12/2025.