Stop describing UI to your AI agent in words. Point at it.

Description and use

layout‑debug‑mcp lets users visually select and move UI elements, sending agents precise positional and structural data, eliminating errors from textual UI descriptions.

Problem

UI fixes via textual description often target wrong elements or incorrect amounts, causing wasted time.

Outcome

The tool enables precise, visual UI edits that agents can act on, reducing mis‑edits and time spent on textual descriptions.

Workflow

• Open layout-debug window via agent tool call.
• Select target element with Alt+click to highlight and view breadcrumbs.
• Drag or nudge element to desired position, observing live changes.
• Type desired change in element chat and press Enter.
• Agent receives element data, measurements, and file:line, edits code, replies in window.
• Window refreshes frame, restores selection, and shows agent reply.

Evidence

I asked my agent to move a price tag 8 px down. It edited the wrong <code><div></code>

Source

layout-debug-mcp: a local window over your running UI where you click the element, drag it where you want it, and send that to your agent together with the element's <code>file:line</code>, box, parents and the measured delta.

Source

The agent doesn't have to guess anything: it has the parent chain, the change as numbers, and anchors to find the element.

Source