Verify Design

# Verify Design - Visual Regression Against Figma

Verify that implemented UI matches the Figma design with pixel-level comparison.

## Purpose
Ensure 100% pixel-perfect implementation by comparing Playwright screenshots against Figma exports.

## Arguments
$ARGUMENTS

## Process

### 1. Identify Design Source
Check for cached design in `.claude/designs/[feature-name]/`:
- `screenshot.png` - Baseline from Figma
- `specs.md` - Design specifications
- `figma-node.txt` - Original Figma node ID

If no cache exists, use Figma MCP to fetch:

mcp__figma__get_screenshot with nodeId and fileKey

### 2. Navigate to Implementation
Use Playwright to navigate to the implemented component:

mcp__playwright__browser_navigate to the page URL

### 3. Capture Implementation Screenshot
Take a screenshot of the implemented component:

mcp__playwright__browser_take_screenshot

Save to: `.claude/mcp/playwright/implementation.png`

### 4. Visual Comparison
Compare the two images:
- **Figma baseline**: `.claude/designs/[feature]/screenshot.png`
- **Implementation**: `.claude/mcp/playwright/implementation.png`

Use Playwright's built-in comparison:
```javascript
await expect(page.locator('[selector]')).toHaveScreenshot('baseline.png', {
  maxDiffPixelRatio: 0.02  // Allow 2% difference
});

5. Report Results

## Visual Regression Report

### Comparison: [Feature Name]

| Metric | Value |
|--------|-------|
| Baseline | Figma design from [node-id] |
| Implementation | [URL] |
| Pixel Diff | X% |
| Status | PASS/FAIL |

### Differences Found
- [List specific differences: spacing, colors, fonts, etc.]

### Recommended Fixes
1. [Specific CSS/HTML fix]
2. [Specific CSS/HTML fix]

6. Auto-Retry Loop (if enabled)

If diff > threshold (default 2%):

1. Analyze the differences
2. Identify CSS/styling issues
3. Apply fixes automatically
4. Re-capture and compare
5. Repeat until pass or max retries (default: 3)

Usage Examples

/verify-design reviews-widget
/verify-design woocommerce-modal https://frontend-plugin.ddev.site/admin
/verify-design --url https://localhost/page --figma-node 123:456 --file-key abcd1234

Thresholds

Level	Pixel Diff	Action
Perfect	0%	Auto-approve
Acceptable	< 2%	Report, approve
Review	2-5%	Report, ask user
Fail	> 5%	Block, require fix

Integration with Workflow

This command integrates with:

• Figma MCP - Fetch design baselines
• Playwright MCP - Capture implementation
• Designs Cache - Store baselines locally
• /pre-pr - Run before PR creation
• Auto-Actions - Trigger on UI implementation complete

Caching Strategy

After successful verification:

1. Save Figma export to .claude/designs/[feature]/screenshots/baseline.png
2. Save implementation to .claude/designs/[feature]/screenshots/verified.png
3. Update specs.md with verification timestamp

This avoids repeated Figma API calls for the same design. ```