skills.rest
hotaq
hotaqCOMMUNITY
Explore all skills by this author →
GitHub

visual-verdict

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

Updated Apr 20, 2026
Search Tags:#ui review#regression testing#design fidelity#screenshot comparison#pixel diff#visual qa
One-click install
npx skills add https://github.com/hotaq/Sprite_harmess --skill visual-verdict-hotaq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-verdict
Source: https://github.com/hotaq/Sprite_harmess/tree/main/.codex/skills/visual-verdict
Command: npx skills add https://github.com/hotaq/Sprite_harmess --skill visual-verdict-hotaq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns screenshot comparison into a deterministic visual QA decision, so you can quickly tell whether a generated UI matches its reference.

Core Features & Use Cases

  • Strict verdict output: Produces a JSON-only pass, revise, or fail result for screenshot-to-reference checks.
  • Visual mismatch diagnosis: Identifies differences in layout, spacing, typography, color, and hierarchy.
  • Iterative editing loop: Helps teams refine generated interfaces until they reach a high-confidence match.
  • Use case: Compare a newly rendered dashboard against a design mockup and get concrete next-step edits when the output still diverges.

Quick Start

Ask the skill to compare your generated screenshot against the provided reference image set and return a strict JSON verdict with actionable differences.

Frequently Asked Questions about visual-verdict

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

FAQPage Schema
How do I run visual regression testing for a generated UI screenshot?▼

Visual regression testing for a generated UI screenshot compares it against reference images to return a strict JSON verdict. It identifies layout, spacing, and typography differences to determine if the output passes, needs revision, or fails.

What is screenshot comparison for design fidelity?▼

Screenshot comparison for design fidelity is a visual QA process that checks a rendered UI against a mockup. It validates pixel-level differences in hierarchy and color, returning a strict score and actionable suggestions to refine the interface.

How do I identify pixel diff mismatches in my UI layout?▼

To identify pixel diff mismatches, compare your generated screenshot against a set of reference images. The visual QA process diagnoses specific differences in spacing, typography, and hierarchy, returning concrete next-step edits.

Can I use screenshot comparison for iterative design edits?▼

Yes, you can use screenshot comparison for iterative design edits by repeatedly checking a generated UI against a reference. It provides a high-confidence match score and revision suggestions until the layout strictly passes visual QA.

What do I need to perform visual QA on a UI screenshot?▼

To perform visual QA, you need one or more reference images and a generated UI screenshot. The process requires no external dependencies, directly comparing the inputs to output a pass, revise, or fail decision with reasoning.

Related Skills

Explore More Design & Creative Skills→
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate
RheinmirRheinmir

visual-verdict

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

Community
Intermediate
giang6283623giang6283623
4

visual-design-loop

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

Community
Advanced
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced