Agentation – AI编程协作工具，支持自动捕获元素，可视化反馈问题转为代码

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的应用场景

• 前端开发调试：开发者在开发过程中直接在网页上标注问题，Agentation 将题转化为结构化反馈，帮助快速定位代码进行修改。
• 设计与开发衔接：设计师在网页原型上标注元素调整需求，Agentation 将反馈传递给开发团队或 AI，确保设计意图准确实现。
• 测试与优化：测试人员通过 Agentation 标注功能错误或用户体验问题，生成详细反馈信息，便于开发团队快速修复。
• 响应式设计调整：开发者在不同设备上测试网页时，标注布局或显示问题，Agentation 提供详细信息以优化响应式设计。
• 跨团队协作：不同角色使用 Agentation 标注问题生成统一格式反馈，促进团队高效沟通，减少误解和返工。