从18,000个Token到300个：我们如何打造出超越MCP的轻量级浏览器技能

Claude & Jozo · 8 min read · 2026/01/22

智能体技能浏览器自动化MCPClaude Code开发者工具

从18,000个Token到300个：我们如何打造轻量级浏览器技能

2025年12月。TeamDay的智能体运行时需要浏览器自动化能力。

显而易见的选择：MCP服务器。Playwright MCP（约13,700个token），Chrome DevTools MCP（约18,000个token）。两者都经过实战检验，文档完善，广泛采用。

后来我们读了Mario Zechner的文章。然后我们走了一条不同的路。

没人谈论的Token税

当你将MCP服务器连接到Claude时，所有工具描述会立即加载进上下文。Chrome DevTools MCP仅26个工具定义就消耗了18,000个token——占Claude上下文窗口的9%，而你还什么事都没做。

Playwright MCP稍好一些，13,700个token（21个工具），但仍占用了6.8%的配额。

问题会叠加：

每增加一个MCP服务器就会再添加数千个token
不论是否使用，工具描述始终保持加载状态
复杂工具需要详细文档，因此代价高昂
工具过多让智能体难以选择

数字触目惊心。 连接3-4个MCP服务器，你就在工具定义上烧掉了3-4万token。这些本可用于实际工作的上下文就这样白白浪费了。

如果根本不需要MCP呢？

Mario Zechner提出了这个问题并给出了答案：使用Puppeteer Core的简单bash脚本，文档只需约225个token。

他的洞见： 现代大语言模型本身就擅长编写代码。与其提供26个专用工具，不如给它们几个基础原语，让它们自由组合解决方案。

核心优势：

Token效率：约300个token vs 约18,000个token
真正的可组合性：输出到文件，可与其他工具管道连接
易于扩展：几分钟内添加新功能
配置文件支持：使用已有登录状态连接正在运行的浏览器
渐进式加载：技能仅在需要时才加载

我们采用这种方式，为Claude Code构建了 /browser ——一个轻量级技能。

我们构建的成果：7个脚本，无限可能

核心原语

# 一次启动浏览器（带Chrome配置文件，用于已认证的会话）
bun browser-start.ts --profile

# 导航到任意页面
bun browser-navigate.ts https://example.com

# 在页面上下文中执行JavaScript
bun browser-eval.ts 'document.title'

# 快速截图保存到文件
bun browser-screenshot.ts page.webp

# 交互式元素选择器（用户点击，智能体获取选择器）
bun browser-pick.ts --multi

# 提取仅限HTTP的Cookie
bun browser-cookies.ts --domain=example.com

# 清理关闭
bun browser-stop.ts

就是这些。 七个简单脚本。每个只做一件事，但做得很好。智能体将它们组合起来处理复杂工作流。

为何有效

连接到正在运行的浏览器，而非启动新实例：

即时启动（无浏览器启动开销）
保留认证状态（Google、GitHub、LinkedIn等）
用户可以交互（点击元素、手动登录）
快速迭代（命令之间无需清理）

渐进式加载：

技能元数据：约50个token（“你有一个浏览器技能”）
技能文档：约300个token（按需加载）
总开销：比Chrome DevTools MCP少60倍

真正的可组合性：

# 提取数据到文件
bun browser-eval.ts 'data' > output.json

# 截图并处理
bun browser-screenshot.ts page.webp && magick page.webp page.jpg

# 链式导航与提取
bun browser-navigate.ts https://site.com && bun browser-eval.ts 'scrape()'

真实考验：548位斯洛伐克专业人士

Leaf NGO需要在海外工作的斯洛伐克资深专业人士，用于一项导师计划。这些数据存在Clay.com中，受认证保护并有API限制。

挑战：

必须通过Clay.com认证
API未公开文档（需从网络流量逆向工程）
每次请求最多预览100条结果
需要按国家分段以绕过限制
提取500+条包含LinkedIn URL、职位、公司、地点的档案

传统方式： 构建完整爬虫，管理会话，处理分页，导出数据。耗费数小时。

使用 /browser 技能： 从开始到导出548位专业人士，仅用了45分钟。

具体过程

1. 带配置文件启动浏览器（保留Clay登录状态）：

bun browser-start.ts --profile
bun browser-navigate.ts https://app.clay.com

2. 通过检查网络流量发现API：

bun browser-eval.ts 'performance.getEntriesByType("resource").map(r => r.name)'

发现：https://api.clay.com/v3/actions/run-enrichment

3. 提取认证Cookie：

bun browser-cookies.ts --domain=clay.com

4. 构建按国家分段的提取脚本：

智能体编写了一个专用脚本（clay-slovak-experts.ts），功能包括：

使用浏览器中的已认证会话
搜索在斯洛伐克境外的斯洛伐克语使用者
按资历级别过滤（高级、总监、VP、C级）
按国家分段以绕过每次100条结果的预览限制
覆盖11个国家：美国、英国、德国、奥地利、捷克、荷兰、瑞士、爱尔兰、加拿大、澳大利亚、法国
处理分页和速率限制
按LinkedIn URL去重

5. 运行提取：

bun clay-slovak-experts.ts --count=500 --seniority=senior,director,vp

