semantic_compare
Compares before and after screenshots to evaluate if UI changes match the intended design request, using semantic analysis beyond pixel diffing.
Instructions
AI-powered visual comparison. Captures before/after screenshots and provides a structured methodology for Claude to semantically evaluate whether UI changes match the intended design request. Goes beyond pixel diffing to understand intent.
Returns both screenshots as images, a pixel-level diff image, the difference percentage, and a detailed semantic methodology prompt. Claude's vision analyzes the screenshots to determine if the changes match what was requested, checking for regressions and unintended side effects.
This tool is FREE — it runs entirely within Claude Code using the user's existing plan. No API keys needed.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| urlBefore | Yes | URL of the 'before' state (e.g., http://localhost:3000) | |
| urlAfter | Yes | URL of the 'after' state (e.g., http://localhost:3001) | |
| changeDescription | Yes | What was the intended change? (e.g., 'Changed the hero section background to a gradient and increased heading font size') | |
| width | No | Viewport width in pixels | |
| height | No | Viewport height in pixels |