AI导哈

UI检查器

UI检查器是一个用于Claude Code的实时预览和元素检查工具，支持直接编辑文件并查看元素详细信息。

  • by beyondworks
  • JavaScript
  • 本地部署
  • 55 星标
  • 更新于
在 GitHub 查看 beyondworks/UI-Friend-MCP

使用说明

UI检查器

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

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

安装

cd servers
npm install

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

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

重新启动克劳德代码。

工具（18）

预览（8）

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

检查员（4）

  • preview_select_element --启用/禁用检查器模式或获取选择（会话范围）
  • inspector_get_selection --所有会话的最近点击次数；当用户说“this”、“here”、“the selected one”时调用
  • inspector_clear_selection
  • inspector_highlight --代理商→ 浏览器视觉指向：通过CSS选择器或 data-at value，with optional label（“这里修改了”）

注释（4）——代理式多注释

  • annotation_list --用户在浏览器中留下的所有注释（引脚+注释），具有完整的元素上下文
  • annotation_resolve --用可选注释标记已解决的注释（浏览器中的引脚变为绿色）； reopen: true 撤销
  • annotation_remove --删除注释（id或全部）
  • annotation_to_prompt --将注释转换为代理就绪的markdown任务列表（格式与浏览器中的相同 复制提示 按钮——粘贴到Claude Code、Codex或任何编码代理中）

知识（2）

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

注释--代理式工作流

注入的工具栏（右下角）是一个单色胶囊集群： ◉ 品牌圈 （点击=退出所有模式），一个带有 **检查|注释|管理▾**和a 复制提示（打开/总计） 悬停时翻转的CTA胶囊。按 退出 任何时候退出检查/注释模式（它首先关闭打开的对话框、引脚弹出窗口或菜单）。侧面板在近乎黑色的背景上呈现为白色票卡（单色，红色重音），并将工具栏滑出。

  1. 切换 注释 然后单击任何元素——将打开注释对话框（⌘+Enter保存）
  2. 出现一个编号的琥珀色引脚。添加任意数量的注释-- 支持同一元件上的多个引脚 （它们并排堆放）
  3. 拖动以批量选择：在“注释”模式下，将一个选框拖动到一个区域上——它内部的每个顶级元素都会被选中（如果选择折叠成一个包装，它会下降到它的子元素中），然后一条注释会创建一个 组注释 （一个引脚，最多30个元件）。引脚弹出窗口显示“N개“芯片并概述每个成员；代理接收每个元素的选择器和源位置
  4. 单击图钉以编辑评论、解析/重新打开或删除评论
  5. 让客服申请：它会打电话 annotation_list，编辑文件，然后调用 annotation_resolve 每个项目——别针变成绿色✓ 实时，在pin弹出窗口中显示代理的解决方案注释
  6. 注释存在于服务器上，因此它们在页面重新加载、导航和HMR中幸存下来。销钉通过重新锚固 data-at → CSS路径→ 选择器
  7. 引脚是页面范围的：每个pin仅在创建它的页面（路径名）上呈现——在其他地方导航会隐藏它，回来会恢复它。SPA路由更改（pushState）会在不重新加载的情况下被检测到。工具栏计数和 复制提示 覆盖当前页面； annotation_list / annotation_to_prompt 仍然返回每一页（每个项目都有其 pageUrl)
  8. 没有MCP？按 复制提示 将当前页面的注释集复制为任何AI编码代理的markdown任务列表
  9. 批量管理（管理▾)：一次解析或删除所有注释，范围为 本页 或 所有页面.删除是两次单击（手臂→ 确认）以避免事故。工作时实时更新计数

每个注释都包含：注释、状态、元素名称、健壮的CSS路径、源代码位置(data-at)、UI术语、计算样式、文本、大小和截断的HTML代码段。

注释UI随注入代理一起提供(preview_attach).对于 preview_start 会话，如果需要注释，请附加到Vite URL。

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

inspector_get_selection 返回：

  • sourceLocation — { file, line, column } 从 data-at Vite插件注入的属性
  • elementName --具有优先级解析的元素的确切标识符： id → data-testid → aria-label → aria-labelledby → <label for> → 组件名称（来源于源文件名）→ 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 感谢将此连接起来的技能。

相关 MCP