用Claude进行网页开发时，遇到最大的就是效率问题。
当我让AI帮我写完一个页面后，发现了几处需要调整的地方：按钮尺寸不合适、文案有笔误、弹窗交互有问题。
问题来了我要怎么告诉Claude具体改哪里？
通常的做法是这样的："在首页右下角的那个蓝色按钮上，点击没反应，能帮我修一下吗？
"但Claude无法直接映射到代码中的具体位置，因为它不知道"右下角蓝色按钮"对应的是哪个文件、哪个class选择器。
双方需要多轮沟通才能达成理解，这显然浪费了不少时间。
直到我接触到Agentation这个工具，才意识到这个问题其实有更优雅的解决方案。
Agentation的工作原理
什么是Agentation？
Agentation（名称来自Agent + Annotation）是一个可视化反馈工具，它通过捕获网页元素的结构化信息，将视觉反馈转化为代码可读的数据格式。
简单说，它就是在你和AI之间搭建了一座"翻译桥梁"。
它如何运作
当你在网页上点击某个元素时，Agentation会自动收集以下信息：
- HTML选择器（CSS Selector） — 精确定位代码中的元素
- 元素类名（Class） — 标识样式和功能
- 层级路径 — 显示元素在DOM树中的位置
- 页面坐标 — 记录元素在视口中的位置
- 元素上下文 — 所在的组件或文件路径
这些数据被打包成结构化的Markdown格式。
以下是一个实际示例：
## Page Feedback:
/**Viewport:** 1728×997
### 1. button "Primary Button"
**Location:** .demo-section > .demo-elements > .button-group > .demo-button
**Feedback:** 按钮太小，点击区域不足
### 2. h3 "Example Card"
**Location:** .demo-section > .demo-elements > .demo-card > h3
**Feedback:** 卡片标题字体颜色对比度不足
### 3. paragraph: "Point at problems, not code"
**Location:** .main-content > .article > header > .tagline
**Feedback:** 这行文字有拼写错误
你只需复制这段Markdown给Claude，它就能精准定位每个需要修改的元素，直接修改对应的代码，而无需反复确认。
安装与配置指南
前置条件
重要限制：
- 仅支持桌面端（不支持移动端）
- 需要React 18及以上版本
- 仅在开发环境中运行（dev-only）
- 用于本地开发调试，不能用于生产环境
安装步骤
第一步：安装NPM包
在你的React项目目录运行以下命令之一：
npm install agentation或其他包管理器：
yarn add agentation
pnpm add agentation
bun add agentation第二步：在应用中引入组件
在你的根组件（通常是App.jsx）添加以下代码：
import { Agentation } from "agentation";
function App() {
return (
<>
{process.env.NODE_ENV === "development" && }
{/* 你的其他组件 */}
</>
);
}关键说明：NODE_ENV检查确保Agentation仅在开发模式加载，生产构建时不会被包含。
Claude Code快速集成（可选）
如果你使用Claude Code，可以通过技能系统一键配置：
步骤1：安装技能
npx add-skill benjitaylor/agentation步骤2：在Claude Code中运行
/agentationClaude Code会自动检测你的框架、安装包、创建Provider并配置布局。
使用流程
快速上手（5个步骤）
1. 启动项目
运行你的开发服务器，访问本地地址（如http://localhost:3000）。
页面右下角会出现一个铅笔图标 。
2. 进入标注模式
点击右下角的Agentation图标，进入"标注状态"。
此时移动鼠标到任何网页元素上，该元素会高亮显示。
3. 选择问题元素
点击需要修改的元素（按钮、文字、图片等）。
4. 添加反馈描述
在弹出的输入框中填写具体问题，例如：
- "按钮文字太模糊"
- "这里的链接点击没反应"
- "动画速度太快，看不清"
- "拼写错误：'recieve'应改为'receive'"
5. 复制并提交给AI
点击"Copy"按钮，Agentation生成的Markdown会被复制到剪贴板。
打开Claude或Cursor，粘贴这段反馈文本，AI会根据选择器自动定位并修改对应代码。
操作要点
| 操作场景 | 建议做法 | 注意事项 |
|---|---|---|
| 标注UI问题 | 直接点击相关元素 | 每条反馈仅指向一个问题 |
| 修复文案错误 | 选中文本后进行标注 | 说明"拼写错误"或"应改为…" |
| 调整动画/交互 | 先暂停动画，再点击元素 | 描述预期效果与实际差异 |
| 多个问题批量反馈 | 逐个标注，一次性复制 | 保持反馈的清晰性和原子性 |
使用技巧与最佳实践
如何写出高质量的反馈
- 具体而非模糊：写"按钮文字对比度不足，难以阅读"，而不是"这里不对"
- 单一问题原则：每条注释只包含一个问题，便于AI逐一处理
- 提供上下文：说明预期表现和实际表现的差异。例如："按钮应该在悬停时变色，但目前没有反应"
- 优先级标记：如果问题众多，可用"[优先级高]"等前缀标记
提高协作效率的技巧
- 批量标注：一次进入标注模式，标注所有问题后一次性复制
- 暂停动画：对于动态效果，先暂停再标注，确保精确性
- 使用浏览器开发者工具配合：如需查看当前元素的完整选择器，可打开DevTools验证
- 版本迭代：每次修改后重新标注检查，形成闭环反馈
安全与隐私说明
Agentation在设计上采用了"本地优先"的隐私策略：
- 无网络请求：所有操作在本地浏览器中执行，不涉及服务器通信
- 本地数据处理：生成的Markdown仅存储在你的剪贴板中，由你手动决定是否分享
- 无数据追踪：不收集、不存储、不分析任何使用数据
- 开发环境限制：生产构建时完全移除，不会影响用户体验
总结与反思
Agentation核心优势在于它降低了AI编程的交互成本。
过去我们需要用自然语言描述视觉问题，然后等AI理解和确认；现在可以直接"指哪改哪"，大幅减少了沟通往返。
适用场景：主要是前端开发迭代。特别是当你与AI工具（Claude、Cursor等）协作时，每一个精准的反馈都能换来更高质量的代码修改。
局限性：需要认识到：它目前仅限于React开发环境，对后端、全栈项目的支持还有限。但对于快速原型和前端迭代，这已经是一个显著的生产力提升。
如果你正在用AI工具进行web开发，Agentation值得一试。它不是解决问题的"银弹"，但可以有效提高你与AI的协作效率——这在快速迭代的时代是有实际意义的。
在线体验： https://agentation.dev/