👀给你的 AI 装上眼睛 · 别让它盲目开发（agent-browser）

问题所在 · 你的 AI 在盲目开发

每个用 AI 开发的人都遇到过这件事，却几乎没人注意到：AI 生成一个页面、一个表单、一段流程……然后告诉你「搞定了，能用了」。可是，它打开看过吗？没有。AI 写完代码就假设它是对的 —— 它没有眼睛去检查。这就像一个厨师端上菜却从没尝过味道。有时确实没问题；有时那个按钮什么都不干、登录坏了、图片加载不出来 —— 而发现问题的是你，在生产环境里，当着客户的面。

agent-browser 是什么？ · 你的 AI 的眼睛

agent-browser 是 Vercel 出品的一个开源工具，它让你的 AI 智能体能够操作一个真实的浏览器：打开你的应用、看到屏幕上有什么、点击、在字段里输入、填表单、截图、读取控制台的报错。说人话：它给了 AI 在浏览器里的眼睛和手。不再靠猜；现在它会检查。

好处 #1 · 让它持续验证（而不是盲目）

这是能改变你工作方式的用法：你要求你的 AI，每次它构建了什么，就在告诉你已经搞定之前自己把它打开并验证。做了个登录 → 让它用一个测试账号注册并确认能进去。做了个表单 → 让它填一遍并核实能发出去。改了个页面 → 让它打开确认显示正常、控制台里没有报错。从「我觉得它能用」变成「我测过了，它能用」。

好处 #2 · 打开一个可能性的世界

给你的 AI 装上眼睛，不只是为了验证你自己的东西。有了一个可供它支配的浏览器，它能做的远不止如此：

它特别在哪（不讲术语）

和传统的自动化工具（比如 Playwright）不同，agent-browser 是为 AI 智能体而生的：它不去读整个页面（那会耗掉大量 token），而是给 AI 一张它可交互元素的紧凑「地图」。这意味着对你的智能体来说更便宜也更快。它是开源的，出自 Vercel，采用宽松许可证。

如何安装（你需要一个代码智能体）

它用一条命令安装到你的电脑上，第一次会下载它的浏览器。之后你的 AI 智能体就来用它。（有好几种方式 —— npm 是最常见的。）

npm install -g agent-browser
agent-browser install

提示词 1 · 让它验证它构建的一切（黄金法则）

这就是那个能改变你工作方式的提示词。把它粘给你的智能体，让它别再盲目开发：

你已经装好了 agent-browser。从现在起，在没有用 agent-browser 在浏览器里亲自确认之前，不要告诉我某个东西「能用了」。

每次你构建或改动界面上的任何东西时：
1. 用 agent-browser 打开我的应用（运行在 [你的 URL，例如 http://localhost:3000]）。
2. 导航到你刚构建或改动的地方。
3. 像真实用户那样测试它：点击、填字段、跑通关键流程 [描述你的流程，例如「注册 → 进入 dashboard」]。
4. 检查显示是否正常，以及浏览器控制台里有没有报错。
5. 如果有东西坏了或显示不对，修好它并重新验证，直到它真的能用。
6. 到这时才告诉我「搞定了」，并说明你验证了什么、看到了什么。

黄金法则：任何界面任务，不在浏览器里验证过就不算完成。不要盲目开发。

提示词 2 · 自动化 / 从网络提取信息

要用上它的另一项超能力 —— 浏览与自动化 —— 这个提示词让你的 AI 用 agent-browser 去做一个具体的网络任务：

用 agent-browser 一步步完成这个网络任务：

我希望你 [描述你的任务，例如：「打开这个页面 [URL]，提取产品列表连同它们的价格，并整理成一张表格带给我」/「进入我的 [服务] 面板，告诉我 X 的状态」/「用这些数据填这个表单」]。

1. 打开页面并做一次快照，看看你能与哪些元素交互。
2. 一步步完成任务，每一步都确认正确的元素在那里。
3. 如果我需要登录，告诉我如何安全地保存我的凭据（agent-browser 有一个加密的保险库；绝不要把我的密码放成明文）。
4. 把整理好的结果交给我，并告诉我有没有什么没能做到。