和AI一起搞事情#1: opencode ×browser-use实战复盘

心向光 發表於 2026-3-10 07:41:00

和AI一起搞事情#1: opencode ×browser-use实战复盘

开篇避雷：
<blockquote>
本文不输出权威指南，只是一位一线算法工程师和AI不算peace的合作场景还原。系列第一篇，我们将从最基础的“磨合期”开始聊起。
</blockquote>
本周的小目标：用 OpenCode基于browser-use 框架，写一个能自动跑去DeepSeek网站点开搜索模式，输入query批量提问，并把答案和网页抓取下来的自动化脚本。 (免责声明：本文纯作技术探讨)
可解锁技能点：opencode，browser-use，
效果如下，代码详见crawl_deepseek 
<img alt="db2ffd94be867392773567d46fbed61b" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202603/1326688-20260310074001172-724787500.gif" class="lazyload">
<h2 id="和ai组队中">和AI组队中</h2>
<img alt="图片" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202603/1326688-20260310074012264-949629962.jpg" class="lazyload">
<h3 id="1-战前准备技术预研撰写prd">1. 战前准备：技术预研&撰写PRD</h3>
上个时代开发软件，我们要给人类同事写 PRD（需求文档）；这个时代，你合作的对象是 AI，你同样得给它写说明书。 
在简单的单智能体（Agent）工作中，本质上只有三种信息在流动：
<ul>
<li>System Message（静态指令）：永远悬在它脑门上的最高法则。</li>
<li>User Message（用户指令）：你随时随地的补充和吐槽。</li>
<li>Tool Message（动态指令）：它用工具查出来的数据。</li>
</ul>
因为是完全基于browser-use开发，因此我需要模型持久化记忆这个AI工具库的使用说明，所以首先要提供的就是 《Browser-USe AGENTS.md》（Browser-use官方给的武功秘籍）
现在很多优秀的开源项目都会提供 <code>AGENTS.md</code>。它的本质，就是把原本写给人类看的花里胡哨的，层次复杂的网页说明书，“展平”并结构化成写给机器看的 API 手册。因为我们这次完全基于 browser-use 开发，直接把这本秘籍塞进它的上下文里，它就知道怎么操控浏览器了。
因为项目目标其实会需要反复调整，因此我把初期我能想到的项目相关的信息写入了 《Project.md》。里面包含了：
<ol>
<li>项目目标：我们要干啥。</li>
<li>代码规范：用 Python 几？语言风格是什么？</li>
<li>测试与日志规范（极其重要！）：最开始我只写了简单的目录要求，后续在合作过程中我重点补充了这两个部分，不要急，接着往后看。</li>
</ol>
<h3 id="2-和ai对需求">2. 和AI对需求</h3>
准备好目标和参考资料后，我开了 <code>/plan</code>模式，开始和AI对需求 
这个模式下，AI只思考、不写代码。我让它：
<ul>
<li>先理解任务</li>
<li>找到任务中描述不清晰，存在疑问的点并向我提问</li>
<li>把澄清后的细节补充回Project.md</li>
</ul>
这一步很重要——让AI先把问题问出来，比让它闷头写然后全部重来，效率高太多。最后反复优化后的project.md很长很长
<h3 id="3-血压飙升时刻我被迫夺过方向盘的4个瞬间">3. 血压飙升时刻：我被迫夺过方向盘的4个瞬间</h3>
我乐观的认为接下来就是我的"tea time"，那属实是我太天真了。以下是我和这位“盲目自信的实习生”搏斗的真实记录。
<h4 id="-第一回合拒绝瞎猜日志才是唯一真理">🥊 第一回合：拒绝瞎猜，日志才是唯一真理</h4>
案发现场：在使用多模态模型识别网页时，AI 没找到网页加载完成的标志，陷入了无限等待的死循环。
AI的反应：它立刻基于它庞大的预训练知识库，给出了无数种（根本不对的）后端网络超时的猜测，疯狂改代码，修了半天把原本正常的代码改成了屎山。 
我的铁腕干预：
<blockquote>
“停！保留证据链！把 browser-use 推理的中间过程全部用日志打出来！没有日志不准排查问题！” 
感悟：AI 极度依赖上下文。如果不给它日志反馈，它就会启动“幻觉瞎猜”模式。
</blockquote>
<h4 id="-第二回合遇到问题打补丁达咩">🥊 第二回合：遇到问题打补丁？达咩！</h4>
案发现场：它从网页里提取答案的逻辑写错了，抓出了一堆乱码。
AI的反应：它没有去改提取逻辑，而是写了一长串极其复杂的正则后处理代码，试图把乱码“洗”干净。
我的铁腕干预：
<blockquote>
“第一性原理！永远从源头解决问题，严格禁止打补丁式的后处理！去查为什么提取逻辑不对！”
</blockquote>
感悟：AI 可能从 Github 庞大的屎山代码库里学到了人类的陋习——遇事不决打补丁。补丁有一个就有一千个，陋习决不允许。
<h4 id="-第三回合赛博鱼的记忆虽然越来越长但仍不够用">🥊 第三回合：赛博鱼的记忆虽然越来越长但仍不够用！</h4>
案发现场：遇到复杂的登录信息处理时，它的代码又开始跑偏了。
AI的反应：试图自己凭空捏造一套浏览器的 Cookie 注入逻辑。
我的铁腕干预：
<blockquote>
“哥们，答案就在《AGENTS.md》里，Read first then act！（遇到问题先查手册）”
</blockquote>
感悟：当对话上下文变得极其冗长时，AI 的注意力（Attention）会涣散。你得时不时像敲黑板一样提醒它：“看说明！看说明！”
<h4 id="-第四回合盲目乐观的空欢喜">🥊 第四回合：盲目乐观的“空欢喜”</h4>
案发现场：终端里连续弹出了 5、6 次极度兴奋的回复：“完事了！干完了！成功了！太棒了！”
AI的反应：它只看到了系统生成了一个 <code>answer.json</code> 的文件，就判定任务成功，结果我一打开空的？答案只有一半的？引用数量不对的？
我的铁腕干预：
<blockquote>
“反复多次优化明确验收标准：必须明确检查抽取结果的内容长度、引用数量！批量端到端测试跑通才算完！”
</blockquote>
感悟：AI 最大的优点就是极致的乐观。如果你不给它设定极其严苛的、基于结果的验收标准，它会在任何一个微小的步骤上原地开香槟。
每一次干预成功后，我都让它把血泪教训总结进最初的 <code>Project.md</code> 里。这样在下次才有机会去二次验证经验是否具有一般场景的泛化性。
<hr>
<h2 id="复盘时间opencode的一些底层逻辑">复盘时间：OpenCode的一些底层逻辑</h2>
既然这是一篇有追求的技术博客，光吐完槽是不够的。在这场搏斗中，我们来拆解一下 OpenCode使用中的一些底层逻辑。
<h3 id="-当你输入-文件agent-内部到底发生了什么">💡 当你输入 <code>@文件</code>，Agent 内部到底发生了什么？</h3>
很多人以为 <code>@</code> 是什么魔法机制。其实底层非常简单：一切溯源到工具调用（Tool Call）。 
当你在对话框里 <code>@a.txt</code> 时，Agent 在底层其实是悄悄模拟了一次 <code>read_file</code> 的工具调用，并把文件内容作为 Tool Result 塞进对话流里。模型看到的其实是这样的：
<pre><code class="language-json">[
{
"role": "user",
"content": [
 { "type": "text", "text": "文件 @a.txt 里的数字是多少？" },
 { "type": "text", "text": "【系统插入工具调用】：调用了 Read 工具，参数 {\"filePath\":\"a.txt\"}" },
 { "type": "text", "text": "【系统插入文件内容】：28\n" }
]
}
]
</code></pre>
想通了这一点，你就能举一反三：你 <code>@</code> 目录，它调用的就是 <code>list_directory</code>，本质都是上下文的动态加载。是为了让这些拥有short-cut操作的消息，和其他模型看到的用户消息一般无二，既不丢失文件内容，也不丢失和文件名称之间的关联，同时消息内容还和模型多数的训练数据相近。
<h3 id="-疑问2plan-计划模式-和-build-构建模式-的本质区别是什么">💡 疑问2：<code>/plan</code> (计划模式) 和 <code>/build</code> (构建模式) 的本质区别是什么？</h3>
难道切换模式是换了个更聪明的大脑？不，核心差异在于两把锁：
<ol>
<li>
系统指令的紧箍咒：在 <code>/plan</code> 模式下，系统会偷偷在 Prompt 里加一句极其严厉的话：“You are in read only Phase. Strictly forbidden any file edits.”（你现在是只读模式，严禁修改任何文件！），当然也有框架使用“please don't code”这种更加直白的指令。
</li>
<li>
物理拔网线：相对应的，系统在<code>\plan</code>模式还会直接禁用 <code>write</code>、<code>edit</code>、<code>patch</code>、<code>bash</code> 等能改变状态的工具。应该是处于context-cache的考虑（为了能命中缓存，plan和build模式的上文相同），所以opencode选择了物理隔离，也就是工具描述依旧在模型上文，但是调用时会直接打断报错。如果模型生成工具调用命令，在执行工具时会报错
</li>
</ol>
<pre><code class="language-txt"> The user has specified a rule which prevents you from using this
specific tool call. Here are some of the relevant rules
[{"permission":"edit","pattern":"*","action":"deny"}]

