mcpField
V
visual-verdict

visual-verdict

github.com/yeachan-heoTesting & quality40.4k910 installsUpdated 1d ago
Repository

About visual-verdict

visual-verdict is a skill for evaluating generated UI screenshots against reference images. It returns structured pass, revise, or fail guidance, including concrete differences and suggested edits.

Key features

  1. 01Compare screenshots with reference images
  2. 02Score visual similarity from 0 to 100
  3. 03Report category match and visual differences
  4. 04Suggest edits tied to mismatches
  5. 05Return verdicts as strict JSON

Use cases

  1. 01Check a generated UI before further edits
  2. 02Identify layout or typography mismatches
  3. 03Guide screenshot iteration toward a pass threshold

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/yeachan-heo/oh-my-claudecode --skill visual-verdict

After installing, type/visual-verdictin Claude Code to confirm it loaded.

Details

From the project README
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:

  1. Keep $visual-verdict as the authoritative decision.
  2. Use pixel-level diff tooling (pixel diff / pixelmatch overlay) as a secondary debug aid to localize hotspots.
  3. 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}}

Comments

Markdown supported