UI/UX Pro Max Skill

Phần 5 đã giải thích hệ thống skill. Đây là một skill trong thực tế: dự án đóng gói 67 phong cách UI, 96 bảng màu và 100 quy tắc thiết kế theo ngành vào một skill kích hoạt chỉ với dưới 100 token.

Skill này tên là UI/UX Pro Max, do nhóm nextlevelbuilder xây dựng. Nó có sẵn trên Claude Code, đã được hơn nghìn developer cài đặt, và thể hiện điều đáng nghiên cứu: cách bạn đóng gói khả năng suy luận về thiết kế, không chỉ output về hình ảnh dưới dạng context mà agent có thể làm việc cùng.

Đây không phải là tạo một nút bấm. Đây là mã hóa logic design system để agent suy luận về lựa chọn phong cách, anti-pattern và ràng buộc platform giống như cách nó suy luận về code. Và nó làm điều này bằng các pattern context engineering mà chúng ta đã xây dựng qua series này: progressive disclosure, configuration matrix và hierarchical persistence.

67 styles × 96 palettes × 57 font pairings = 373K combinations, loaded one at a time — Từ mega-prompt hỗn loạn đến kiến trúc skill — tải design intelligence chỉ khi được kích hoạt.

Vấn đề: Design System Không Vừa Prompt

Bạn muốn một agent có thể tạo design system. Không phải wireframe. Không phải “làm cho tôi một landing page.” Mà là một design system hoàn chỉnh: color token, typography scale, spacing unit, component pattern và triển khai cụ thể cho từng platform như React, SwiftUI và Flutter.

Nỗ lực đầu tiên là một mega-prompt. Bạn viết ra các quy tắc:

“Dùng spacing tăng theo bội số 8px”
“Primary action cần độ tương phản cao”
“Healthcare UI không được dùng màu đỏ cho primary button”
“Luồng checkout e-commerce không được dùng Glassmorphism vì làm giảm tín hiệu tin cậy”

Bạn thêm ví dụ. Bạn thêm edge case. Bạn chạm mốc 12.000 token và agent vẫn đưa ra lựa chọn đáng ngờ vì thiết kế không phải một tập hợp quy tắc mà là một framework suy luận. Agent cần hiểu tại sao Glassmorphism phá vỡ niềm tin trong e-commerce (độ trong suốt gợi ý sự tạm thời, trong khi checkout cần sự vững chắc), không chỉ biết Glassmorphism bị cấm.

Và bạn cần khả năng suy luận này hoạt động trên 67 phong cách UI khác nhau, mỗi phong cách có ràng buộc riêng. Minimalism có quy tắc bảng màu khác với Cyberpunk UI. Spatial UI (VisionOS) có yêu cầu về độ sâu và lớp layer không áp dụng cho Brutalism. Nếu mã hóa tất cả vào prompt: bạn phải tải toàn bộ (context explosion) hoặc bỏ sót context quan trọng (quyết định tệ).

UI/UX Pro Max skill giải quyết bằng cách coi design intelligence như một bài toán configuration matrix.

Configuration Matrix: 373.464 Tổ hợp, Chỉ Tải 1 Mỗi Yêu cầu

Đây là insight cốt lõi: skill quản lý 67 phong cách UI × 96 bảng màu theo ngành × 57 cặp phông chữ. Tổng 373.464 tổ hợp design system có thể. Nhưng không bao giờ tải toàn bộ. Nó dùng BM25 ranking để chọn đúng tổ hợp dựa trên yêu cầu của người dùng.

BM25 (Best Matching 25) là thuật toán ranking ban đầu được thiết kế cho search engine. Nó chấm điểm tài liệu dựa trên tần suất từ, inverse document frequency và chuẩn hóa độ dài. Thuật toán này có hiệu ứng bão hòa: sau một điểm nhất định, các lần xuất hiện thêm của một từ đóng góp ít hơn vào điểm số, ngăn tài liệu quá dài bị thiên vị không công bằng. Các hệ thống RAG hiện đại kết hợp BM25 với vector search để có cả hiểu biết ngữ nghĩa và khớp từ khóa chính xác.

