uisight
uisight
你的AI看不到屏幕。你无法描述这个bug。uisight解决了这两个问题。
uisight为你的AI编程助手(Claude Code、Cursor、Antigravity——任何支持MCP的工具)提供了对你Web应用的真实视觉:并排运行的移动端+桌面端实时会话、一个报告数字而非感觉的测量引擎,以及一个你和AI查看完全相同屏幕的共享面板。
由一位独立开发者构建,他厌倦了拍摄手机截图、粘贴到聊天中,然后输入“这个按钮看起来坏了,你能看到吗?”
它有何不同
多视口浏览器(Polypane等) | 浏览器自动化MCP(Playwright MCP等) | uisight | |
人类+AI共享一个实时会话 | — | — | ✅ |
测量引擎(报告 | 面向人类 | — | ✅ 以文本形式,面向AI |
设备×主题矩阵(移动端/桌面端,浅色/深色) | ✅ | — | ✅ |
人类标记bug → AI读取备注+截图 | — | — | ✅ |
测量引擎是核心:你的AI无需浪费token去费力查看截图,inspect会返回类似这样的结果:
[mobile · Pixel 7 · light] https://yourapp.com/
INVISIBLE TEXT 1.04:1 — span.bg-gradient-to-r "your headline" (text rgba(255,255,255,.5) / bg rgb(247,247,248))
BUTTON a.text-white "Get Started" → text/background contrast 3.35:1
touch target below 44px 180x23 — "read the guide"文本结果廉价、精确且可直接操作——你的AI能修复确切的选择器,而不是猜测。
Related MCP server: PixelCheck
快速开始
# one-shot audit: PNGs + gallery + report for iPhone/Pixel/desktop, light+dark
npx uisight https://yourapp.com --theme both
# live panel: mobile + desktop side by side, you browse, AI watches (and vice versa)
npx uisight-panel http://localhost:3000将其接入你的AI(MCP)
# Claude Code
claude mcp add --scope user uisight -- npx -y uisight-mcp对于Cursor / Antigravity / 其他MCP主机,添加到你的MCP配置中:
{ "mcpServers": { "uisight": { "command": "npx", "args": ["-y", "uisight-mcp"] } } }然后只需告诉你的代理:“用uisight查看我的应用”。面板服务器会在需要时自动启动。
MCP工具
工具 | 功能 |
| 返回当前屏幕的图像——即人类在面板中看到的精确帧 |
| 运行对比度/触摸目标/溢出/主题检查;返回以文本形式呈现的测量结果 |
| 将所有会话导航到某个URL(包括localhost) |
| 驱动页面——人类实时观看操作过程 |
| 切换设备配置文件(iphone-15, iphone-se, pixel, galaxy, ipad, desktop, laptop)或浅色/深色主题 |
| 打开的URL、会话、最近的控制台/网络错误——排查bug时的第一站 |
| 读取人类在面板中固定的备注(📌 备注+当时截图) |
土耳其语工具名称可通过UISIGHT_LANG=tr启用(ekrani_gor, denetle, ...)。
面板(人类侧)
npx uisight-panel <url> 在localhost:5055打开一个浏览器页面:
移动端+桌面端并排显示,两者均为实时,URL同步
点击 = 在该设备上点击 · 滚轮 = 滚动 · 点击后输入
每个窗格的设备切换器,共享的浅色/深色切换
检查按钮在每个屏幕上运行测量引擎
📌 固定:输入备注,固定它——你的AI通过
marks读取备注+截图。不再需要“让我描述我看到的”。
可在VS Code / Antigravity中通过简单浏览器:显示 → http://localhost:5055使用。
它检查什么
不可见文本(对比度 < 1.6:1)和WCAG AA对比度失败——处理了alpha混合背景、渐变文本、
oklab()/oklch()颜色低于44px的触摸目标(仅移动端配置文件;内联文本链接按宽度豁免,符合WCAG)
水平溢出及导致溢出的元素
小于12px的文本、无alt属性的图片
主题漂移:在浅色和深色中相同的元素 = 可能是硬编码颜色
每个设备的控制台/JS错误和失败的网络请求
以及诚实的限制:自动化检查无法发现设计错误——一个重叠的标题测量结果正常。这就是为什么see_screen存在,以及为什么报告会说“肉眼检查PNG”。
注意事项与限制
iPhone配置文件运行在真实的WebKit(Safari引擎)上——接近iOS,但并非iOS模拟器。
浏览器由Playwright在首次运行时下载一次(如果想预热,可运行
npx playwright install chromium webkit)。一切本地运行——无云端、无账户,你的屏幕永远不会离开你的机器。
v0.1版本提供英文界面,底层代码库最初用土耳其语编写(正在迁移中)。欢迎贡献;变量名在v0.2之前可能会让你感到意外。
许可证
MIT © SoloLabs
This server cannot be deployed
Maintenance
Related MCP Connectors
MCP server for building and testing AI agents with multi-model experimentation and insights.
Live browser debugging for AI assistants — DOM, console, network via MCP.
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
- mcpOAuthcom.screenshotink
Screenshot, diff, audit and sitemap-capture any web page — 5 MCP tools for AI agents.
Related MCP Servers
- AlicenseNot gradedqualityCmaintenanceMCP server that enables AI coding agents to read and write to a local-first HTML/CSS design canvas, bridging visual design and code generation.1MIT
- AlicenseNot gradedqualityCmaintenanceAn MCP server that gives AI agents real browser capabilities including screenshotting, action execution, data extraction, and multi-persona auditing for frontend validation.63 npm6MIT
- AlicenseNot gradedqualityCmaintenanceMCP server for browser debugging, inspection, and verification that streams console logs, network errors, and user actions into AI coding assistants.66AGPL 3.0
- FlicenseBqualityDmaintenanceAn MCP server that enables AI coding tools to control a browser for automated actions, UI extraction, network interception, and screenshots.231-