Agentation是什么
Agentation 是开源的AI编程协作工具，能解决开发者与 AI 编程助手之间沟通效率低下的问题。工具通过让用户直接在网页上标注问题，将视觉反馈转化为代码可读的信息，生成结构化的 Markdown 文本供 AI 使用。Agentation 简化了问题描述过程，避免开发者用文字解释时的模糊不清，让 AI 更高效地完成代码修改任务。
Agentation的主要功能
- 可视化标注：用户可直接在网页上点击元素并添加备注，清晰指出问题所在。
- 信息捕获：支持自动捕获元素的 CSS 选择器、类名、位置坐标及上下文信息，确保精准定位。
- 生成结构化反馈：将标注信息整理成 Markdown 格式，方便开发者复制并传递给 AI 编程助手。
- 高效代码修改：AI 通过解析 Markdown 中的元素信息，快速找到代码中的对应位置、进行修改。
- 开发环境集成：作为 React 插件嵌入本地开发环境，仅在开发模式下运行，不影响生产环境。
如何使用Agentation
- 安装工具：在 React 项目中通过
npm、yarn、pnpm或bun安装 Agentation 依赖包。 - 集成组件：将 Agentation 组件嵌入 React 应用的根组件中，确保仅在开发模式下启用。
- 启动项目：运行本地开发服务器，访问开发环境（如
localhost:3000）。 - 激活标注：点击页面右下角的 Agentation 图标，进入标注模式。
- 标注元素：鼠标悬停并点击需要反馈的网页元素，填写具体问题描述。
- 生成反馈：Agentation 自动生成结构化的 Markdown 格式反馈内容。
- 复制粘贴：将生成的 Markdown 文本复制后，粘贴到 AI 编程助手（如 Claude Code 或 Cursor）。
- AI 修复：AI 将根据 Markdown 中的元素信息，精准定位代码并完成修改。
Agentation的项目地址
- GitHub仓库：https://github.com/benjitaylor/agentation
- 在线体验：https://agentation.dev/
Agentation的应用场景
- 前端开发调试：开发者在开发过程中直接在网页上标注问题，Agentation 将题转化为结构化反馈，帮助快速定位代码进行修改。
- 设计与开发衔接：设计师在网页原型上标注元素调整需求，Agentation 将反馈传递给开发团队或 AI，确保设计意图准确实现。
- 测试与优化：测试人员通过 Agentation 标注功能错误或用户体验问题，生成详细反馈信息，便于开发团队快速修复。
- 响应式设计调整：开发者在不同设备上测试网页时，标注布局或显示问题，Agentation 提供详细信息以优化响应式设计。
- 跨团队协作：不同角色使用 Agentation 标注问题生成统一格式反馈，促进团队高效沟通，减少误解和返工。