Xây UI decision system với ak:ui-ux-pro-max

Biến product context thành design recommendation đóng gói, lưu rule đã duyệt và xác minh experience đã triển khai.

Dùng ak:ui-ux-pro-max để chọn và review hướng product UI: layout, style, color, typography, interaction, accessibility, responsive behavior, form, chart và performance. Search tool dùng CSV đóng gói, vì vậy recommendation có thể tái lập trong một release nhưng không phải standard trực tiếp.

Chọn ak:ui-ux-pro-max cho design reasoning

Dùng Skill khi

Bạn đang thiết kế hoặc review page, component, design system, navigation, animation, form, chart hoặc mobile interaction.
Bạn cần recommendation có lý do về style, palette, typography, landing page hoặc product pattern trước khi viết code.
Bạn muốn UX và accessibility review theo priority với anti-pattern rõ ràng.
Bạn muốn lưu master design system cùng page-specific override.

Chọn workflow khác khi

Bạn đã sẵn sàng thêm shadcn/ui component hoặc Tailwind implementation. Dùng ak:ui-styling sau khi hướng thiết kế được duyệt.
Bạn chỉ cần audit ngắn theo live web guideline hiện tại. Dùng ak:web-design-guidelines.
Task chỉ liên quan backend, infrastructure hoặc không có ảnh hưởng visual hay interaction.

Chuẩn bị product context

Nêu product type, audience, key task, platform, content density, brand constraint, accessibility target, theme được hỗ trợ và thiết bị đích.
Cung cấp screenshot, token, component, analytics và UX problem hiện có khi khả dụng. Tách bằng chứng khỏi preference thẩm mỹ.
Cài Python để chạy search CLI đóng gói. Riêng search không cần mạng.
Xác định workflow có được ghi trong design-system/ hay không; nếu không persist, CLI chỉ in output.

Runtime	Cách gọi	Ranh giới bằng chứng
Claude Code	`/ak:ui-ux-pro-max ...`	Phân phối Claude đầy đủ được hỗ trợ khi đã cài; rendering và project test vẫn phụ thuộc session.
Cursor	`/ak:ui-ux-pro-max ...`	Cách gọi slash đã được người dùng xác minh, không phải bằng chứng về tool hay Hook parity đầy đủ.
Codex	`$ak:ui-ux-pro-max ...`	Hỗ trợ native discovery với Hook projection một phần.

Chạy Skill

/ak:ui-ux-pro-max "Design an accessible mobile-first checkout system for a subscription app; preserve the existing brand, cover loading/error/empty states, dark mode, reduced motion, and provide implementation-ready tokens"

/ak:ui-ux-pro-max "Design an accessible mobile-first checkout system for a subscription app; preserve the existing brand, cover loading/error/empty states, dark mode, reduced motion, and provide implementation-ready tokens"

$ak:ui-ux-pro-max "Design an accessible mobile-first checkout system for a subscription app; preserve the existing brand, cover loading/error/empty states, dark mode, reduced motion, and provide implementation-ready tokens"

Skill không có top-level mode flag được tài liệu hóa. Search CLI đóng gói có:

CLI input	Kết quả	File effect
`--design-system`	Kết hợp dữ liệu đóng gói về product, style, color, landing, typography và reasoning	Mặc định in ASCII; `-f markdown` in Markdown.
`--domain <domain>`	Tìm một dataset đóng gói như `style`, `color`, `typography`, `chart`, `ux`, `react` hoặc `web`	Terminal output chỉ đọc; `-n` đổi số result và `--json` đổi format.
`--stack react-native`	Tìm dataset stack-specific duy nhất được đóng gói	Không suy diễn hỗ trợ stack khác từ description của Skill.
`--persist -p "Project"`	Lưu system được generate	Ghi `MASTER.md` theo project slug và tạo thư mục `pages/` dưới `design-system/`.
`--page "checkout"` cùng `--persist`	Thêm deviation riêng cho page	Ghi page override, ưu tiên hơn master trên page đó.
`--output-dir <path>`	Đổi persistence root	Resolve và review path trước khi ghi.

Theo dõi các stage có thể quan sát

Định khung product. Ghi audience, platform, primary action, content, brand, constraint và usability outcome đo được.
Generate baseline system. Bắt đầu bằng combined design-system search, rồi kiểm tra reason cùng anti-pattern thay vì coi match đầu tiên là bắt buộc.
Đào sâu phần chưa chắc chắn. Search domain tập trung cho accessibility, interaction, chart, typography, performance hoặc platform behavior.
Giải quyết xung đột. Bằng chứng project, requirement chính thức và user need đã test có ưu tiên cao hơn recommendation đóng gói.
Chỉ persist system đã duyệt. Ghi master và page override sau khi thống nhất tên, path, token và exception.
Implementation và verify ở workflow khác. Dùng implementation workflow của project, test UI thực và báo cáo bằng chứng.

Làm rõ authority và freshness

Guidance đóng gói không phải live standard

CSV dataset và checklist text là knowledge bundle tại một thời điểm. Chúng không thay WCAG, platform, browser, framework hay brand guidance hiện tại. Xác minh requirement nhạy theo version hoặc rủi ro cao tại primary source.

--persist ghi design-system file; nó không implementation component hay chứng minh code hiện có tuân thủ các rule đó.
Palette suggestion không phải bằng chứng contrast. Test cặp foreground và background thực trong cả hai theme cùng mọi interactive state.
Không overwrite design system hiện có nếu chưa so sánh token và ghi impact của migration.
Search command không có provider cost hay network effect. Font loading, asset retrieval, implementation hoặc testing sau đó có thể có.

Xác minh output và bằng chứng

Kết quả hoàn chỉnh nên có product assumption, hướng đã chọn và bị loại, semantic token, type và spacing scale, responsive behavior, component state, navigation rule, accessibility requirement và page-level exception. Xác minh UI đã implementation bằng keyboard cùng screen reader flow, touch target, contrast, zoom hoặc Dynamic Type, reduced motion, light/dark theme, small-phone và landscape layout, loading và failure state, cùng table hoặc text alternative cho chart.

Triệu chứng	Bước tiếp theo an toàn
Recommendation quá chung	Thêm product type, audience, primary task, tone, density và platform vào query, rồi so sánh focused domain result.
Stack được mô tả bị từ chối	CLI đóng gói chỉ expose `react-native`; dùng domain guidance thận trọng và xác minh stack thực riêng.
Persistence ghi sai folder	Dừng, kiểm tra project slug và `--output-dir`, rồi chỉ di chuyển hoặc generate lại sau khi xác nhận ownership.
Master và page rule xung đột	Chỉ áp dụng page override cho page đó và giữ shared rule trong master; ghi lý do cho mọi deviation.
Design pass checklist nhưng usability fail	Coi user hoặc test evidence quan sát được có authority cao hơn và sửa system.

Stable và beta chứa cùng ak:ui-ux-pro-max Skill, script và dataset đóng gói trong các release được tài liệu hóa. Tiếp tục với Runtime adapter, Project, artifact và checkpoint, hoặc Tổng quan Engineer Kit.

Xây UI decision system với ak:ui-ux-pro-max

On this page