UI UX Pro MAX 中文操作手册

1. 技能简介

ui-ux-pro-max 是一个面向 Web / App UI 设计与体验优化 的技能库，适合在下面这些场景使用：

• 新页面设计：官网、落地页、Dashboard、管理后台、移动端页面
• 新组件设计：按钮、弹窗、表单、卡片、表格、图表、导航
• 视觉体系制定：配色、字体、间距、布局、暗黑模式
• 体验审查：可访问性、交互反馈、响应式、性能、动效
• UI 改版优化：让界面更专业、更统一、更易用

它的核心价值不是“直接生成固定模板”，而是提供：

• 设计系统推荐
• 领域知识检索
• UI/UX 规则清单
• 技术栈实现建议

2. 什么时候用它

如果你的任务会改变界面的：

• 长什么样
• 怎么排版
• 怎么交互
• 怎么动起来
• 用户是否更容易理解和操作

就应该优先用这个技能。

典型触发词

• 设计一个页面
• 优化 UI
• 调整配色 / 字体 / 风格
• 做暗黑模式
• 检查可访问性
• 提升移动端体验
• 做图表界面
• 评审某段前端 UI 代码

3. 当前已安装位置

你本机当前安装位置是：

C:\Users\yzw\.codex\skills\ui-ux-pro-max

4. 基本使用方式

这个技能的使用思路分 4 步：

1. 先分析需求
2. 先生成设计系统
3. 再按领域补充检索
4. 最后结合技术栈落地实现

官方说明里最重要的一条是：

优先从 --design-system 开始

也就是不要一上来只问颜色或字体，而是先让它给出完整设计方向。

5. 标准工作流

5.1 第一步：分析需求

先明确 4 件事：

• 产品类型：SaaS、官网、电商、工具、内容产品、社交、后台、移动 App
• 目标用户：C 端 / B 端，年轻用户 / 专业用户，工作场景 / 休闲场景
• 风格关键词：极简、科技感、活泼、沉浸式、暗黑、专业、轻奢
• 技术栈：React、Next.js、Vue、Tailwind、React Native 等

示例

需求：

做一个 AI 搜索首页

可拆成：

• 产品类型：工具类
• 用户：普通用户
• 风格：现代、极简、内容优先、暗黑模式
• 技术栈：React / Next.js

5.2 第二步：生成设计系统（必做）

优先执行：

python3 skills/ui-ux-pro-max/scripts/search.py "<产品类型 行业 风格关键词>" --design-system -p "项目名"

Windows 下通常可以改成：

py -3 skills/ui-ux-pro-max/scripts/search.py "<产品类型 行业 风格关键词>" --design-system -p "项目名"

示例

py -3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal dark" --design-system -p "AI Search"

这个命令会输出一套完整建议，通常包括：

• 产品模式
• 推荐视觉风格
• 配色方向
• 字体搭配
• 效果建议
• 需要避免的反模式

推荐理解

把 --design-system 当成：

• 项目视觉方向的“总方案”
• 后续页面和组件设计的“母规则”

5.3 第三步：按领域补充检索

如果你已经拿到总方案，但还想进一步细化某一块，可以用：

python3 skills/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域>

Windows：

py -3 skills/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域>

常用领域

常见例子

查配色：

py -3 skills/ui-ux-pro-max/scripts/search.py "fintech trustworthy premium" --domain color

查极简暗黑风格：

py -3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style

查搜索交互体验：

py -3 skills/ui-ux-pro-max/scripts/search.py "search loading animation accessibility" --domain ux

5.4 第四步：按技术栈补充实现建议

如果你想拿到某个技术栈的落地建议，可以执行：

python3 skills/ui-ux-pro-max/scripts/search.py "<关键词>" --stack react-native

目前该说明文件里明确写出的栈检索参数主要是：

• react-native

示例：

py -3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native

6. 推荐输出为 Markdown

如果你想把设计系统直接保存成文档，更适合使用 Markdown 输出：

py -3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

适合：

• 保存方案
• 发给团队
• 作为设计规范草稿
• 放进项目文档

7. 页面级设计系统持久化

如果你希望把设计系统保存下来，并支持“全局规则 + 页面覆盖规则”，可以用：

py -3 skills/ui-ux-pro-max/scripts/search.py "<关键词>" --design-system --persist -p "项目名"

如果要同时为某个页面创建覆盖规则：

