@uicheck/mcp + @uicheck/core

让 AI 看懂真实浏览器页面

UI Check 把页面截图、DOM 元素、布局盒、间距和坐标暴露给 AI。AI 可以通过 MCP 查询页面，也可以接收人工标注后的图片证据，再回到代码里修复 UI。

开始接入查看工具
localhost:3000/dashboard
Studio
1Revenue+18.2%
2Conversion3.74%
Latency126ms
⌕
#1 margin 24 / padding 18
#2 selector .metric-card:nth-of-type(2)
AI Agent
inspect_elements({
  selector: ".mock-grid",
  limit: 20
})

capture_page({ waitMs: 300 })

Workflow

两条输入，一次修复

结构化布局信息适合机器判断，带标注截图适合视觉确认。两者一起给 AI，UI 修复会少很多盲猜。

1

页面接入 @uicheck/core

注入悬浮球和 WebSocket 客户端，连接本机 @uicheck/mcp。

2

AI 调用 MCP 工具

查询页面截图、元素布局、可见文本、坐标和样式信息。

3

人工可补充标注

手动选择元素后生成带编号和连线的图片到剪切板。

4

把证据交给 AI 修复

AI 同时拿到结构化 DOM 和视觉截图，减少猜测。

MCP Tools

AI 可以直接调用的页面观察能力

@uicheck/mcp 是本地 MCP 服务，浏览器页面通过 WebSocket 接入后，AI 就能向页面发请求。

list_clients

查看已连接的浏览器页面、标题、URL、视口和在线状态。

capture_page

让页面返回 PNG 截图，AI 可以直接看当前 UI。

inspect_elements

读取选择器、文本、布局盒、间距、颜色等结构化信息。

get_element_at_point

按坐标定位元素，并返回祖先链，适合修复错位和遮挡。

123

Manual Markup

人工选择元素，生成标注图到剪切板

当 AI 需要更明确的视觉上下文时，开发者可以用悬浮球进入标注模式，选择页面元素并复制带编号、边框、布局信息的图片。

  • 定位按钮、弹窗、表格、表单等元素的真实位置
  • 排查间距、遮挡、溢出、响应式错位
  • 把页面视觉证据直接喂给 AI，让它改代码更准
  • 在本地开发页面中快速标注问题区域

Install

本地服务 + 页面脚本

一个端口跑 MCP，一个 WebSocket 连接页面。页面可以通过 npm 包接入，也可以用本地 CDN 脚本接入。

启动 @uicheck/mcp
npm install -g @uicheck/mcp
uicheck-mcp

# MCP    http://127.0.0.1:17322/mcp
# Socket ws://127.0.0.1:17322/socket
页面接入 @uicheck/core
npm install @uicheck/core html2canvas

import html2canvas from 'html2canvas'
import { installUiCheck } from '@uicheck/core/client'

installUiCheck(html2canvas, {
  position: 'bottom-left',
  socket: {
    url: 'ws://127.0.0.1:17322/socket'
  }
})