Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

视觉审查 (Visual Reviewer) · aiskillstore | DecimalAI

aiskillstore/visual-reviewer

SkillScore68Maintained

视觉审查 - 在产出可视化结果（网页、文档、UI 界面等）后，自动打开/预览结果，通过截图分析视觉质量问题（布局、间距、对齐、排版、颜色、交互状态等），并自主修复发现的问题。 This skill should be used automatically after producing any visual output. Triggers: 视觉审查, 视觉检查, 界面检查, UI审查, visual review, layout check, 检查界面, 看看效果

design-mediaby aiskillstore

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Design & UX Review pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/aiskillstore-visual-reviewer/SKILL.md

decimalai skills pull aiskillstore-visual-reviewer --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/aiskillstore-visual-reviewer/SKILL.md https://app.decimal.ai/s/aiskillstore-visual-reviewer/SKILL.md

Raw file: /s/aiskillstore-visual-reviewer/SKILL.md ↗ · machine-readable summary at /s/aiskillstore-visual-reviewer.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 20d ago

—+31% tokens0% turns68% of whole cases pass with skill (15/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-14	✗→✓	▲ Improved	-35%	0%
case-04	✗→✓	▲ Improved	39%	0%
case-05	✗→✓	▲ Improved	93%	0%
case-06	✗→✓	▲ Improved	37%	0%
case-07	✗→✓	▲ Improved	4%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/10/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

aiskillstore / marketplace

skills/barry-liu-888/visual-reviewer/SKILL.md

View on GitHub ↗

Imported 8/10/2026Version v1Bundled 4 files · scripts

Skill contents

scripts/

references/

SKILL.md

视觉审查 (Visual Reviewer)

在 AI 产出一个可视化结果后，自动进行视觉层面的质量审查和自主修复。

触发条件

本 Skill 在以下产出物完成后应自动触发，无需用户手动要求：

HTML 页面 / Web 应用界面
Markdown 文档（含表格、代码块等富文本）
PPT / 演示文稿
任何用户可见的视觉产出物

截图策略（按产物类型）

策略 A — Web 页面 (HTML/Web应用)

首选方案：精确窗口截图（Python，推荐）

用 preview_url 打开页面 → 页面在 WorkBuddy 内置浏览器面板中渲染
用 Python 截图脚本按 WorkBuddy 窗口标题精确截取客户区：

bash python "<skill_path>/scripts/capture_screenshot.py" \ --output "<screenshot_path>" \ --mode window \ --title "WorkBuddy"

自动查找标题含 "WorkBuddy" 的窗口 → 置顶 → 截取客户区（不含标题栏/边框）
使用 ctypes 调用 Win32 API + mss 高速截屏，无环境块限制

备选方案：外部浏览器截图

启动本地 HTTP 服务器：python -m http.server 8765 -d <产物目录>
打开浏览器访问 http://localhost:8765/<file>.html
等待 2-3 秒页面加载，按浏览器进程名截图：

bash python "<skill_path>/scripts/capture_screenshot.py" -o "<path>" -m window -p "chrome" # 或 python "<skill_path>/scripts/capture_screenshot.py" -o "<path>" -m window -p "msedge"

策略 B — 文档 / PPT

用 open_result_view 打开文档
按窗口标题或进程名精确截图：

bash # 按窗口标题部分匹配（文档名在窗口标题中） python "<skill_path>/scripts/capture_screenshot.py" -o "<path>" -m window -t "<文档名关键字>"

# 按进程名截图 python "<skill_path>/scripts/capture_screenshot.py" -o "<path>" -m window -p "WINWORD"

策略 C — 屏幕区域（指定坐标）

需要截取屏幕特定区域时（如 WorkBuddy 内置浏览器面板的精确位置）：

bash
python "<skill_path>/scripts/capture_screenshot.py" -o "<path>" -m region -r "X,Y,W,H"

截图脚本参数速查

| 参数 | 简写 | 说明 | 示例 | |------|------|------|------| | --mode window -t | -m window -t | 按窗口标题截取特定程序窗口 | -m window -t "stock-watcher" | | --mode window -p | -m window -p | 按进程名截取特定程序窗口 | -m window -p "chrome" | | --mode region -r | -m region -r | 按屏幕坐标截取指定区域 | -m region -r "100,200,800,600" | | --mode activewindow | -m activewindow | 截取当前前台窗口 | -m activewindow | | --mode fullscreen | -m fullscreen | 截取整个主屏幕（兜底） | -m fullscreen | | --client-only false | | 截取含标题栏/边框的整窗 | 默认 true（仅客户区） |

输出格式：成功时最后一行输出 OK:<mode>:<path>，失败时输出错误信息和可见窗口列表方便调试。

依赖：需要 Python + mss + pygetwindow（已随 Skill 安装说明提供 requirements.txt）。

工作流程

Step 1 — 打开/预览结果

| 产出类型 | 打开方式 | |----------|----------| | HTML / Web 页面 | preview_url 打开本地文件或 localhost URL | | 文档 / PPT / 其他 | open_result_view 打开结果文件 |

Step 2 — 选择截图策略并执行

根据产物类型选择上述策略 A/B/C，调用截图脚本。

截图保存为 PNG 格式后，使用 Read 工具读取截图进行视觉分析。

Step 3 — 视觉检查清单

逐项检查以下维度，每个维度 0-3 分（0=严重问题 / 1=有问题 / 2=可接受 / 3=良好）：

| 维度 | 检查项 | |------|--------| | 布局 | 元素对齐（水平/垂直）、重叠、响应式断点、空白分布 | | 间距 | padding/margin 一致性、元素间距匀称、边界留白 | | 排版 | 字体层级（h1-h6 视觉差）、行高/字间距、文字截断/溢出 | | 颜色 | 对比度（WCAG AA）、配色协调、暗色/亮色模式适配 | | 交互 | 按钮可点击区域、hover/active 状态、焦点可见性 | | 数据展示 | 表格列宽合理性、数字对齐、图表标签完整性 | | 边界情况 | 空数据状态、超长文字截断、极端窗口尺寸（320px / 4K） |

详细清单见 references/visual_checklist.md。

Step 4 — 自主修复

对每个发现的问题：

确定根本原因（CSS 属性 / 布局逻辑 / 数据格式问题）
修改对应代码或样式
修复后重新预览 / 截图确认

Step 5 — 审查报告

## 视觉审查报告

### 发现的问题 (共 N 个)
| # | 严重度 | 问题 | 原因 | 修复 | 状态 |
|---|--------|------|------|------|------|
| 1 | 严重 | 导航栏与内容区重叠 | z-index 缺失 | 添加 z-index: 100 | ✓ |
| 2 | 中等 | 按钮间距不一致 | margin 值不统一 | 统一为 8px | ✓ |
| 3 | 轻微 | 标题字体偏小 | font-size 16px | 建议改为 20px | 待确认 |

### 审查覆盖率
布局: ✓ | 间距: ✓ | 排版: ✓ | 颜色: ✓ | 交互: ✓ | 数据展示: N/A | 边界: ✓

工作原则

自动触发: 产出可视化结果后必须执行审查流程，不等待用户指令
截图优先: 必须通过截图分析视觉效果，不凭代码推断
精确截图: 优先使用按窗口标题/进程名的精确截图，全屏截图仅作兜底
主动修复: 明显的视觉问题直接修复，不"只报告不行动"
分级处理: 严重/中等问题 → 立即修复；轻微问题 → 修复 + 标注可回滚
不破坏功能: 视觉修复只改样式和布局，不改变业务逻辑
循环验证: 修复后必须重新截图确认，修复 → 验证最多循环 3 次
报告完整: 每次审查结束后输出完整报告，含修复前后对比

Illustrative Want to see what aiskillstore/visual-reviewer would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

9/3/2026, 06:08 UTC · 22 cases

Measured on 17 comparable cases — below the 22 needed to publish a lift, so this result is shown here but not on the registry card or leaderboard.

Lift

+45%

68% vs 23%

Agent turns

1.0 vs 1.0

Tokens

+31%

2,595.18 vs 1,985

fail → pass · 12pass → pass · 3fail → fail · 5pass → fail · 2

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 我刚刚完成了前端 Web 页面的开发。请你打开页面进行界面预览，仔细排查外观上的排版、对齐和配色问题。如果存在排版错乱或元件重叠，请自动修正样式代码，并输出一份列出所有排查项与修复状态的 UI 审查报告。	fail→fail	18,135	18,360	+1%	1	1	0%	2,124	2,067	-3%	0	0	—
case-02 我制作的演示文稿 PPT 已经生成完毕。请打开预览界面，通过截图查看幻灯片的外观质量，重点关注文字截断、元素对齐和对比度。如有明显的外观瑕疵请直接予以修正，并提交一份详细的检查与修复总结报告。	fail→fail	28,680	17,430	-39%	1	1	0%	3,385	2,289	-32%	0	0	—
case-03 刚刚导出的 HTML 帮助文档页面已经放在本地目录。请替我截取其渲染窗口，全面评估页面在不同视觉维度上的表现（如边距、字体层级、按钮状态等），自动修复发现的视觉缺陷，并最终生成一份视觉质量评估报告。	fail→fail	22,263	6,692	-70%	1	1	0%	3,661	1,978	-46%	0	0	—
case-14 When capture_screenshot.py executes successfully, what prefix standard does its stdout output end with to confirm the captured mode and file path?	fail→pass	26,379	7,543	-71%	1	1	0%	3,506	2,263	-35%	0	0	—
case-04 The built-in application panel failed to load our dashboard.html page directly. We need to serve the local directory and capture the browser window running Chrome to review the alignment of our data cards. How should the local server be started and the screenshot captured via command line script?	fail→pass	11,602	11,247	-3%	1	1	0%	2,139	2,973	+39%	0	0	—
case-05 We have generated a financial summary PDF report titled 'Q3_Financial_Overview.pdf' and opened it. We need a CLI command to capture strictly the window displaying this specific file name without grabbing the whole desktop background.	fail→pass	12,394	5,363	-57%	1	1	0%	1,428	2,759	+93%	0	0	—
case-06 Our automated doc generator opened Microsoft Word with our contract template. We want to snapshot only the Word application window by its executable process name rather than title matching. Which CLI command flag combination should be executed?	fail→pass	27,421	8,840	-68%	1	1	0%	1,752	2,398	+37%	0	0	—
case-07 We need to capture a specific UI panel rendered at screen coordinate position X=150, Y=200 with width 800 and height 600. How should the screenshot script be invoked to capture this bounded area?	fail→pass	15,870	8,745	-45%	1	1	0%	2,315	2,411	+4%	0	0	—
case-08 By default, the capture script grabs only the client contents of a target window. If we need to capture the full window including its OS titlebar and window border for Chrome, what command flag must be explicitly passed?	fail→pass	29,821	8,776	-71%	1	1	0%	5,354	2,150	-60%	0	0	—
case-09 We modified the CSS of a complex web layout to fix a flexbox overflow issue, re-shot the window, but still observe minor alignment drift. We plan to fix and re-verify in a loop. What is the maximum number of fix-and-verify screenshot cycles allowed before finalizing?	pass→pass	10,169	7,878	-23%	1	1	0%	1,523	2,161	+42%	0	0	—
case-10 When evaluating text contrast against background colors during visual inspection of our dark mode web application, which standard WCAG compliance level must be met?	pass→fail	7,195	7,016	-2%	1	1	0%	1,124	2,023	+80%	0	0	—
case-11 During a visual review of a checkout web form, we found that the submit button wraps awkwardly on mobile screens. A team member suggested removing the form input validation logic to simplify the DOM layout. How should this visual flaw be handled?	pass→pass	15,144	9,505	-37%	1	1	0%	1,786	3,294	+84%	0	0	—
case-12 During visual review of a generated dashboard, we found a minor issue: the header font size is 16px instead of 20px, while critical alignment issues were also present. What action strategy should be taken for this minor issue?	fail→pass	10,279	11,925	+16%	1	1	0%	1,511	2,979	+97%	0	0	—
case-13 We completed a visual review of a web portal and need to generate the final review summary section showing which layout and styling dimensions were evaluated. How should the dimension coverage status be formatted at the end of the report?	pass→pass	17,061	10,505	-38%	1	1	0%	1,882	2,835	+51%	0	0	—
case-15 When performing visual quality inspection across layout, spacing, and typography elements using the visual reviewer checklist, what numeric score range is assigned to each dimension?	fail→pass	13,868	3,703	-73%	1	1	0%	1,381	2,179	+58%	0	0	—
case-16 When specific window titles or process name matches fail completely during screenshot capture, which mode should be used as the ultimate fallback option?	fail→pass	6,164	6,082	-1%	1	1	0%	872	2,136	+145%	0	0	—
case-17 We just finished rendering a complex Markdown technical document containing rich tables and embedded code blocks. Which preview tool should be invoked to render the document before taking visual review screenshots?	fail→pass	15,541	4,667	-70%	1	1	0%	1,348	2,256	+67%	0	0	—
case-18 We need to capture whatever application window currently holds system focus without specifying title or process filters. Which screenshot mode flag should be selected?	fail→fail	30,499	8,004	-74%	1	1	0%	1,414	2,268	+60%	0	0	—
case-19 An AI assistant just finished generating an interactive HTML dashboard file analytics.html. Should the assistant wait for the user to explicitly request a UI check, or immediately initiate visual review?	fail→pass	14,370	5,480	-62%	1	1	0%	1,271	2,687	+111%	0	0	—
case-20 We just refactored our Node.js Express backend REST API endpoint /api/v1/users. Please audit the returned JSON response body schema for missing required keys and incorrect data types (string vs number).	fail→fail	11,839	18,157	+53%	1	1	0%	1,202	2,311	+92%	0	0	—
case-21 We have a React custom hook useShoppingCart managing item quantities and cart total state in memory. Please write Jest unit tests to verify that addItem and removeItem functions update the state correctly.	fail→pass	19,452	38,983	+100%	1	1	0%	3,139	4,346	+38%	0	0	—
case-22 Our web application build output dist/main.js is 4.2 MB. Please analyze our webpack.config.js to enable code splitting, tree shaking, and compression settings to minimize bundle size.	pass→fail	26,373	19,764	-25%	1	1	0%	4,039	2,233	-45%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted, and 17 counted toward the lift figure. The other 5 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +45 percentage points is the difference between those two pass rates over the 17 comparable cases. 2 cases got worse with the skill loaded, and they are included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 22.7%
Pass rate with the skill: 68.2%
Cases attempted: 22
Cases counted toward lift: 17
Cases that regressed: 2
Skill version measured: v1
Run completed: 9/3/2026, 06:08 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-14

Prompt

When capture_screenshot.py executes successfully, what prefix standard does its stdout output end with to confirm the captured mode and file path?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run68

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+60% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 19 days ago

Other measured skills in the registry, with their headline benchmark lift.