以 skill 自身的术语
UI/UX Pro Max 是一个面向网页、移动端和桌面界面的可检索设计智能 skill。它可查询 79 种风格(50 种为活跃状态)、192 种带推理依据的产品调色板、74 种字体搭配、119 条 UX 指南、105 个图标、17 个 GSAP 预设、25 种图表类型和 22 种技术栈。可用它来设计页面、选择配色与排版、审查界面的可访问性与一致性、实现导航与动效,或改善可用性。
它会自动从 package.json、pubspec.yaml 或 xcodeproj 中检测技术栈,并生成设计系统,可选持久化以供跨会话检索。三个设计旋钮(变化度、动效、密度)可用于调节输出。该 skill 提供针对 UX、配色、排版、图标、GSAP 以及特定技术栈实现指南的领域专项搜索。
它产出什么
- 包含模式、风格、颜色、排版、效果和反模式的设计系统,可输出 ASCII、markdown 或 JSON 格式
- 当传入 --page 时,design-system/project-slug/pages/page-name.md 用于页面级覆盖
- 领域专项结果(UX 指南、配色方案、字体搭配、图标、GSAP 预设、图表建议、技术栈实现指导)
工作方式
- 01分析需求
提取产品类型(SaaS、电商、仪表盘)、目标受众、风格关键词(活泼、简约、暗色模式),并从 package.json、pubspec.yaml、xcodeproj 或 app.json 中检测技术栈。
- 02生成设计系统
针对新页面或新项目,使用 --design-system 参数运行 search.py。
- 03以主文件加覆盖文件的方式持久化
添加 --persist 和指向项目根目录的 --output-dir,以写入 design-system/project-slug/MASTER.md。页面级覆盖则放在 pages/page-name.md 中。
- 04补充领域专项搜索
针对单一领域(ux、color、typography、icons、gsap、chart、landing、google-fonts),用 2-5 个有意义的关键词和一个约束条件进行查询。
- 05查询 Stack 指南
使用 --stack 并指定检测到的 stack(react、nextjs、vue、swiftui、flutter 等),以获取针对具体实现的指导。
- 06检查交付前 Rules
在交付应用 UI 之前,阅读 references/pro-rules.md,并按照其标准的 Pre-Delivery Checklist 逐项核查,内容涵盖图标使用规范、交互反馈、明暗模式对比度、安全区域布局,以及原生/移动应用 UI 的无障碍性。