AI 学习指南

主题

MCP 与 Skills：让 AI 工具真正"连接万物" ​

AI 学习系列第三篇 · 进阶教程 前置阅读：如何学习 AI 基础 → Vibe Coding 实战教程 → 本篇

写在前面 ​

前两篇教程带你了解了 AI 基础概念和 Vibe Coding 实战。到这一步，你已经会用 Trae、Cursor、Claude Code 这些工具来写代码了。

但你有没有遇到过这样的场景？

  • 你想让 AI 帮你操作浏览器测试页面效果，但它只能写代码，不能"看到"页面
  • 你想让 AI 读取数据库里的数据做分析，但它接触不到你的数据库
  • 你想让 AI 按照团队的设计规范（配色、字体、组件风格）来生成 UI，但每次都要重复解释一遍

核心矛盾：AI 模型很聪明，但它被"关在笼子里"——它看不到你的文件系统、连不上你的数据库、操作不了你的浏览器。

MCP 和 Skills 就是解决这个问题的。MCP 给 AI 打开通往外部世界的大门，Skills 教 AI 怎么优雅地走过去。

这篇教程会带你理解这两个概念，并学会在 Trae 和 Claude Code 中实际使用它们。

第一章 · 理解 MCP：AI 的"USB-C 接口" ​

1.1 没有 MCP 之前的世界 ​

想象一下 2024 年之前的情况：

  • 你想让 Claude 读取 GitHub 上的 Issue？需要专门写一个 GitHub 集成
  • 你想让 GPT 查询数据库？需要另一个数据库集成
  • 你想让 AI 操作浏览器？又需要一个浏览器自动化集成

每个 AI 工具都要为每个外部系统单独开发集成。假设有 10 个 AI 工具和 20 个外部系统，理论上需要 200 个不同的集成方案。这就是 M×N 问题——集成数量随工具和系统数量的乘积增长，维护成本爆炸。

1.2 MCP 是什么 ​

MCP（Model Context Protocol，模型上下文协议） 是 Anthropic 在 2024 年 11 月发布的开放标准协议。它的作用很简单：定义一套统一的规则，让任何 AI 工具都能用同样的方式连接任何外部系统。

有了 MCP，上面的 M×N 问题变成了 M+N 问题——每个 AI 工具只需实现一次 MCP 客户端，每个外部系统只需提供一个 MCP Server，它们就能互相通信。

1.3 USB-C 类比 ​

这就像 USB-C 对硬件世界的意义：

维度USB-CMCP
解决的问题每种设备一种充电线每种 AI 工具一种集成方式
做法统一物理接口 + 通信协议统一数据协议 + 调用规范
结果一根线充所有设备一个 Server 接所有 AI 工具
受益者用户不用带一堆线开发者不用写一堆集成

1.4 MCP 的架构 ​

MCP 的架构分三层：

┌─────────────────────────────────────────────────┐
│  Host（宿主应用）                                  │
│  Claude Code / Trae / Cursor / Windsurf 等       │
│                                                   │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐       │
│  │ MCP      │  │ MCP      │  │ MCP      │       │
│  │ Client 1 │  │ Client 2 │  │ Client 3 │       │
│  └────┬─────┘  └────┬─────┘  └────┬─────┘       │
└───────┼──────────────┼──────────────┼─────────────┘
        │              │              │
   ┌────▼─────┐  ┌────▼─────┐  ┌────▼─────┐
   │ MCP      │  │ MCP      │  │ MCP      │
   │ Server   │  │ Server   │  │ Server   │
   │ GitHub   │  │ Playwright│ │ Database │
   └──────────┘  └──────────┘  └──────────┘
  • Host：你正在使用的 AI 工具（Trae、Claude Code 等）
  • Client：Host 内部负责和 Server 通信的组件（你不需要管它，工具自动处理）
  • Server：外部系统的"翻译官"，把 GitHub、浏览器、数据库等系统的能力，翻译成 AI 能理解的格式

