Agentation
Agentation 是一种与代理无关的可视化反馈工具，允许开发人员注释 UI 元素并生成结构化上下文，供 AI 编码代理理解和执行。
https://www.agentation.com/?ref=producthunt&utm_source=aipure
产品信息
更新于：2026年03月31日
什么是 Agentation
Agentation 是一款基于桌面的开发人员工具，可弥合设计反馈和代码更改之间的差距。它使开发人员能够通过单击元素、添加注释和生成 AI 编码代理可以立即理解的结构化输出来以可视化方式与其用户界面进行交互。该工具在开发人员社区中获得了显着的关注，在 GitHub 上拥有超过 1.8k 个 star，并通过 npm 进行了数十万次安装，成为开发人员在 UI 上使用 AI 的不可或缺的一部分。
Agentation 的主要功能
Agentation是一个可视化反馈工具，允许开发者直接在他们的Web应用程序中注释UI元素，并为AI编码代理生成结构化输出。它使用户能够点击元素、添加注释，并捕获精确的选择器、位置和上下文元数据，而不是使用模糊的文本描述。该工具与各种AI编码代理（如Claude Code和Codex）集成，使反馈到代码的实现过程更加高效。
可视化元素选择: 点击和悬停功能，用于选择特定的UI元素，并自动捕获CSS选择器、组件层次结构和计算样式
动画暂停功能: 能够冻结动画，以捕获在几毫秒内消失的特定帧的反馈
代理集成: 通过MCP集成与AI代理进行双向通信，允许代理直接确认、质疑或解决反馈
结构化输出生成: 自动生成具有精确元素标识符的markdown格式输出，使AI代理可以轻松定位精确的代码引用
Agentation 的使用场景
前端开发迭代: 开发者可以通过向AI编码代理提供关于需要修改的特定元素的精确反馈，从而快速迭代UI更改
UI错误报告: 团队可以使用精确的元素引用来报告UI问题，使AI代理或开发者更容易定位和修复问题
设计实现审查: 设计师可以通过注释哪些组件需要调整，来提供关于已实现的UI元素的具体反馈
优点
流畅的安装过程
精确的元素识别系统
支持多种AI工具的代理无关设计
缺点
仅限桌面限制
需要每个项目安装
仅限于开发环境使用
如何使用 Agentation
安装 Agentation: 通过 npm 安装软件包：npm install agentation
添加到您的 React/Next.js 项目: 导入 Agentation 组件并将其添加到您的应用程序的根目录：import { Agentation } from \'agentation\'; function App() { return (<> <YourApp /> <Agentation /> </>) }
添加开发环境检查: 添加 NODE_ENV 检查以确保 Agentation 仅在开发环境中加载：{process.env.NODE_ENV === \'development\' && <Agentation />}
启动您的开发服务器: 运行您的开发服务器，并在右下角查找 Agentation 工具栏（浮动按钮）
激活注释模式: 单击右下角的闪光图标以激活注释工具栏
将鼠标悬停在元素上: 将鼠标悬停在 UI 元素上以查看其突出显示的名称
单击以注释: 单击您要提供反馈的任何元素
添加反馈: 在注释弹出窗口中写下您的反馈，然后单击“添加”
复制格式化的输出: 单击复制按钮以获取带有选择器、位置和上下文的结构化 markdown 输出
与 AI 工具一起使用: 将复制的输出粘贴到 Claude Code、Codex 或其他 AI 编码代理等 AI 工具中以获得帮助
可选：设置 MCP 集成: 对于直接代理集成，运行 \'npx add-mcp\' 并按照提示将 agentation-mcp 添加为 MCP 服务器，以跳过复制粘贴步骤
Agentation 常见问题
Agentation是一个浮动工具栏，可让您注释网页并为AI编码代理生成结构化反馈。它允许用户单击元素、选择文本和复制markdown，代理可以解析这些markdown来查找和修复代码问题。
与 Agentation 类似的最新 AI 工具
Gait
Gait是一个集成了AI辅助代码生成和版本控制的协作工具，使团队能够高效地跟踪、理解和共享AI生成代码的上下文。
invoices.dev
invoices.dev 是一个自动化发票平台，直接从开发人员的 Git 提交生成发票，并具有与 GitHub、Slack、Linear 和 Google 服务的集成能力。
EasyRFP
EasyRFP 是一个 AI 驱动的边缘计算工具包，通过深度学习技术简化 RFP（请求提案）响应并实现实时田间表型。
Cart.ai
Cart.ai是一个AI驱动的服务平台，提供全面的业务自动化解决方案，包括编码、客户关系管理、视频编辑、电子商务设置和自定义AI开发，并提供24/7支持。
类似 Agentation 的热门 AI 工具
GitHub Copilot Chat
GitHub Copilot Chat 是一个 AI 驱动的编码助手，提供自然语言交互、实时代码建议和直接在支持的 IDE 和 GitHub.com 中的上下文支持。
CopilotForXcode
CopilotForXcode是一个Xcode源代码编辑器扩展，它集成了GitHub Copilot、Codeium和ChatGPT，以在Xcode中提供AI驱动的代码建议、聊天协助和提示到代码功能。
BrowserAI
BrowserAI 是一个开源库，它支持直接在具有 WebGPU 加速的 Web 浏览器中运行本地大型语言模型 (LLM)，提供以隐私为中心的 AI 功能，而无需服务器基础设施。
OpenAI Codex CLI
OpenAI Codex CLI是一个轻量级的开源编码代理，可在您的终端中运行，使开发人员能够将自然语言转换为代码执行，同时提供ChatGPT级别的推理能力，并能够运行代码、操作文件并在版本控制下迭代。