【开源】Agentation：让AI编程工具精准找到你要修改的代码的视觉反馈神器-壹联网络

在使用Cursor、Claude Code等AI编程工具时，你是否经常遇到这样的尴尬：AI说已经修复了侧边栏的蓝色按钮，但你根本不知道它指的是哪个按钮；或者你想精确告诉AI就是这个div，却只能模糊描述。Agentation正是解决这个痛点的视觉反馈工具。

## 项目介绍

Agentation是一个面向AI编程工具的视觉反馈工具，直译就是AI反馈。它让你在页面上点击任意元素，自动识别CSS选择器和位置信息，生成结构化的markdown输出，AI Agent可以直接grep定位到你所指的具体代码，彻底解决说不清道不明的沟通难题。

## 核心特色功能

点击标注：点击页面任意元素，自动识别并记录该元素的CSS选择器、位置坐标和上下文信息。

文本选择：选中页面上任意文字，可标注具体内容，方便AI理解你关注的是哪段文本。

多选和区域选择：支持拖拽多选多个元素，也支持区域选择，覆盖任意空间甚至空白区域。

动画暂停：自动冻结页面上所有CSS动画、JS动画和视频，方便捕获特定状态。

结构化输出：生成带选择器、位置、上下文的markdown，AI可以直接用grep定位代码。

暗色/亮色模式：自动匹配你的偏好，也可手动切换。

零依赖：纯CSS动画驱动，不引入任何运行时库。

## 安装步骤

npm安装（开发依赖）：

npm install agentation -D

在React项目中集成：

import { Agentation } from agentation;

function App() {
return (
<>

);
}

工具栏出现在页面右下角，点击激活后即可开始标注。

## 使用方法

打开需要反馈的页面，点击右下角Agentation工具栏激活。点击任意UI元素，工具会生成一段markdown，描述该元素的CSS选择器（如.sidebar > button.primary）、位置信息（top: 24px; left: 120px）和周围上下文。将这段markdown复制给AI编程工具，AI即可精准定位到你想修改的代码位置。

区域选择功能：在页面上拖拽出一个区域，Agentation会记录这个区域的坐标和所覆盖的元素，方便标注复杂布局。

动画暂停：点击工具栏的暂停按钮，所有动画冻结，再也不用等动画停在那一帧了。

## 适用场景

使用Cursor、Windsurf、Claude Code等AI编程工具的开发者；需要精确向AI描述UI问题的设计师和产品经理；需要做UI自动化测试但不知道如何定位元素的QA工程师；前端开发者与AI协作时的沟通工具。

## 技术原理

Agentation捕获元素的class名、选择器和位置信息，使AI Agent能够grep精准匹配代码。工具栏自动识别最近的有语义的选择器路径，过滤掉随机生成的class名，保留有意义的选择器组合。

## 系统要求

React 18及以上；仅支持桌面浏览器（不支持移动端）。

## 开源协议

采用PolyForm Shield 1.0.0许可证。

项目地址：https://github.com/benjitaylor/agentation
官网文档：https://agentation.com

服务支持：如有兴趣不会搭建，可以联系微信：WRYD6166，开源项目搭建10-50元。