你作为用户，只需要关心两件事：装哪些 Server，怎么配置它们。

第二章 · MCP 的三大核心能力 ​

MCP Server 向 AI 暴露三种能力：Tools、Resources 和 Prompts。

2.1 Tools（工具）—— AI 主动调用的"手" ​

Tools 是 AI 可以主动执行的操作。比如：

  • 执行一条终端命令
  • 点击浏览器上的按钮
  • 向 GitHub 创建一个 Issue
  • 往数据库插入一条记录

关键词是**"执行"**——Tools 会改变外部世界的状态。AI 模型自主决定什么时候调用哪个 Tool。

2.2 Resources（资源）—— AI 被动读取的"眼睛" ​

Resources 是 AI 可以读取的数据。比如：

  • 读取文件系统中的代码文件
  • 查看数据库中的表结构和数据
  • 获取 GitHub 上某个 PR 的内容

关键词是**"读取"**——Resources 不改变任何东西，只提供信息。它们通过 URI（类似网址）来标识。

2.3 Prompts（提示模板）—— 预设的"操作手册" ​

Prompts 是 MCP Server 提供的预设指令模板。比如：

  • 一个代码审查模板，定义了审查的步骤和关注点
  • 一个 SQL 查询模板，规定了安全查询的最佳实践

Prompts 相对少用，但在需要标准化流程时很有价值。

三者对比 ​

维度ToolsResourcesPrompts
谁控制AI 模型自主调用应用程序控制Server 建议，用户选用
性质主动执行（有副作用）被动读取（只读）预设模板
类比手——做事情眼睛——看东西操作手册——怎么做
举例创建文件、点击按钮读取代码、查看数据代码审查流程模板

理解要点：大多数时候你用到的是 Tools 和 Resources。比如 Playwright MCP Server 同时提供了 Tools（点击、输入、截图）和 Resources（页面快照），让 AI 既能"看到"网页，又能"操作"网页。

第三章 · MCP Server 生态：已经有什么可以用？ ​

MCP 发布一年多以来，社区已经建立了丰富的 Server 生态。以下是最常用的几个：

3.1 热门 MCP Server ​

Server开发者功能典型场景
PlaywrightMicrosoft浏览器自动化：导航、点击、截图、表单填写测试 Web 应用、预览页面效果
GitHub官方管理仓库、Issue、PR、工作流自动化项目管理
Filesystem官方读写文件和目录操作本地文件系统
SQLite/PostgreSQL官方数据库查询和操作数据分析、数据管理
MarkitdownMicrosoftPDF/Word/Excel/图片 → Markdown 转换处理非代码文档
Chrome DevTools社区浏览器开发者工具自动化前端调试、性能分析
Context7Upstash获取最新的库/框架文档确保 AI 用的是最新 API
MiniMaxMiniMax图片理解、搜索多模态任务

3.2 去哪里找更多 Server ​

  • 官方注册表：mcpservers.org — 目前收录 89+ 个 Server
  • GitHub 搜索：搜 mcp-server 关键词
  • VS Code MCP 市场：VS Code 内置的 MCP 注册表

3.3 选择 Server 的原则 ​

不要贪多。根据你当前的工作需要来选择：

  • 前端开发者：Playwright（测试）+ Context7（文档）基本够用
  • 全栈开发者：加上 GitHub + 数据库 Server
  • 内容创作者：Markitdown + Filesystem

注意：每个 MCP Server 都是一个运行在你机器上的进程，会消耗资源。装太多不用的 Server 反而会拖慢 AI 工具的启动速度。

第四章 · 在 Trae 和 Claude Code 中使用 MCP ​

4.1 在 Trae 中配置 MCP Server ​

Trae 提供了图形化的 MCP 管理界面，对新手非常友好。

操作步骤：

  1. 打开 Trae，点击右侧 AI Chat 面板的设置图标
  2. 找到 MCP 选项卡
  3. 点击 "添加 MCP Server"
  4. 你可以通过三种方式添加：
    • 从市场安装：Trae 内置了常用 Server 的市场，一键安装
    • 手动配置 JSON：粘贴 Server 的配置 JSON
    • 导入 URL：输入远程 Server 的地址

