visual-verdict

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

Updated Apr 29, 2026
One-click install
npx skills add https://github.com/nichobbs/lyric-lang --skill visual-verdict-nichobbs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-verdict
Source: https://github.com/nichobbs/lyric-lang/tree/main/.claude/skills/visual-verdict
Command: npx skills add https://github.com/nichobbs/lyric-lang --skill visual-verdict-nichobbs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates guesswork when generated UI screenshots don’t visually match the intended design by producing a deterministic, machine-readable pass/fail verdict.

Core Features & Use Cases

  • Structured visual QA that compares a generated screenshot against one or more reference images and returns an explicit verdict for iteration.
  • Deterministic scoring and guidance via a required JSON output containing score, verdict, and concrete differences/suggestions.
  • Category consistency checks using category_match to ensure the output matches the expected UI category or style theme.

Quick Start

Use the visual-verdict skill to compare your current generated screenshot against your reference images and get a JSON verdict with specific fixes.

Frequently Asked Questions about visual-verdict

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

FAQPage Schema
How do I automate visual regression checks for UI screenshots against a reference design?

Automate visual regression by comparing your generated UI screenshot against reference images to receive a strict JSON verdict. This evaluates visual correctness across layout, typography, color, and hierarchy, producing a 0-100 score and pass/revise/fail status for iterative workflows.

What is the best way to get structured JSON output for screenshot comparison and UI QA?

Structured JSON output for screenshot comparison provides a deterministic pass/fail verdict without guesswork. It enforces a 90+ pass threshold and includes category_match flags, detailed differences, and actionable suggestions directly within the JSON response for easy automation.

Can I use visual-verdict to check if my generated UI matches the expected design category or style theme?

Yes, you can check design category consistency using the category_match flag. This feature evaluates whether your screenshot matches the expected UI category or style theme, ensuring your generated output aligns with the intended design system during visual QA.

How do I enforce a strict pass threshold for visual differences in iterative design workflows?

Enforce a strict pass threshold by requiring a score of 90 or above in the JSON verdict. Scores below 90 trigger a revise or fail status, providing concrete differences and actionable suggestions to guide your next design iteration.

What should I do when my generated UI screenshot fails the visual regression check?

When a screenshot fails the visual regression check, review the detailed differences and actionable suggestions in the JSON verdict. The output identifies specific layout, typography, color, and hierarchy issues to address before your next design iteration.

Does visual-verdict support comparing a screenshot against multiple reference images for UI fidelity?

Yes, visual-verdict supports comparing one generated screenshot against one or more reference images. This allows comprehensive UI fidelity checks across layout and hierarchy, returning a single deterministic JSON verdict with a combined score and revision guidance.