默认假设：修改失败
验证标准：视觉证据
工作方式：对抗性检验
输出要求：客观描述

flowchart TD
    A[UI修改请求] --> B[Claude Code 执行修改]
    B --> C[生成截图]
    C --> D[调用 UI Visual Validator]
    D --> E{默认假设：修改失败}
    E --> F[详细视觉分析]
    F --> G[寻找失败证据]
    G --> H[测量验证]
    H --> I{验证结果}
    I -->|已达成| J[通过验证]
    I -->|部分达成| K[指出具体问题]
    I -->|未达成| L[要求重新修改]
    K --> M[Claude Code 调整]
    L --> M
    M --> C

## Visual Verification Rules

> **MANDATORY - NO EXCEPTIONS**: Only use subagent ui-visual-validator to verify all visual results. Claude is STRICTLY FORBIDDEN from making any visual judgments or assessments by itself.

When making UI modifications:
1. Make the code changes
2. Take screenshot of the result  
3. MUST call ui-visual-validator subagent for verification
4. Accept the subagent's judgment as final
5. If verification fails, iterate based on specific feedback

Claude must NOT say things like:
- "The changes look good"
- "The UI has been updated successfully" 
- "I can see the modifications are working"
- "The layout appears correct"

ONLY the ui-visual-validator subagent can make visual assessments.

@ui-visual-validator 验证这三个卡片是否已经完全水平对齐，间距是否一致

@ui-visual-validator 验证在移动端视图下，菜单是否正确折叠为汉堡菜单

@ui-visual-validator 验证悬停时按钮是否有平滑的颜色过渡动画

You are a strict, skeptical UI verification specialist whose primary role 
is to counteract Claude's tendency toward visual hallucinations and 
overly lenient validation standards.

CORE PRINCIPLE: Default assumption that modifications have NOT succeeded 
until proven otherwise through visual evidence.

Always start responses with: "From the screenshot, I observe..."
Provide specific measurements when relevant.
Clearly state: achieved/partially achieved/not achieved.

Look for evidence of failure rather than success.
Question whether apparent differences are the intended differences.
Measure and verify specific requirements.

用户请求：让这三个卡片完全水平对齐

Claude 第一次尝试：
- 修改了 CSS 的 align-items 属性
- 自信地说"已经对齐了"

UI Visual Validator 验证：
- "从截图中，我观察到三个卡片的顶部边缘分别位于不同的垂直位置"
- "左卡片顶部在 120px，中卡片在 125px，右卡片在 118px"
- "目标未达成，卡片未实现水平对齐"

Claude 第二次尝试：
- 发现了 margin 不一致的问题
- 统一设置了 margin-top: 0

验证通过：三个卡片完美对齐 ✅

用户请求：为按钮添加从蓝到紫的渐变效果

Claude 自验证：
- "我已经添加了渐变效果，按钮现在显示为蓝紫渐变"

UI Visual Validator 严格验证：
- "从截图中，我观察到按钮显示为单一的蓝色 (#0066cc)"
- "未检测到任何渐变效果或颜色过渡"
- "目标未达成"

问题发现：
- CSS 语法错误：`linear-gradient(blue purple)` 缺少方向参数
- 修正为：`linear-gradient(to right, #0066cc, #6600cc)`

最终结果：完美的蓝紫渐变效果 ✅

## Project-Specific Validation Rules

### Color Validation
- All buttons must use theme colors from the design system
- Verify hex values match: Primary (#007bff), Secondary (#6c757d), Success (#28a745)

### Spacing Validation  
- All margins and padding must follow 8px grid system
- Verify spacing is multiples of 8: 8px, 16px, 24px, 32px

### Typography Validation
- Verify font sizes match design tokens: 14px, 16px, 18px, 24px, 32px
- Check line heights are consistent with design system ratios

# .github/workflows/ui-validation.yml
name: UI Visual Validation
on: [pull_request]
jobs:
  visual-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '18'
      - name: Install dependencies
        run: npm install
      - name: Build and screenshot
        run: npm run build && npm run screenshot
      - name: Visual validation
        run: claude-code --agent ui-visual-validator verify screenshots/

@ui-visual-validator 验证以下五个按钮的样式是否都符合设计规范

git clone https://github.com/cryptonerdcn/UI-Visual-Validator-Agent.git
cd UI-Visual-Validator-Agent

# 在你的 Claude Code 项目中测试
cp ui-visual-validator.md /path/to/your/project/.claude/agents/

# 重启 Claude Code 并测试