skills.rest
dropsyoon
dropsyoonCOMMUNITY
Explore all skills by this author →
GitHub

visual-verdict

Compares UI screenshots against reference images and outputs a JSON verdict with differences and edit suggestions.

Updated Apr 17, 2026
Search Tags:#design verification#pixel diff#visual qa#ui screenshot#reference comparison#json verdict#iterative ui refinement
One-click install
npx skills add https://github.com/dropsyoon/oh-my-claudecode --skill visual-verdict-dropsyoon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-verdict
Source: https://github.com/dropsyoon/oh-my-claudecode/tree/main/skills/visual-verdict
Command: npx skills add https://github.com/dropsyoon/oh-my-claudecode --skill visual-verdict-dropsyoon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes uncertainty in screenshot-to-reference UI work by producing a structured verdict you can use to decide whether to accept, revise, or retry.

Core Features & Use Cases

  • Deterministic JSON verdicts: Generates machine-readable results for UI comparison decisions.
  • Visual mismatch diagnosis: Identifies concrete differences (layout, spacing, typography, colors, hierarchy) and actionable fixes.
  • Category alignment checking: Flags whether the output matches the intended UI category/style, not just pixel similarity.

Use Case: You iteratively refine a landing-page UI in Claude Code and need a strict pass/fail signal before committing changes, especially when small spacing or typography shifts break design requirements.

Quick Start

Ask the AI to run visual-verdict with your generated screenshot and one or more reference images, and require JSON-only output against the 90+ pass threshold.

Frequently Asked Questions about visual-verdict

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

FAQPage Schema
How do I get a visual pass fail verdict for a UI screenshot against a reference image?▼

Visual pass/fail verdicts for UI screenshots are generated by comparing your screenshot against reference images, producing a JSON output with a score, concrete visual differences, and actionable edit suggestions.

Can I automate visual QA checks for spacing and typography shifts in iterative UI refinement?▼

Yes, you can automate visual QA for iterative UI refinement by running screenshot comparisons that diagnose specific layout, spacing, typography, and color mismatches, returning machine-readable revise or fail signals.

What is visual design verification and when do I need category alignment checking?▼

Visual design verification assesses pixel fidelity and structural conformity. You need category alignment checking when matching a specific UI style or category is required, not just pixel-level similarity.

Does the visual verdict output include actionable design feedback or just a score?▼

The visual verdict output includes both a numerical score and actionable design feedback, detailing concrete differences in hierarchy and layout along with specific edit suggestions to fix them.

How to use JSON visual comparison results to decide whether to accept or retry UI generation?▼

You use the JSON visual comparison results by evaluating the score against a 90+ pass threshold and reading the verdict field to deterministically accept, revise, or retry your UI generation.

What are the limitations of using automated pixel diff for UI layout consistency checks?▼

Automated pixel diff focuses strictly on visual fidelity and structural mismatch diagnosis, meaning it provides actionable edit suggestions but does not execute the code changes or validate underlying functional logic.

Related Skills

Explore More Design & Creative Skills→
zinohomezinohome
1

visual-regression-tester

Capture and compare UI screenshots with Playwright and Chromatic.

Community
Advanced
xz1220xz1220

visual-verdict

Compare UI screenshots against reference images and output JSON visual QA verdicts.

Community
Intermediate
giang6283623giang6283623
4

visual-design-loop

Automate iterative render-review-fix loops for UI polish.

Community
Advanced
alvarettoalvaretto
1

Comparación Visual Inteligente

Compare generated images against originals and report visual differences.

Community
Advanced