AI导哈

布局检测工具

一个使用确定性DOM/CSS数学检测真实布局问题的MCP服务器，适用于前端开发中的布局问题检测。

  • by LOsioChico
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 LOsioChico/layout-lint-mcp

使用说明

布局lint mcp

layout-lint-mcp 是一个MCP服务器，它使用确定性DOM/CSS数学而不是AI视觉来检测真正的布局错误。它使用Playwright加载页面并运行结构分析器，以检测溢出和剪切、响应回归、排版/可读性问题、间距节奏中断、移动触摸目标尺寸过小以及z索引重叠风险。

安装

用作MCP命令（已发布包）：

npx layout-lint-mcp

地方发展：

bun install
bun run check
bun run build
node dist/index.js

MCP客户端配置

opencode.json

{
  "mcpServers": {
    "layout-lint": {
      "command": "npx",
      "args": ["layout-lint-mcp"]
    }
  }
}

克劳德桌面版

{
  "mcpServers": {
    "layout-lint": {
      "command": "npx",
      "args": ["layout-lint-mcp"]
    }
  }
}

光标

{
  "mcpServers": {
    "layout-lint": {
      "command": "npx",
      "args": ["layout-lint-mcp"]
    }
  }
}

工具

  • audit_layout：对溢出、剪裁和视口溢出进行全结构扫描。
  • audit_responsive：多视口布局回归扫描，带有滚动条和调整大小检查。
  • audit_typography：字体大小、行高、标题顺序、对比度和排版一致性审核。
  • audit_spacing：边距/填充节奏和兄弟差距一致性审计。
  • audit_touch_targets：交互式控件的移动触摸目标尺寸审核。
  • highlight_issues：注入问题覆盖并返回屏幕截图（base64 PNG）。
  • audit_all：运行选定的审核，并返回重复数据消除后的合并结果。

输出示例

{
  "tool": "audit_layout",
  "url": "https://example.com",
  "viewport": { "width": 1440, "height": 900 },
  "timestamp": "2026-03-13T23:00:00.000Z",
  "summary": {
    "total": 3,
    "critical": 1,
    "warning": 2,
    "info": 0
  },
  "issues": [
    {
      "severity": "critical",
      "category": "horizontal-overflow",
      "message": "Content width 540px exceeds container width 320px.",
      "element": {
        "selector": "div.card:nth-of-type(1)",
        "tagName": "div",
        "text": "Long title that overflows...",
        "rect": { "x": 24, "y": 180, "width": 320, "height": 84 }
      },
      "suggestion": "Allow wrapping, reduce fixed widths, or adjust overflow rules."
    }
  ]
}

许可证

MIT。看 LICENSE.

相关 MCP