From UI bug to coding-agent task with UI Studio
“Make this calmer” is useful intent attached to useless coordinates. A better handoff keeps the selected component, computed layout, visual experiment, and operator review together until an agent can find the source.
UI Studio loads a project's own localhost preview, lets you select a real DOM component, try ephemeral text and layout changes, and queue up to twenty component reviews. It turns the frozen selector, breadcrumb, computed layout, bounded DOM, draft deltas, and operator instruction into one provider-neutral brief for Claude Code or Codex. No source file changes until the selected agent implements them.
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.
Useful draft
Tests one relationship: spacing, density, copy length, width, or hierarchy. It gives the review concrete evidence without pretending to be production CSS.
Useful instruction
Names the outcome and constraint: “Keep this toolbar on one row at 900 px,” not merely “change the gap to ten.”
“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 one implementer—or compare two plans.
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.
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.
Compare Claude and Codex
Open both in Plan mode to compare source-level approaches, accessibility risks, and verification. The comparison is intentionally read-only so two agents do not write the same checkout concurrently.
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.
Published and source-reviewed September 9, 2026. The article describes the released local workflow; it does not claim hosted previewing, interactive agent browsing, or concurrent multi-agent implementation of one review batch.