Trong UI/UX Pro Max skill, BM25 chạy trên năm kênh song song:

Product matching: Đây là loại app gì? SaaS dashboard, e-commerce, healthcare portal, fintech platform?
Style recommendation: Phong cách nào trong 67 UI style phù hợp với loại sản phẩm và mô tả người dùng?
Color selection: Bảng màu ngành nào khớp với domain sản phẩm?
Pattern analysis: Component pattern nào phù hợp với context này?
Typography pairing: Tổ hợp phông chữ nào khớp với phong cách và ngành đã chọn?

Agent xem kết quả query từ mỗi kênh, xếp hạng chúng và chỉ tải kết quả top từ mỗi kênh. Một healthcare fintech app có thể kích hoạt: Minimalism style + Healthcare color palette (xanh dương nhạt, tránh đỏ cho primary action) + IBM Plex Sans/Plex Serif pairing + Anti-pattern rule cho medical UI.

Đó là năm context chunk thay vì 373K. Progressive disclosure đang hoạt động.

BM25 ranking selects 1 of 373K combinations based on query signals — Cấu trúc skill: metadata kích hoạt loading, BM25 chọn cấu hình, agent suy luận kết quả.

Quy tắc Suy luận Theo Ngành: Domain Expertise Dưới Dạng Filter

Skill bao gồm 100 quy tắc suy luận theo ngành. Đây không phải style guide. Đây là domain expertise được mã hóa về những gì hoạt động và những gì phá vỡ niềm tin trong context cụ thể.

Ví dụ các quy tắc từ codebase:

Healthcare:

“Không dùng màu đỏ cho primary call-to-action button. Đỏ báo hiệu nguy hiểm/lỗi trong ngữ cảnh y tế. Dùng xanh dương hoặc xanh lá nhạt.”
“Mật độ thông tin cao hơn consumer app. Người dùng là chuyên gia cần dữ liệu, không phải sự đơn giản.”
“Accessibility là compliance, không phải enhancement. WCAG AAA cho color contrast, không phải AA.”

E-commerce:

“Luồng checkout không được dùng Glassmorphism hoặc Neumorphism. Độ trong suốt giảm cảm giác bảo mật. Dùng solid fill.”
“Hình ảnh sản phẩm cần background tương phản cao. Gradient tinh tế che chi tiết sản phẩm.”
“Tín hiệu khẩn cấp (low stock, giới hạn thời gian) cần visual weight. Đừng chôn vùi trong body text.”

Fintech:

“Số là first-class UI element. Typography phải hỗ trợ dữ liệu dạng bảng, không chỉ văn xuôi.”
“Trust signal (security badge, encryption indicator) phải hiển thị mà không cần scroll.”
“Dark mode là bắt buộc, không phải tùy chọn. Design token phải hỗ trợ cả hai từ ngày đầu.”

Các quy tắc này chỉ tải khi ngành được phát hiện. Healthcare app không thấy e-commerce rule. Điều này ngăn instruction interference, vấn đề từ Phần 5 khi các capability không liên quan chảy vào nhau khi tải đồng thời.

Pattern ở đây là coi domain expertise như filterable context. Thay vì viết “Đây là 100 design rule, áp dụng những cái liên quan,” skill mã hóa “Đây là 15 quy tắc cho ngành đã phát hiện.” Agent suy luận trên 15 ràng buộc, không phải 100. Signal, không phải noise.

Master + Overrides: Hierarchical Design System Persistence

Khi agent tạo ra design system, nó cần tồn tại lâu dài. Không phải dưới dạng một file tái tạo mỗi lần. Mà là một nguồn sự thật ổn định hỗ trợ override theo từng trang.

Skill dùng pattern Master + Overrides:

design-system/
├── MASTER.md          # Global design token
└── pages/
    ├── checkout.md    # Override cho checkout flow
    ├── dashboard.md   # Override cho dashboard
    └── profile.md     # Override cho user profile

MASTER.md định nghĩa hệ thống toàn cục:

## Color Token
--color-primary: #2563eb
--color-primary-hover: #1d4ed8
--color-background: #ffffff
--color-text: #1f2937

