skills.rest
Tienching
TienchingCOMMUNITY
Explore all skills by this author →
GitHub

visual-verdict

Compare UI screenshots against reference images and output strict JSON verdicts.

3|Updated Apr 7, 2026
Search Tags:#ui#design QA#pixel-diff#image-comparison#visual-verdict#json-verdict
One-click install
npx skills add https://github.com/Tienching/oh-my-codebuddy --skill visual-verdict-tienching
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-verdict
Source: https://github.com/Tienching/oh-my-codebuddy/tree/main/.codex/skills/visual-verdict
Command: npx skills add https://github.com/Tienching/oh-my-codebuddy --skill visual-verdict-tienching

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA tasks require precise, repeatable judgments about how closely a generated UI matches its references, which is time-consuming and error-prone when done by humans.

Core Features & Use Cases

  • Deterministic JSON verdicts based on pixel-diff comparisons between generated screenshots and reference images
  • Supports single-reference and multi-reference comparisons with category matching and detailed differences
  • Produces actionable feedback through "differences" and "suggestions" fields for design iteration

Quick Start

Provide a generated UI screenshot and one or more reference images to obtain a structured JSON verdict.

Frequently Asked Questions about visual-verdict

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

FAQPage Schema
How do I compare a generated UI screenshot against a reference image for design QA?▼

To perform a visual QA comparison, provide a generated UI screenshot and one or more reference images. The tool produces a strict JSON verdict containing a score, differences, and actionable suggestions for design iteration.

What is a deterministic JSON verdict in pixel-diff image comparison?▼

A deterministic JSON verdict is a structured output from pixel-diff image comparison that enforces a consistent schema. It includes fields like score, verdict, category_match, differences, and reasoning, ensuring repeatable visual QA results without side effects.

Can I use multi-reference image comparison to validate UI themes and components?▼

Yes, multi-reference image comparison supports validating UI themes and components. It matches categories between generated screenshots and multiple reference images, returning detailed differences and suggestions for design iteration.

Does visual QA automation require any specific dependencies or side effects on the host system?▼

No, this visual QA automation operates without side effects on the host system and has no dependencies. You only need to supply the generated UI screenshots and reference images to obtain the structured JSON verdict.

What's the best way to automate design QA feedback for UI layouts?▼

The best way to automate design QA feedback is using pixel-diff image comparison to generate actionable JSON verdicts. The differences and suggestions fields provide direct feedback for iterating on UI layouts and components.

Why does my UI screenshot not match the reference image during design QA?▼

When a UI screenshot does not match a reference image, the pixel-diff comparison identifies specific visual discrepancies. It outputs a structured JSON verdict detailing the differences and providing suggestions to resolve the mismatches.

Related Skills

Explore More Design & Creative Skills→
kwt00kwt00

visual-verdict

Generate JSON verdicts comparing UI screenshots to reference images via pixel matching and structural analysis.

Community
Advanced
Goblin1024Goblin1024
6

visual-verdict

Compare UI screenshots against reference images and output a JSON verdict.

Community
Intermediate
soq123soq123

recreate-screenshot

Reproduce a UI screen from a screenshot with pixel-perfect fidelity.

Community
Intermediate
MadAppGangMadAppGang
7

debug-ui

Capture screenshots and inspect DOM state to diagnose UI layout issues.

Official
Intermediate