[免费服务 #1] 用 Agentation 修改 AI 设计

让 AI 制作网站已经不难。真正辛苦的是之后：从展示完成页面、说出“这个按钮有点奇怪”的那一刻开始。

“中间那个蓝色按钮。”→ AI 改错了按钮。 “不是，是上面那个。”→ 又动到了另一个。 “从上面数第二个、挨着登录的那个……”→ 最后只好亲自打开代码。

原因很简单。人看页面，AI 看代码。要用语言连接两双不同的眼睛，中间难免会漏信息。为了填补这道缝隙，Agentation应运而生。

这个系列会逐一介绍无需花钱就能使用的服务，确认它能做什么、免费到什么程度，以及有哪些条件。第一篇是 Agentation。

在页面上点一下，翻译成 AI 能理解的话

Agentation 是浮在你正在制作的网站上的小工具栏。点击不满意的位置并留下“间距太窄了”之类的备注后，它会整理成 AI 编码工具可以直接执行的格式。

重点在于“帮你整理”。点一下，就会自动附上这些信息：

• 能在代码中找到该元素的 CSS 选择器（selector，类似指向代码中页面元素的地址）— body > main > .hero-section > button.cta
• 创建该元素的源文件和行号 — src/components/Button.tsx:42
• React 组件层级 — App > LandingPage > HeroSection > CTAButton
• 位置和大小、周围文本，以及当前应用的颜色、字体和间距值

点击复制按钮后，这类信息就会放进剪贴板。

## Page Feedback: /landing
**Viewport:** 1440×900

### 1. button
**Location:** body > main > .hero-section > button.cta
**Source:** src/components/Button.tsx:42
**React:** App > LandingPage > HeroSection > CTAButton
**Feedback:** Button is cut off on mobile viewport

信息量可以调节。共有简洁（Compact）、标准（Standard）、详细（Detailed）、取证（Forensic）四个级别，上例使用的是默认的标准。需要追查间距或颜色为何如此时，切换到取证模式还会带出已应用的 CSS 值。

顺便一提，Source:行，也就是源文件和行号，只会在开发模式中附加。它支持 Vite、Next.js、Webpack、Turbopack 环境，但根据打包器配置，这些信息可能缺失。即使没有，仍可通过选择器和组件层级查找，只是准确度稍低，并非完全不能用。

只要粘贴到 Claude Code 或 Cursor 聊天窗口就完成了。AI 不必再猜“蓝色按钮”是哪一个；拿到地址后，会直接前往那个文件的那一行。

在截图上画箭头交给它不行吗

这是常见方法，也不是完全不可行。但截图只是图片，无法连接到代码。AI 必须重新找出图片中的按钮位于哪段代码，过程中就可能改到外观相似的另一个按钮。

Agentation 传递的不是图片，而是可搜索的字符串。有了选择器和类名，AI 就能搜索代码库，准确定位该处。这正是它与画箭头的图片决定性的差异。

共有五种标注方式

想指出的对象不一定总是单个按钮，因此提供了不同方式。

• 点击元素 — 精确指定按钮、卡片或单张图片。
• 选择文本 — 用于修正错别字或文案。选中的句子会连同引号放入结果，AI 可以直接在代码中搜索这句话。
• 多选 — 拖动一次选中多个元素，适合“请调整这三张卡片的间距”之类的要求。
• 指定区域 — 空白处也能指定，因此可以说“这里太空了”。
• 停止动画 — 按下 P 键即可停止 CSS、JavaScript 和视频动画。把滑过太快而抓不到的瞬间停住后再指出问题即可。不过有些第三方动画库无法完全停止。

记住几个常用快捷键会更方便。用 Cmd+Shift+F（Windows 为 Ctrl+Shift+F）开关反馈模式，用 C 复制、用 X 全部删除、用 H 隐藏标记。

需要调整布局时，使用布局模式

“把这张卡片移到右边，并在下面放一个表单。”这类要求一旦改用文字描述就会变模糊。因此按下 L 键后，工具栏会切换到布局模式，让你直接移动演示，而不是用语言解释布局。

• 从组件面板将超过 65 种元素拖放到页面上。
• 将鼠标移到现有区段时会显示 CSS 选择器标签，然后可直接拖动调整顺序。
• 开启“新页面线框图”后，当前设计会变淡，你可以在空白页面上绘制草图。也能用透明度滑块透视原页面来绘制。
• 另有栏位可填写这个页面的用途。

这样创建的变更会在每条注释上附带 feedback、placement、rearrange 中的一种。AI 收到的不是“请移到中间”这类句子，而是坐标和大小。不过布局模式是 Agentation 3.0 才加入的功能，需要确认版本；和其他功能一样，也只能在桌面电脑上运行。详细介绍请见 官方博客文章。

安装不必请开发人员帮忙

如果正在使用 Claude Code，在终端输入一行即可。

npx skills add benjitaylor/agentation

接着在 Claude Code 中输入 /agentation，它会自动检测框架并完成安装。即使看不懂代码，也能做到这一步。

如果想自行处理，只需安装包并加入一行组件。

npm install agentation -D

import { Agentation } from 'agentation';

function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === 'development' && <Agentation />}
    </>
  );
}

