Agentation
Agentation：将UI注解转化为AI代码助手可理解的结构化上下文工具
Agentation 是一款创新的 UI 注解工具，版本为 v3.0.2。它能将网页元素的选择器、React 组件树及样式等信息转化为 AI 助手（如 Claude Code、Cursor 等）可识别的结构化上下文。通过可视化反馈、MCP 实时同步及 Webhooks，Agentation 彻底解决了开发者与 AI 沟通 UI 修改需求时的定位难题，极大提升了 AI 驱动开发的效率与准确性。
2026-03-29
--K
Agentation 产品信息
Agentation：弥合 UI 反馈与 AI 编码助手之间的鸿沟
在现代 AI 驱动的开发流程中，向 AI 编码助手（如 Claude Code 或 Cursor）准确描述 UI 修改需求往往极具挑战。Agentation (v3.0.2) 应运而生，它是一款强大的工具，旨在将 UI 注解 (UI Annotations) 转化为 AI 代理能够理解并执行的结构化上下文。通过 Agentation，开发者只需点击页面元素并添加笔记，即可为 AI 提供精确的路径导航，告别模糊的指令。
什么是 Agentation？
Agentation 是一个专门为 AI 代理（Agents）设计的可视化反馈系统。它能捕捉网页中的 CSS 选择器、文件路径、React 组件层级以及计算样式，并将其包装成一种名为 AFS 1.1 (Annotation Format Schema) 的格式。无论是通过简单的复制粘贴，还是利用先进的 MCP (Model Context Protocol) 实时同步，Agentation 都能让 AI 准确知道你需要修改哪个按钮、哪段文字或哪处间距。
Agentation 的核心特性 (Features)
Agentation 提供了一系列强大的功能，旨在优化开发者与 AI 助手之间的协作体验：
1. 结构化上下文输出
Agentation 不仅仅提供文本描述。当你在 UI 上进行注解时，它会输出：
- CSS 选择器：方便 AI 直接在代码库中进行
grep搜索。 - 源码文件路径：让 AI 能够直接跳转到对应的代码行。
- React 组件树：帮助 AI 理解组件的嵌套逻辑与层次结构。
- 计算样式 (Computed Styles)：让 AI 洞察当前的样式属性，从而做出精准调整。
2. 多样化的集成方式
- MCP 支持：通过 Model Context Protocol，AI 代理可以直接“看到”你的注解，无需手动复制粘贴。
- Webhooks & API：支持将注解数据推送到外部服务，或构建自定义集成流程。
- npm 支持：通过
npm install agentation即可轻松集成到项目中。
3. 可视化交互反馈
- 元素高亮：悬停时显示元素名称，确保定位准确。
- 动画暂停：点击工具栏中的图标可冻结动画，捕捉特定帧进行注解。
- 文本选择：支持直接选中网页文本以针对内容或拼写错误提出反馈。
4. 灵活的配置选项
用户可以根据需要调整输出细节（标准或 React 组件模式）、更改标记颜色、设置点击后自动清除数据，或开启“屏蔽页面交互”模式以便更专注于注解。
如何使用 Agentation (How to Use)
使用 Agentation 优化你的 AI 开发流程非常简单，只需以下五个步骤：
- 激活工具：点击页面右下角的图标激活 Agentation 工具栏。
- 定位元素：将鼠标悬停在页面元素上，查看高亮显示的元素名称。
- 添加注解：点击任意元素，在弹出的窗口中输入你的反馈建议（例如“减小此按钮的内边距”），然后点击 Add。
- 获取输出：点击复制图标，获取格式化后的 Markdown 数据。
- 交付 AI：将内容粘贴到 Claude Code 或 Cursor 中。如果你配置了 MCP，只需对 AI 说“处理我的注解”即可。
最佳实践建议
- 保持具体：使用“按钮文字不清晰”比“修复这个”更有用。
- 一事一议：每个注解只针对一个问题，便于 AI 逐项解决。
- 提供背景：描述你的预期结果与当前现状的差异。
应用场景 (Use Case)
1. 调试与修补 UI Bug
开发者在浏览器中发现 UI 错位或样式问题时，使用 Agentation 标记该元素。AI 助手收到包含 CSS 选择器的数据后，能瞬间定位到 .sidebar > button.primary 这种精确位置并修复代码。
2. 团队协作反馈
设计或产品人员可以使用 Agentation 在测试环境标注反馈，通过 Webhooks 实时同步到开发团队的工具链中。
3. AI 对话式开发
配合 MCP，AI 助手不再只是被动接收指令。你可以问 AI：“我现在有多少个注解？”或者 AI 会反问：“这里的间距应该是 24px 还是 16px？”使反馈过程变成双向对话。
常见问题 (FAQ)
Q: Agentation 是免费的吗？ A: 对于个人和公司的内部使用，Agentation 是完全免费的。如果你打算将其作为商业产品的一部分进行再分发，请联系官方获取商业授权。
Q: 它支持哪些 AI 工具？ A: 它能与任何支持文本输入的 AI 助手配合使用，但与具有代码库访问权限的工具（如 Claude Code, Cursor, Codex）配合效果最佳。
Q: 什么是 AFS 1.1？ A: 这是 Agentation 使用的注解格式化架构（Annotation Format Schema），确保数据在不同 AI 平台之间具有高度的兼容性和结构一致性。
Q: 如何安装 Agentation？
A: 您可以通过运行 npm install agentation 将其集成到您的项目中。
结语：由 Benji Taylor、Dennis Jin 和 Alex Vanderzon 倾力打造，Agentation 正在重新定义人类、UI 与 AI 代理之间的沟通方式。立即尝试，让您的反馈不再石沉大海。
