用途:让 AI 生成的 HTML 或幻灯片在渲染后接受布局检查。代码正确但显示可能崩坏(文字重叠、超出边框、出现 undefined),生成者看不到渲染结果,本工具用坐标实测代替目测。
主要能力:核心工具只有 layout_check,传入 path(文件绝对路径)、html(字符串)或 url(默认仅 localhost)之一,以及 viewport。viewport 无默认值,必须显式指定,幻灯片常用 1280×720,网页常用 1280×800。检查项包括文字重叠(text-overlap)、元素溢出、文字截断、占位符残留等;元素碰撞(element-collision)默认关闭,需在 checks 中显式启用。每条发现带 verdict:static 为无需渲染即可确定的问题,candidate 为坐标上检测到但尚未判定人眼是否可见。
使用方式:目前未发布到 npm,需 clone 后构建。安装依赖后必须在同一目录执行 npx playwright install chromium;Linux 缺共享库时用 npx playwright install --with-deps chromium。可在 Claude Desktop 的 claude_desktop_config.json 中配置,macOS 建议用 node 加绝对路径而非 npx。也可通过 LAYOUT_DOCTOR_CHROMIUM 指定已有 Chrome 或 Edge。
限制:只检查指定的单一宽度,不做响应式多宽度覆盖;不做视觉回归对比;不评估配色、对比度、ARIA、键盘操作等可访问性;不判断设计好坏;不修改文件。默认阻断外部通信,除非设置 allowNetwork: true。依赖 Playwright 与 Chromium,安装较重。candidate 可能包含透明元素重叠等不可见情况,可见性确认计划在 v0.5 加入。