visual-verdict

Compare generated screenshots with reference images and output strict JSON verdicts.

6|Updated Apr 23, 2026
One-click install
npx skills add https://github.com/ImL1s/flutter-claude-skills --skill visual-verdict-iml1s
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-verdict
Source: https://github.com/ImL1s/flutter-claude-skills/tree/main/skills/visual-verdict
Command: npx skills add https://github.com/ImL1s/flutter-claude-skills --skill visual-verdict-iml1s

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Compares a generated UI screenshot with one or more reference images and returns a strict JSON verdict that drives the next iteration in UI development and QA workflows.

Core Features & Use Cases

  • Deterministic visual verdicts for layout, typography, and styling fidelity between actual and reference UI.
  • Strict JSON output with fields: score, verdict, category_match, differences, suggestions, and reasoning to guide edits.
  • Use Case: validate a new UI screen against a fixed reference to ensure pixel-perfect alignment across devices and themes.

Quick Start

Run the visual-verdict skill with a generated_screenshot and one or more reference_images to obtain a deterministic JSON verdict for UI quality evaluation.

Frequently Asked Questions about visual-verdict

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

FAQPage Schema
How do I validate a UI screenshot against a reference image for visual regression testing?

You can validate a UI screenshot against reference images by submitting both to the skill, which compares layout, typography, and styling fidelity to return a strict JSON verdict with a score and actionable differences.

Can I get a JSON output from screenshot analysis for automated QA workflows?

Yes, screenshot analysis produces a deterministic JSON output containing score, verdict, category_match, differences, suggestions, and reasoning fields, designed specifically to drive automated UI QA and regression testing workflows.

What is visual regression testing and how does design validation work for app screens?

Visual regression testing detects visual discrepancies between generated and reference UI screenshots. Design validation works by comparing app screens against fixed references to ensure pixel-perfect alignment across devices and themes.

Does UI testing support comparing a generated screenshot against multiple reference images?

Yes, UI testing supports passing one or more reference images alongside a generated screenshot. You can also provide an optional category hint to refine the evaluation context for the visual verdict.

How do I use design validation to ensure pixel-perfect alignment across different themes?

You use design validation by running the generated screenshot against fixed reference images. The skill evaluates visual fidelity across themes and provides specific suggestions and reasoning to guide necessary UI edits.

What limitations should I expect when automating visual verdicts for UI components?

Automating visual verdicts for UI components relies on comparing screenshots, meaning dynamic content or animation states are not evaluated. It focuses strictly on layout, typography, and styling discrepancies between static UI captures.