Browserbase skills：用一条 browse screenshot 命令，让 AI 代理“看见“网页视觉

Browserbase skills用一条 browse screenshot 命令让 AI 代理看见网页视觉【免费下载链接】skillsBrowserbases official collection of agent skills to access the web.项目地址: https://gitcode.com/GitHub_Trending/skills23/skillsskills 是 Browserbase 官方出品的 agent skill 合集让 Claude Code 通过 browse CLI 驱动真实浏览器。其中的browse screenshot图片识别能力把网页截图变成模型可读的输入让你用 AI 直接看懂布局错位、空状态和图片内容。场景切入你正在给新的结算页跑 UI 测试。browse snapshot返回了无障碍树按钮在、文案在、流程走通了。可弹窗的主按钮被底部裁掉一半两个标签互相压在一起。这类视觉问题不会出现在 DOM 文本里只有截图能暴露它们——这正是browse screenshot要解决的问题。能力拆解需要视觉确认时用 browse screenshot 拍照browse CLI 的眼睛有两只browse snapshot返回带元素 ref 的无障碍树速度快、结构化是理解页面状态的默认手段browse screenshot输出像素级画面文档明确提示它更慢且消耗 vision tokens只在你需要视觉上下文布局、图片、调试时使用。browse screenshot --path ./capture.png --full-page--full-page会截取整个可滚动页面适合长页面--path指定保存路径方便代理随后读取这张图片并描述画面状态。完整参数说明见 skills/browser/REFERENCE.md。先 snapshot 后 screenshot省 token 的分工方式常见误区是每一步都截图。推荐的顺序是先用browse snapshot看页面结构、拿元素 ref 做点击和输入等交互到了需要视觉对比或断言失败时才补一张browse screenshot。这样既省视觉 token又不漏掉纯视觉问题。测试失败的截图证据ui-test 的自动留档ui-test 发现失败STEP_FAIL时会立刻把截图存到.context/ui-test-screenshots/step-id.png定格出错瞬间视觉类 bug 还会补一张正常状态的 baseline 截图做对比。最终 HTML 报告把截图以 base64 内嵌单个文件打开即可复查。流程细节见 skills/ui-test/SKILL.md。快速上手克隆仓库git clone https://gitcode.com/GitHub_Trending/skills23/skills安装 browse CLInpm install -g browse对照 skills/browser/SKILL.md 熟悉导航、交互与页面状态命令。打开任意页面执行browse screenshot --path ./capture.png再让代理读取这张图片——它就能描述出画面的布局、图片与视觉状态 原理速览screenshot 是快照无障碍树之外的像素级真相。browse CLI 把当前页面捕获为 PNG或直接输出 base64 JSON代理侧的多模态模型把图片解码为视觉理解元素位置、重叠关系、颜色、图片内容。一句话分工snapshot 管结构——页面上有什么、点哪里screenshot 管外观——长什么样。两者配合代理才既有读字也有看画面的能力。挑一个你手头正在改的页面现在跑一次browse screenshot让代理把画面读回来给你看。上手之后可以直接升级成 diff-driven 测试让 AI 在每次提交后自动做视觉回归。全部 skill 清单见 README.md。【免费下载链接】skillsBrowserbases official collection of agent skills to access the web.项目地址: https://gitcode.com/GitHub_Trending/skills23/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考