让AI“看见“网页：skills 项目图片识别功能完整指南

让AI"看见"网页：skills 项目图片识别功能完整指南

【免费下载链接】skillsBrowserbase's official collection of agent skills to access the web.项目地址: https://gitcode.com/GitHub_Trending/skills23/skills

skills 是 Browserbase 官方发布的浏览器自动化 skills 合集，其中的图片识别能力让 AI agent 能直接看懂网页里的图片内容。配合 browse CLI，agent 不仅能点击、输入，还能"看到"页面中的图表、布局与视觉元素。下面带你走最短路径，把图片识别用起来。

🚀 快速上手：30秒克隆仓库跑起来

git clone https://gitcode.com/GitHub_Trending/skills23/skills

克隆后打开 skills/browser/SKILL.md，它是核心 browser skill 的文档入口，开头 Setup check 一节会带你装好 browse CLI。

🔍 能力拆解：agent 在哪些场景帮你看图？

让AI读懂页面里的图表与图片

打开带数据图表或商品图的页面时，让 agent 执行browse screenshot，截图会发给多模态模型，直接读出图中数据、识别画面元素、判断布局状态。注意截图会消耗 vision tokens，速度也比纯文本慢，所以文档建议先用browse snapshot读结构，确实需要视觉上下文时再上截图——这正是"读文字"和"看页面"的分界线。

截图自动附在bug报告里

做 UI 测试时，它可以搭配 ui-test skill 使用：每条失败的测试用例都会自动保存一张截图，并把路径写进断言报告。按钮失灵、样式错位时你不用复现场景，直接打开图就能确认问题。报告汇总时，主 agent 会把各分组的通过率合并成一份结果，你可以优先看带截图的失败项。

回溯历史某一刻的页面

browser-trace 会在一次自动化运行中周期性采样截图和 DOM 快照，并按时间戳关联到网络、控制台事件，最后按页面切成可搜索的文件。运行失败想排查时，翻回对应时刻就能看到当时页面长什么样，相当于给调试开了灯。采样脚本在 skills/browser-trace/scripts/ 目录。

⚠️ 新手最易漏的两个配置

• 以为browse snapshot能看到图：snapshot 只返回可访问性树的文本结构，图片与布局信息一概没有；要看视觉内容必须改用browse screenshot，两者的适用边界写在 skills/browser/SKILL.md 的 Page state 一节。
• 远程模式少配 API key：走 Browserbase 云浏览器要先设置BROWSERBASE_API_KEY，本地模式则需要机器装好 Chrome；这两条前置条件分别列在 skills/browser/SKILL.md 顶部的 compatibility 字段和 README.md 的 Troubleshooting 一节。

📚 延伸入口：去哪看完整命令

• skills/browser/EXAMPLES.md：browse 命令的更多实战示例，从 open 到 screenshot 的完整流程
• skills/browser/REFERENCE.md：browse CLI 的全量参数参考，查不到命令时来这里翻

【免费下载链接】skillsBrowserbase's official collection of agent skills to access the web.项目地址: https://gitcode.com/GitHub_Trending/skills23/skills