Bright Data Web MCP + Claude Skills 集成指南

在本文中，你将学习：

Claude 全新的 Skills（技能）机制是什么，以及它如何工作。
为什么它不会取代 MCP 工具，而是能与 MCP 完美协作。
如何将 Claude Desktop、API 与 Claude Code 与 Bright Data 的 Web MCP 和 Skills 集成，以获得更好的 AI 体验。

让我们开始吧！

Claude 的 Skills 是什么？

2025 年 10 月 16 日，Anthropic 宣布在 Claude 中引入 Agent Skills（代理技能）。

在 Claude 的语境中，“Skills（技能）”是模块化文件夹，包含用于增强模型在特定任务上表现的说明、脚本与资源。更具体地说，每个 Skill 就像一个小型知识包，教会 Claude 如何执行专门化的工作流（例如数据分析、文档创建、应用品牌规范等等）。

Claude 不再只依赖通用推理，而是在需要时动态加载相关 Skills——让回答既快速又聚焦。

从技术角度来看，每个 Skill 都是一个目录，至少包含一个 SKILL.md 文件。该文件是 Skill 的核心，必须以 YAML front matter 开头，用于定义必要的元数据（如名称与描述）。此外，文件还可以包含额外元数据、任务说明、参考文件、可执行脚本或工具等。

目前主要有两类 Skills：

Anthropic Skills：由 Anthropic 预置，用于常见任务（例如创建 PowerPoint、创建 GIF 等）。
自定义 Skills：由用户或组织创建，用于沉淀自身工作流与最佳实践。

Skills 具备可组合性与可移植性。这意味着它们可以组合使用、在 Claude 应用与 API 间复用，并且仅在需要时加载必要组件。

为什么要将 MCP 与 Claude Agent Skills 结合使用

此时你可能会认为 Skills 只是 MCP 服务器暴露出来的工具的新版本，但其实并非如此……

MCP 将 Claude（或任何其他 AI 模型）连接到外部系统，例如 API、数据库或云应用。它充当桥梁，使模型可以获取实时数据或触发外部操作。

例如，Bright Data 的 Web MCP 服务器为 AI 模型提供了超过 60 种用于 Web 数据获取与集成的工具。这些能力由对 Bright Data 服务器的 API 调用驱动，后者提供一系列云端解决方案。

不过，MCP 技术的主要限制在于它非常消耗 token。它需要关于可用端点、参数与响应的详细上下文。这也是为什么 Bright Data 为其 Web MCP 提供两种模式：

免费层模式：仅包含少量简单工具，减少 token 使用，因为 Claude 无需处理庞大的可用工具列表。了解更多：Web MCP 免费层。
Pro 模式：提供对全部 60+ 工具的完整访问，但会消耗更多 token，因为 AI 需要理解并在全部可选项中进行推理。

另一方面，Skills 是自包含的知识模块。本质上，它们是包含说明、脚本与资源的文件夹，用来教会 Claude 某些内容。因此，与 MCP 不同，Skills 不依赖外部连接；它们只是为 Claude 提供可按需加载的流程性知识（procedural know-how）。

关键结论是：Claude Skills 与 Web MCP 工具服务于不同但互补的目的。一起使用时，它们协作性极强。MCP 提供外部数据与工具访问能力，而 Skills 则可以为 AI 提供“如何使用这些工具”的专业方法论。

简而言之，Skills 不会取代 MCP 工具。恰恰相反，它能让 Claude 更聪明地使用 MCP 工具。

如何在 Claude Desktop 中构建可访问 Web MCP 与 Skills 的 AI Agent

在本教程中，你将学习如何为 Claude 模型配备来自 Bright Data Web MCP 的工具和 Skills。具体来说，你将通过一个“新闻 + 视频检索”的场景，看到这个增强型 AI Agent 的实际效果。

注意：以下只是一个示例。你可以通过修改最终 prompt，轻松将其适配到其他用例。此外，同样的流程也适用于 Claude 的 Web 版本（也称 Claude.ai）。你唯一需要改变的是 Web MCP 集成方式：必须通过远程版本的 Web MCP 来实现。