</code></pre>
<h3 id="-疑问3agentsmd模型究竟是如何使用的">💡 疑问3：Agents.md模型究竟是如何使用的？</h3>
在每次对话开始之前，opencode都会扫描目录中所有的AGENTS.md,CLAUDE.md等用于构建系统指令，而构建的方式也是所见即所得，没有复杂的设计，就只是把所有检索到的文件进行拼接，包括文件所在位置和文件内容。
"Instructions from: " + p + "\n" + content : ""
而以上内容会作为system message，在整个对话中被持久化使用。所以需要贯穿整个项目使用的说明书、项目目标等信息都可以放在这个文件中。
<h2 id="next">Next？</h2>
哈哈这一次的体验绝对算不上美好，并且很多环节其实干预很多，不过慢慢来我慢慢和AI磨合，慢慢尝试放手，慢慢找到哪些经验是宝藏哪些是糟粕，磨合总要时间。这一章我们只用了最基础的单智能体（Single Agent）模式，没有用 MCP（Model Context Protocol），也没有挂载复杂的 Skills，更没有用多智能体组队工作。 所以后面我们继续搞事不要停！ 
来源：https://www.cnblogs.com/gogoSandy/p/19694868

頁: [1]

琼殿技术论坛's Archiver

和AI一起搞事情#1: opencode ×browser-use实战复盘