以添加 Playwright 为例：

在 Trae 的 MCP 配置中添加以下 JSON：

json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

添加后，你就可以在 Chat 中让 AI 操作浏览器了：

帮我打开 http://localhost:3000，截图看看首页效果

AI 会自动调用 Playwright 的 Tools 来导航、截图，并把结果展示给你。

4.2 在 Claude Code 中配置 MCP Server ​

Claude Code 使用命令行来管理 MCP Server，更适合习惯终端操作的开发者。

基本命令：

bash
# 添加 Playwright Server
claude mcp add playwright -- npx @playwright/mcp@latest

# 添加 GitHub Server（需要 token）
claude mcp add github -s user -- env GITHUB_TOKEN=你的token npx -y @modelcontextprotocol/server-github

# 添加文件系统 Server
claude mcp add filesystem -s user -- npx -y @modelcontextprotocol/server-filesystem ~/Projects

# 查看已安装的 Server
claude mcp list

# 查看某个 Server 的详情
claude mcp get playwright

# 移除 Server
claude mcp remove playwright

作用域选项（-s 参数）：

作用域说明适用场景
project只在当前项目生效（默认）项目特定的工具
user对你所有项目生效通用工具如 GitHub

添加 Server 后，重启 Claude Code 即可使用。Claude 会自动发现新的 Tools 和 Resources。

4.3 Trae vs Claude Code：MCP 使用体验对比 ​

维度TraeClaude Code
配置方式GUI 面板 + 市场一键安装命令行 claude mcp add
学习成本低，可视化操作中，需要熟悉命令行
灵活性中等高，支持精细的作用域控制
适合谁新手、偏好 GUI 的开发者熟悉终端的开发者
远程 Server支持支持

实用建议：如果你刚接触 MCP，建议先在 Trae 中体验（门槛低、有市场），理解了 MCP 的工作方式后，再在 Claude Code 中使用命令行管理（更灵活、可脚本化）。

4.4 远程 MCP Server ​

2025 年起，MCP 支持了远程 Server——不需要在你本地安装任何东西，直接连接云端的 MCP 服务。

bash
# Claude Code 中添加远程 Server
claude mcp add --transport sse remote-tool https://vendor.com/mcp-endpoint

远程 Server 的优势：

  • 不占用本地资源
  • 无需安装 Node.js 或其他依赖
  • Server 提供方负责维护和更新
  • 支持 OAuth 自动认证

这让 MCP 的使用门槛进一步降低——未来你可能只需要"订阅"一个 Server，就能在任何 AI 工具中使用。

第五章 · Skills：教 AI "怎么做事" ​

5.1 有了工具，还缺什么？ ​

MCP 给了 AI 一双"手"和一双"眼睛"，但光有工具还不够。

比如你给一个人一套专业的厨具（MCP Tools），但如果他不知道菜谱（怎么切、怎么炒、什么时候放盐），结果可能不太好。

Skills 就是"菜谱"——它教 AI 在特定场景下应该怎么做事，遵循什么规范，按什么步骤来。

5.2 Skills 的本质 ​

Skills 是一个结构化的指令包，通常包含：

my-skill/
├── SKILL.md          # 核心指令文件（AI 阅读的"操作手册"）
├── scripts/          # 可选的脚本文件（自动化执行的代码）
└── reference/        # 可选的参考资料（模板、文档、示例）

SKILL.md 是核心，它用 Markdown 写成，包含：

  • 触发条件：什么时候应该使用这个 Skill
  • 执行步骤：AI 应该按什么顺序做什么
  • 规范约束：遵循什么标准、避免什么错误
  • 示例：具体的输入输出示例

5.3 Skills 与 MCP 的关系 ​

一句话总结：

MCP = 能力（能做什么），Skills = 知识（该怎么做）

它们经常配合使用：