请按以下步骤操作！

前置条件

为便于跟随本文操作，请确保你具备：

已在本地安装 Claude Desktop。
Claude 账号处于以下任一套餐：Pro、Max、Team 或 Enterprise。
一个 Bright Data 账号，并且已准备好 API key。

在本地安装 Claude Desktop 后，点击你的账号图标并确认你在所需套餐之一：
检查是否处于正确的 Claude 套餐
接下来，我们假设你的 Claude Desktop 已经集成了 Bright Data 的 Web MCP。详细步骤请参考官方 Claude Desktop 集成指南。

我们也假设 Bright Data Web MCP 集成已启用（免费层模式即可）：
Claude Desktop 中的 Bright Data Web MCP 集成
请记住：Bright Data 的 Web MCP 充当一个Claude MCP 服务器。

很好！你现在拥有测试 Claude 中 MCP + Skills 集成所需的一切。

步骤 #1：在 Claude 中启用 Agent Skills

在撰写本文时，Agent Skills 仍处于 Beta 阶段，默认关闭。因此，要使用它，你必须先启用。

操作方法：点击左下角用户资料，然后选择“Settings”（设置）：
选择“Settings”选项

在“Settings”中打开“Capabilities”（能力）面板，在“Skills”部分点击“Turn on”（开启）按钮：
点击“Turn on”按钮

这将自动勾选“Code execution and file creation”（代码执行与文件创建）选项，并允许你激活预配置的 Claude Skills，如下所示：
可用 Skills 说明
此后你就可以通过开关来启用单个 Skill。

太棒了！Skills 现在已经可以在你的 Claude 集成中使用。

步骤 #2：添加自定义 Skills

默认情况下，Claude 为你提供了一组 Skills。如果你想知道这些 Skills 从哪里来，可以查看官方 anthropics/Skills 仓库。

总结一下，默认 Skills 包括：

algorithmic-art：使用 p5.js 结合种子随机（seeded randomness）、流场（flow fields）与粒子系统创建生成式艺术。
artifacts-builder：使用 React、Tailwind CSS 与 shadcn/ui 组件构建复杂的 Claude.ai HTML artifacts。
brand-guidelines：将 Anthropic 官方品牌色与字体排版应用到 artifacts 中。
canvas-design：使用设计理念在 .png 与 .pdf 格式中设计精美视觉作品。
internal-comms：撰写内部沟通内容，如状态报告、简报与 FAQ。
mcp-server：创建高质量 MCP 服务器的指南，用于集成外部 API 与服务。
slack-gif-creator：创建针对 Slack 体积限制优化的动态图 GIF。
Skill-creator：创建有效 Skills 的指南，用于扩展 Claude 的能力。
template-Skill：用于创建新 Skills 的基础模板。
theme-factory：用 10 个预设专业主题为 artifacts 设置样式，或即时生成自定义主题。
webapp-testing：使用 Playwright 测试本地 Web 应用，用于 UI 验证与调试。

现在，假设你想为 Claude 集成添加新的 Skills。这正是 Skills 的特别之处：你可以轻松上传更多 Skills 并让 AI 模型使用它们。要发现有趣的 Skills，可以查看ComposioHQ/awesome-claude Skills 仓库。同时，也可以看看Bright Data 的 awesome Claude skills。

例如，考虑“Video Downloader”（视频下载器）Skill，它允许 Claude 模型从 YouTube 等平台下载视频：
“Video Downloader” Claude Skill
克隆 ComposioHQ/awesome-claude-Skills 仓库，进入 “Video Downloader”（即 video-downloader/）Skill 文件夹，并将其打包成 ZIP：

git clone https://github.com/ComposioHQ/awesome-claude-Skills/
cd awesome-claude-Skills/video-downloader
zip -r video-downloader-Skill.zip .