py -3 skills/ui-ux-pro-max/scripts/search.py "<关键词>" --design-system --persist -p "项目名" --page "dashboard"

它会生成类似结构：

• design-system/MASTER.md
• design-system/pages/dashboard.md

使用原则

1. 先读 MASTER.md
2. 如果有对应页面文件，再用页面规则覆盖全局规则

适合：

• 多页面项目
• 组件库 / 设计系统项目
• 同一产品下多个模块的统一设计管理

8. 实战建议

场景 1：做新首页

建议流程：

1. --design-system
2. --domain landing
3. --domain style
4. --domain ux

场景 2：做 Dashboard

建议流程：

1. --design-system
2. --domain chart
3. --domain color
4. --domain ux

场景 3：优化已有页面

建议流程：

1. 先对照 UX / 可访问性清单
2. 再查 --domain ux
3. 有视觉问题再查 style / color / typography

场景 4：暗黑模式改造

建议流程：

1. --design-system
2. --domain style "dark mode"
3. 检查对比度与状态色

9. 它重点关注的专业规则

这个技能非常强调下面几类问题：

9.1 可访问性

• 文本对比度
• 焦点态
• 键盘可达
• 图标按钮标签
• 表单标签
• reduced motion

9.2 触控体验

• 点击区至少 44×44
• 不能只靠 hover
• 点击后要有反馈
• 错误提示要贴近问题点

9.3 性能体验

• 图片优化
• 懒加载
• 避免布局抖动
• 长列表优化
• 输入响应快

9.4 视觉一致性

• 不要混搭多种风格
• 不要用 emoji 当系统图标
• 阴影、圆角、图标风格要统一
• 主按钮层级要明确

9.5 表单与反馈

• 输入框必须有显式标签
• 错误提示要清晰
• 提交要有 loading / success / error
• 长表单最好支持草稿保存

10. 交付前检查清单

在真正交付 UI 代码前，建议至少检查这些：

• 是否有统一图标体系
• 是否存在过小点击区
• 是否有暗黑模式对比度不足
• 是否有只靠颜色表达状态
• 是否有固定元素遮挡内容
• 是否适配小屏和横屏
• 是否支持 reduced motion
• 是否有不自然或过慢的动画
• 是否有危险操作未确认

如果要做一次快速 UX 检查，可参考技能说明中的建议查询：

py -3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility z-index loading" --domain ux

11. 推荐提问模板

你在 Codex / AI 中调用这个技能时，可以直接这样提需求。

新页面设计

请使用 ui-ux-pro-max，帮我设计一个面向年轻用户的 AI 搜索首页，风格要求极简、科技感、支持暗黑模式。

配色建议

请使用 ui-ux-pro-max，为 fintech SaaS 推荐一套专业、可信、现代的配色。

组件优化

请使用 ui-ux-pro-max，优化这个登录表单的交互和可访问性。

UI 评审

请使用 ui-ux-pro-max，从视觉一致性、触控体验、无障碍和暗黑模式四个维度评审这段页面代码。

12. 当前安装的一个注意事项

我检查了你本机当前安装内容，发现：

• C:\Users\yzw\.codex\skills\ui-ux-pro-max\SKILL.md 存在
• 但 scripts 和 data 当前看起来是路径占位文本

当前文件内容类似：

• scripts → ../../../src/ui-ux-pro-max/scripts
• data → ../../../src/ui-ux-pro-max/data

这意味着：

• 文档说明已经装上了
• 但 实际脚本文件不一定已经正确落到本机

如果你后面执行 search.py 报“文件不存在”，原因大概率就在这里。

13. 建议你怎么用

如果你现在的目标是“让 AI 帮你做 UI/UX 方案”，即使脚本暂时不可执行，仍然可以直接这样用：

1. 在提需求时明确说 使用 ui-ux-pro-max
2. 把你的产品类型、目标用户、风格关键词、技术栈说清楚
3. 先要设计系统，再要页面结构，再要组件细化

推荐提法：

使用 ui-ux-pro-max，先为我的产品生成设计系统，再细化首页结构、配色、字体和交互建议。

14. 一句话总结

ui-ux-pro-max 最适合的使用方式不是“随便问一个颜色”，而是：

先出完整设计系统，再按 style / color / typography / ux / chart 等领域逐层细化，最后结合技术栈落地。