UI Friend MCP

UI检查器

Claude Code的实时预览+元素检查器MCP服务器。在运行预览中单击任何DOM元素，Claude立即看到 精确元素名称 （组件、id、aria标签等）、代码位置、计算样式、父链和UI/UX术语——然后直接编辑文件。

没有外部LLM调用。所有的推理都发生在克劳德身上。

安装

cd servers
npm install

在中注册MCP服务器 ~/.claude.json （替换 使用您的绝对结账路径）：

"ui-inspector": {
  "type": "stdio",
  "command": "node",
  "args": ["
/ui-inspector/servers/inspector-server.mjs"]
}

重新启动克劳德代码。

工具（12）

预览（7）

• preview_start --新Vite会话（反应/真空/香草模板）
• preview_attach --通过注入代理连接到现有的Next.js/Vite/etc/dev服务器
• preview_update --写入/删除文件并触发Vite HMR
• preview_status
• preview_stop
• preview_export --转换为目标框架+zip
• preview_screenshot --捕获视口或单个选择器（移动设备/平板电脑/台式机/完整）

检查员（3）

• preview_select_element --启用/禁用检查器模式或获取选择（会话范围）
• inspector_get_selection --所有会话的最近点击次数；当用户说“this”、“here”、“the selected one”时调用
• inspector_clear_selection

知识（2）

• query_ontology --本地设计知识库
• validate_design --对比度/点击目标/层次结构/间距规则

克劳德每次点击都会看到什么

inspector_get_selection 返回：

• sourceLocation — { file, line, column } 从 data-at Vite插件注入的属性
• elementName --具有优先级解析的元素的确切标识符：

id → data-testid → aria-label → aria-labelledby → ` → 组件名称（来源于源文件名）→ name → alt → title → placeholder → 头等舱→ tag. 返回与 primary, primarySource，加上全套(componentName, id, testId, ariaLabel, role, selector`, …)

• uiTerm / uiDescription --从标签、角色、类模式和计算风格启发式（卡片、英雄部分、堆栈布局等）推断出的UI/UX术语
• tag, className, textContent （截断）
• boundingRect — { x, y, width, height }
• computedStyles --背景、颜色、字体、填充、边距、显示、位置、大小、边框半径、间隙
• parentChain --直到身体，用id/一级速记

浏览器中弹出的信息面板显示相同的数据，确切的名称显示在源徽章旁边的顶部。

工作流程

1. 开始或附加预览(preview_start 或 preview_attach)
2. 切换检查器（浏览器右下角按钮，或 preview_select_element 随着 action: enable_inspector)
3. 单击页面中的一个元素——侧面板显示其确切名称、源位置、设计术语和样式
4. 问克劳德“改变这个填充物”
5. 克劳德打电话来 inspector_get_selection，读取文件 sourceLocation.file:line，并对其进行编辑
6. Vite HMR自动重新加载

看 ~/.claude/skills/ui-inspector/SKILL.md 感谢将此连接起来的技能。