lo-eyes

lo-eyes

可视化前端无障碍检查 MCP 服务。 检查 WCAG 对比度、验证触控目标、审计标题层级、生成响应式截图，并在移动端和桌面视口下进行 S+ 评级。

由 Like One Foundation（501(c)(3) 非营利组织）打造。只需更改 BASE_URL，即可用于任何网站。

工具

工具	描述
eyes_screenshot	使用任意设备预设生成视口大小的截图
eyes_scan	自动将整页拆分为易读的视口片段，并生成 RAG 清单
eyes_audit	响应式与无障碍审计，并进行 S+ 评级
eyes_devices	列出可用的设备预设

设备预设

名称	视口	类型
iphone-se	375x667	移动端
iphone-14	390x844	移动端
ipad	768x1024	平板
laptop	1280x800	桌面端
desktop	1440x900	桌面端

审计检查项

• 溢出：超出视口宽度的元素（会考虑滚动父级）
• 字体大小：小于 12px 的文本
• 触控目标：小于 Apple HIG 44px 最小尺寸的交互元素
• 标题层级：跳过的标题级别（h1 -> h3）

评级

等级	标准
S+	无问题
A	1-5 个中等问题，无严重问题
B	6 个及以上中等问题，无严重问题
C	1-2 个严重问题
D	3-5 个严重问题
F	6 个及以上严重问题

设置

cd lo-eyes
python3 -m venv .venv
source .venv/bin/activate
pip install playwright mcp
python3 -m playwright install chromium

使用方法

作为 MCP 服务（Claude Code）

添加到 .mcp.json：

{
  "mcpServers": {
    "lo-eyes": {
      "command": "/path/to/lo-eyes/.venv/bin/python3",
      "args": ["/path/to/lo-eyes/server.py"]
    }
  }
}

作为 CLI

./lo-eyes audit /                           # Audit homepage
./lo-eyes screenshot /blog/ --device ipad   # iPad screenshot
./lo-eyes scan / --device iphone-14         # Full-page chunked scan
./lo-eyes responsive /academy/              # All 5 viewports

技术栈

• Python 3
• Playwright（无头 Chromium）
• MCP SDK（FastMCP，stdio 传输）

许可证

MIT

---

由 Like One 倾心打造。