layout-doctor-mcp
HTMLをレンダリングしてレイアウトの破綻を検出するMCPサーバー。文字の重なり・はみ出し・切り捨てを座標で実測。ベースライン不要・検査専用
渲染HTML并检测布局破损的MCP服务器。通过坐标实测文字重叠、溢出、截断。无需基准线，仅限检查。
How to install
git clone https://github.com/h-kazuki-pixel/layout-doctor-mcp ~/.claude/skills/layout-doctor-mcp About
layout-doctor-mcp **HTMLを実際にレンダリングして、レイアウトの破綻を数値で検出するMCPサーバー。** 比較用のベースライン画像は要りません。いま生成したその1枚だけで判定します。 **これは検査専用のツールです。** ファイルの書き換えや自動修正は一切行いません。読み取りのみで動作します。 [エラー] text-overlap-001 テキスト「料金プラン」と「人気No.1」が 59×17px(面積 1003px²)重なっており、文字が読めなくなります。 → div.hero > h1 (24, 48) 163×36px → span.badge (128, 55) 66×17px 対処: どちらかの位置・余白を調整するか、重ねる意図がある場合は背景を不透明にしてください。 なぜ作ったか AIにHTMLやスライドを作らせると、コードは正しいのに**表示が壊れている**ことがあります。文字が重なる、枠からはみ出す、undefined がそのまま出る。しかし生成した本人はレンダリング結果を見ていないので気づけません。 既存のビジュアルテストツールは、ほぼすべてが**「前回の画像と比べて変わったか」**を見る回帰テストです。いま作ったばかりの1枚には、比べる相手がいません。 スクリーンショットを撮って画像認識に判断させる方法もありますが、視覚モデルは「この要素が…
Recommendation signals
Meta
- License
- MIT
- Language
- TypeScript
- GitHub stars
- 0
- mo. downloads
- –
- Last push
- 2026-08-07
- Created
- 2026-08-02
Links
Basic safety check
- Findings
- curated 收录但无 npm 包/安装命令
- Sources
- curated:punkpeye/awesome-mcp-servers
- Topics
- claude, html, layout-analysis, mcp, mcp-server, model-context-protocol, playwright, testing, typescript, visual-testing
Related plugins
hindsight
vectorize-io/hindsight/tree/main/hindsight-integrations/coding-agents
Hindsight, agent memory that learns: long-term project memory with auto recall and retain, knowledge pages, deep reflection, and per-repo memory banks.
firecrawl-mcp-server
firecrawl/firecrawl-mcp-server
🔥 Official Firecrawl MCP Server - Adds powerful web scraping and search to Cursor, Claude and any other LLM clients.
dsh-mnemon
omdsh-dev/dsh-mnemon
Cross-agent, local-first persistent memory plugin for DeepSeek Harness (DSH), powered by Mnemon. It shares long-term memory across Mnemon-enabled agents and adds runtime memory, searchable project documents, semantic recall, knowledge graph, and a Sidebar UI.
get-shit-done
gsd-build/get-shit-done
A light-weight and powerful meta-prompting, context engineering and spec-driven development system for Claude Code by TÂCHES.