注意：你也可以不使用命令行完成这一步。目标是创建一个包含 awesome-claude-Skills/video-downloader 文件夹内 SKILL.md 的 .zip 文件。这是 Claude 导入 Skill 所需的格式。

然后，在 Claude 的 “Skills” 部分点击 “Upload Skill”（上传 Skill），会出现如下弹窗：
“Upload Skill” 弹窗
现在，将你的 .zip 文件拖拽到上传区域，或点击区域手动上传。你会收到 “Skill uploaded successfully”（Skill 上传成功）的通知。

最后，Skill 会自动导入，出现在 Skills 列表中，并默认启用：
注意 “video-downloader” Skill
你可以重复该流程添加任意其他自定义 Skills。做得很好！

步骤 #3：测试 Web MCP + Claude Skills 集成

你的 Claude Desktop 现在已经同时可以访问 Bright Data 的 Web MCP 工具以及 Video Downloader Skill。接下来，通过一个需要同时使用两者能力的 prompt 来测试这套配置。

例如，假设你想以结构化 Markdown 格式抓取一篇新闻文章的内容，同时寻找并下载与该文章最相关的 YouTube 视频。这是一个很好的“新闻下载器 Agent”用例，可用于离线分析或归档。

下面是一个示例 prompt：

Scrape the content from the following news article:
"https://blog.google/products/google-tv/gemini-google-tv/"

Return the content in clean Markdown format. Then, search for a related video on YouTube from the official Google channel and download it as an MP4 file in 1080p resolution.

在 Claude Desktop 中打开一个新对话，粘贴并执行该 prompt：
Claude Desktop 中任务执行
上面的 GIF 为简洁起见进行了加速与剪辑，但实际发生了以下过程：

Claude 将 Bright Data Web MCP 的 scrape_as_markdown 工具识别为抓取新闻文章内容的正确工具。
它请求你的许可来执行该工具。
在获得许可后，该工具实时抓取文章并以 Markdown 格式返回内容。
Claude 将 Web MCP 的 search_engine 工具识别为搜索相关 YouTube 视频的合适工具。
它请求你的许可来执行搜索查询。
该工具返回与查询对应的 SERP（通过 Bright Data 的 SERP API），其中包含最相关视频的 URL——YouTube 视频“Introducing Gemini for Google TV”。
Claude 使用 video-downloader Skill 将视频以 1080p 下载为本地文件。
该 Skill 执行必要逻辑，底层使用 yt-dlp。
视频被下载并保存到输出文件夹，同时还保存包含文章内容的 Markdown 文件。
你会看到最终结果：Markdown 文件与下载的视频。

在 Claude Desktop 中最终应得到如下摘要：
AI 输出结果摘要
完美！结果看起来很有希望。现在是时候检查输出，确保 AI 达成了预期目标！

步骤 #4：分析输出

你的输出文件夹（默认是你机器上的 “Downloads/” 文件夹）现在应包含两个文件：

your-output-folder
  ├── gemini_google_tv_article.md
  └── introducing-gemini-for-google-tv_1080p.mp4

打开 gemini_google_tv_article.md 文件，你会看到类似如下内容：
在 Visual Studio Code 中查看 gemini_google_tv_article.md

这就是作为 prompt 输入的文章 “Gemini comes to Google TV” 的 Markdown 版本：
源文章
如你所见，Bright Data Web MCP 服务器让 Claude 能连接到目标页面、绕过反爬机制、访问内容，并将其干净地提取为 Markdown。

接着，打开 introducing-gemini-for-google-tv_1080p.mp4 文件：
用 VLC 打开 introducing-gemini-for-google-tv_1080p.mp4

这就是从 YouTube 直接下载的“Introducing Gemini for Google TV”视频：

完成！输出证明 Claude Desktop 成功同时利用 Bright Data Web MCP 工具与视频下载 Skill 完成了任务。

这种双重集成让 AI Agents 同时拥有两方面优势：

MCP 工具：连接第三方 API 与自动化系统。
Skills：增强 Claude 的知识，并提供完成特定任务的流程性指引。

