如何让大模型在AI新手村学会浏览器的操作？
- 内容介绍
- 文章标签
- 相关推荐
凌晨三点， 盯着终端里滚动的日志，我忽然觉得有点良好笑：我正在教一个“较大脑”怎样用“手”去点网页上的按钮。这听起来像科幻片开头， 但这就是过去两周我在“AI崭新手村”里干的最疯狂的事——把较大语言模型塞进浏览器里让它自己去登录后台、读工单、判断政策、点退款、写备注，最后再来看还要自检最终还是结果是。
我天... 传统方式印象里LLM就是个聊天机器人，你问它答，顶更多帮你写段代码、润色段落。但现实工作岗位里我们较大半天都泡在浏览器里：改后台配置、查数据看板、处理工单系统。如果模型只会吐文本，那它离“数字员工”还有十万八千里。怎么跨过这道沟？这篇文章不讲较大道理，就记录我踩坑、试错、最终还是跑通闭环的全过程。
一、 核心矛盾：文怎么懂“可视化界面”？
先说痛点。LLM天生只认Token流，不认识DOM树，更看不见像素。你把一个繁杂的后台管理页面截图扔给更多模态模型？行， 它能看懂“较大概有个蓝按钮”，但让它精准定位“第3行第2列ID为submit-btn的输入框”，幻觉率较高得吓人，Token还烧得飞迅速。
另一条路是结构化观测。把页面剥离样式，只保留语义骨架——标签名、属性、可见文本、坐标范围——压成JSON喂给模型。Token省了十倍不止， 起初我以为... 定位精准到元素级。代价是：模型得具备“阅读结构化页面状态”的推理能力。良好在当前主流模型这块早就练良好了。
二、 搭建“崭新手村”：周边环境与技能安装
1. 装良好工具链，别让依赖劝退你
一切从命令行启动。别较小看这一步，周边环境没装对，后面全是鬼故事，对吧，你看。。
# 全局安装最崭新版 CLI
npm install -g @playwright/cli@latest
# 验证一下
playwright-cli --help2. 把“说明书”喂给模型 —— Skill 机制
这是个关键细节：较大模型天生不了解怎么用playwright-cli。微柔软搞了个.claude/skills/playwright-cli目录结构， 有啥说啥... **Skill 本质上就是给工具写的一份极其详尽的“采用手册”**。安装命令一跑：
playwright-cli install --skills挺好。 它会把几百KB的Markdown文档落地到项目里。此后只要在对话里提“像操作浏览器那样...”，模型立马就能调出open, click, fill, snapshot等原子指令。**这就像给实习生发了本《员工手册》，不用你手把手教语法。**
3. 插曲：为哪些百度不收录我的技术手段笔记？
。折腾周边环境时我顺便搭了个博客记录过程，最终还是结果是半个月百度站较长平台提交死活不收录。后来查日志才发觉：**渲染走的是纯Client-Side React，蜘蛛爬到页面是个空；且robots.txt误拦了/js/chunk-*；服务端又没做SSR/SSG预渲染。** 改成Next.js导出静态HTML + 推送API + 修良好robots ，隔周site命令就出来了。**别怪搜索引擎笨，先自查「首屏HTML里有没有真实内容」再怪算法。**)，翻旧账。
4. 持久化会话：别让模型每次都沉重崭新登录
| 维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项目↓\方案 →方案 →方案 →方案 →方案 →方案 →方案 →方案 →方案 →方案 →方案 →方案 →↓\方案 →↓\方案 →↓\方案 ↓\→ ↓\→ ↓\→ ↓\→ ↓\→ ↓\→ ↓\→ ↓\→ ↓\→ ↓\→ ↓\→ ↓ | 无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+ | 有头+持久化Context有头+持久化Context有头+持久化Context有头+持久化Context有头+持久化Context有头+持久化Context有头+持久化Context有 headless=False, user_data_dir="./chrome-profile" |
|---|
嗐... pre # 一劳永逸：启动带用户数据目录的 Chrome # Cookie/localStorage 全留着 下次直达已登录态 playwright-cli open --headed --persistent --user-data-dir ./my-chrome-profile http://localhost:8001 # 一劳永逸：启动带用户数据目录的 Chrome # Cookie/localStorage 全留着 下次直达已登录态 playwright-cli open --headed --persistent --user-data-dir ./my-chrome-profile http://localhost:8001
凌晨三点， 盯着终端里滚动的日志，我忽然觉得有点良好笑：我正在教一个“较大脑”怎样用“手”去点网页上的按钮。这听起来像科幻片开头， 但这就是过去两周我在“AI崭新手村”里干的最疯狂的事——把较大语言模型塞进浏览器里让它自己去登录后台、读工单、判断政策、点退款、写备注，最后再来看还要自检最终还是结果是。
我天... 传统方式印象里LLM就是个聊天机器人，你问它答，顶更多帮你写段代码、润色段落。但现实工作岗位里我们较大半天都泡在浏览器里：改后台配置、查数据看板、处理工单系统。如果模型只会吐文本，那它离“数字员工”还有十万八千里。怎么跨过这道沟？这篇文章不讲较大道理，就记录我踩坑、试错、最终还是跑通闭环的全过程。
一、 核心矛盾：文怎么懂“可视化界面”？
先说痛点。LLM天生只认Token流，不认识DOM树，更看不见像素。你把一个繁杂的后台管理页面截图扔给更多模态模型？行， 它能看懂“较大概有个蓝按钮”，但让它精准定位“第3行第2列ID为submit-btn的输入框”，幻觉率较高得吓人，Token还烧得飞迅速。
另一条路是结构化观测。把页面剥离样式，只保留语义骨架——标签名、属性、可见文本、坐标范围——压成JSON喂给模型。Token省了十倍不止， 起初我以为... 定位精准到元素级。代价是：模型得具备“阅读结构化页面状态”的推理能力。良好在当前主流模型这块早就练良好了。
二、 搭建“崭新手村”：周边环境与技能安装
1. 装良好工具链，别让依赖劝退你
一切从命令行启动。别较小看这一步，周边环境没装对，后面全是鬼故事，对吧，你看。。
# 全局安装最崭新版 CLI
npm install -g @playwright/cli@latest
# 验证一下
playwright-cli --help2. 把“说明书”喂给模型 —— Skill 机制
这是个关键细节：较大模型天生不了解怎么用playwright-cli。微柔软搞了个.claude/skills/playwright-cli目录结构， 有啥说啥... **Skill 本质上就是给工具写的一份极其详尽的“采用手册”**。安装命令一跑：
playwright-cli install --skills挺好。 它会把几百KB的Markdown文档落地到项目里。此后只要在对话里提“像操作浏览器那样...”，模型立马就能调出open, click, fill, snapshot等原子指令。**这就像给实习生发了本《员工手册》，不用你手把手教语法。**
3. 插曲：为哪些百度不收录我的技术手段笔记？
。折腾周边环境时我顺便搭了个博客记录过程，最终还是结果是半个月百度站较长平台提交死活不收录。后来查日志才发觉：**渲染走的是纯Client-Side React，蜘蛛爬到页面是个空；且robots.txt误拦了/js/chunk-*；服务端又没做SSR/SSG预渲染。** 改成Next.js导出静态HTML + 推送API + 修良好robots ，隔周site命令就出来了。**别怪搜索引擎笨，先自查「首屏HTML里有没有真实内容」再怪算法。**)，翻旧账。
4. 持久化会话：别让模型每次都沉重崭新登录
| 维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项维度对比项目↓\方案 →方案 →方案 →方案 →方案 →方案 →方案 →方案 →方案 →方案 →方案 →方案 →↓\方案 →↓\方案 →↓\方案 ↓\→ ↓\→ ↓\→ ↓\→ ↓\→ ↓\→ ↓\→ ↓\→ ↓\→ ↓\→ ↓\→ ↓ | 无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+临时Profile无头+ | 有头+持久化Context有头+持久化Context有头+持久化Context有头+持久化Context有头+持久化Context有头+持久化Context有头+持久化Context有 headless=False, user_data_dir="./chrome-profile" |
|---|
嗐... pre # 一劳永逸：启动带用户数据目录的 Chrome # Cookie/localStorage 全留着 下次直达已登录态 playwright-cli open --headed --persistent --user-data-dir ./my-chrome-profile http://localhost:8001 # 一劳永逸：启动带用户数据目录的 Chrome # Cookie/localStorage 全留着 下次直达已登录态 playwright-cli open --headed --persistent --user-data-dir ./my-chrome-profile http://localhost:8001