后面的 NODE_ENV === 'development' 条件表示“只在开发期间显示工具栏”。这是避免实际服务访客看到它的安全措施，别漏掉。

各框架的安装方式与配置项，都整理在 官方网站 的 Install、Features 文档中。

连复制粘贴都嫌麻烦，就用 MCP 连接

做笔记、复制、粘贴到聊天窗口；重复几次也会变成工作。通过 MCP（Model Context Protocol，AI 工具与外部程序交换数据的标准规范）连接后，这段往返就会完全消失。你在页面上留下备注，AI 会自动获取。除了工具栏外，还需连接 agentation-mcp 服务器，并在设置中开启同步。

从这里开始，使用方式分成三类。

• 免手动 — 新备注出现后，AI 会自动确认、修改并标记为已解决。人只需持续看着页面指出问题。
• Critique — 相反，AI 会打开浏览器浏览页面，把设计问题留下备注，由人来审核。
• 自动驾驶 — AI 负责指出问题，也负责修改。

后两种方式需要 AI 直接打开浏览器，因此必须另外安装 agent-browser 技能。第一次使用的话，从免手动模式开始比较稳妥。

连接后，备注不再是单向传递，这一点也很重要。AI 如果在该备注中反问“要设为 24px 还是 16px？”，你可以直接在原处回答。还会保留等待中、待确认、已解决、暂缓等状态。不再是丢出去就结束，而是形成对话。

题外话，这些来回备注的数据结构以 AFS（Annotation Format Schema，注释格式规范）之名公开。开发者将它描述为“附加在运行中应用上的智能 Figma 评论”。

开始前需要知道的条件

不能只谈好处，先把界限说清楚。

无法修改别人的网站。 它必须安装在你正在制作的项目中，并在自己的电脑启动开发服务器后使用。不是打开任意网站就能改设计的扩展程序。

需要 React 18 以上。 如果让 AI 制作 Web 应用，十有八九会是 React，但仍请确认。它也能在 Next.js、Remix、Astro 等 SSR/SSG 框架中正常运行。Astro 本身不是基于 React，但如果采用叠加 React 的配置即可。

仅支持桌面电脑。 这是用鼠标移到目标并拖动选择范围的工具，在移动设备上几乎无法操作。若要处理手机端的问题，可以缩小桌面浏览器窗口来绕过。

结果中没有图片。 全部都是文本。对于色调或氛围等难以用语言描述的反馈，截图仍然更好。

无法定位 iframe 内部。 外部嵌入的支付小组件或地图都属于此类，也就是整个嵌入其他网站画面的区域。这是浏览器安全策略下无法避免的限制。

备注不会保留太久。 如果没有通过 MCP 连接，备注会按页面存储在浏览器中，7 天后消失。如果想先积累、之后处理，建议先连接。

价格没有负担。个人或公司内部使用都免费。只有重新发布或商业提供时才需要另外取得许可。采用 PolyForm Shield 1.0.0。

总结

• Agentation 是一个工具栏，会把你在页面上点击的位置翻译成 AI 能理解的代码地址。
• 选择器和组件层级会自动附加，开发模式下还会附上源文件和行号，因此 AI 不必猜“那个按钮”是哪一个。
• 可以通过点击、选择文本、多选、指定区域、停止动画五种方式提出问题。
• 在 L 键的布局模式中，可以拖放组件、调整区段顺序，直接展示布局本身（3.0 以上）。
• 使用 Claude Code 时，输入 npx skills add benjitaylor/agentation 后再输入 /agentation 一次即可完成安装。
• 连接 MCP 后，无需复制粘贴，AI 会直接获取备注，还能进行反问与回复的对话。
• 但只能在自己的 React 18+ 项目以开发服务器启动，并通过桌面浏览器使用。

如果每次都厌倦重复用语言解释，不妨改成用手指指出那个区域。官方网站是 https://www.agentation.com/。下一篇也会挑一个免费服务来介绍。

延伸阅读

• 做好 Vibe Coding 的方法：代码该读到什么程度？
• 用规则文件从根本避免 Vibe Coding 事故