layout-doctor-mcp

怎么安装

简介

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枚には、比べる相手がいません。 スクリーンショットを撮って画像認識に判断させる方法もありますが、視覚モデルは「この要素が…

推荐参考

信息

协议

MIT

语言

TypeScript

GitHub 星标

0

月下载

–

最近更新

2026-08-07

创建于

2026-08-02

链接

基础安全检查

检查结果

curated 收录但无 npm 包/安装命令

收录来源

curated:punkpeye/awesome-mcp-servers

主题标签

claude, html, layout-analysis, mcp, mcp-server, model-context-protocol, playwright, testing, typescript, visual-testing