就是这样！Bright Data Web MCP + Claude Skills 的集成运行得非常完美。

请记住，我们展示的只是一个简单示例。欢迎你尝试更多将 Web MCP 工具与 Claude Skills 结合的 prompt，以覆盖更多 Agentic AI 用例。

如何在 Claude API 中将 Skills 与 Web MCP 一起使用

请按以下说明学习如何在 Claude API 中同时使用 Bright Data Web MCP 与 Skills。

在该示例中，我们将构建一个工作流：使用 Web MCP 工具从 Amazon 抓取商品信息，并用 Anthropic 官方 pptx Skill 基于这些数据生成演示文稿！

前置条件

要执行下方代码，你需要：

一个 Anthropic API key。
Claude Pro、Max、Team 或 Enterprise 账号。
一个 Bright Data 账号，并准备好 API key。
本地安装 Python 3.8。
一个已安装 Anthropic Python SDK 的项目（即运行 pip install anthropic）。

在 Claude API 中使用 Web MCP + Skills

请记住，本地 STDIO MCP 服务器无法直接连接到 Claude API。你必须使用通过 HTTP 暴露的服务器。这不是问题，因为 Bright Data Web MCP 也提供远程服务器版本。

另外请注意，当 Skills 创建文档（Excel、PowerPoint、PDF、Word 等）时，会在响应中返回 file_id 属性。要下载这些文件，你必须使用 Files API。

具体流程如下：

Skills 在代码执行期间创建文件。
响应中会为每个创建的文件包含一个 file_id。
使用 Files API 下载实际文件内容。
将文件保存到本地或按需处理。

有关在 Claude API 中使用 Skills 的更多信息（包括所需前置条件、请求头及其他细节），请参考官方文档。

在该示例中，以下代码为 Claude API 提供远程 Web MCP 访问与 Skills，以完成目标任务：

# pip install anthropic
import anthropic

# Replace with your actual API keys
ANTHROPIC_API_KEY = "<YOUR_ANTHROPIC_API_KEY>"
BRIGHT_DATA_API_KEY = "<YOUR_BRIGHT_DATA_API_KEY>"

# To extract file IDs created by the pptx Skill
def extract_file_ids(response):
    file_ids = []
    for item in response.content:
        if item.type == "bash_code_execution_tool_result":
            content_item = item.content
            if content_item.type == "bash_code_execution_result":
                for file in content_item.content:
                    if hasattr(file, "file_id"):
                        file_ids.append(file.file_id)
    return file_ids

# Initialize the Anthropic client to connect to Claude API
client = anthropic.Anthropic(
    api_key=ANTHROPIC_API_KEY
)

# Define the Bright Data Web MCP remote connection configs
web_mcp_server = {
    "type": "url",
    "url": f"https://mcp.brightdata.com/sse?token={BRIGHT_DATA_API_KEY}&pro=1", # Pro Mode is optional (&pro=1)
    "name": "bright-data-web-mcp"
}

# To set up the official "pptx" Skill
container = {
    "skills": [
        {
            "type": "anthropic",
            "skill_id": "pptx",
            "version": "latest"
        }
    ]
}

# Describe the prompt that will use both Web MCP tools and Skills
prompt = """
Scrape the product details from this Amazon page:
"https://www.amazon.com/Medicube-Zero-Pore-Pads-Dual-Textured/dp/B09V7Z4TJG/"
Use the retrieved data to generate a PowerPoint file to present the product.
"""

# Send the request to Claude API with MCP integration
response = client.beta.messages.create(
    model="claude-sonnet-4-5-20250929",
    max_tokens=4096,
    messages=[{
        "role": "user",
        "content": prompt
    }],
    mcp_servers=[web_mcp_server],
    container=container,
    betas=["code-execution-2025-08-25", "skills-2025-10-02", "mcp-client-2025-04-04"], # Required for Skills execution and MCP integration
    tools=[{"type": "code_execution_20250825", "name": "code_execution"}] # Required for Skills execution
)

