卧槽，兄弟们，这个牛P啊
真是个伟大发明啊！
想象一下这个场景:
你让 Claude 帮你写了一个网页。
网页打开后，你发现：
- 按钮太小；
- 文案有拼写错误；
- 登录弹窗打不开。
现在你要告诉 Claude 怎么改，你得一个个解释，比如：
“在首页右下角的那个蓝色按钮上，点击没反应，能帮我修一下吗？”
Claude 听完后，得猜半天是哪段代码。因为它不知道“右下角蓝色按钮”对应哪一个文件、哪个 class。
这就很浪费时间...
救星来了
但是，有了，这个工具，安装后，你只需要：
1、点击任何网页元素
2、添加备注说明（如“这个按钮太小了”、“这个文字拼错了”）
工具自动捕获以下信息：
元素名称（class）
CSS 选择器
元素坐标（位置）
元素上下文（所在组件、文件路径等）
然后生成结构化的 Markdown 给你，你复制粘贴给AI就行，它就能精准知道你想修改什么👇
## Page Feedback: /
**Viewport:** 1728×997
### 1. button "Primary Button"
**Location:** .demo-section > .demo-elements > .button-group > .demo-button
**Feedback:** Try clicking this button - you can annotate any element on the page!
### 2. h3 "Example Card"
**Location:** .demo-section > .demo-elements > .demo-card > h3
**Feedback:** Annotations work on text elements too
### 3. paragraph: "Point at problems, not code"
**Location:** .main-content > .article > header > .tagline
**Feedback:** 哈哈哈
### 4. paragraph: "The key insight: agents can find and fix..."
**Location:** .main-content > .article > section > p
**Feedback:** 文字错了
### 5. paragraph: "Agentation (agent + annotation) is a dev..."
**Location:** .main-content > .article > section > p
**Feedback:** 字太小这个工具叫：Agentation（名字来自 Agent + Annotation）
背后的创意：
Agentation 的灵感来自一位开发者 Benji Taylor。他自己亲身感悟是：
“为什么开发者和 AI 的沟通效率这么低？”
他发现：
- 人类喜欢用视觉描述（“这里不对”）
- AI 只能读文字（“在文件 X.js 的第 45 行”）
于是他和两位同事（Dennis Jin 和 Alex Vanderzon）做了一个桥梁：让视觉反馈转成代码可读的信息。
这就是 “Agent + Annotation” = Agentation 的由来。
Agentation 让你“用鼠标指出问题”，而不是“用语言解释问题”。
它帮 AI 明白你到底指的是页面上的哪个元素，从而更准确地修改代码。
它的核心原理是什么？
Agentation 的原理其实很简单，但非常聪明。
它做的事情就是：当你点击网页上的某个元素时，它会自动收集这个元素的：
- HTML 选择器（selector）
- 类名（class）
- 层级路径
- 在页面中的位置坐标
这些信息组合在一起，就能唯一地标识出网页里的那个元素。
然后 Agentation 把这些数据打包成一段结构化 Markdown 文本。AI 拿到后就能直接在代码里定位这个元素所在的文件或组件。
换句话说：
你指的是“看得见的按钮”，
AI 能立刻知道“代码里的哪一行”。
这就像是你给 AI 配上了“定位眼镜”。
如何安装使用？（超详细步骤）
首先要知道：
Agentation 目前是 桌面端专用工具（Desktop Only），
主要作为一个 浏览器内开发调试插件（前端工具） 来运行。
⚠️ 当前仅支持桌面端（Desktop only）
需要 React 18+，仅限开发环境使用（dev-only）
它不是一个 Chrome 插件或 VS Code 插件，
而是一个可以嵌入在本地网页开发环境（如 localhost:3000）中的 React 工具。
安装依赖包
在你的 React 项目中运行以下命令之一：
npm install agentation或使用其他包管理器：
yarn add agentation
# 或
pnpm add agentation
# 或
bun add agentation在应用中添加组件
在你的 React 应用中（建议在根组件中）引入：
import { Agentation } from "agentation";
function App() {
return (
<>
{process.env.NODE_ENV === "development" &&}
);
}✅ NODE_ENV 检查
确保 Agentation 只在开发模式下加载，
不会在生产环境中运行。
Claude Code 技能一键集成
如果你使用 Claude Code
可以自动安装并配置 Agentation：
1️⃣ 安装技能：
npx add-skill benjitaylor/agentation2️⃣ 在 Claude Code 中运行：
/agentationClaude Code 会自动：
- 检测你的框架；
- 安装 Agentation 包；
- 创建 Provider；
- 自动接入布局文件。
如何使用
运行项目后（例如访问 http://localhost:3000）：
- 页面右下角会出现一个小按钮 ✏️（Agentation 图标）
- 点击这个按钮，Agentation 就会进入“标注模式”
快速上手步骤
整个流程清晰简短：点击 → 标注 → 复制 → 粘贴 → AI 修复
- 1.打开 Agentation 工具：启动后，会在你的网站右下角出现一个小图标。
- 2.激活标注模式：点击右下角的图标进入“标注状态”。当鼠标移动到网页元素上时，元素会自动高亮显示。
- 3.选择需要反馈的元素：如果某个按钮或内容有问题，直接点击该元素。
- 4.填写反馈内容：页面会弹出一个小输入框，填写你的反馈，例如：“按钮文字太模糊”、“动画太慢”、“点击没反应”等。
- 5.生成并复制结果：点击 Add 或 Copy，Agentation 会自动生成一段 Markdown 格式的反馈文本。
- 6.粘贴到 AI 编程助手中：打开 Claude Code 或 Cursor，将生成的文本粘贴进去。AI 会根据其中的元素选择器自动定位并修改代码。
最佳使用技巧（开发者小贴士）
保持具体：例如写“按钮文字不清晰”，而非“修复这个”。
单点注释：每条注释仅包含一个问题。
提供上下文：说明预期与实际差异。
文本选中注释：用于拼写错误或内容问题。
暂停动画：便于在动态页面上精确标注。
安全说明
Agentation 的所有操作均在本地浏览器中执行，不会上传或收集任何数据。
- 🚫 无网络请求（No network requests）
- 🧱 所有数据仅在本地处理
- 🧩 不存储或追踪任何用户信息
- 🧠 仅用于开发环境（Dev-only）
在线体验：https://agentation.dev/
加入XiaoHu.ai 日报社群 每天获取最新的AI信息
____________
End.
感 谢 阅 读，都看到这了，还不...
点赞，转发，关注关注关注↓↓
<原文链接：https://mp.weixin.qq.com/s/s52vTqja8uKCPAS14zwKfA
暂无评论内容