Eyes for AI coding agents: deterministic MCP server that tells the LLM which CSS rule wins, in which file, on which line — and why. Cascade verdicts, blast radius, interaction timelines, pixel-perfect audits.
Visionaire Engine
以下摘录自该仓库的 README(片段) · 在 GitHub 读完整 README →
> **Which rule, which file, which line — and why it wins.**
**The problem:** Something looks off. You screenshot it, explain it, the LLM guesses wrong, you re-explain.
**The solution:** Visionaire reads the live page and hands the LLM the exact rule, file, and line. Right fix, first try.
**You shouldn't have to write a paragraph to explain a 2px margin bug — and now you don't.** Less explaining, more fixing: built for developers, vibe coders, and anyone shipping site design changes with an LLM in the loop.
**Status: v1.2** — one solve gateway over 26 engine tools, a Chrome + Firefox extension for inspecting your own browser, 562 tests (unit + end-to-end on real Chrome and Firefox), a 24-case seeded-bug benchmark (npm run bench).
What's new, by version
- **v1.2 — field-hardened:** a restarted server reattaches to an already-paired extension instead of losing the session; navigate waits for SPA routes to settle (network idle, DOM quiet, no loading spinner; waitFor / settleMs); read_text returns an element's full text (tables as rows) within a budget; full-page screenshots downscale to fit client limits; interact scrolls the target into view and reports what changed (URL, dialogs opened/closed, focus, elements added/removed); argument errors show the expected shape
- **v1.1 — your own browser:** the Visionaire Bridge extension for Chrome-family browsers (full engine via chrome.debugger) and Firefox (lite engine via content scripts), paired once with a click; connect { mode: "extension" }; solve rebuilt — explicit scenario, expert tool+args mode, verdict-first answers with one NEXT step, asks with a uid outline instead of guessing
- **v1.0 — single gateway:** solve replaces the 28-tool surface for agents
- **v0.7 — the verification layer:** assert_visual (a 17-type assertion grammar — PASS/FAIL verdicts with measured pixels, offending uids, and re-runnable named suites), visual_diff (pixel diff vs a mockup or recorded baseline, divergent regions mapped to element uids), impact_preview (blast radius + sandboxed dry-run before editing a shared selector), diagnose (ranked "why is this broken" culprits with measured evidence), responsive_sweep (one call → per-viewport verdict matrix), capture_proof (before/after evidence bundles with a verdict delta); the verify-after-edit harness for Claude Code and Cursor (npx visionaire-engine init-harness); style_diff { capture_pixels } baselines; check_alignment deprecated in favor of assert_visual
- **v0.6 — the pixel-perfect pack:** check_alignment (group alignment / gap-rhythm / grid / pixel-snap audit) and pick_color (actual painted-pixel sampling + WCAG contrast verdicts)
- **v0.5:** inject_css — the live fix loop (trial a fix on the page, see what changed, converge, write source once); navigate { bypassCache } for stale-stylesheet hard reloads; blast-radius + scoped-fix reporting on explain_styles (change *the* button, not all buttons)
- **v0.4 (field-report items):** interact to drive the UI into a state and inspect it; measure_element for sub-pixel glyph/text-ink centering; an evaluate escape hatch; element-scoped crops/zoom on annotated_screenshot; match:"any" / visibleOnly:false on find_elements; zero-config cold-start Chrome discovery
- **v0.3:** the time dimension — event-listener attribution, animation diagnosis, source-attributed interaction timelines
- **Hardened for untrusted pages:** prompt-injection sanitization, fail-fast watchdog, dialog auto-dismiss
The problem, in the wild
AI coding agents are structurally blind to what they render. They emit CSS as text and never see the pixels that come back — so they guess, insist the guess worked, and loop. The community has a name for it now: **"CSS gaslighting."** Visionaire gives the agent deterministic eyes on the real render — measured geometry, the actual cascade winner, PASS/FAIL verdicts — so the loop ends. If you want the problem in other people's words first, start here:
- **Why AI Sucks At Front End** — Adam Argyle on why models can't reason about layout they can't perceive.
> *"It's an LLM, not a rendering engine! It's notoriously bad at math, and throwing screenshots at it means very little. It's stabbing in the dark."*
- **Is AI Causing a Repeat of Frontend's Lost Decade?** — Mauro Bieg on the wider cost of AI-generated frontend.