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.

Источник