告别模糊描述：让AI精准定位你想要修改的页面元素

你是不是也经历过这样的场景：你盯着屏幕上一个按钮，想让它往左挪5像素、颜色再深一点，于是对着AI助手打了一大段文字：“就是那个在左边菜单里、鼠标悬停时会变蓝的按钮，不是顶部导航栏的那个，是下面那个带圆角的……”

结果AI沉默了三分钟，回你一句：“我找不到这个组件，你能提供文件名或类名吗？”

这不是AI笨，是你在用人类的方式说话，而它还在用代码的逻辑猜谜。

现在，有了 Agentation —— 一个让你用鼠标点一下，就能告诉AI“我要改这里”的工具。

怎么用？点一下，复制一段，AI立刻懂

安装 Agentation 浏览器插件（支持 Chrome 和 Edge），打开你的开发网站，按下快捷键 Cmd/Ctrl + Shift + A，鼠标就会变成一个十字瞄准器。

点击你想改的按钮、文本、卡片——它会自动抓取：

• 完整的 CSS 选择器（比如 .sidebar-btn.primary:hover）
• React 组件名和路径（比如 src/components/Sidebar/Button.jsx）
• 元素在页面中的精确坐标和尺寸
• 当前的样式属性（颜色、边距、字体大小等）

然后，它会生成一段干净的 Markdown 文本，像这样：

复制这段文字，粘贴到你的 AI 编码助手（Claude、Cursor、Windsurf、GitHub Copilot 都行），它立刻就知道你要改哪、怎么改，不用再猜。

不是截图工具，是开发者和AI之间的“翻译器”

很多人第一眼以为这是个截图标注工具，但 Agentation 的真正价值，在于它把“视觉感知”翻译成了“代码语言”。

你不需要知道组件叫什么、文件在哪、类名怎么拼——你只需要“看到它”，然后点一下。

它甚至能处理动态内容：比如一个弹出菜单、一个加载中的骨架屏、一个鼠标悬停才出现的提示气泡。你只需点击“暂停动画”按钮，冻结页面状态，再点选目标，它照样能抓取。

这对修复移动端弹窗、修复 hover 状态、调试响应式布局尤其有用——你不再需要反复刷新、打开 DevTools、一层层找元素。

轻到几乎感觉不到它存在

Agentation 没有臃肿的后台服务，没有数据上传，不收集你的代码。

它只依赖一个极小的 React 包（不到 50KB），运行在你自己的浏览器里。插件体积只有 1.2MB，启动速度接近瞬时，不会拖慢你的页面。

它不绑定任何 AI 平台。你用 Cursor？用 Claude？用 VS Code 的 Copilot？都没关系。它只做一件事：生成一份清晰、可复制、可粘贴的定位信息。

真实开发者怎么用？

一位在 Figma 做设计系统的前端工程师说：

“以前改一个按钮要开 5 个窗口：Figma 对照、DevTools 查元素、搜索文件、复制类名、发给 AI。现在，点一下，复制，粘贴，AI 5 秒就改好了。省下的时间，够我喝杯咖啡了。”

另一个在 Shopify 做主题开发的开发者提到：

“我们团队有 8 个人，每人每天要改 3~5 个 UI 细节。以前沟通成本高，现在我们直接在 Slack 里贴一段 Agentation 生成的 Markdown，AI 自动提 PR，审核通过就能上线。”

开源、免费、无广告

Agentation 是完全开源的，由 Benji Taylor、Dennis Jin 和 Alex Vanderzon 三人开发，托管在 GitHub，MIT 许可证，任何人都可以自由使用、修改、贡献。

没有付费墙，没有企业版，没有追踪脚本。它不是为了卖你服务，而是为了帮你少点烦恼。

项目地址：https://github.com/benjitaylor/agentation

官网演示与安装指南：https://agentation.dev/

这不是未来，是现在就能用的效率武器

你不需要成为 AI 专家，也不需要写复杂的提示词。你只需要知道“我要改哪里”，然后用鼠标点它。

Agentation 把“人看得到、AI看不懂”的鸿沟，变成了一次点击。

它不炫技，不吹嘘。它只是让每天和代码打交道的人，能更轻松地完成那些琐碎却重要的事。

点一下，改完，继续写下一个功能。