inspect

检查

将 Claude Design 的 <mentioned-element> 行内注释协议替换为终端原生方案：用户用英文描述元素，Claude 会定位到特定 DOM 节点和源代码位置，以便进行精准编辑。

前提条件

• Chrome DevTools MCP 已加载页面（通过 /preview 或 /done）
• .claude/last-snapshot.json 存在（由 /done 生成），否则会重新获取快照

流程

1. 获取快照：

   • 如果快照较新（少于 5 分钟且 URL 相同），优先使用 Read .claude/last-snapshot.json
   • 否则调用 mcp__chrome-devtools__take_snapshot 获取新树

2. 根据描述匹配快照节点。结合视觉和文本启发式规则：

   • 角色/标签匹配（“button” → role=button，tag=button）
   • 文本内容匹配（“写着 ‘Get started’ 的 CTA”）
   • 位置提示（“hero”、“顶部”、“从左数第三个”、“右侧边栏”）
   • 颜色提示（“红色按钮”）——如果无法明确判断，则截图并进行视觉匹配
   • 尺寸提示（“大标题”）
   • 层级关系（“第一张卡片内”）

3. 选出最合适的 UID。如果有多个候选项，向用户展示最匹配的 3 个，并分别用一行进行概述：

   Candidates for "red button in hero":
     [uid=3_12] <button> "Get started" — background #d83
     [uid=3_28] <a class="btn"> "Try free" — background #c55
     [uid=3_07] <div role=button> "Sign up" — background #d80
   Which one (or describe differently)?
   

4. **定位源代码位置。**确认 UID 后：

   • 调用 mcp__chrome-devtools__evaluate_script，按 UID 选取元素并返回有用的标识信息：

     // (Pass the picked uid as an arg to the evaluate function)
     (el) => ({
       tag: el.tagName.toLowerCase(),
       id: el.id || null,
       classList: Array.from(el.classList),
       textContent: el.textContent.trim().slice(0, 80),
       dataAttrs: Object.fromEntries(
         Array.from(el.attributes)
           .filter(a => a.name.startsWith('data-'))
           .map(a => [a.name, a.value])
       ),
       outerHTML: el.outerHTML.slice(0, 300),
     })
     

   • 根据这些线索，在源 HTML（当前的 artifacts/<name>.html）中使用 Grep 搜索匹配元素，优先级依次为：id > data-* > 唯一的 class 组合 > 文本片段 > outerHTML 子串。
   • 返回：源文件路径 + 近似行号。

5. 报告：

   Element: <button> "Get started" (uid 3_12)
   Source: artifacts/landing.html:142-148
   Selector: #cta-primary
   

6. **可选后续步骤：**如果用户在请求检查的同时也要求编辑（“把它放大”），则直接根据定位到的行范围执行 Edit。否则只报告结果并等待。

“红色按钮”这类描述的启发式优先级

当用户的描述可能对应多个候选项时：

1. 明确标签优先——如果存在 <button aria-label="Subscribe">，且用户说“订阅按钮”，无论视觉线索如何，都选择该按钮
2. 优先选择可见元素——优先选择当前位于视口内而非首屏下方的元素
3. 唯一元素优先于常见元素——唯一的 hero 按钮优先于网格中的第三个按钮（共 8 个）
4. 大元素优先于小元素——对于“大标题”，优先选择字体较大的元素
5. 位置不明确时优先靠上——“那个按钮” → 阅读顺序中页面顶部附近的按钮

何时改为询问用户

如果候选项超过 3 个，且无法通过视觉判断加以区分，则询问用户：“您指的是 X、Y 还是 Z？”

限制

• 只能定位成功渲染的元素（不包括出错组件中的元素）
• 使用生成类名的 React 组件（CSS modules）：选择器可能无法往返匹配——使用 outerHTML 子串搜索源代码
• take_snapshot 可以看到 shadow DOM 内的元素，但在源 HTML 中使用 Grep 无法找到它们——如果这条路径失败，请提醒用户