场景MCP 提供Skills 指导
前端测试Playwright 操作浏览器的能力测试流程、检查清单、断言策略
代码审查GitHub 读取 PR 的能力审查标准、关注点、反馈格式
UI 设计文件读写能力设计规范、配色方案、组件约定

5.4 实际例子 ​

例子 1：ui-ux-pro-max — 前端设计智能 Skill ​

这是一个强大的 UI/UX 设计 Skill，内置了：

  • 50 种设计风格：极简主义、玻璃拟态、新拟态、粗野主义、Bento Grid 等
  • 21 种配色方案：可直接通过名字引用
  • 50 种字体搭配：标题 + 正文的最佳组合
  • 20 种图表类型：数据可视化支持
  • 9 种前端技术栈：React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui

怎么用？在 Claude Code 中直接说：

用玻璃拟态风格，给我设计一个仪表盘页面，
技术栈用 React + Tailwind + shadcn/ui，
配色用深色模式，要有数据卡片和折线图

AI 会根据 Skill 中预设的设计规范，生成符合玻璃拟态风格的完整组件代码——不是随便写的，而是遵循了该风格的具体参数（模糊度、透明度、边框、阴影等）。

例子 2：前端设计规范 Skill ​

你可以为自己的团队创建一个设计规范 Skill：

markdown
---
name: team-design-system
description: 团队前端设计规范，确保所有 AI 生成的 UI 风格统一
---

## 配色方案
- 主色：#2563EB（蓝色）
- 辅助色：#7C3AED（紫色）
- 成功：#059669 / 警告：#D97706 / 错误：#DC2626
- 背景：#F8FAFC / 文字：#1E293B

## 字体
- 标题：Inter Bold
- 正文：Inter Regular
- 代码：JetBrains Mono

## 组件规范
- 圆角统一 8px
- 间距基数 4px（即 4/8/12/16/20/24...）
- 阴影使用 shadow-sm，不用 shadow-lg
- 按钮高度：小 32px / 中 40px / 大 48px

有了这个 Skill，每次让 AI 生成 UI 组件时，它都会自动遵循这些规范，不需要你每次重复说明。

例子 3：代码审查 + Playwright = 自动化测试 ​

当 Skills 遇上 MCP，可以实现更强大的自动化工作流：

  • Skills 定义了测试流程："先检查页面加载 → 测试核心交互 → 检查响应式 → 截图记录"
  • Playwright MCP 提供了操作浏览器的能力：导航、点击、输入、截图

组合起来，你只需说"测试一下登录页面"，AI 就会按照预设的流程，用 Playwright 自动完成整套测试。

5.5 Agent Skills 开放标准 ​

2025 年 12 月，Agent Skills 发布了开放标准，这意味着：

  • Skills 不再是某个工具的专属功能
  • 同一个 Skill 可以在 Claude Code、Cursor 等不同工具中使用
  • 社区可以共享和复用 Skills

这和 MCP 的思路一脉相承——标准化带来生态繁荣。

第六章 · 实际应用场景 ​

场景 1：用 Skill 快速设计前端界面 ​

问题：你要做一个 SaaS 产品的 Dashboard，但不确定用什么风格。

做法：

我要做一个项目管理工具的 Dashboard。
要求：
- 风格：极简 + Bento Grid 布局
- 技术栈：Vue 3 + Tailwind
- 包含：项目概览卡片、任务进度图表、团队成员列表、最近活动时间线
- 配色参考 Linear 的风格

先给我看设计方案，确认后再实现。

如果安装了 ui-ux-pro-max Skill，AI 会先给出完整的设计方案（布局、配色、字体、组件结构），确认后再生成代码。不用你懂设计，AI 会根据 Skill 中的专业知识来做决策。

场景 2：用 MCP + Playwright 测试 Web 应用 ​

问题：你用 Vibe Coding 做好了一个页面，想快速验证效果。

做法：

