Inspector launched as Figma for your actual codebase this fortnight — click an element in the live site and a connected agent reads the component, writes the patch, and applies it. The agent's primary surface keeps moving toward the artifact users actually see. This week it arrived at the running page itself.
Trace paper, drafting hairlines, dimension callouts, and a single drafting-pencil red on warm vellum.
The architectural plate is the language of buildings before they exist. A draftsman annotates a vellum sheet at a known scale, with hairlines for the run of a wall, a circled letter for a section cut, a dimension callout that pins one element to another. The plate is meant to be precise enough that anyone holding it can read the building back out. Today's idiom borrows that vocabulary — the page is a drawing of itself, with the chrome of the drafting board pulled forward (title block, datum lines, drafting bubbles, north arrow) and the body type a utility sans that could pass for IBM Selectric annotation.
Inspector shipped this fortnight as a desktop visual editor that opens your dev server in a window, watches you click and drag, and forwards every change as a structured instruction to a connected coding agent. Connecting Claude Code, Codex CLI, or Cursor is free; the agent reads the component file, writes the patch, applies it locally. Inspector calls itself Figma for your actual codebase — and the comparison holds in one direction: it gives you a Figma-like inspector pane on the running site, but unlike Figma the artifact you leave behind is a real git commit, not a layered design file you have to translate twice.
Inspector slots beneath the rest of the stack rather than replacing any of it. Figma's MCP server still works for the direction toward the canvas; VS Code's adapter to Claude Code keeps the editor honest about which agent is in charge. The new entrant is a click-on-the-page surface that any of these agents can drive once you've authenticated. What's actually proliferating is thin clients — a chat box, a canvas, an IDE, now a click-to-edit overlay — all pointing at the same Plan → Execute → Verify loop underneath.
If you already have a Claude Code or Codex subscription, you can attach Inspector to the running page in about three minutes without changing your existing IDE habit. The agent is the same; the input device is new.
Anthropic's 2026 Agentic Coding Trends Report and OpenAI's writeup on harness engineering both reached for the same phrase this month. The skill isn't write a better prompt. It's make the room the agent works in tell it when it's wrong, immediately, in language it can act on. Custom linters with remediation messages. Typechecks that point at the rule. Screenshot diffs. Accessibility scans. Anything that turns a failure into a structured instruction.
Plan, Execute, Verify. The plan is the agent's outline. The execute is the patch. The verify is the harness — the suite of checks that produces a structured error the agent can read back into its own context. The remediation message is the load-bearing piece: "X failed" is not enough; "X failed because Y, here is the file and rule to change" is. Harness engineers spend their time writing those messages.
For agentic web design specifically, the verify step is the screenshot diff plus an accessibility scan. Without those, the agent ships pages that pass typecheck and fail Lighthouse — pixels-perfect for nobody, and unreadable to a screen reader.
A workflow that's taking shape across small studios: spin up the dev server, open Inspector, designer or product engineer clicks elements directly on the rendered page. Want this CTA bigger? Drag the handle. Wrong copy? Triple-click and type. Hit apply. Inspector ships the instruction to Claude Code; the agent reads components/HeroCta.tsx, locates the relevant Tailwind classes or styled-component, writes the patch, runs the verify loop. The change appears in the running window in seconds. If you don't like it, you click again.
The pipeline this collapses is real and load-bearing in most companies: designer mocks up in Figma → developer interprets → ticket gets written → engineer translates the ticket back to UI → designer reviews the deployed result → repeat. The agentic version still has a designer in the loop, but the artifact handed off is the page, not a description of the page. The lossy translation step in the middle is the part the agent does — and it does it well because the source and the target are now the same surface.
The browser is the artifact the user actually sees. Every design tool that lives upstream of it has been paying a translation tax.
— Field Note A · 12 May 26Pair Inspector with a screenshot-diff verify (Playwright or Chromatic) and an axe-core accessibility scan. The agent learns to ship inside the same visual + a11y envelope you already enforce on humans.
A concrete prompt you'd type into Inspector's prompt field after selecting a hero CTA on a Next.js + Tailwind site. Read it as a drafting annotation — specific element, dimensioned change, name the token, name the verify step.
Make this button about +25% larger (increase vertical and horizontal padding to match), center it inside its row, and switch its background to the --brand-orange token. If --brand-orange isn't defined in tokens.css, add it as #E94E1B and reference the variable rather than inlining the hex. Keep the existing focus ring untouched. After applying, run the visual-diff test for the homepage hero and only commit if it passes.
— Selected: components/HeroCta.tsx · target: .cta-primary
Three load-bearing moves: the prompt is positional (Inspector already knows which element you selected, so you don't have to describe it); it names the design token rather than the raw hex (the change propagates to every component that uses the token); and it includes its own verify step in the prompt itself. The agent should ship code that includes a check that it shipped what was asked for.
The twelve-month arc of the agent's primary surface has gone: chat box → IDE → design canvas → running app. Each move brings the agent closer to the artifact a user actually sees. Inspector is the current end of the line; the next step is removing the inspector window entirely and letting the user gesture at the page directly. The drafting metaphor stops working at exactly that point — buildings don't get built by inhabitants annotating walls — but the principle is durable. The artifact is the truth, and the agent is moving toward it.
A field experiment from the team behind Beaver Builder.