Purpose: To let AI-generated HTML or slides undergo a layout check after rendering. The code may be correct but the display can break (text overlapping, exceeding borders, undefined appearing), and the generator cannot see the rendered result. This tool uses actual coordinate measurements instead of visual inspection.
Main capabilities: The core tool is only layout_check, which takes one of path (absolute file path), html (string), or url (localhost only by default), as well as viewport. viewport has no default value and must be specified explicitly; slides commonly use 1280×720, and web pages commonly use 1280×800. Check items include text overlap (text-overlap), element overflow, text truncation, leftover placeholders, etc.; element collision (element-collision) is disabled by default and must be explicitly enabled in checks. Each finding carries a verdict: static means an issue that can be determined without rendering, and candidate means something detected in coordinates but not yet judged as visible to the human eye.
How to use: It is currently not published to npm, so it must be cloned and then built. After installing dependencies, you must run npx playwright install chromium in the same directory; on Linux, when shared libraries are missing, use npx playwright install --with-deps chromium. It can be configured in Claude Desktop's claude_desktop_config.json; on macOS it is recommended to use node with an absolute path rather than npx. You can also specify an existing Chrome or Edge via LAYOUT_DOCTOR_CHROMIUM.
Limitations: It only checks the single specified width and does not perform responsive multi-width coverage; it does not perform visual regression comparison; it does not evaluate accessibility such as color scheme, contrast, ARIA, or keyboard operation; it does not judge whether the design is good or bad; it does not modify files. External communication is blocked by default unless allowNetwork: true is set. It depends on Playwright and Chromium, and installation is relatively heavy. candidate may include invisible cases such as overlapping transparent elements, and visibility confirmation is planned to be added in v0.5.