## Typography Scale
--font-family-sans: 'Inter', sans-serif
--font-family-mono: 'IBM Plex Mono', monospace
--font-size-base: 16px
--font-size-lg: 20px

Override theo trang chỉ thay đổi những gì khác:

## Checkout Override
## Color Token
--color-primary: #059669  # Xanh lá cho "Complete Purchase"
--color-background: #f9fafb  # Hơi ấm hơn white toàn cục

Khi agent cần tạo checkout page, nó đọc MASTER.md và pages/checkout.md, áp dụng diff và suy luận trên kết quả merge. Không tái tạo toàn bộ design system. Không duy trì bản sao trùng lặp của token không đổi. Nó suy luận trên delta.

Đây là hierarchical persistence pattern từ Phần 4. Global state trong một file ổn định. Local state trong override file. Agent hòa giải chúng lúc runtime. Con người chỉ review diff, không phải full spec.

Design Token Là Từ vựng Chung

CSS variable trở thành interface giữa AI reasoning và human review. Agent không nói “primary button nên là màu xanh.” Nó đề xuất --color-primary: #2563eb. Designer review token đó, phê duyệt hoặc thay đổi, và mọi component dùng var(--color-primary) tự động cập nhật.

Điều này quan trọng vì nó chuyển design intelligence từ code generation sang system generation. Agent không viết button component. Nó định nghĩa design system dưới dạng một tập token, sau đó dùng các token đó để tạo component. Đổi token, mọi component cập nhật. Không cần chỉnh sửa code.

Tailwind v4, ra mắt đầu năm 2026, chuyển sang cách tiếp cận CSS-first, nơi tất cả design token được expose dưới dạng native CSS variable. Điều này khớp hoàn hảo với pattern AI-driven theming: agent đề xuất token, framework tiêu thụ chúng, developer chỉ review quyết định (lựa chọn màu, spacing scale) thay vì implementation (hàng trăm component file).

Nghiên cứu từ AutonomyAI năm 2026 chứng minh context-aware styling, nơi agent điều chỉnh UI theme dựa trên tín hiệu như OS theme, reduced motion preference, device memory, locale và thậm chí thời gian trong ngày. Agent thu thập các tín hiệu này và tạo ra theme variant nằm trong ràng buộc token của bạn. Kết quả: automated theming không làm hỏng performance hoặc brand consistency.

Design token là hợp đồng còn thiếu giữ cho UI không trôi dạt vào sự không nhất quán khi team, feature và theme nhân lên. Khi token được coi là architectural artifact hạng nhất, design system của bạn trở nên scalable thay vì dễ vỡ.

Design tokens as the interface between AI reasoning and human oversight — Agent đề xuất token, hệ thống áp dụng chúng, designer review quyết định thay vì implementation.

Multi-Framework Output: Cùng Hệ thống, Khác Platform

Skill hỗ trợ 13 tech stack: React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose.

Quyết định kiến trúc quan trọng: nó không duy trì 13 bản sao design logic. Nó duy trì một design system (Master token) và 13 translation layer.

design-system/MASTER.md
  → React/Tailwind: className="bg-primary hover:bg-primary-hover"
  → SwiftUI: Color("Primary")
  → Flutter: Theme.of(context).primaryColor
  → Jetpack Compose: MaterialTheme.colorScheme.primary

Agent đọc design system một lần, sau đó tạo platform-specific code theo framework convention. Khi designer đổi --color-primary trong MASTER.md, skill tự động tái tạo tất cả platform implementation. Một nguồn sự thật, nhiều output.

Đây là cùng pattern khiến Claude Code skill composable (từ Phần 5). Skill đóng gói translation logic, không phải design logic. Design decision nằm trong MASTER.md (human-editable). Translation rule nằm trong skill (agent-managed). Tách biệt rõ ràng.

Pre-Delivery Checklist: QA Là Output, Không Phải Afterthought

Design intelligence bao gồm QA. Skill tạo không chỉ code mà còn review checklist:

Accessibility Checklist:

