Review UI Design Skill

一个面向 Codex 的产品 UI 设计评审 Skill。它会像公司里的设计专家团一样，从视觉质量、交互体验和设计系统三个层面检查设计稿，输出去重、按优先级排序、可执行的优化建议。

默认只读。只有在用户明确提出“帮我修改”“直接改 Figma”等要求时，才允许进入设计稿写入流程。

能做什么

• 评审 App、Web、桌面端和后台产品 UI。
• 接收单张截图、多屏流程、图标作品或 Figma 链接。
• 从“形、色、字、质、构”检查视觉细节。
• 检查任务流程、控件语义、状态反馈、文案和无障碍。
• 检查颜色、文字、间距、圆角、组件和变量等设计系统一致性。
• 对图标系统进行专项检查，包括统一基因、光学体量、描边、圆角、透视、复杂度和小尺寸适配。
• 在条件允许时生成问题标注图和优化建议图，并让图片编号与文字报告一一对应。
• 对修改稿做增量复评，保留原问题编号并区分已解决、部分解决、未解决、新增和回归。
• 使用截图裁切、参考线、灰度、模糊、近似取色和对比度计算补充证据，避免只凭感觉下结论。

仓库结构

review-ui-design-skill/
├── README.md
└── review-ui-design/
    ├── SKILL.md
    ├── agents/
    │   └── openai.yaml
    ├── references/
    │   ├── design-system-quality.md
    │   ├── icon-quality.md
    │   ├── interaction-quality.md
    │   ├── report-template.md
    │   ├── sources.md
    │   └── visual-quality.md
    └── scripts/
        └── contrast.py

安装到个人全局 Skills

克隆仓库：

git clone https://github.com/ColourCloudSky/review-ui-design-skill.git
cd review-ui-design-skill

同步到 Codex 个人全局 Skills 目录：

mkdir -p ~/.codex/skills/review-ui-design
rsync -a review-ui-design/ ~/.codex/skills/review-ui-design/

安装后，可以在 Codex 中直接调用 $review-ui-design。如果当前任务没有立即识别到新 Skill，新建一个任务后再调用。

也可以直接让 Codex 完成安装：

把这个仓库中的 review-ui-design 安装到我的个人全局 Codex Skills，
运行 skill 校验，但不要修改仓库里的其他内容。

基本用法

评审单张 UI

使用 $review-ui-design 评审这张产品 UI 截图。
从视觉质量、交互体验和设计系统三个方面检查，
输出详细建议、问题标注图和优化建议图。

评审一套图标

使用 $review-ui-design 检查这套图标作品。
重点看统一基因、视觉体量、描边圆角、复杂度、色彩材质和小尺寸识别度。

评审 Figma

使用 $review-ui-design 只读评审这个 Figma 节点。
不要修改源文件；请输出按优先级排序的问题、标注图和优化方向图。

复评修改稿

这是上一轮修改后的版本。
使用 $review-ui-design 沿用原来的问题编号复评，
标记已解决、部分解决、未解决、新增和回归问题。

明确要求修改

默认评审不会写入设计稿。需要修改时，要明确授权并说明范围：

先使用 $review-ui-design 完成评审，然后帮我修改 Figma 中的 V1、V3，
其他部分不要改。

默认输出

首轮评审通常包含：

1. 总体判断与证据限制。
2. 值得保留的设计决策。
3. 最值得优先解决的问题。
4. 视觉质量、交互体验和设计系统三个部分。
5. 问题标注图。
6. 优化建议图。
7. 可快速完成的低风险改进和待确认项。

复评以变化为主：

• 保留旧问题编号。
• 更新问题状态标注图。
• 只有视觉方向发生变化时才重新生成优化建议图。
• 找不到上一轮报告时，会明确建立新的评审基线。

证据与执行边界

• 截图中的像素、颜色、字号和对比度只能视为近似值；源文件属性、设计变量或明确规范才属于已确认数据。
• 不把偶数字号、60-30-10、固定行高、固定 4/8px 栅格或投影公式当作普遍硬规则。
• Figma 读取失败时会请用户提供截图，不根据链接文字猜测内容。
• 默认不会修改截图、Figma 文件或其他设计资产。
• 单纯比较设计稿与开发实现的还原度，应使用专门的 UI 走查 Skill，而不是本 Skill。

校验

如果本机存在 Codex 内置的 skill-creator，可以运行：

python3 ~/.codex/skills/.system/skill-creator/scripts/quick_validate.py review-ui-design

对比度脚本冒烟测试：

python3 review-ui-design/scripts/contrast.py '#000000' '#ffffff'
python3 review-ui-design/scripts/contrast.py '#777777' '#ffffff'

预期结果：黑白对比为 21.00:1 并通过；#777777 与白色约为 4.48:1，普通文本 AA 检查不通过。

推荐的同步工作流

建议把 GitHub 仓库中的 review-ui-design/ 作为源文件，避免仓库版本与个人全局版本长期分叉。

从仓库同步到个人全局

git pull
mkdir -p ~/.codex/skills/review-ui-design
rsync -a review-ui-design/ ~/.codex/skills/review-ui-design/

也可以告诉 Codex：

拉取当前 review-ui-design-skill 仓库的最新版本，
校验 review-ui-design，然后同步到我的个人全局 Codex Skills。
不要覆盖其他 Skills。

用 Codex 更新仓库并推送

推荐提示词：

更新当前仓库中的 review-ui-design Skill：
1. 先查看现有内容并说明计划；
2. 只修改 review-ui-design 目录；
3. 更新后运行 quick_validate.py 和相关脚本测试；
4. 展示改动摘要；
5. 得到我确认后再创建提交并推送到 GitHub。

从个人全局版本同步回仓库

如果已经直接修改了个人全局 Skill：

rsync -a ~/.codex/skills/review-ui-design/ review-ui-design/
python3 ~/.codex/skills/.system/skill-creator/scripts/quick_validate.py review-ui-design
git diff

确认差异后再提交：

git add README.md review-ui-design
git commit -m "chore: sync review-ui-design skill"
git push

也可以告诉 Codex：

把我个人全局的 review-ui-design Skill 同步到当前仓库。
先校验并展示差异，不要修改其他目录；
得到我确认后再提交并推送。

维护建议

• 修改评审流程时更新 SKILL.md。
• 专项知识放在 references/，避免把主文件写得过长。
• 可重复、需要确定性的检查放在 scripts/。
• 新增固定数值前注明适用平台和规范版本。
• 每次更新后至少运行结构校验、Markdown 引用检查和关键脚本冒烟测试。
• 不把截图估算写成源设计的精确事实。

License

本项目采用 MIT License。