skills.rest
zhaozengqing4364-bit
zhaozengqing4364-bitCOMMUNITY
Explore all skills by this author →
GitHub

visual-verdict

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

Updated Jan 16, 2026
Search Tags:#design validation#image analysis#visual comparison#UI QA#automatic verdict
One-click install
npx skills add https://github.com/zhaozengqing4364-bit/sales-training-qoder --skill visual-verdict-zhaozengqing4364-bit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-verdict
Source: https://github.com/zhaozengqing4364-bit/sales-training-qoder/tree/main/.codex/skills/visual-verdict
Command: npx skills add https://github.com/zhaozengqing4364-bit/sales-training-qoder --skill visual-verdict-zhaozengqing4364-bit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a structured method to compare UI screenshots against reference images, delivering deterministic verdicts that guide design iteration.

Core Features & Use Cases

  • Visual Quality Assurance: Detects layout, spacing, typography, and styling differences between generated and reference UI images.
  • Automated Verdicts: Outputs a clear JSON verdict for quick decision-making.
  • Use Case: When a UI team needs to validate that recent design changes match the approved references before releasing, they can run this Skill to get an objective pass/fail assessment.

Quick Start

Use the visual-verdict skill to compare your generated screenshot 'ui_output.png' against a reference image 'ui_reference.png' and review the JSON verdict for next steps.

Frequently Asked Questions about visual-verdict

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

FAQPage Schema
How do I automate UI screenshot comparison against reference images?▼

Automated UI screenshot comparison against reference images is performed by analyzing visual differences to identify layout and styling discrepancies. This Skill outputs a JSON verdict to guide design iteration and quality assurance workflows.

What is visual regression testing for design validation?▼

Visual regression testing for design validation is the process of detecting layout, spacing, and typography differences between generated and reference UI images. It delivers a deterministic pass or fail assessment to ensure UI consistency.

Can I get an automatic JSON verdict for UI QA visual checks?▼

Yes, you can get an automatic JSON verdict for UI QA visual checks. The comparison process analyzes screenshots against reference images and outputs a structured JSON file for quick, objective decision-making.

What's the best way to check UI consistency before a release?▼

The best way to check UI consistency before a release is running an automated visual comparison between current screenshots and approved references. This identifies styling and layout discrepancies, providing a clear verdict to validate changes.

Do I need specific image comparison tools for automated UI verification?▼

Yes, automated UI verification requires image comparison tools and scripting capabilities to analyze visual differences. These dependencies enable the Skill to process screenshots and generate the final JSON verdict accurately.

Related Skills

Explore More Design & Creative Skills→
zinohomezinohome

visual-regression-tester

Implements visual regression testing with screenshot comparison and CI integration using Playwright or Chromatic.

Community
Intermediate
refactory-langrefactory-lang

speckit-workflows.bugfix

Create a Git branch and markdown bug report for a bug fix workflow.

Official
Intermediate
ahostbrahostbr

ls-playwright-e2e-screenshots

Generate Playwright E2E tests with phase-by-phase screenshots saved to e2e/screenshots/.

Community
Intermediate
koasis89koasis89

visual-ralph

Orchestrate Visual Ralph to build frontend UIs with visual verdicts and pixel diff evidence.

Community
Advanced