review-ui-design

review-ui-design is a skill for Codex from ColourCloudSky/review-ui-design-skill. It costs 195 tokens per session (3,639 once invoked), scanned A, original, MIT.

A read-only process for reviewing product interface designs from screenshots, screen recordings, icon sets, product flows, or Figma links.

In plain words
What is it for?
Use it to review app, website, desktop, or admin interfaces and, when appropriate, create marked-up issue images and improvement suggestions.
Why use it?
It helps find visual, usability, accessibility, and design-system problems, then ranks them by priority with concrete recommendations.

Skill for Codex

Written for Codex: agents/openai.yaml present.

Good fit Use it to review app, website, desktop, or admin interfaces and, when appropriate, create marked-up issue images and improvement suggestions.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/colourcloudsky/review-ui-design-skill/review-ui-design
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add ColourCloudSky/review-ui-design-skill --skill review-ui-design
Clone the repo
git clone --depth 1 https://github.com/ColourCloudSky/review-ui-design-skill

Made for: Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for review-ui-design

README.md
[![agentmods](https://agentmods.dev/badge/skills/colourcloudsky/review-ui-design-skill/review-ui-design/github.svg)](https://agentmods.dev/skills/colourcloudsky/review-ui-design-skill/review-ui-design)
Your own site
<a href="https://agentmods.dev/skills/colourcloudsky/review-ui-design-skill/review-ui-design"><img src="https://agentmods.dev/badge/skills/colourcloudsky/review-ui-design-skill/review-ui-design/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for review-ui-design

Your own site · 80×15
<a href="https://agentmods.dev/skills/colourcloudsky/review-ui-design-skill/review-ui-design"><img src="https://agentmods.dev/badge/skills/colourcloudsky/review-ui-design-skill/review-ui-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 195 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,639 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00195 $0.03639
Opus 5 $0.00097 $0.01819
Sonnet 5 $0.00039 $0.00728
Haiku 4.5 $0.00019 $0.00364

Measured 11d ago against content hash 3db3bbcdd74b, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

review-ui-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.

The scan reads SKILL.md. This mod also ships 1 executable file (scripts/contrast.py), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

review-ui-design/SKILL.md · 187 lines

How it starts

The opening of the file, as written. The whole thing — 187 lines — stays where its author put it; the contents beside it link to each section on GitHub.

产品 UI 设计评审

目标

把视觉总监、交互专家、设计系统专家和无障碍专家的检查视角合并成一份去重报告。先判断产品目标和信息传达,再检查视觉精度;不要把流行风格当作质量本身。

执行边界

  • 默认只读。除非用户明确要求“帮我修改”“直接改 Figma”等写操作,否则不得修改设计稿、Figma 文件或其他内容。
  • 用户明确要求修改时,先完成评审并确认修改范围,再加载并遵循相关 Figma 写入 skill。
  • 不把截图中无法测量的像素、色值、字体属性写成确定事实。
  • 不为了显得专业而制造问题;只报告有证据、能解释影响的问题。
  • 不把偶数字号、固定字阶、60-30-10、4/8px 栅格、固定行高或投影公式等经验法则当作普遍判错标准。

评审流程

1. 识别输入与上下文

按输入类型选择证据:

  • 单张截图:做视觉快评;检查可见的视觉、控件语义和系统一致性,标记无法验证的交互状态与精确数值。
  • 多张截图/流程图:先确认或推断页面顺序,逐屏检查后再合并跨屏流程、反馈、状态和一致性问题。
  • Figma 链接:优先使用官方 Figma 只读工具获取目标节点截图和元数据;先评审用户指定节点,范围不明时从链接节点开始。不要调用写入工具。读取能力不可用或失败时,说明限制并请用户提供截图或导出,不根据链接文字猜测设计内容。
  • 修改稿/第二轮设计:识别上一轮问题编号和结论,进入增量复评;不要把修改稿当作全新稿件重新编号。上一轮报告不可见时,先请用户补充;无法取得则明确说明并把本轮建立为新基线。
  • 设计规范/组件库同时提供:把它作为最高优先级基准,检查偏离是否有业务理由。

尽量识别平台、核心任务、用户类型、屏幕尺寸、设计阶段和业务约束。缺失信息不应阻塞快评;在报告开头列出关键假设,并降低相关结论的置信度。

按以下证据优先级判断:

  1. 用户明确目标与业务约束
  2. 已提供的品牌规范、设计系统和组件规范
  3. 目标平台约定
  4. WCAG 等可访问性要求
  5. 通用设计原则与视觉启发
  6. 当前风格趋势

2. 加载评审知识

  • 每次都完整阅读 visual-quality.md,用“形、色、字、质、构”做视觉深查。
  • 用户专门评审图标作品、画面包含成组图标,或初检发现图标系统性问题时,完整阅读 icon-quality.md
  • 出现控件、任务流程、表单、状态或多屏设计时,完整阅读 interaction-quality.md
  • 出现多组件、多页面、Figma 元数据、设计规范或明显复用关系时,完整阅读 design-system-quality.md
  • 输出前完整阅读 report-template.md
  • 只有在用户询问规则来源、需要继续扩充知识库或要联网复核最新规范时,阅读 sources.md

3. 做四轮检查

  1. 三秒印象:记录第一视觉焦点、主任务是否可见、整体气质是否与产品匹配。
  2. 结构检查:检查信息层级、分组、阅读动线、密度、关键操作和跨屏流程。
  3. 细节检查:逐项检查形、色、字、质、构,以及交互和设计系统。
  4. 反证检查:对每个候选问题追问:
    • 这是错误,还是有意的视觉策略?
    • 是否有业务、品牌、平台或无障碍理由?
    • 修改后会不会破坏已有优势?
    • 仅凭当前证据能否确认?

先记录问题,再按根因合并。相同的间距、色值、圆角、图标或组件问题只报告一次,并列出受影响位置。

4. 补充截图证据

有本地图像和代码执行能力时,只对会影响结论的疑点做程序化检查,不机械跑完整套工具:

  • 先确认原始分辨率和缩放状态,再查看 2–4 倍局部裁切;低分辨率放大不会产生新证据。
  • 用水平或垂直参考线验证重复元素的边缘、基线和间距关系。
  • 取色时选择无抗锯齿、无阴影、无透明叠加的稳定区域,并在多个点复核;截图采样仍标为“近似”,源文件属性或设计 Token 才能标为“已确认”。
  • 需要判断层级、体量或小尺寸识别时,生成灰度、轻微模糊和实际使用尺寸视图。
  • 保留原图不变;所有裁切、参考线和诊断视图都输出为派生文件,并在报告中写明证据方法。

Read the full file on GitHub · 187 lines

Files

What ships with it

8 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 11d ago First seen · 187 lines · 195 tokens per session scan A 3db3bbcdd74b

Subscribe to this mod's changes

review-ui-design is a skill published in the GitHub repository ColourCloudSky/review-ui-design-skill (113 stars, last pushed 1mo ago), licensed MIT. It adds 195 tokens to every session and 3,639 once invoked, about $0.0010 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

visual-ralph

Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ralph with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.

Yeachan-Heo/oh-my-codex · 50 tokens

accessibility

Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.

microsoft/hve-core · 47 tokens

make-resume

A Chinese-language tool for creating editable HTML resumes that can be changed in a browser and printed to PDF. It uses available resume templates when they are installed and otherwise provides a simpler fallback.

Hisn00w/ASu-skills · 86 tokens