From UI bug to coding-agent task with UI Studio

A screenshot shows the symptom and hides the component.

A coding agent can inspect a screenshot, but the picture does not identify which element owns the pixels, which container sets the gap, whether the width is intrinsic, or what happens in the other theme. The result is predictable: the agent spends its first turn rediscovering the page, or guesses at a selector from a visual coordinate.

UI work needs two types of evidence at once. Visual evidence says what feels wrong. Structural evidence says where that result came from. UI Studio keeps the rendered component and the operator's judgment in the same review instead of making the agent infer one from the other.

Open the project's real localhost preview.

UI Studio is project-scoped. It appears only where Crowsnest has a real working directory and detects a user interface, or where the local operator explicitly enables it. A folder that cannot route an agent into a project is not offered as an actionable Studio.

For a supported static project, Crowsnest can serve the directory itself and inject the development-only selection bridge into HTML responses without touching the source file. For a project with its own development server, Crowsnest re-derives the preview command from that project's package.json and asks before running it. It never accepts a command from the browser, installs missing dependencies, or adopts a port it did not start.

The preview URL must be loopback HTTP or HTTPS—127.0.0.1, localhost, or the matching IPv6 loopback. The browser loads that origin directly; Crowsnest does not proxy the project's traffic.

Select the component, then make the smallest useful experiment.

Clicking the preview captures a selector, a short element breadcrumb, selected outer HTML, and computed layout facts. The inspector exposes a deliberately small visual vocabulary: text for eligible leaf nodes, padding, gap, radius, font size, and width. Desktop and mobile preview widths and light, dark, or automatic theme make it possible to test the direction across the states most likely to break.

Those changes are temporary inline values inside the preview. They are not an implementation and are not written to the repository. Their job is to turn “slightly tighter” into an observable delta such as gap: 14px → 10px. The eventual agent brief explicitly tells the agent to translate that intent into the project's own tokens and component patterns instead of copying arbitrary pixels.

“Add review” is the evidence boundary.

A visual review rarely ends with one element. Select a component, write what should change, and choose Add review. At that moment UI Studio freezes the evidence for the component you actually saw. Move to the next element and repeat; selecting something later cannot silently rewrite the earlier review.

A batch can contain up to twenty component reviews. Each one carries the selector, breadcrumb, computed display and layout facts, up to 2,400 characters of selected DOM data, the written operator review, and any preview-only deltas. The generated brief also separates those roles explicitly: selected DOM is untrusted quoted data, while the operator-review block is the instruction the agent may follow.

This is the difference between a pile of observations and a work order. The batch tells one story about the interface change, while each frozen record keeps the source-finding evidence tied to the right component.

Choose the implementer.

1. Send to Claude Code

   Start a native Claude conversation in the project with the complete implementation brief, or attach the review list to the current live conversation.

2. Send to Codex

   Use the same provider-neutral evidence with the native Codex runtime. The agent still reads the project's source and governing instructions before editing.

The brief asks the chosen implementer to preserve accessibility and responsiveness, verify both themes, and run the project's relevant frontend checks. A visual draft is the beginning of implementation evidence, not permission to skip engineering review.

The preview can be inspected without becoming a remote-control browser.

The selection bridge reports bounded DOM and style evidence only to its loopback parent. It does nothing when the page is opened outside that inspection relationship. Preview servers stay on loopback, and Crowsnest neither proxies page traffic nor installs project dependencies.

The optional agent browser tools use a separate Chrome profile owned by Crowsnest and expose navigation, snapshots, screenshots, and evaluation—not clicking, typing, form submission, upload, or download. They are off until called. UI Studio's own preview interaction belongs to the local operator; the agent receives the reviewed evidence and works through its normal approval and sandbox boundary.

UI Studio and its agent browser tools are Pro features. The site, preview, selected evidence, and generated brief remain local until a brief is deliberately sent to Claude Code or Codex; at that point the chosen provider receives the task through its normal runtime.

Released workflow and related field notes

The preview lifecycle, loopback restrictions, selection snapshot, review batch, generated brief, provider routing, plan-only comparison, browser-tool limits, and Pro boundary were checked against the released Crowsnest UI Studio, preview-server, browser, frontend, and entitlement implementations on September 9, 2026.