Agentation：点击即标注，让AI精准定位界面的每一个元素-壹联网络

给 AI 编程助手提 bug，你还在截图标注吗？今天介绍一个神器 Agentation，它是一个与模型无关的可视化反馈工具，让你能直接点击页面元素、添加注释，然后把结构化的信息直接复制给 AI 编码助手，告别「那个蓝色按钮」的模糊描述。

项目介绍

Agentation 是由独立开发者 Benji Taylor 创建的可视化反馈工具，它的核心作用是解决「人类与 AI 编程助手沟通界面元素时的信息损耗」问题。传统方式下，你想让 AI 帮你修一个样式问题，只能描述「那个侧边栏的蓝色主按钮」，AI 需要自己推理是哪个元素。而 Agentation 的做法是：你点一下那个按钮，它就告诉你这个元素对应的 CSS 选择器是 .sidebar > button.primary，AI 拿到这个精确信息可以直接 grep 到对应代码。

核心特色功能

Agentation 提供了多种精准标注方式：点击标注（点击任意元素，自动识别并输出选择器）、文本选择标注（选中特定文字进行标注）、多选标注（框选多个元素批量标注）、区域标注（框选任意区域，包括空白区域）、动画冻结（一键暂停所有 CSS 动画、JS 动画和视频，方便捕获特定状态）。

它输出的内容是 Markdown 格式，包含选择器、元素位置、上下文信息，AI 智能体可以直接使用这些信息定位代码。Agentation 支持深色/浅色主题自动切换，零外部依赖（纯 CSS 动画实现），支持 React 18+ 的所有应用。

安装步骤

Agentation 是一个 React 组件，安装非常方便：

npm 安装：
npm install agentation -D

然后在你的 React 应用中引入并使用：
import { Agentation } from ‘agentation’;

在你的 App 组件中：
function App() {
return (
<>
<YourApp />
<Agentation />
</>
);
}

工具栏会自动出现在页面右下角。

使用方法

Agentation 使用非常简单：安装完成后，页面右下角会出现一个工具栏按钮。点击按钮激活标注模式，然后：点击任意元素获取其选择器信息；选中一段文字可以针对该文本添加注释；拖动鼠标可以框选多个元素或任意区域；点击动画暂停按钮可以冻结所有动态效果。完成标注后，点击复制按钮，结构化的 Markdown 内容就复制到剪贴板了，直接发给 AI 编码助手即可。