Agentation

让 AI 读懂你的界面反馈

当需要告诉 AI 助手哪里需要修改时，截图和文字描述往往不够精准。Agentation 将你在页面上的点击和标注，转化为 Claude Code、Cursor 等 AI 编码助手能直接理解的结构化上下文。

不再需要描述"侧边栏那个蓝色按钮"，而是直接给出 .sidebar > button.primary，让 AI 能在代码库中精确 grep 定位。

---

💡 核心能力

• 精准元素识别 — 自动生成 CSS 选择器、源文件路径和 React 组件层级，帮助 AI 直接跳转到正确的代码行
• 组件树感知 — 在 React 页面中遍历 Fiber 树，显示 <App> <Dashboard> <Button> 这样的组件层级结构
• 计算样式捕获 — 记录元素当前的外观状态，包括计算后的样式和边界框信息
• 文本精确选择 — 划选任意文本片段，自动引用到输出中，方便 AI 搜索替换

---

✨ 三种标注方式

1. 元素点击 — 悬停查看元素名称，点击添加反馈备注，适合界面结构和样式问题
2. 文本选择 — 划选特定文字内容，自动捕获上下文，适合文案修改和错别字修复
3. 区域框选 — 拖拽选择多元素区域，用于布局调整和重组建议

---

🎯 为 AI 编码工作流优化

生成的结构化输出包含 AI 修复问题所需的全部上下文：

• CSS 选择器 — 用于在代码库中 grep 搜索
• 源文件路径 — 直接定位到组件文件
• React 组件树 — 理解元素在组件层级中的位置
• 当前计算样式 — 了解现有的视觉表现
• 你的反馈意图 — 明确的修改建议和优先级

配合 MCP 集成，Agentation 支持双向对话：AI 可以查询所有标注、请求澄清细节、确认修复完成，或批量清除已处理的项目。

---

使用流程

1. 点击页面右下角的图标激活工具栏
2. 悬停查看元素高亮，点击或划选添加标注
3. 为每个标注添加具体的反馈说明
4. 点击复制格式化的 Markdown
5. 粘贴到 Claude Code、Codex 或其他 AI 工具中

💡 提示： 启用 MCP 同步后，可跳过复制粘贴步骤，AI 助手能实时看到你在页面上的标注，直接执行"修复第 3 条反馈"这样的指令。

---

开发者集成

• React 组件 — 零运行时依赖，支持 React 18+ 和 Next.js，支持 SSR/SSG 框架水合
• TypeScript 完整支持 — 全类型定义，包括 Annotation 对象结构和回调函数类型
• 丰富的回调接口 — onAnnotationAdd、onCopy、onSubmit 等，支持自定义工作流
• HTTP API 与 Webhook — 提供 REST API 和 Server-Sent Events 实时流，支持同步到后端数据库
• MCP 服务器 — 内置 Model Context Protocol 支持，实现与 AI 代理的实时双向通信

可通过 npm install agentation -D 安装，或运行 npx skills add benjitaylor/agentation 让 Claude Code 自动完成框架检测和集成配置。