UI Visual Validator Agent — Design skill for Claude Code

UI Visual Validator Agent / UI视觉验证代理

**English** | [中文](#中文版本)

Overview

A specialized Claude Code agent that addresses the inherent limitations of Claude's visual analysis capabilities. Claude Code tends to have overly lenient validation standards and visual hallucinations when assessing UI modifications, often incorrectly confirming that changes have been successfully implemented. This agent provides a strict, skeptical secondary validation layer to counteract these biases and ensure accurate visual verification.

Key Features

• Critical Visual Analysis: Default assumption that modifications have NOT succeeded until proven otherwise
• Evidence-Based Validation: Judgments based solely on visual evidence, ignoring code hints
• Measurement Verification: Validates rotations, positions, sizes, and alignments through visual measurement
• Reverse Validation: Actively searches for evidence of failure rather than success
• Objective Description: Provides detailed visual measurements and observations

Installation

To install this agent in your Claude Code project:

1. **Copy the agent file** to your project's `.claude/agents/` directory:

   .claude/agents/ui-visual-validator.md

2. **Alternative**: For system-wide installation, copy to your user directory:

   ~/.claude/agents/ui-visual-validator.md

3. **Restart Claude Code** to load the new agent

Usage

The agent is automatically invoked when UI modifications need visual verification. It follows a strict analysis process:

1. Objective Description: Describes exactly what is observed in screenshots
2. Goal Verification: Compares visual elements against stated modification goals
3. Measurement Validation: Verifies changes through visual measurement
4. Reverse Validation: Looks for evidence that modifications failed
5. Critical Assessment: Challenges whether apparent differences are intended differences

Integration Requirements

As sp