启动开发服务器后，帮我测试 http://localhost:5173：
1. 截图首页整体效果
2. 测试导航栏的每个链接是否正常跳转
3. 在移动端视口（375px）下再截一次图
4. 检查有没有控制台报错

Playwright MCP 会真正打开浏览器、点击链接、调整窗口大小、截图——你可以直观地看到 AI "看到"了什么。

场景 3：用 MCP + GitHub 管理项目 ​

问题：你维护一个开源项目，Issue 太多来不及处理。

做法：

帮我看看 my-project 仓库最近一周的新 Issue：
1. 分类整理（bug / feature request / question）
2. 对 bug 类 Issue 检查是否有重复
3. 给 feature request 打上优先级标签

GitHub MCP Server 让 AI 可以直接读取和操作你的仓库，完成这些原本需要你手动做的项目管理工作。

场景 4：用 Skills 统一团队 AI 行为 ​

问题：团队里三个人用 AI 生成的代码风格各不相同。

做法：

  1. 创建一个团队 Skill，定义代码风格、命名规范、组件结构
  2. 把 Skill 放在项目仓库中（.claude/skills/ 目录）
  3. 所有成员使用 AI 工具时，会自动加载这个 Skill

这就像给团队的每个 AI 助手装上了同一套"大脑芯片"——无论谁在用，生成的代码都遵循同样的规范。

第七章 · 展望与学习建议 ​

7.1 MCP 生态的发展趋势 ​

  • Docker 集成（2025年10月）：Docker Desktop 已支持一键配置 MCP Server，企业级部署更简单
  • OAuth 认证（2025年6月）：不再需要手动管理 API Key，连接第三方服务更安全
  • 远程 Server 普及：越来越多的服务商直接提供 MCP 端点，无需本地安装
  • 跨工具互通：Agent Skills 开放标准让知识和工具能在不同 AI 工具间共享

7.2 学习路径建议 ​

第 1 步：先用现成的
├── 在 Trae 或 Claude Code 中装一个 Playwright Server
├── 体验 AI 操作浏览器的感觉
└── 理解"MCP 就是给 AI 接上外部工具"

第 2 步：用好 Skills
├── 在 Claude Code 中体验 ui-ux-pro-max 等内置 Skill
├── 尝试为自己的项目写一个简单的设计规范 Skill
└── 理解"Skills 就是教 AI 怎么做事"

第 3 步：深入理解协议
├── 阅读 MCP 官方文档（modelcontextprotocol.io）
├── 了解 Tools / Resources / Prompts 的区别
└── 尝试用 TypeScript 写一个最简单的 MCP Server

第 4 步：组合应用
├── 把 MCP Server + Skills 组合起来解决实际问题
├── 为团队建立标准化的 AI 工作流
└── 探索社区共享的 Skills 和 Server

7.3 推荐资源 ​

  • MCP 官方文档：modelcontextprotocol.io — 协议规范和教程
  • MCP Server 注册表：mcpservers.org — 发现和安装 Server
  • Claude Code 文档：docs.claude.com — Skills 和 MCP 配置指南
  • Trae 官方文档：trae.ai/docs — Trae 中的 MCP 使用指南

总结：一张图理解 MCP + Skills ​

你（开发者）
  │
  ├── 用 AI 工具（Trae / Claude Code）
  │     │
  │     ├── MCP Server（能力层）
  │     │     ├── Playwright → 操作浏览器
  │     │     ├── GitHub → 管理代码仓库
  │     │     ├── Database → 查询数据
  │     │     └── Filesystem → 读写文件
  │     │
  │     └── Skills（知识层）
  │           ├── ui-ux-pro-max → 设计专业 UI
  │           ├── team-design-system → 团队风格统一
  │           ├── code-review → 标准化审查流程
  │           └── testing-workflow → 自动化测试流程
  │
  └── 结果：AI 不仅聪明，而且能"看到"、"触摸"、"遵守规范"

MCP 让 AI 有了手和眼睛，Skills 给了它专业知识和行为规范。两者结合，AI 从一个只能聊天的助手，变成了一个真正能干活的队友。