VividKit Crystal clear AI coding
EN
Chọn Thiết Lập Bắt Đầu với AgentKit Tiếp Tục với ClaudeKit Chuyển từ ClaudeKit sang AgentKit Gỡ hẳn ClaudeKit AgentKit Là Gì? AgentKit Hoạt Động Như Thế Nào? Kit, Skill, Agent & Hook AgentKit Hỗ Trợ Runtime AgentKit Ứng Dụng AgentKit Desktop Cấu Hình AgentKit Tra Cứu CLI ak Cheatsheet skill AgentKit Workflows AgentKit Statusline AgentKit Cập Nhật CLI ak & Kits AgentKit Helper Cài lại clean AgentKit Xử Lý Sự Cố AgentKit Giới Thiệu ClaudeKit Hướng Dẫn ClaudeKit CLI Tìm Lệnh Phù Hợp Bảng Lệnh Nhanh Quy Trình Mẫu Tham Chiếu CLI Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Tool coding khác Cách ClaudeKit Hoạt Động Inside ClaudeKit Tìm Unknowns Của Bạn Khôi Phục Session Sửa Lỗi Từ Log Thiết Kế UI/UX Chuyển Đổi Tài Khoản Cấu Hình IDE Remote Control Codex App Sơ đồ hệ thống UI Review Gate Khuyến Mãi Ủng Hộ VividKit

Tóm tắt nhanh / Lệnh

Bộ Engineer

/ak:ui-ux-pro-max

Trí tuệ thiết kế UI/UX

Cung cấp trí tuệ thiết kế UI/UX đóng gói, có thể tìm kiếm cho độ hợp product, style, palette màu, typography, cấu trúc landing, chart, accessibility, tương tác, responsive, polish app và hướng dẫn stack React Native.

01

Quyết định kích hoạt

02

Phân tích yêu cầu

03

Sinh design system

04

Lưu phân cấp

Nguyên tắc 01

Nếu giao diện được nhìn, cảm, chuyển động hoặc tương tác, luật UI/UX phải được áp dụng

Nguyên tắc 02

Bắt đầu từ design system đầy đủ rồi mới đào sâu từng domain

Nguyên tắc 03

Accessibility và touch là yêu cầu nghiêm trọng, không phải polish

Nguyên tắc 04

Token ngữ nghĩa tốt hơn màu hex rải rác theo từng màn

Bản đồ thực thi

Các nhánh chính từ đầu vào đến kết quả, bám theo cách command chạy khi dùng thật.

01

Khởi động

Đầu vào, phạm vi, route

  1. 1 Quyết định kích hoạt Dùng skill khi công việc thay đổi cách giao diện nhìn, cảm, chuyển động, có cấu trúc hoặc được tương tác.
  2. 2 Phân tích yêu cầu Rút ra product type, đối tượng dùng, bối cảnh sử dụng, từ khóa style, nền tảng và stack.
02

Xử lý

Agent / skill thực thi

  1. 3 Sinh design system Bắt đầu bằng tìm kiếm design-system để kết hợp product, style, màu, landing, typography, luật suy luận và anti-pattern.
  2. 4 Lưu phân cấp Khi cần dùng lâu dài, lưu MASTER.md và override theo page nếu có; file page sẽ ưu tiên hơn Master cho page đó.
03

Kiểm chứng

Gate, review, xác thực

  1. 5 Tìm sâu theo domain Truy vấn các domain product, style, color, typography, chart, UX, google-fonts, landing, react, web hoặc prompt cho từng quyết định cụ thể.
  2. 6 Áp dụng theo stack Dùng hướng dẫn theo stack như điều hướng React Native, hiệu năng list, accessibility label, vùng chạm và safe area.
04

Đóng

Báo cáo, bàn giao, artifact

  1. 7 Triển khai theo luật Áp dụng luật ưu tiên cho accessibility, touch, hiệu năng, style, layout, typography, animation, form, navigation và chart.
  2. 8 Review trước bàn giao Chạy validation UX và các mục critical/high trên điện thoại nhỏ, landscape, dark mode, reduced motion và dynamic text lớn.

Cú pháp, đối số, subcommand

Cách gọi skill: cú pháp, đối số vị trí, option dùng chung, rồi từng subcommand với cú pháp và kết quả riêng.

Cú pháp

/ak:ui-ux-pro-max [component|page|design-system] [--style <style>] [--framework <fw>]

Đối số

[component|page|design-system]

Đối tượng UI

Đối tượng tùy chọn: một component, một page, hoặc design-system tái dùng. Bỏ qua để phân tích trải nghiệm hiển thị từ brief xung quanh.

/ak:ui-ux-pro-max page

Option dùng chung

--style <style>

Từ khóa style

Thiên search style đóng gói về một look đã nêu như minimal, dark-mode hoặc glassmorphism. Không bỏ kiểm accessibility hay touch.

