Agentation

Agentation 是什么？

Agentation 是一款可视化反馈工具，可让您直接在 UI 中标注元素，然后将反馈分享给 AI 代理，以便它们在代码库中准确定位目标。其核心目的是将“指着这个”的反馈转化为结构化、可由代理执行的机器指令。

它特别适用于可访问项目文件的 AI 编码工具，此时 Agentation 的输出可包含选择器、文件路径和结构信息，帮助代理导航至正确的行和组件。

主要功能

• 页面内可视化标注：激活工具栏，点击或选择元素，即可创建与屏幕特定目标绑定的标注。
• 代理元素定位：Agentation 可生成元素路径、CSS 选择器和文件位置详情，确保代理无需猜测您指代的 UI 元素。
• 代码库上下文优化修复：当代理有代码库访问权限时（例如通过 Claude Code 或 Cursor 等工具），代理可利用选择器进行 grep、源文件路径跳转至正确行、React 组件树理解层级，以及计算样式推断元素当前外观。
• 格式化 Markdown 输出：添加反馈后，用户可点击复制格式化 Markdown 并粘贴至代理输入。
• MCP 集成支持：使用 MCP 时，无需复制粘贴，代理已可见标注上下文；可提示代理“处理我的反馈”或“修复标注 3”。
• 标注生命周期控制：代理可查询现有反馈（例如，列出跨页所有标注），并响应操作如取消或解决项目（例如，“清除所有标注”）。

如何使用 Agentation

1. 激活标注工具栏：工具栏可在 Agentation 界面中使用（页面内容注明演示页工具栏已激活）。
2. 悬停识别元素：悬停元素以查看其名称高亮显示。
3. 创建标注：点击目标元素或选择文本（例如提供的演示元素），创建新标注，然后输入反馈。
4. 提交并分享反馈：添加标注后，点击复制格式化 Markdown 输出，用于粘贴至代理。
5. 可选使用 MCP：若代理通过 MCP 连接，可避免手动复制粘贴，直接让代理处理或修复特定标注。

使用场景

• 特定 UI 元素的 Bug 报告：看到按钮状态或样式错误时，悬停识别元素，标注预期与实际差异，并分享选择器/路径信息，让代理定位相关代码。
• 排版与间距反馈：针对 padding 和尺寸问题，标注确切组件区域，让代理在解决反馈时决定备选方案（例如，“24px 或 16px”）。
• 文本/内容修正：标签或文案有错别字时，选择确切文本并添加简要反馈（例如，“按钮文本不清晰”或“内容应为 X”），让代理针对特定 UI 字符串。
• 动画帧特定反馈：通过工具栏暂停动画至关注帧，标注该视觉状态，并提供与暂停上下文绑定的反馈。
• 团队或多页反馈协调：让代理列出跨页可见所有标注，按序逐一解决，审查完成后清除全部。

常见问题

Agentation 如何帮助代理找到我应用中的正确部分？
Agentation 的输出可包含 CSS 选择器、源文件路径、React 组件层级和计算样式，从而让代理能够 grep、导航到正确行，并理解元素的位置和适配方式。

我需要将反馈复制粘贴到代理中吗？
不一定。页面指出，通过 MCP 集成，您可以跳过复制粘贴，因为代理已能看到标注上下文。

我在标注中应该写哪些类型的反馈？
页面建议要具体（例如，清晰描述问题）、每个标注处理一个问题，并包含您预期与实际看到的上下文。

代理可以提问或响应标注吗？
可以。通过 MCP 集成和 Annotation Format Schema，页面描述了代理交互，例如列出标注、请求澄清、用摘要解决，以及驳回标注。

Agentation 的许可模式是什么？
Agentation 对个人和公司内部使用免费。如将 Agentation 作为销售产品的一部分重新分发，页面建议联系他们获取商业许可。

替代方案

• 交互式 UI 截图/标注工具（带人工审查流程）：用于捕获和标注 UI 以供审查的工具也可支持反馈共享，但通常不会为代码感知代理生成结构化选择器/文件路径。
• 跟踪器中的基于文本的问题模板（例如，bug 工单）：bug 跟踪器有助于记录预期与实际行为，但依赖描述而非指向代码库中特定 UI 元素路径。
• 无可视化标注的代理支持代码导航工具：理解您代码库的编码助手仍可响应反馈，但无标注层时，您通常需更间接地描述目标（例如，手动命名组件）。