输出：

🇸🇰 Slovak Experts Extractor for Leaf NGO
=========================================
Target: 500 senior Slovak professionals working abroad
Seniority levels: senior, director, vp

🔐 Getting authentication cookies...
📊 Checking total available records...
   Found 1,247 Slovak experts abroad with selected seniority

📥 Extracting 500 records in 5 batches...
   Batch 1/5 (offset 0)... ✅ Got 100 records
   ⏳ Waiting 3s before next batch...
   Batch 2/5 (offset 100)... ✅ Got 100 records
   ...
   Batch 5/5 (offset 400)... ✅ Got 100 records

✅ Extracted 500 Slovak experts
   After deduplication: 548 unique profiles
💾 Saved to: slovak-experts.json
📄 CSV saved to: slovak-experts.csv

📈 Summary:
   Top locations:
   - United States: 198
   - United Kingdom: 142
   - Germany: 87
   - Netherlands: 34
   - Switzerland: 28
   - Austria: 21
   - Czech Republic: 18
   - Canada: 11
   - Ireland: 5
   - Australia: 3
   - France: 1

总耗时： 45分钟（包括API发现、脚本编写、数据提取）。

威力所在： 智能体将浏览器自动化用作可组合的基础能力。导航、检查、认证、提取——每一步都清晰简洁。

为何重要

复合叠加的Token效率

方案	Token开销	占上下文比例
Chrome DevTools MCP	约18,000个token	9.0%
Playwright MCP	约13,700个token	6.8%
浏览器技能	约300个token	0.15%

节省：上下文消耗减少60倍。

那就是17,700个token，可以用于真正的工作——文档、代码、推理。

简单带来速度

MCP方式：

每次会话启动新浏览器
等待初始化
通过MCP协议运行工具
解析结构化响应

技能方式：

连接到运行中的浏览器（即时）
直接执行脚本（无协议开销）
输出到文件（与标准工具组合）
命令之间保持浏览器存活

实际差异： 45分钟提取548位专业人士，而非数小时的自定义集成。

设计即可扩展

需要新功能？写一个50行的脚本。

示例：交互式元素选择器（15分钟内构建完成）：

// browser-pick.ts
// 用户在浏览器中点击元素，智能体获取选择器

import puppeteer from 'puppeteer-core';

async function pick() {
    const browser = await puppeteer.connect({...});
    const page = await browser.pages()[0];

    // 注入点击监听器
    await page.evaluate(() => {
        document.addEventListener('click', (e) => {
            const el = e.target;
            // 返回选择器、文本、属性等
            console.log({
                tag: el.tagName,
                selector: getSelector(el),
                text: el.textContent,
                ...
            });
        });
    });
}

试试把这个做成MCP工具，再试试为你的特定用例修改它。

配置文件支持改变一切

使用你的Chrome配置文件：

已登录Google、GitHub、LinkedIn、Clay等
无需凭据管理
无需OAuth流程
无需会话处理
直接导航即可工作

对于Clay提取： 我们没有编写任何认证代码。浏览器已有会话，智能体直接使用即可。

架构：技能 > 工具

Anthropic在他们的智能体技能演讲中阐述了这一点：

“代码不仅是一个使用场景，更是通向数字世界的通用接口。”

技能是包含程序性知识的有组织的文件夹。 渐进式加载意味着你可以给智能体数百个技能，而不会淹没上下文。

MCP提供连接性。 技能提供专业能力。

浏览器技能证明了这一点：

元数据：“你有浏览器自动化能力”
文档：6,131个字符（加载时约300个token）
脚本：仅在需要时执行，不加载到上下文
可组合：输出文件，与其他技能配合工作

何时使用MCP vs 技能

使用MCP服务器的情况：

需要实时数据流（数据库、API）
外部服务提供官方MCP集成
工具状态必须跨请求持久化
多个智能体需要共享访问

使用技能的情况：

想要最小的token开销
与bash/文件的可组合性很重要
需要频繁自定义行为
迭代速度 > 标准化协议

两者结合使用： MCP负责连接（数据库、Slack、Notion），技能负责专业能力（浏览器自动化、数据处理、工作流）。

亲自尝试

浏览器技能在TeamDay中已可使用。可以让智能体：

"导航到example.com并提取所有文章标题"
"分别在亮色和暗色模式下截取我们主页的截图"
"找到此页面上搜索按钮的选择器"
"提取Hacker News上得分超过100的前50篇帖子"

智能体将自动使用浏览器技能——连接、导航、提取、输出结果。

Token开销： 加载时约300个token。比Chrome DevTools MCP少60倍。

核心洞见

现代大语言模型的编码能力已足够强大，简单脚本加文档的方式胜过复杂工具。

你不需要26个专用浏览器工具。你只需要7个基础原语，以及一个知道如何组合它们的智能体。

结果： 上下文开销更少。执行更快。定制更易。实际工作在几分钟而非数小时内完成。

为Leaf NGO提取548位斯洛伐克专业人士。 45分钟内完成，Token开销仅300个。

这就是轻量级技能的威力。

基于Mario Zechner的洞见。为TeamDay智能体构建。已在真实NGO工作中投入生产使用。