# Get the files IDs
file_ids = extract_file_ids(response)

# Download the presentation files using Files API
for file_id in file_ids:
    file_metadata = client.beta.files.retrieve_metadata(
        file_id=file_id,
        betas=["files-api-2025-04-14"]
    )
    file_content = client.beta.files.download(
        file_id=file_id,
        betas=["files-api-2025-04-14"]
    )

    # Save the presentation to disk
    file_content.write_to_file(file_metadata.filename)
    print(f"Downloaded presentation: {file_metadata.filename}")

分析输出

上述脚本的结果将是一个 PowerPoint 演示文稿。在 Excel 中打开它或将其上传到 Drive（如下图），你会看到类似这样的结果：
生成的演示文稿
如你所见，输出非常惊艳。不过，Skills 的执行（尤其是生成文件时）在 prompt 执行过程中可能需要多个步骤，这会消耗大量 token，从而导致成本上升。在我们的案例中，仅这一条 API 调用就花费了 $17.83，所以请谨慎使用 Skills！

生成的演示文稿包含你在目标 Amazon 商品页上看到的准确商品数据：

如果你曾经尝试抓取 Amazon，就会知道它因反爬挑战（如Amazon CAPTCHA）而极其复杂。多亏 Bright Data Web MCP 的 web_data_amazon_product 工具，这不再是问题！

在幕后，该工具会连接到Bright Data 的 Amazon Scraper，为商品页返回 JSON 结构化数据。随后 Claude 使用 pptx Skill 将这些数据转化为视觉效果优秀的演示文稿。

任务完成！

如何在 Claude Code 中使用 Web MCP 与 Skills

请按以下说明学习如何在 Claude Code 中将 Skills 与 Bright Data 的 Web MCP 工具一起使用。

前置条件

为便于跟随本节教程，请确保你具备：

本地安装 Claude Code v1.0。
Claude 账号处于 Pro、Max、Team 或 Enterprise 套餐。
一个 Bright Data 账号以及有效 API key。

本教程假设你已经在 Claude Code 中完成了Bright Data Web MCP 的配置。

更多指导请参考我们的《将 Claude Code 与 Bright Data Web MCP 集成》指南。唯一需要的更改是：通过你的 Claude 账号进行认证，而不是使用 API key。

步骤 #1：添加一些 Skills

如文档所述，Claude Code 会自动在两个位置查找 Skills（本质上就是文件夹）：

全局：~/.claude/skills/（Windows：C:\Users\<YourUsername>\.claude\skills\）。
本地（项目级）：项目目录下的 .claude/skills/。

如果你希望 Claude Code 项目可访问默认 Skills，可以将它们克隆到项目的本地 .claude/skills/ 目录：

git clone https://github.com/anthropics/skills.git .claude/skills/

克隆完成后，从项目目录启动 Claude Code 以加载 Skills。很好！

步骤 #2：验证 Skills 集成

在撰写本文时，Claude Code 没有提供专门命令来列出可用 Skills。要检查加载了哪些 Skills，你可以直接写一个 prompt，例如：

List all available Skills

结果应类似如下：
Claude Code 返回的 Skills
可以看出，Claude Code 已成功从 .claude/skills 文件夹加载所有默认 Anthropic Skills。太好了！

步骤 #3：在 Claude Code 中使用 Skills + Web MCP 工具

现在，你在 Claude Code 中输入任何 prompt 时，它都将同时拥有 Web MCP 工具与 Agent Skills 的访问能力。例如，尝试如下 prompt：

Retrieve the Markdown version of the following article:
"https://www.businessinsider.com/rise-of-vibe-working-coding-microsoft-openai-2025-10"
Read the article to understand the concept of "vibe coding." Based on your understanding, create a short, lightweight meme GIF suitable for sharing on our developer Slack channel.

在 Claude Code 中运行后，你将得到：
Claude Code 中任务执行
注意，Claude Code 使用 scrape_as_markdown 工具提取文章内容、理解内容，然后应用 slack-gif-creator Skill 来生成 GIF。