visual-verdict

Compare UI screenshots against reference images and return a JSON quality verdict.

1|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/Leap0920/Clean-Portfolio --skill visual-verdict-leap0920
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-verdict
Source: https://github.com/Leap0920/Clean-Portfolio/tree/main/%25USERPROFILE%25/.openclaude/plugins/cache/omc/oh-my-claudecode/4.14.0/skills/visual-verdict
Command: npx skills add https://github.com/Leap0920/Clean-Portfolio --skill visual-verdict-leap0920

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents slow, subjective UI review by turning screenshot versus reference comparisons into a structured, deterministic verdict you can act on immediately.

Core Features & Use Cases

  • Structured visual QA verdict: Produces strict JSON with a numeric score, pass/revise/fail decision, and a reasoning summary.
  • Category/style validation: Flags whether the output matches the intended UI category or style.
  • Actionable mismatch analysis: Returns concrete differences and targeted suggestions to guide the next editing iteration.

Quick Start

Use the visual-verdict skill to compare your generated UI screenshot against one or more reference images by supplying reference_images and generated_screenshot, then use the returned JSON to decide whether to revise or stop.

Frequently Asked Questions about visual-verdict

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate visual QA for UI screenshots during redesign iterations?

Automate visual QA for UI screenshots by comparing a generated screenshot against reference images to produce a deterministic JSON verdict. This structured output includes a numeric score, pass/revise/fail decision, mismatch differences, and suggestions to guide your next editing iteration.

What is screenshot comparison for UI regression testing and how does it work?

Screenshot comparison for UI regression testing validates layout, spacing, typography, and component styling against a target appearance. It analyzes a generated UI screenshot alongside one or more reference images and returns a structured JSON verdict detailing category match and specific visual differences.

Can I get a structured JSON verdict from a screenshot versus reference image comparison?

Yes, you can get a structured JSON verdict from a screenshot versus reference image comparison. The process returns deterministic JSON containing a numeric score, pass/revise/fail verdict, category match status, concrete differences, targeted suggestions, and a brief reasoning summary.

How do I validate layout and typography spacing against a reference UI image?

Validate layout and typography spacing by supplying your reference images and generated screenshot for comparison. The visual validation process checks these specific component styling attributes against the target appearance and highlights concrete mismatches in the returned JSON differences array.

Does visual regression testing require multiple reference images to detect UI layout diff?

Visual regression testing supports one or more reference images to accurately detect a UI layout diff. Supplying multiple reference images allows the comparison to validate the generated screenshot against various target appearances and return a comprehensive pass or fail verdict.

What should I do when UI redesign styling does not match the reference image target appearance?

When UI redesign styling does not match the reference image target appearance, use the returned JSON suggestions and differences array. These targeted outputs identify specific layout, spacing, and typography mismatches to guide the precise component styling edits needed for your next iteration.