How does LLM Vision comparison work?

Claude analyzes the captured screenshots against the original design intent or reference images to identify discrepancies in color, spacing, typography, and alignment.

How does the visual verification trigger?

It automatically activates when changes are detected in UI-related files such as CSS, SCSS, components, pages, or layout files.

What happens if the AI is unsure about a UI change?

If the LLM confidence score falls below 0.7, the system flags the result for human escalation, providing a side-by-side comparison for manual review and acknowledgment.

What breakpoints are tested?

The skill captures screenshots at three specific widths: Mobile (375px), Tablet (768px), and Desktop (1280px) to represent standard device categories.

Visual UI Verification

Name: Visual UI Verification
Author: hjemmesidekongen

byhjemmesidekongen

0•

デザインツール

Automates visual regression testing by capturing multi-breakpoint screenshots and verifying UI layouts against design intent.

The Visual Verification skill ensures frontend changes maintain design integrity across mobile, tablet, and desktop viewports. Using Playwright, it captures screenshots and implements a three-tier verification process: automated layout assertions, LLM-powered visual comparison against design specs, and human escalation for low-confidence results. This provides a robust safety net for developers working on CSS, React components, or global layouts, preventing UI regressions before they reach production by flagging layout shifts, overlapping elements, or typography mismatches automatically.

主な機能

01Automatic triggers for changes in CSS, SCSS, TSX, and Vue files

020 GitHub stars

03Multi-breakpoint screenshot capture for mobile, tablet, and desktop views

04Three-tier verification logic involving automated checks, LLM vision, and human review

05Confidence-based escalation system to ensure 100% UI accuracy

06Comprehensive comparison reports stored directly in the project workspace

ユースケース

01Automating visual regression testing during large-scale CSS refactoring

02Ensuring new UI components strictly adhere to design specifications and brand guidelines

03Verifying responsive design consistency across different device sizes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hjemmesidekongen/ai visual-verification

For use in Claude.ai and ChatGPT

主な機能

01Automatic triggers for changes in CSS, SCSS, TSX, and Vue files

020 GitHub stars

03Multi-breakpoint screenshot capture for mobile, tablet, and desktop views

04Three-tier verification logic involving automated checks, LLM vision, and human review

05Confidence-based escalation system to ensure 100% UI accuracy

06Comprehensive comparison reports stored directly in the project workspace

ユースケース

01Automating visual regression testing during large-scale CSS refactoring

02Ensuring new UI components strictly adhere to design specifications and brand guidelines

03Verifying responsive design consistency across different device sizes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hjemmesidekongen/ai visual-verification

For use in Claude.ai and ChatGPT