☐ Tất cả interactive element có visible focus state
☐ Color contrast ratio đạt WCAG AAA (7:1 cho normal text)
☐ Touch target tối thiểu 44×44px
☐ Form input có associated label

Responsive Breakpoint:

☐ Mobile (320px): Single column, stacked navigation
☐ Tablet (768px): Two-column layout, collapsible sidebar
☐ Desktop (1024px): Full layout với persistent navigation

Performance:

☐ CSS file size dưới 50KB (gzipped)
☐ Không có layout shift khi toggle theme
☐ Font loading dùng font-display: swap

Các checklist này được tạo từ UI style đã chọn và industry rule. Healthcare app nhận yêu cầu WCAG AAA. Consumer app chỉ cần WCAG AA. E-commerce checkout nhận thêm checklist item cho trust signal (security badge, payment icon).

Pattern ở đây: QA criteria là context, không phải documentation. Agent không đọc accessibility guide riêng. Industry rule bao gồm “Healthcare → WCAG AAA required.” Skill tạo checklist phù hợp. Developer review trước khi delivery.

So sánh với Các AI Design Tool Khác

Ba tool thống trị không gian AI design năm 2026: v0.dev (Vercel), Galileo AI và Uizard.

v0.dev ($20/tháng) tạo React và Next.js component dùng Tailwind CSS và shadcn/ui. Nó tạo code sạch nhất cho component generation, nhưng code-first chứ không phải system-first. Bạn nhận component, không phải design system. Tốt cho prototype từng trang riêng lẻ. Ít hữu ích hơn để duy trì consistency trên toàn sản phẩm.

Galileo AI ($19/tháng) là Figma-first, tạo UI screen bóng bẩy và complete design family với component nhất quán, color system và typography. Nó dẫn đầu về chất lượng output cho visual design. Nhưng đây là design tool, không phải development tool. Bạn nhận Figma file, không phải running code. Một công ty fintech báo cáo tiết kiệm 40 giờ làm việc thủ công khi dùng Galileo AI để căn chỉnh UI design giữa các phòng ban, nhưng developer vẫn phải implement những design đó thủ công.

Uizard ($12/tháng với free tier) nhắm đến non-designer và product manager, chuyển bản phác thảo vẽ tay thành wireframe số. Một SaaS startup cắt giảm 60% thời gian prototyping bằng cách dùng Uizard để biến client request thành MVP mockup trong 2 ngày. Nhưng output là wireframe-oriented, không phải production-ready.

UI/UX Pro Max nằm ở category khác. Đây không phải standalone tool. Đây là Claude Code skill hoạt động bên trong development environment của bạn. Bạn mô tả sản phẩm, skill tạo design system dưới dạng CSS token, sau đó dùng các token đó để tạo component trong framework bạn chọn. Nó là system-first (token trước component) và code-first (runnable React/SwiftUI/Flutter, không chỉ Figma file).

So sánh không phải “cái nào tốt hơn.” Mà là “workflow nào phù hợp với team bạn.” Nếu bạn là designer mock up concept, dùng Galileo AI. Nếu bạn là developer build component, dùng v0.dev. Nếu bạn maintain design system trên nhiều platform, dùng cách tiếp cận skill-based mã hóa design intelligence thành reusable context.

Tool comparison matrix: design tools vs. development tools, visual output vs. system output — Các tool khác nhau cho workflow khác nhau — UI/UX Pro Max tối ưu cho system-first, multi-platform development.

Cài đặt và Sử dụng: CLI + Skill Architecture

Skill có sẵn qua Claude Code plugin marketplace và dưới dạng standalone CLI tool.

Qua Claude Code:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

Qua CLI (khuyến nghị cho multi-platform support):

npm install -g uipro-cli
uipro init --ai claude

Cách tiếp cận CLI tạo platform-specific configuration file (.cursor/, .windsurf/, .kiro/) một cách động thay vì lưu chúng trong repository. Đây là template-based generation pattern: skill định nghĩa logic, CLI tạo scaffolding cho môi trường cụ thể của bạn.

Khi đã cài đặt, skill tự động kích hoạt khi bạn yêu cầu UI/UX work:

“Build a healthcare patient portal with a professional, accessible design”

Agent tải skill, chạy BM25 ranking trên năm kênh (product: healthcare, style: Minimalism, palette: Healthcare Blues, pattern: professional dashboard, typography: IBM Plex), tạo MASTER.md design system và scaffold trang đầu tiên với pre-delivery accessibility checklist.

Bạn review token, phê duyệt hoặc điều chỉnh, và agent tạo component dùng hệ thống bạn đã phê duyệt. Không có mega-prompt. Không có manual design system authoring. Skill đóng gói reasoning framework; agent áp dụng nó.

Context Engineering Pattern Trong Thực tế

Kết nối lại với framework của series.

Progressive Disclosure (Phần 2): Skill description là ~100 token. Agent thấy “design intelligence for professional UI/UX across multiple platforms” và biết kích hoạt nó cho design task. Chỉ khi được kích hoạt, nó mới tải BM25 ranking logic, industry rule và Master+Overrides template. Metadata → Instruction → Resource, tải theo trình tự.

Configuration Matrix (Phần 5): 67 style × 96 palette × 57 font = 373K tổ hợp. Skill không tải tất cả. Nó query chúng, xếp hạng, tải top match. Đây là unbounded context trong thực tế: lý thuyết là vô hạn option, chỉ cái liên quan được tải.

Hierarchical Persistence (Phần 4): MASTER.md là global source of truth. Page-specific override nằm trong file riêng. Agent hòa giải chúng lúc runtime. Con người review diff, không phải full spec. Điều này ngăn state duplication và khiến versioning có thể quản lý.

Domain-Specific Reasoning: Industry rule là filter, không phải instruction. Agent không thấy 100 quy tắc rồi chọn cái liên quan. Nó chỉ thấy 15 quy tắc cho ngành đã phát hiện. Ít context, suy luận tốt hơn.

Design Token as Interface: Agent đề xuất token (--color-primary: #2563eb), không phải implementation. Framework tiêu thụ token. Developer review quyết định, không phải code. Đây là sự tách biệt giữa reasoning (AI) và execution (framework) khiến AI-assisted development có thể scale.

Đây không phải pattern lý thuyết. Đây là kỹ thuật production, được thể hiện trong một skill bạn có thể cài đặt và dùng ngay hôm nay.

Skill Ecosystem Là Toàn cầu

Claude Code skill marketplace ra mắt đầu năm 2026 và vượt 1.400+ star trên anthropics/skills repository trong vài tuần. UI/UX Pro Max skill đã được cài đặt hơn nghìn lần, hỗ trợ 16 AI coding platform khác nhau (Claude Code, Cursor, Windsurf, Continue và nhiều hơn), và được maintain tích cực với update gần nhất vào ngày 2 tháng 3 năm 2026.

Đây là skill ecosystem trong thực tế. Cộng đồng developer ở Việt Nam, Brazil, Ba Lan hay bất kỳ đâu có thể đóng gói domain expertise thành skill và phân phối toàn cầu. Bạn không bắt đầu từ đầu. Bạn cài đặt capability.

Sự chuyển từ mega-prompt sang skill không chỉ là lựa chọn kiến trúc. Đó là thay đổi ecosystem. Khi design intelligence là một skill, không phải prompt, bạn có thể:

Cài đặt một lần, dùng trên nhiều project
Cập nhật tập trung mà không chạm vào từng project
Compose với skill khác (ví dụ: kết hợp UI/UX Pro Max với blog-writing skill để tạo marketing page với design nhất quán với brand)
Version độc lập với application code
Đóng góp cải tiến lại cho cộng đồng

Phần 5 giải thích lý thuyết. UI/UX Pro Max thể hiện thực tế. Skill là thật. Chúng đang dùng trong production. Và chúng thay đổi cách chúng ta xây dựng với AI.

Viết dựa trên nghiên cứu từ tài liệu nextlevelbuilder/ui-ux-pro-max-skill, dữ liệu Claude Code marketplace và phân tích so sánh các AI design tool tính đến tháng 3 năm 2026.

Context Engineering P6 – UI/UX Pro Max Skill