/ak:ui-ux-pro-max --style dark-mode
--framework <fw>

Framework

Ưu tiên hướng dẫn stack cho framework đã nêu như react, nextjs, vue hoặc react-native. Không bịa stack chưa được tài liệu hóa.

/ak:ui-ux-pro-max --framework react

Subcommand

component Component
/ak:ui-ux-pro-max component [--style <style>] [--framework <fw>]

Thiết kế hoặc review một UI component: state, token, tương tác và accessibility.

--style <style>
Thiên khuyến nghị component về một style đã nêu.
--framework <fw>
Ưu tiên pattern component cho framework đã nêu.

Kết quả: Token, state, anti-pattern và yêu cầu accessibility cấp component trước khi viết code.

/ak:ui-ux-pro-max component
page Page
/ak:ui-ux-pro-max page [--style <style>] [--framework <fw>]

Thiết kế hoặc review một page: hierarchy, layout responsive, state và tương tác.

--style <style>
Thiên look và mật độ page về một style đã nêu.
--framework <fw>
Ưu tiên pattern page cho framework đã nêu.

Kết quả: Cấu trúc page, luật responsive, state component và checklist trước bàn giao cho màn đó.

/ak:ui-ux-pro-max page
design-system Design system
/ak:ui-ux-pro-max design-system [--style <style>] [--framework <fw>]

Sinh baseline có lý do: độ hợp product, style, màu, typography, layout và anti-pattern.

--style <style>
Thiên search hệ thống về một họ style đã nêu.
--framework <fw>
Ưu tiên hướng dẫn token và component cho framework đã nêu.

Kết quả: Hướng được chọn và bị loại, token ngữ nghĩa, thang type/spacing và yêu cầu accessibility.

/ak:ui-ux-pro-max design-system

Tính năng đặc biệt

Search design-system của CLI đóng gói

Flag cấp skill chỉ là --style và --framework. Flag CLI search đóng gói không lên slash command trừ khi dùng đúng hai token đó.

Domain tập trung của CLI đóng gói

Search tập trung thuộc các dataset CLI đóng gói như style, color, typography, chart, ux, react hoặc web; dùng chúng như hướng dẫn tại một thời điểm, không phải chuẩn live.

Chỉ persist khi đã duyệt

CLI đóng gói có thể persist master design system đã duyệt và override theo page dưới design-system; review tên, path, token và ảnh hưởng migration trước khi ghi.

Ranh giới dataset React Native

React Native là dataset stack-specific duy nhất trong CLI đóng gói. Không suy diễn hỗ trợ các stack chưa được tài liệu hóa từ mô tả Skill.

Prompt mẫu

Ví dụ gọi command theo từng flag, subcommand, mode hoặc route dùng được trong workflow thực tế.

Brief thiết kế mặc định Khuyến nghị 
/ak:ui-ux-pro-max
Dùng khi:
Một trải nghiệm hiển thị cần hướng dẫn style, token và accessibility trước khi viết UI code.
Kết quả:
Phân tích product context từ việc gần đây, bắt đầu từ trí tuệ thiết kế đóng gói, rồi trả hướng được chọn, token ngữ nghĩa, state và checklist accessibility trước bàn giao.
Component kèm style 
/ak:ui-ux-pro-max component --style minimal
Dùng khi:
Một component cần token, state và luật tương tác thiên về một look đã nêu.
Kết quả:
Giới hạn việc vào component đó, thiên search style đóng gói về minimal, và vẫn đòi contrast, vùng chạm và khả năng dùng keyboard trước khi bàn giao.
Page kèm framework 
/ak:ui-ux-pro-max page --framework react
Dùng khi:
Một page cần hierarchy, layout responsive và hướng dẫn stack React cụ thể.
Kết quả:
Review page đó về layout, state và tương tác, rồi áp hướng dẫn stack theo React mà không bịa framework chưa được tài liệu hóa.
Rà guideline 
/ak:ui-ux-pro-max review the checkout form against UI and accessibility guidelines
Dùng khi:
Khi mã giao diện đã có cần rà guideline, không phải một hướng hình ảnh mới.
Kết quả:
Rà giao diện hiện có về accessibility, vùng chạm, nhãn và sự nhất quán hình ảnh, rồi báo vi phạm cụ thể thay vì bịa một design system mới.
Design system 
/ak:ui-ux-pro-max design-system
Dùng khi:
Một khu vực product cần baseline tái dùng về style, màu, type và anti-pattern trước khi viết code.
Kết quả:
Chạy nhánh design-system, trả hướng được chọn và bị loại, token ngữ nghĩa, thang type/spacing và yêu cầu accessibility mà palette đơn thuần chưa chứng minh.

Phạm vi xử lý

  • accessibility
  • tương tác chạm
  • layout responsive
  • màu và typography
  • animation
  • form
  • navigation
  • chart
  • UX React Native

Tiếp theo