Vibe Coding 大救星：指哪改哪！AI 编程助手“可视化标注工具”

Vibe Coding 大救星：指哪改哪！AI 编程助手“可视化标注工具” Vibe Coding 大救星：指哪改哪！AI 编程助手“可视化标注工具” Modified January 23 No access 0b2eqaaauaaadeanlqlsgjuvbagdbkaaacqa.f10002 00:00 首先要知道： Agentation 目前是 桌面端专用工具（Desktop Only） ， 主要作为一个 浏览器内开发调试插件（前端工具） 来运行。 ⚠️ 当前仅支持桌面端（Desktop only） 需要 React 18+，仅限开发环境使用（dev only） 它 不是一个 Chrome 插件或 VS Code 插件 ， 而是一个可以嵌入在本地网页开发环境（如 localhost:3000）中的 React 工具。 安装依赖包 在你的 React 项目中运行以下命令之一： Code block Plain Text Copy npm install agentation 或使用其他包管理器： Code block Plain Text Copy yarn add agentation 或 pnpm add agentation 或 bun add agentation 在应用中添加组件 在你的 React 应用中（建议在根组件中）引入： Code block Plain Text Copy import { Agentation } from "agentation"; function App() { return ( < {process.env.NODE ENV === "development" &&} ); } ✅ NODE ENV 检查 确保 Agentation 只在开发模式下加载， 不会在生产环境中运行。 Claude Code 技能一键集成 如果你使用 Claude Code 可以自动安装并配置 Agentation： 1️⃣ 安装技能： Code block Plain Text Copy npx add skill benjitaylor/agentation 2️⃣ 在 Claude Code 中运行： Code block Plain Text Copy /agentation Claude 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/ End. 感谢阅读，都看到这了，还不... 点赞，转发，关注关注关注↓↓ No access 0b2eqaaauaaadeanlqlsgjuvbagdbkaaacqa.f10002 00:00 No access 0b2eqaaauaaadeanlqlsgjuvbagdbkaaacqa.f10002 00:00 首先要知道： Agentation 目前是 桌面端专用工具（Desktop Only） ， 主要作为一个 浏览器内开发调试插件（前端工具） 来运行。 ⚠️ 当前仅支持桌面端（Desktop only） 需要 React 18+，仅限开发环境使用（dev only） 它 不是一个 Chrome 插件或 VS Code 插件 ， 而是一个可以嵌入在本地网页开发环境（如 localhost:3000）中的 React 工具。 localhost:3000 安装依赖包 在你的 React 项目中运行以下命令之一： 或使用其他包管理器： 在应用中添加组件 在你的 React 应用中（建议在根组件中）引入： ✅ NODE ENV 检查 确保 Agentation 只在开发模式下加载， 不会在生产环境中运行。 Claude Code 技能一键集成 如果你使用 Claude Code 可以自动安装并配置 Agentation： 1️⃣ 安装技能： 2️⃣ 在 Claude Code 中运行： Claude 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/ End. 感谢阅读，都看到这了，还不... 点赞，转发，关注关注关注↓↓ 🔗 原文链接： https://mp.weixin.qq.com/s/s52vTqja... https://mp.weixin.qq.com/s/s52vTqja... 小互 小互 小互AI2026年1月23日 10:59 安徽 卧槽，兄弟们，这个牛P啊 真是个伟大发明啊！ 想象一下这个场景: 你让 Claude 帮你写了一个网页。 网页打开后，你发现： • 按钮太小； • 文案有拼写错误； • 登录弹窗打不开。 现在你要告诉 Claude 怎么改，你得一个个解释，比如： “在首页右下角的那个蓝色按钮上，点击没反应，能帮我修一下吗？” Claude 听完后，得猜半天是哪段代码。因为它不知道“右下角蓝色按钮”对应哪一个文件、哪个 class。 这就很浪费时间... 救星来了 但是，有了，这个工具，安装后，你只需要： 1、点击任何网页元素 2、添加备注说明（如“这个按钮太小了”、“这个文字拼错了”） 工具自动捕获以下信息： 元素名称（class） CSS 选择器 元素坐标（位置） 元素上下文（所在组件、文件路径等） 然后生成结构化的 Markdown 给你，你复制粘贴给AI就行，它就能精准知道你想修改什么👇 这个工具叫： 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 配上了“定位眼镜”。 如何安装使用？（超详细步骤）