visual-verdict

Compare UI screenshots to reference images and report layout differences as JSON.

1|Updated May 7, 2026
One-click install
npx skills add https://github.com/zchee/json-repair-rs --skill visual-verdict-zchee
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-verdict
Source: https://github.com/zchee/json-repair-rs/tree/main/.codex/skills/visual-verdict
Command: npx skills add https://github.com/zchee/json-repair-rs --skill visual-verdict-zchee

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables precise evaluation of UI screenshots against reference images, providing clear feedback on visual discrepancies to improve design accuracy.

Core Features & Use Cases

  • Visual Comparison: Analyze generated UI images against reference images to identify layout, spacing, and style mismatches.
  • Deterministic Verdicts: Produce a structured JSON verdict indicating pass/fail status with detailed differences and suggestions.
  • Use Case: When UI components appear misaligned or styled incorrectly, use this Skill to quantify discrepancies and guide next design edits.

Quick Start

Use the visual-verdict skill to compare your current screenshot of the dashboard with the reference image to ensure design fidelity.

Frequently Asked Questions about visual-verdict

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

FAQPage Schema
How do I compare UI screenshots against reference images for design review?

Visual comparison for design review analyzes UI screenshots against reference images to identify layout, spacing, and style mismatches. It provides structured feedback on visual discrepancies to improve design accuracy during iterations.

How does a visual comparison tool quantify UI layout and style mismatches?

A visual comparison tool quantifies UI mismatches by analyzing screenshots against reference images and producing a deterministic JSON verdict. This verdict indicates pass/fail status with detailed differences and suggestions for design edits.

What is the best way to automate UI quality assurance for design iterations?

Automating UI quality assurance for design iterations involves using visual comparison to evaluate screenshots against references. It generates a structured JSON verdict with pass/fail status and detailed differences to guide next design edits.

Does visual comparison for UI quality assurance require any specific dependencies?

Visual comparison for UI quality assurance requires no specific dependencies. It operates independently using image analysis to evaluate screenshots against references and generate JSON reporting for design iterations.

Can I get structured JSON reporting for UI visual discrepancies?

Yes, you can get structured JSON reporting for UI visual discrepancies. The visual comparison process produces a deterministic JSON verdict indicating pass/fail status alongside detailed differences and suggestions for design edits.

When should I use automated visual comparison in my UI development workflow?

You should use automated visual comparison in your UI development workflow when UI components appear misaligned or styled incorrectly. It quantifies discrepancies against reference images to accurately guide your next design edits.