visual_diff
Pixel-diff the live page (or one element) against a mockup PNG or a recorded baseline — MATCH/DIVERGENT with divergent regions mapped back to element uids, optional heatmap artifact
How to use it
Project documentation lists visual_diff for the Visionaire Engine MCP server. Add the server to your MCP client (Claude Desktop, Cursor, Windsurf and others), then check which tools your installed version makes available. Tool availability can depend on configuration and credentials. A server handshake does not verify this tool’s behavior. See the full listing for setup details.
Install Visionaire Engine
claude mcp add visionaire -- npx -y visionaire-engineOther tools in Visionaire Engine (24)
Screenshot with numbered marks that equal snapshot uids — or an element-scoped crop via clipTo with padding/scale zoom and optional annotate:false
The verification gate. State rendered-geometry claims (equal heights, alignment, gaps, clipping, colors, z-order — 17 assertion types) → deterministic PASS/FAIL with measured pixels and offending uids; register named suites and re-run them after every edit
Before/after evidence bundles: annotated screenshots + suite verdicts, with a verdict delta proving the fix flipped FAIL → PASS
(deprecated → assertvisual) Group pixel audit: which of N elements is off-alignment by how many px, gap-rhythm outliers, size consistency, N-px grid conformance, pixel-snap warnings
One-shot "why does this look broken" — ranked culprits with measured evidence for clipping, overflow, off-center, invisibility, overlap, wrong size
Escape hatch: run agent-authored JavaScript in the page and get the JSON result, for the genuinely bespoke case no other tool covers
Animations/transitions touching an element: live census, declared rules with file:line, and a closed "why is it not smooth" ruleset
The wedge. Cascade winner/loser per property with file:line + origin attribution, each winner's blast radius (how many other elements it styles), and a scoped-fix selector for just this element
Deterministic search by text, selector, role, or screen region — AND-combined by default, match:"any" for a union, visibleOnly:false to include hidden elements
Event listeners on an element + its ancestors, with handler file:line and capture/passive/once flags
Blast-radius report before editing a shared selector: who else matches, grouped with uids, plus a sandboxed dry-run predicting exactly which elements would change
The live fix loop: trial declarations on an element (or a page-wide rule) without touching source — see what changed, converge, write source once, revert
Constraint-chain walk: which ancestor constrains width/overflow/stacking
The "what": box model, computed values, visibility verdict
Drive the UI into a state (open a menu/popup/modal, reveal a tab) and leave it there so you can inspect the new state — reports post-action visibility + box
Sub-pixel rendered geometry: content box + true text-ink box (glyph extents) with a centering verdict — "is this × actually centered?"
x,y → element uid + ancestor chain
Stylesheet inventory + platform detection (WordPress version, theme, builders, optimizers)
Pruned, uid-keyed tree of what's visible — geometry, layout hints, invisibility reasons
The actual painted pixel (composited truth: gradients, images, opacity) + computed colors + WCAG AA/AAA contrast verdict
Human-in-the-loop grounding: DevTools-style hover highlight, the user clicks the element that looks wrong
One interaction → a source-attributed causal timeline: handlers, mutations, cancelled transitions, layout shifts
One verification payload across many viewports → a per-viewport verdict matrix ("fixed on desktop, still broken on mobile" caught in one call)
Record styles, compare later — verify-my-fix loops