visual-verdict

Agent Skills › Yeachan-Heo/oh-my-claudecode › visual-verdict

visual-verdict

GitHub

用于将生成的UI截图与参考图进行视觉对比，输出结构化JSON评分和修订建议。在得分低于90时驱动迭代修改，确保前端界面布局、样式等视觉保真度达标。

skills/visual-verdict/SKILL.md Yeachan-Heo/oh-my-claudecode

触发场景

需要验证生成UI截图与参考图的视觉一致性前端开发中需要自动化视觉QA反馈以指导后续修改

安装

npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -g -y

更多选项

不安装直接使用

npx skills use Yeachan-Heo/oh-my-claudecode@visual-verdict

指定 Agent (Claude Code)

npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -a claude-code -g -y

安装 repo 全部 skill

npx skills add Yeachan-Heo/oh-my-claudecode --all -g -y

预览 repo 内 skill

npx skills add Yeachan-Heo/oh-my-claudecode --list

SKILL.md

Frontmatter

{
    "name": "visual-verdict",
    "level": 2,
    "description": "Structured visual QA verdict for screenshot-to-reference comparisons"
}

Use this skill to compare generated UI screenshots against one or more reference images and return a strict JSON verdict that can drive the next edit iteration.

<Use_When>

The task includes visual fidelity requirements (layout, spacing, typography, component styling)
You have a generated screenshot and at least one reference image
You need deterministic pass/fail guidance before continuing edits </Use_When>

- `reference_images[]` (one or more image paths) - `generated_screenshot` (current output image) - Optional: `category_hint` (e.g., `hackernews`, `sns-feed`, `dashboard`)

<Output_Contract> Return JSON only with this exact shape:

{
  "score": 0,
  "verdict": "revise",
  "category_match": false,
  "differences": ["..."],
  "suggestions": ["..."],
  "reasoning": "short explanation"
}

Rules:

score: integer 0-100
verdict: short status (pass, revise, or fail)
category_match: true when the generated screenshot matches the intended UI category/style
differences[]: concrete visual mismatches (layout, spacing, typography, colors, hierarchy)
suggestions[]: actionable next edits tied to the differences
reasoning: 1-2 sentence summary

<Threshold_And_Loop>

Target pass threshold is 90+.
If score < 90, continue editing and rerun /oh-my-claudecode:visual-verdict before any further visual review pass.
Do not treat the visual task as complete until the next screenshot clears the threshold. </Threshold_And_Loop>

<Debug_Visualization> When mismatch diagnosis is hard:

Keep $visual-verdict as the authoritative decision.
Use pixel-level diff tooling (pixel diff / pixelmatch overlay) as a secondary debug aid to localize hotspots.
Convert pixel diff hotspots into concrete differences[] and suggestions[] updates. </Debug_Visualization>

```json { "score": 87, "verdict": "revise", "category_match": true, "differences": [ "Top nav spacing is tighter than reference", "Primary button uses smaller font weight" ], "suggestions": [ "Increase nav item horizontal padding by 4px", "Set primary button font-weight to 600" ], "reasoning": "Core layout matches, but style details still diverge." } ```

Task: {{ARGUMENTS}}