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

说明与用途

layout‑debug‑mcp 让用户可视化选择并移动 UI 元素，向代理发送精确的位置信息和结构数据，从而消除文本描述 UI 时产生的错误。

问题

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

结果

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

工作流

• 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.

证据

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

来源

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.

来源

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

来源