{"slug": "my-visionaire-mcp-verifies-whether-agent-css-fixes-rendered", "title": "My Visionaire MCP verifies whether agent CSS fixes rendered", "summary": "Visionaire MCP v0.7 introduces a verification layer that lets AI coding agents visually inspect live web pages, identify the exact CSS rule, file, and line causing rendering bugs, and verify fixes automatically. The tool addresses the problem of LLMs being \"structurally blind\" to rendered output, reducing the need for developers to manually explain visual issues.", "body_md": "Which rule, which file, which line — and why it wins.\n\n**The problem:** Something looks off. You screenshot it, explain it, the LLM guesses wrong, you re-explain.\n\n**The solution:** Visionaire reads the live page and hands the LLM the exact rule, file, and line. Right fix, first try.\n\n**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.\n\n**Status: v0.7** — 28 tools, 435 tests (252 unit + 183 end-to-end on real Chrome), a 24-case seeded-bug benchmark (`npm run bench`\n\n), verified live against wordpress.org.\n\n**What's new, by version**\n\n**v0.7 — the verification layer:**`assert_visual`\n\n(a 17-type assertion grammar — PASS/FAIL verdicts with measured pixels, offending uids, and re-runnable named suites),`visual_diff`\n\n(pixel diff vs a mockup or recorded baseline, divergent regions mapped to element uids),`impact_preview`\n\n(blast radius + sandboxed dry-run before editing a shared selector),`diagnose`\n\n(ranked \"why is this broken\" culprits with measured evidence),`responsive_sweep`\n\n(one call → per-viewport verdict matrix),`capture_proof`\n\n(before/after evidence bundles with a verdict delta); the verify-after-edit harness for Claude Code and Cursor (`npx visionaire-engine init-harness`\n\n);`style_diff { capture_pixels }`\n\nbaselines;`check_alignment`\n\ndeprecated in favor of`assert_visual`\n\n**v0.6 — the pixel-perfect pack:**`check_alignment`\n\n(group alignment / gap-rhythm / grid / pixel-snap audit) and`pick_color`\n\n(actual painted-pixel sampling + WCAG contrast verdicts)**v0.5:**`inject_css`\n\n— the live fix loop (trial a fix on the page, see what changed, converge, write source once);`navigate { bypassCache }`\n\nfor stale-stylesheet hard reloads; blast-radius + scoped-fix reporting on`explain_styles`\n\n(change*the*button, not all buttons)**v0.4 (field-report items):**`interact`\n\nto drive the UI into a state and inspect it;`measure_element`\n\nfor sub-pixel glyph/text-ink centering; an`evaluate`\n\nescape hatch; element-scoped crops/zoom on`annotated_screenshot`\n\n;`match:\"any\"`\n\n/`visibleOnly:false`\n\non`find_elements`\n\n; 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\n\nAI 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:\n\n-\n— Adam Argyle on why models can't reason about layout they can't perceive.[Why AI Sucks At Front End](https://nerdy.dev/why-ai-sucks-at-front-end)*\"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.\"* -\n— Mauro Bieg on the wider cost of AI-generated frontend.[Is AI Causing a Repeat of Frontend's Lost Decade?](https://mastrojs.github.io/blog/2026-05-23-is-AI-causing-a-repeat-of-frontends-lost-decade/)*\"AI is enabling lots of AI slop — but this doesn't mean we don't still need people who know what they're doing.\"*\n\nAsk an LLM to fix a visual bug today and it gets one of two incomplete pictures: pixels, with no link back to code, or code, with no rendering truth about what's actually winning on screen. Existing browser MCPs make this worse for design work specifically — they ship accessibility snapshots that deliberately strip out all styling. What's missing is **explanation and attribution**:\n\n*Which*CSS rule wins the cascade for this property, and why did the others lose?*Which file, which line*does the winner live in — or which Elementor widget control, or which Customizer entry?*Why*is this element invisible, misaligned, or the wrong size?\n\nVisionaire answers those questions with zero AI inside — everything is computed deterministically from the Chrome DevTools Protocol plus closed rulesets. The fuzzy part (matching \"the button under the hero looks off\" to an actual element) stays with the calling LLM, which gets uid-keyed snapshots, search tools, and annotated screenshots to do that cheaply.\n\nLive against wordpress.org:\n\n```\nwhy color = rgb(255, 255, 255):\n  WINNER  [class*=wp-block] .wp-block-button__link { color: var(--wp--custom--button--color--text) }  spec(0,2,0)\n    → themes/wporg-parent-2021/build/style.css:499  [line | theme: wporg-parent-2021 — edit themes/wporg-parent-2021/build/style.css]\n  lost (specificity)  :root :where(.wp-element-button, .wp-block-button__link) { color: #fff }  spec(0,1,0)\n    → global-styles-inline-css:2  [db-entity | Global Styles — Site Editor → Styles (theme.json / wp_global_styles)]\n  lost (origin)  a:-webkit-any-link { color: -webkit-link }  spec(0,1,1)\n    → user-agent stylesheet\n```\n\nWinner, losers with the decisive loss reason, and an honest edit pointer for each — including WordPress-aware answers like \"Site Editor → Styles\" instead of a useless path to a generated file.\n\nRequires Node ≥ 20 and Chrome/Chromium installed.\n\nFastest path — register straight from npm with Claude Code (no clone, no build):\n\n```\nclaude mcp add visionaire -- npx -y visionaire-engine\n```\n\nOr run from a clone (for development or a pinned local build):\n\n```\ngit clone https://github.com/mi60dev/visionaire-engine && cd visionaire-engine\nnpm install && npm run build\nclaude mcp add visionaire -- node \"$PWD/dist/index.js\"\n```\n\nUsing **GitHub Copilot, Cursor, Claude Desktop, Google Antigravity**, or another client? See ** docs/clients.md** for a copy-paste config for each, plus browser-install help for Linux/WSL/Docker.\n\n**Run it from your project's root directory** — Visionaire is at its best when the agent has both the running site *and* its source on disk, so it can cross-reference the two. Ground before you search: take a `page_snapshot`\n\n(or read the source) to get real element names instead of guessing selectors. If a selector matches nothing, the error suggests the closest real ids/classes on the page.\n\nThen, in a session:\n\n`connect { url: \"https://your-site.com\" }`\n\n— launches Chrome (or`{ browserUrl: \"http://127.0.0.1:9222\" }`\n\nto attach to your real, logged-in browser)`page_snapshot {}`\n\n— a uid-keyed census of what's visible;**target elements by their**, not invented selectors`uid`\n\n`explain_styles { uid: \"e17\", property: \"margin-bottom\" }`\n\n— cascade verdict with file:line\n\nTry it without an MCP client:\n\n```\nnpm run demo                                              # bundled fixture\nnpm run demo -- https://wordpress.org --selector \"a.wp-block-button__link\"\n```\n\n**Session & grounding** — get connected and find the right element without guessing.\n\n| Tool | Purpose |\n|---|---|\n`connect` / `navigate` / `set_viewport` |\nLaunch or attach to Chrome, go to a URL (`bypassCache` for hard reloads), emulate viewports |\n`page_snapshot` |\nPruned, uid-keyed tree of what's visible — geometry, layout hints, invisibility reasons |\n`page_origins` |\nStylesheet inventory + platform detection (WordPress version, theme, builders, optimizers) |\n`find_elements` |\nDeterministic search by text, selector, role, or screen region — AND-combined by default, `match:\"any\"` for a union, `visibleOnly:false` to include hidden elements |\n`node_at_point` |\nx,y → element uid + ancestor chain |\n`pick_element` |\nHuman-in-the-loop grounding: DevTools-style hover highlight, the user clicks the element that looks wrong |\n\n**Explanation** — the \"why,\" with a receipt.\n\n| Tool | Purpose |\n|---|---|\n`inspect_element` |\nThe \"what\": box model, computed values, visibility verdict |\n`explain_styles` |\nThe 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 |\n`inspect_ancestors` |\nConstraint-chain walk: which ancestor constrains width/overflow/stacking |\n`get_listeners` |\nEvent listeners on an element + its ancestors, with handler file:line and capture/passive/once flags |\n`explain_animations` |\nAnimations/transitions touching an element: live census, declared rules with file:line, and a closed \"why is it not smooth\" ruleset |\n\n**Pixel-level checks** — new in v0.6.\n\n| Tool | Purpose |\n|---|---|\n`measure_element` |\nSub-pixel rendered geometry: content box + true text-ink box (glyph extents) with a centering verdict — \"is this × actually centered?\" |\n`check_alignment` |\n(deprecated → 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`assert_visual` ) |\n`pick_color` |\nThe actual painted pixel (composited truth: gradients, images, opacity) + computed colors + WCAG AA/AAA contrast verdict |\n\n**Interaction & time** — states, not just snapshots.\n\n| Tool | Purpose |\n|---|---|\n`interact` |\nDrive 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 |\n`record_interaction` |\nOne interaction → a source-attributed causal timeline: handlers, mutations, cancelled transitions, layout shifts |\n\n**Fixing & verifying**\n\n| Tool | Purpose |\n|---|---|\n`inject_css` |\nThe live fix loop: trial declarations on an element (or a page-wide rule) without touching source — see what changed, converge, write source once, revert |\n`style_diff` |\nRecord styles, compare later — verify-my-fix loops |\n`evaluate` |\nEscape hatch: run agent-authored JavaScript in the page and get the JSON result, for the genuinely bespoke case no other tool covers |\n`annotated_screenshot` |\nScreenshot with numbered marks that equal snapshot uids — or an element-scoped crop via `clipTo` with `padding` /`scale` zoom and optional `annotate:false` |\n\n**Verification & proof** — new in v0.7.\n\n| Tool | Purpose |\n|---|---|\n`assert_visual` |\nThe 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 |\n`visual_diff` |\nPixel-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 |\n`impact_preview` |\nBlast-radius report before editing a shared selector: who else matches, grouped with uids, plus a sandboxed dry-run predicting exactly which elements would change |\n`diagnose` |\nOne-shot \"why does this look broken\" — ranked culprits with measured evidence for clipping, overflow, off-center, invisibility, overlap, wrong size |\n`responsive_sweep` |\nOne verification payload across many viewports → a per-viewport verdict matrix (\"fixed on desktop, still broken on mobile\" caught in one call) |\n`capture_proof` |\nBefore/after evidence bundles: annotated screenshots + suite verdicts, with a verdict delta proving the fix flipped FAIL → PASS |\n\nFull reference: [docs/tools.md](/mi60dev/visionaire-engine/blob/main/docs/tools.md)\n\nAn agent edits a stylesheet, reads its own diff, and declares \"now the cards are equal height\" — without ever seeing a rendered pixel. Visionaire gives your agent deterministic eyes on rendered truth. The loop:\n\n**Preview** shared-class blast radius →`impact_preview`\n\n.**Edit** the smallest change.**Assert** your claim →`assert_visual`\n\n(or re-run a named`suite_id`\n\n). You get PASS/FAIL + the actual measured pixels + the offending element uids.**Diagnose** any FAIL →`diagnose`\n\nreturns the ranked culprit with evidence.**Sweep** responsive →`responsive_sweep`\n\nreturns a per-viewport verdict matrix.**Prove** it →`capture_proof`\n\nbundles before/after screenshots + verdict delta.\n\nReal output — the same suite before and after a fix:\n\n```\n{\n \"verdict\": \"FAIL\",\n \"summary\": \"1 assertion: 0 PASS, 1 FAIL — registered as suite 'cards' (re-run with just {\\\"suite_id\\\":\\\"cards\\\"})\",\n \"results\": [\n  { \"type\": \"equal_height\", \"verdict\": \"FAIL\", \"id\": \"cards-equal\",\n    \"measured\": { \"values\": [412, 388], \"unit\": \"px\", \"delta\": 24, \"tolerance_px\": 1 },\n    \"offending_uids\": [\"e1\", \"e2\"] }\n ],\n \"truncated\": false, \"suite_id\": \"cards\"\n}\n```\n\n…fix the CSS, re-run with just `{ \"suite_id\": \"cards\" }`\n\n:\n\n```\n{\n \"verdict\": \"PASS\",\n \"summary\": \"1 assertion: 1 PASS, 0 FAIL\",\n \"results\": [\n  { \"type\": \"equal_height\", \"verdict\": \"PASS\", \"id\": \"cards-equal\",\n    \"measured\": { \"values\": [412, 412], \"unit\": \"px\", \"delta\": 0, \"tolerance_px\": 1 } }\n ],\n \"truncated\": false, \"suite_id\": \"cards\"\n}\n```\n\nRun `npx visionaire-engine init-harness`\n\nfrom your project root to wire the included Claude Code hooks (or Cursor rule) so the agent physically cannot end a turn claiming \"it's fixed\" without a verification pass on record. How the markers, hooks, and Stop gate work: [docs/harness.md](/mi60dev/visionaire-engine/blob/main/docs/harness.md).\n\n[docs/clients.md](/mi60dev/visionaire-engine/blob/main/docs/clients.md)— install in Claude, Copilot, Cursor, Antigravity, and other MCP clients[docs/tools.md](/mi60dev/visionaire-engine/blob/main/docs/tools.md)— tool-by-tool reference with real examples[docs/harness.md](/mi60dev/visionaire-engine/blob/main/docs/harness.md)— the verify-after-edit harness (hooks, markers,`init-harness`\n\n)[docs/architecture.md](/mi60dev/visionaire-engine/blob/main/docs/architecture.md)— how the deterministic pipeline works[docs/wordpress.md](/mi60dev/visionaire-engine/blob/main/docs/wordpress.md)— WordPress origin resolution guide[docs/development.md](/mi60dev/visionaire-engine/blob/main/docs/development.md)— building, testing, extending\n\n**No internal LLM**— deterministic, cacheable, testable, host-agnostic.** Fuzzy grounding belongs to the calling LLM**; we make it cheap.** Complement the incumbent browser MCPs**(same uid idiom), don't compete.** Honesty ladder**on every attribution:`line > file > db-entity > component > generated > unknown`\n\n.**Token-budgeted output**— a dossier is 300–800 tokens, never a dump.\n\nVisionaire is pointed at arbitrary, untrusted pages, so it treats page content as hostile:\n\n**Prompt-injection defense.** Page-derived strings (element text, class names, ids, attribute values) are sanitized at the single choke point where they enter tool output — collapsed to one line, stripped of control and bidirectional-override characters, and length-capped. A page cannot smuggle instruction-shaped text formatted as a \"system message\" toward the calling LLM; such content can only appear as an inert, quoted, truncated fragment.**Fail-fast, never hang.** Every tool call is wrapped in a watchdog (default 60s,`VISIONAIRE_TOOL_TIMEOUT_MS`\n\nto override;`pick_element`\n\n/`record_interaction`\n\nget their declared wait plus slack). A wedged browser returns an actionable error telling you to`connect`\n\nagain, instead of blocking the client.**No dead-locking dialogs.** Page`alert()`\n\n/`confirm()`\n\n/`prompt()`\n\ncalls are auto-dismissed — otherwise they would block every evaluate-family CDP call indefinitely.\n\nVisionaire never executes page-authored code as instructions; it only reads and attributes. The calling LLM should still treat tool output as data about a page, not as commands.\n\n- Chromium-only (CDP is the only path to matched-rule source locations;\n`getMatchedCSSRules`\n\nwas removed from browsers years ago). `@layer`\n\n: unlayered-vs-layered ordering is exact; ordering between two*different*layer chains is a deterministic proxy (CDP doesn't expose layer declaration order).- Some CDP fields we rely on (\n`specificity`\n\n,`layers`\n\n) are experimental; the engine feature-detects them and falls back (e.g. to its own specificity parser), and a contract smoke test in`test/e2e.test.ts`\n\nfails loudly if a Chrome update breaks the core protocol shape (the experimental fields are logged as present/absent).\n\nVisionaire is free and open source. If it saves you time and you'd like to help keep development going, you can chip in on [Ko-fi](https://ko-fi.com/mishonyai) or [Patreon](https://www.patreon.com/cw/MishonyAI). Completely optional, and genuinely appreciated. Bug reports and field notes help just as much — see [CONTRIBUTING.md](/mi60dev/visionaire-engine/blob/main/CONTRIBUTING.md).\n\n** Apache License 2.0** — free for everyone, including commercial use, with a patent grant. Copyright © 2026 mi60dev (\n\n[NOTICE](/mi60dev/visionaire-engine/blob/main/NOTICE)).\n\nBuilt and maintained by [@mi60dev](https://github.com/mi60dev). Contributions welcome under the Apache-2.0 terms — see [CONTRIBUTING.md](/mi60dev/visionaire-engine/blob/main/CONTRIBUTING.md).", "url": "https://wpnews.pro/news/my-visionaire-mcp-verifies-whether-agent-css-fixes-rendered", "canonical_source": "https://github.com/mi60dev/visionaire-engine", "published_at": "2026-07-10 14:25:18+00:00", "updated_at": "2026-07-10 14:35:20.683893+00:00", "lang": "en", "topics": ["developer-tools", "ai-agents", "ai-tools", "computer-vision", "ai-products"], "entities": ["Visionaire", "Claude Code", "Cursor", "WordPress", "Adam Argyle", "Mauro Bieg"], "alternates": {"html": "https://wpnews.pro/news/my-visionaire-mcp-verifies-whether-agent-css-fixes-rendered", "markdown": "https://wpnews.pro/news/my-visionaire-mcp-verifies-whether-agent-css-fixes-rendered.md", "text": "https://wpnews.pro/news/my-visionaire-mcp-verifies-whether-agent-css-fixes-rendered.txt", "jsonld": "https://wpnews.pro/news/my-visionaire-mcp-verifies-whether-agent-css-fixes-rendered.jsonld"}}