Agentation— AI编程协作工具，可视化反馈问题转为代码

2026-01-24 00:00:00 作者：霞舞

Agentation 是什么

agentation 是一款开源的 ai 编程协同工具，专为提升开发者与 ai 编程助手之间的协作效率而设计。它通过允许用户在网页界面中直接进行视觉化标注，将直观的问题反馈自动转化为机器可解析的结构化信息，并输出为标准 markdown 文本，

供 ai 模型高效理解与执行。该工具大幅降低了传统文字描述带来的歧义与信息损耗，使 ai 能更准确、快速地完成代码定位与修改任务。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜

可视化问题标注：用户可在任意网页上点击目标元素并添加说明性备注，实现所见即所得的问题定位。
智能上下文捕获：自动提取被标注元素的 CSS 选择器、class 名称、DOM 层级路径、屏幕坐标及周边 HTML 结构，保障定位高精度。
结构化反馈生成：将所有标注数据整合为语义清晰、格式统一的 Markdown 内容，便于人工复核与 AI 解析。
AI 友好型输入支持：生成的 Markdown 包含明确的元素标识与上下文线索，显著提升 AI 对前端代码的识别与修改能力。
轻量级开发集成：以 React Hook + UI 组件形式嵌入项目，仅在 process.env.NODE_ENV === 'development' 下激活，零侵入生产环境。

安装依赖：在现有 React 工程中，使用 npm / yarn / pnpm / bun 安装 Agentation 官方包。
引入组件：将插入应用根组件（如 App.tsx），并通过环境变量控制其仅在开发阶段启用。
启动本地服务：运行 npm start 或对应命令，打开浏览器访问本地开发地址（例如 http://localhost:3000）。
开启标注模式：点击页面右下角悬浮的 Agentation 图标，进入交互式标注界面。
标记问题区域：鼠标悬停于需反馈的 UI 元素上并单击，填写具体问题描述（如“按钮颜色错误”“响应式断点失效”等）。
获取结构化输出：系统即时生成包含元素路径、样式特征与用户说明的 Markdown 文本。
交付 AI 处理：复制该 Markdown 内容，粘贴至支持代码理解的 AI 工具（如 Claude Code、Cursor、GitHub Copilot Workspace 等）。
自动修复执行：AI 基于 Markdown 中提供的精准定位信息，定位源码位置并完成修复建议或直接生成补丁代码。