Review UI Design Skill
A Codex skill that reviews UI screenshots and Figma frames, ranks findings and draws annotated images numbered like the report
- 131 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill reads screenshots and, on request, Figma nodes, and runs the `contrast.py` script locally.
- Writing to Figma happens only after an explicit user request.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/review-ui-design-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill reads screenshots and, on request, Figma nodes, and runs the `contrast.py` script locally.
- Writing to Figma happens only after an explicit user request.
This is third-party code. Review the repository files before installing.
What it does
The review-ui-design skill assesses product interface designs: apps, web services, desktop programs and admin panels. Input can be a single screenshot, a chain of screens, an icon set or a Figma link. Problems are searched in three layers: visual quality (shape, colour, type, material, composition), interaction (flows, states, copy, accessibility) and design-system consistency. The result is one deduplicated report with priorities and issue numbers. When the environment supports it, the skill draws an image with the problems marked and an image with proposed fixes, both numbered like the report. The `contrast.py` script computes colour contrast, so readability findings rest on a number. After the design is revised, the skill re-reviews it under the same numbers and marks each issue as resolved, partly resolved, unresolved, new or a regression.
Who it is for. Designers and product owners who want an independent expert review of a layout before it goes to development.
Good fit when
- A screen layout is ready and a prioritised list of problems is needed before the team review.
- A second design iteration is out and you want to know which comments are closed and which came back.
- An icon set looks inconsistent: weight, stroke and small-size legibility are in doubt.
- You have a Figma frame link and the file must stay untouched.
Not a fit when
- Comparing a design with the built page for deviations: the authors point to a separate implementation-check skill.
- Reviewing interface code or product requirements.
- Exact sizes and colours are needed but only a screenshot exists: values will be approximate.
Example request
Use $review-ui-design to review this screenshot for visuals, interaction and design system, with priorities and annotated images.Limitations
The skill is built for Codex, and `SKILL.md` plus the reference files in `references/` are written in Chinese. Colours, sizes and fonts read off a screenshot are approximate: only source-file data and design-system variables count as exact. If Figma cannot be read, the skill asks for screenshots and does not guess the content from the link text. Annotated images are produced only when the environment supports it, otherwise a text report remains.
How to disable. Delete the `~/.codex/skills/review-ui-design` folder and start a new Codex task.
FAQ
How do I invoke the skill?
Type `$review-ui-design` in Codex and attach a screenshot, a set of screens or a Figma link. If the skill is not picked up at once, start a new task.
Does the skill change Figma files?
No, access is read-only by default. Writing starts only after an explicit request to edit the design that names the areas, for example screens V1 and V3.
How do I check fixes after a new design version?
Attach the new version and ask for a re-review with the old numbering. The skill marks every comment as resolved, partly resolved, unresolved, new or a regression.
Which materials does the skill accept?
A single screenshot, a chain of screens, an icon set, a screen recording or a Figma link, for apps, web services, desktop and admin panels.
How do I smoke-test the contrast script?
Run `python3 review-ui-design/scripts/contrast.py '#777777' '#ffffff'`. It prints about 4.48:1 and the AA check for regular text fails.
Discussion
No questions or reviews yet.
Related
SkillsA skill reviews a UI against 112 Checklist Design checklists or gives honest design critique: hierarchy, type, accessibility.
A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.
Four Codex skills covering product design stages, from reviewing a single screen to comparing visual directions.
A Codex skill: three distinct visual concepts, screenshot review and cutting excess, so interfaces look less templated.
A skill for Figma design systems: read-only audits with WCAG checks, component building and token export to code.
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
README in short
The repository holds one skill with six reference files and a contrast-check script. The README gives installation into the personal Codex skills folder, request templates, the report structure and how to sync the repository with a personal copy.
README badge
Original SKILL.md
--- name: review-ui-design description: 评审单份或一组产品 UI 设计稿，像资深设计专家团一样从视觉质量、交互体验、设计系统三个方面发现问题并给出具体、可执行、按优先级排序的优化建议；在可行时默认生成与报告编号对应的问题标注图和优化建议图，并支持修改稿增量复评。Use when the user provides UI screenshots, icon sets, screen recordings, product flows, or Figma links and asks for 设计评审、设计自检、专家评审、UI/视觉/体验评审、走查、挑毛病、提意见、看看怎么样、design review、提升设计质量或改稿复查。适用于 App、Web、桌面端和后台产品 UI；默认只读，不用于纯产品需求或代码审查，也不用于单纯比较设计稿与开发截图的还原偏差。 --- # 产品 UI 设计评审 ## 目标 把视觉总监、交互专家、设计系统专家和无障碍专家的检查视角合并成一份去重报告。先判断产品目标和信息传达，再检查视觉精度；不要把流行风格当作质量本身。 ## 执行边界 - 默认只读。除非用户明确要求“帮我修改”“直接改 Figma”等写操作，否则不得修改设计稿、Figma 文件或其他内容。 - 用户明确要求修改时，先完成评审并确认修改范围，再加载并遵循相关 Figma 写入 skill。 - 不把截图中无法测量的像素、色值、字体属性写成确定事实。 - 不为了显得专业而制造问题；只报告有证据、能解释影响的问题。 - 不把偶数字号、固定字阶、60-30-10、4/8px 栅格、固定行高或投影公式等经验法则当作普遍判错标准。 ## 评审流程 ### 1. 识别输入与上下文 按输入类型选择证据： - **单张截图**：做视觉快评；检查可见的视觉、控件语义和系统一致性，标记无法验证的交互状态与精确数值。 - **多张截图/流程图**：先确认或推断页面顺序，逐屏检查后再合并跨屏流程、反馈、状态和一致性问题。 - **Figma 链接**：优先使用官方 Figma 只读工具获取目标节点截图和元数据；先评审用户指定节点，范围不明时从链接节点开始。不要调用写入工具。读取能力不可用或失败时，说明限制并请用户提供截图或导出，不根据链接文字猜测设计内容。 - **修改稿/第二轮设计**：识别上一轮问题编号和结论，进入增量复评；不要把修改稿当作全新稿件重新编号。上一轮报告不可见时，先请用户补充；无法取得则明确说明并把本轮建立为新基线。 - **设计规范/组件库同时提供**：把它作为最高优先级基准，检查偏离是否有业务理由。 尽量识别平台、核心任务、用户类型、屏幕尺寸、设计阶段和业务约束。缺失信息不应阻塞快评；在报告开头列出关键假设，并降低相关结论的置信度。 按以下证据优先级判断： 1. 用户明确目标与业务约束 2. 已提供的品牌规范、设计系统和组件规范 3. 目标平台约定 4. WCAG 等可访问性要求 5. 通用设计原则与视觉启发 6. 当前风格趋势 ### 2. 加载评审知识 - 每次都完整阅读 [visual-quality.md](references/visual-quality.md)，用“形、色、字、质、构”做视觉深查。