Agentation – 浏览器端AI标注工具｜指哪改哪

Agentation 是一款由 “agent” 与 “annotation” 合成专为前端开发者设计的浏览器端标注工具，允许用户直接在运行中的网页上点击或选中任意元素，添加文字反馈，并自动生成包含该元素精确选择器（如 CSS 类名、DOM 路径等）的结构化 Markdown 输出。开发者可将此输出直接粘贴至支持代码库访问的 AI 编码代理（如 Claude Code），帮助 AI 快速定位并修改对应源码。最大优势在于消除模糊描述，将“你看的是哪个按钮？”这类问题彻底转化为“.sidebar > .nav-actions > button.primary”这样的精准路径，从而大幅提升 AI 修复或迭代 UI 的准确率与速度。该工具完全基于 React 构建，无额外依赖，仅需集成到本地开发环境即可使用，且完全免费、开源。

需求分析

软件格律诗给大家非常一个超牛逼的东西，你有没有遇到过这种情况：使用 AI 编程帮你写了个网页，整体没问题，但就是某一个按钮、某一行字、某个位置不对劲。然后你开始跟 AI 拉扯，说：“不是这个，是上面一点”“不是这个组件，是那个里面的那个”“算了我自己改吧”。这个工具，基本就是为解决这个痛点生的。装好之后，你什么都不用想。只要是页面上哪里不爽或者不符合你的要求，你就直接点哪里。比如你点一个按钮，它就会弹窗，让你顺手写一句备注：“这个按钮太小了”、“这个按钮颜色不对”。然后重点来了，它会自动帮你把AI 最需要的信息，全都抓出来：这是哪个元素，用的什么 class；精确的 CSS 选择器；它在页面上的具体位置；它属于哪个组件，甚至对应到文件路径、上下文关系。最后，这一切会被整理成一段干干净净、结构化的 Markdown。

你只要做一件事：复制 → 粘贴 → 扔给 AI 。AI 这时候不是“猜你想改哪”，而是非常确定地知道：你点的是哪一块，你想改什么，为什么要改。说实话，这东西的牛逼点不在于技术有多复杂，而在于它把“人类的直觉反馈”，直接翻译成了 AI 能精准执行的语言。

主要功能特点

可视化元素标注
用户只需点击网页上的任意元素（按钮、卡片、输入框等），即可弹出注释面板，输入具体反馈内容（如“按钮颜色太浅，对比度不足”）。工具会自动捕获该元素的 DOM 结构、CSS 类名、XPath 或 CSS 选择器。
文本内容高亮标注
除整体元素外，Agentation 还支持选中文本片段进行标注。例如，若页面上某段文案存在错别字或表述不清，用户可直接选中该文本并添加注释，工具会记录所选内容及其上下文位置。
动画暂停辅助标注
对于包含复杂交互动画的界面（如轮播、悬停效果），Agentation 提供“暂停动画”功能。用户可在工具栏中冻结当前动画帧，以便精准标注特定状态下的 UI 元素。
结构化 Markdown 输出
每条注释生成后，Agentation 会将其整理为标准化的 Markdown 格式，包含以下信息：
- 元素路径（如 div.container > header > nav > a.active）
- 所属文件推测（基于类名或路径推断）
- 用户反馈内容
- 截图（可选，视实现而定）
  此格式可直接粘贴至 Claude、Cursor 等 AI 工具，AI 可据此在代码库中快速 grep 或搜索相关组件。
代理无关（Agent-Agnostic）设计
不绑定任何特定 AI 平台。只要目标 AI 工具能访问你的本地代码库（如通过 Cursor 的本地索引或 Claude Code 的文件上传），即可无缝使用其输出内容。
零依赖 & 轻量集成
仅需在本地开发服务器（如 localhost:3000）中引入一段脚本或 React 组件，即可激活右下角的标注工具栏。无需安装浏览器扩展，不收集用户数据，完全运行于本地。
最佳实践引导
工具内置使用建议，鼓励用户遵循“一次一问题”、“描述预期 vs 实际行为”、“优先选择文本”等高效反馈原则，进一步提升 AI 处理效率。

使用说明

启动本地开发环境
确保你的前端项目正在本地运行（如 npm start 启动的 React 应用）。
集成
按照官网 Install 页面指引，在项目中引入组件（通常为一行 import 和 JSX 插入）。
激活标注工具栏
在浏览器中打开本地页面，右下角会出现一个浮动图标。点击即可激活标注模式。
标注元素或文本
- 将鼠标悬停在页面元素上，会高亮显示其边界。
- 点击任意元素，或选中一段文本，弹出注释框。
- 输入具体反馈（如“此处间距过大”或“链接应为蓝色”），点击“Add”。
复制并发送给 AI
所有注释会汇总在侧边面板中，点击“Copy”即可复制结构化 Markdown。将其粘贴至 Claude Code、Cursor 等 AI 工具的聊天窗口。
AI 自动定位并修改代码
AI 根据提供的选择器和上下文，在你的代码库中搜索匹配的组件或样式文件，并提出修改建议或直接生成补丁。