Github Daily
browserbase/skills
Claude Agent 的「眼睛」来了——让 AI 真正看懂并操作网页
2026-05-05 · GitHub Trending 🔥 +1,840 Stars
📊 项目速览
项目名称browserbase/skills
Stars⭐ 39,339
今日新增**+1,840 🔥**
主要语言TypeScript
GitHub 地址github.com/browserbase…
一句话介绍为 Claude Agent 提供网页浏览能力的 SDK，封装了浏览器自动化、截图、
DOM 交互等能力
🤔 它能解决什么问题？
你有没有遇到过这样的场景：
你对 Claude Code 说："帮我看看竞品的首页有什么新功能"，Claude 只能尴尬地回答："我无法访问网页，请把内容复制给我。"
或者你想让 AI 帮你自动登录后台系统导出报表，但 AI 对那些需要 JavaScript 渲染的动态页面完全"失明"——fetch() 拿到的只是空壳 HTML，真正的内容在 JS 执行之后才出现。
这就是 browserbase/skills 要解决的核心痛点：让 AI Agent 像人一样"看"网页、"操作"网页，而不只是处理静态文本。
💡 核心思路：不依赖 API，只依赖浏览器。只要人能操作的网页，AI 就能操作。每次 AI 执行操作后，系统自动返回当前页面的截图和文本摘要，Claude 通过"看到"前后页面的变化来判断操作是否成功。
这种视觉反馈循环是传统自动化脚本做不到的——传统脚本在选择器失效或页面结构变化时就会崩溃，但有了视觉反馈，AI 能发现"按钮没点动，可能弹窗挡住了"，然后自动调整策略。
✨ 核心亮点
1. 三层架构设计，专为 AI Agent 优化
browserbase/skills 采用精心设计的三层架构，让 AI 能够高效、稳定地操作浏览器：
🌐
浏览器层
基于 Playwright 的 headless 浏览器实例，负责实际渲染和交互，支持 Chromium / Firefox / WebKit
🔧
抽象层
将复杂的浏览器操作（等待元素加载、处理弹窗、切换标签页）简化为几个原子工具，AI 调用零门槛
🤖
AI 适配层
将工具描述转化为 Claude 能理解的函数调用格式，并处理多轮对话中的上下文管理
👁️
视觉反馈循环
每次操作自动返回截图 + 文本摘要，AI 通过"看到"页面变化判断操作是否成功
2. 四大 Skill 模块，覆盖全工作流
browserbase/skills 不是一个单一工具，而是一套完整的技能包，包含四个独立模块：
| 模块 | 核心能力 | 适用场景 |
|---|---|---|
| browser | ||
| 交互式浏览器自动化，支持截图、点击、输入、滚动等操作，通过 browse CLI 使用 | ||
| 需要"看"页面的场景：采集数据、操作网页、表单填写 | ||
| fetch | ||
| 轻量级页面内容获取，通过 Browserbase Fetch API 快速提取页面内容、 headers 和元数据 | ||
| 只需要获取页面内容，不需要交互的场景 | ||
| functions | ||
| 将浏览器 Agent 部署为 Browserbase Functions，支持定时执行或 Webhook 触发 | ||
| 需要定期执行的自动化任务，如每日数据采集 | ||
| browserbase-cli | ||
| 通过 bb CLI 管理 Browserbase 平台资源：Functions、Sessions、Projects、Contexts、Extensions | ||
| 管理多个浏览器会话、项目配置、持久化登录态 | ||
3. 会话持久化 + 反检测，生产级可靠性
真正的企业级能力，让 AI 自动化不再"脆弱"：
会话持久化
保持登录状态和 Cookie，实现多步骤操作。首次登录后保存 Session，后续 AI 可以复用，无需重复登录。
反检测机制
内置指纹伪装，减少被网站拦截的概率。自动处理 headless 检测、WebDriver 标识屏蔽等问题。
云端浏览器支持
通过 Browserbase 云平台，可以在无本地浏览器的环境中运行，支持并行任务执行。
4. 与同类方案的定位差异
在 Claude Code 生态中，浏览器自动化有多个方案。browserbase/skills 的独特价值在于：
| 方案 | 核心特点 | Token 消耗 | 推荐场景 |
|---|---|---|---|
| browserbase/skills | |||
| 完整 Skill 包，四模块覆盖，云端+本地双模 | |||
| 中等 | |||
| 需要完整浏览器能力的生产场景 | |||
| Browser-use | |||
| 三种浏览器模式，云端并行，会话持久化 | |||
| 极低 | |||
| 需要登录态/并行采集/反爬绕过 | |||
| Agent Browser | |||
| Snapshot + Refs 机制，极简 Token 消耗 | |||
| 极低（减少93%） | |||
| 快速浏览、截图、简单操作 | |||
| Playwright CLI | |||
| 数据存磁盘不占上下文，50+ 命令全覆盖 | |||
| 极低（减少75-99%） | |||
| 编程 Agent 长时间自动化任务 | |||
🎯 选型建议：如果你需要 AI 具备完整的网页浏览和操作能力，且希望在生产环境中稳定运行，browserbase/skills 是目前最完整的解决方案。如果只做简单浏览，可以搭配 Agent Browser 使用以节省 Token。
🚀 实战场景展示
browserbase/skills 能让 Claude Agent 在以下场景中真正"动起来"：
场景一：竞品监测
你说："帮我打开竞品 A、B、C 的首页，截图并分析他们最近上线的新功能"
AI 做：依次打开三个网站 → 等待页面加载 → 截图 → 通过视觉理解分析页面变化 → 整理成对比报告返回
场景二：自动化后台操作
你说："登录我的 Shopify 后台，导出上个月的订单数据，保存为 CSV"
AI 做：打开登录页 → 填写账号密码 → 等待导航 → 找到订单导出功能 → 选择日期范围 → 点击导出 → 确认下载
场景三：动态页面数据采集
你说："打开这个房地产网站，收集前 50 个房源的价格、面积和地址"
AI 做：打开网页 → 等待列表加载 → 滚动加载更多 → 提取结构化数据 → 自动翻页 → 整合结果返回
场景四：UI 自动化测试
你说："测试一下登录流程：输入错误密码应该显示错误提示，输入正确密码应该跳转到主页"
AI 做：执行测试步骤 → 每个步骤后截图验证 → 通过视觉理解判断页面状态是否符合预期 → 生成测试报告
🛠️ 上手指南
browserbase/skills 提供三种安装方式，推荐根据你的使用场景选择：
方式一：Vercel Skills CLI（推荐）
1
安装 Skill
根据你需要的功能模块，选择安装对应的 skill：
# 安装浏览器自动化模块（最常用）
npx skills add browserbase/skills --skill browser
# 安装轻量级页面获取模块
npx skills add browserbase/skills --skill fetch
# 安装 Functions 部署模块
npx skills add browserbase/skills --skill functions
# 安装 Browserbase CLI 管理模块
npx skills add browserbase/skills --skill browserbase-cli
2
安装 Browserbase CLI
Skill 安装完成后，需要安装对应的命令行工具：
# 安装 Browserbase 平台 CLI
npm install -g @browserbasehq/cli
# 如果使用 browser 模块，还需安装 browse CLI
npm install -g @browserbasehq/browse-cli
方式二：Claude Code 插件市场
如果你使用 Claude Code，可以直接从插件市场安装：
# 添加 Browserbase 插件市场
claude plugin marketplace add browserbase/skills
# 安装需要的插件
claude plugin install browse@browserbase --scope local
claude plugin install fetch@browserbase --scope local
claude plugin install functions@browserbase --scope local
claude plugin install browserbase-cli@browserbase --scope local
# 安装 CLI 工具
npm install -g @browserbasehq/cli
npm install -g @browserbasehq/browse-cli
方式三：OpenClaw / ClawHub
如果你使用 OpenClaw，可以从 ClawHub 安装浏览器技能：
# 从 ClawHub 安装浏览器技能
clawhub install browse
# 配置 Browserbase 凭证（会自动保存到 ~/.openclaw/openclaw.json）
openclaw browserbase setup
# 安装 browse CLI
npm install -g @browserbasehq/browse-cli
配置 API Key
所有 bb 命令需要 Browserbase API Key，先到 browserbase.com 注册获取：
# 设置环境变量
export BROWSERBASE_API_KEY="your_api_key_here"
# 或者添加到 ~/.bashrc 或 ~/.zshrc 使其永久生效
echo 'export BROWSERBASE_API_KEY="your_api_key_here"' >> ~/.zshrc
快速验证：用自然语言指挥 AI
安装完成后，你可以直接在 Claude Code 中用自然语言使用：
# 示例 1：探索网站结构
"Use the browse skill to explore https://news.ycombinator.com and identify the selectors for story titles and scores"
# 示例 2：执行浏览器自动化
"用 browse skill 打开 https://example.com，截图保存，然后告诉我页面主标题是什么"
# 示例 3：使用 Browserbase CLI
"Use the browserbase-cli skill to list my Browserbase projects with bb and show the result as JSON"
# 示例 4：保存和复用登录态
"用 browse 打开 xxx.com 让我登录，然后保存登录 Session，下次直接用"
📝 今日总结
browserbase/skills 的意义，不只是"给 Claude 加了一个浏览器"——它代表了 AI Agent 从「对话式」向「行动式」演进的关键基础设施。
当 AI 能真正"看"懂网页、操作网页，以下场景将成为可能：
✅ 自动监测竞品动态，每日生成对比报告
✅ 代替你操作后台系统，完成重复性工作流程
✅ 从复杂动态页面中采集数据，不需要写一行爬虫代码
✅ 执行 UI 自动化测试，AI 自动理解页面变化
本期项目的独特价值在于：它不是又一个"浏览器自动化工具"，而是专为 AI Agent 设计的、生产级可靠的浏览器能力包。三层架构、四大模块、会话持久化、反检测——这些特性让它真正能在生产环境中稳定运行。
💬 你最想让 AI 帮你自动操作哪个网站？欢迎在评论区分享你的想法！
#Claude Code#浏览器自动化#AI Agent#MCP#browserbase#GitHub Trending
每日开源 · Github Daily
每天一个值得深读的开源项目 🚀
