Skills vs MCP - AI 扩展机制对比

> 两种让 AI 获得新能力的方式：提示词驱动 vs 工具调用协议

## 一、背景：为什么要扩展 AI 能力？

大语言模型（LLM）本身只能处理文本，无法：
- 操作浏览器
- 读写文件
- 调用 API
- 访问数据库

为了让 AI 能够完成这些任务，我们需要**扩展机制**。目前主要有两种方案：
1. **Skills** - 通过提示词教 AI 使用工具
2. **MCP** - 通过协议让 AI 直接调用工具

## 二、核心概念

### 2.1 什么是 Skills？

Skills 是**提示词驱动**的扩展方式。核心思想是：

```
写一份"操作手册" → AI 阅读学习 → AI 生成命令 → 执行命令
```

**例子**：让 AI 学会使用浏览器自动化工具

```markdown

# 浏览器自动化 Skill

## 命令说明
- `browser open <url>` - 打开网页
- `browser click @e1` - 点击元素
- `browser fill @e1 "文本"` - 填充输入框

## 工作流程
1. 打开页面后，必须先获取快照
2. 使用快照返回的 @refs 操作元素
3. 页面变化后需要重新获取快照
```

AI 阅读这份文档后，就能生成正确的命令：

```bash
browser open https://example.com && browser snapshot && browser click @e1
```

### 2.2 什么是 MCP？

MCP（Model Context Protocol）是**函数调用驱动**的扩展方式。核心思想是：

```
定义工具接口 → AI 直接调用 → 返回结构化结果
```

**例子**：浏览器自动化 MCP 工具

```json
{
  "name": "click",
  "description": "点击页面元素",
  "inputSchema": {
    "type": "object",
    "properties": {
      "uid": { "type": "string", "description": "元素唯一标识" }
    },
    "required": ["uid"]
  }
}
```

AI 直接调用工具函数：

```javascript
mcp__chrome-devtools__click({ uid: "e1" })
```

## 三、架构对比

### 3.1 调用链路

```
┌─────────────────────────────────────────────────────────────────┐
│                          Skills                                  │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│   ┌─────────┐      ┌─────────────┐      ┌──────────────────┐    │
│   │   LLM   │ ──▶  │  SKILL.md   │ ──▶  │   Bash 工具      │    │
│   │         │      │  (提示词)    │      │                  │    │
│   └─────────┘      └─────────────┘      └────────┬─────────┘    │
│                                                  │              │
│                                                  ▼              │
│                                           ┌─────────────┐       │
│                                           │  CLI 工具   │       │
│                                           │ (如 agent-  │       │
│                                           │  browser)   │       │
│                                           └─────────────┘       │
│                                                                  │
│   特点：AI 需要学会"说"工具的语言                                │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│                           MCP                                    │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│   ┌─────────┐      ┌─────────────────────────────────────┐      │
│   │   LLM   │ ──▶  │  MCP Server (JSON Schema 定义)      │      │
│   │         │      │  - click(uid: string)               │      │
│   │         │      │  - fill(uid: string, value: string) │      │
│   └─────────┘      └─────────────────────────────────────┘      │
│        │                                              │          │
│        │ 直接函数调用                                  │          │
│        ▼                                              ▼          │
│   ┌─────────────┐                             ┌─────────────┐   │
│   │  类型校验   │                             │  实际执行   │   │
│   └─────────────┘                             └─────────────┘   │
│                                                                  │
│   特点：AI 直接调用工具，通过协议通信                            │
└─────────────────────────────────────────────────────────────────┘
```

### 3.2 详细对比表

| 维度 | Skills | MCP |
|------|--------|-----|
| **核心机制** | 提示词注入 | 工具函数调用 |
| **定义方式** | Markdown 文件 | JSON Schema + 代码 |
| **AI 如何学习** | 阅读文档理解 | 读取 Schema 定义 |
| **调用路径** | LLM → 提示词 → Bash → CLI | LLM → Tool Call → MCP Server |
| **参数验证** | 无（靠 AI 理解） | 有（JSON Schema 校验） |
| **返回格式** | 自由文本 | 结构化 JSON |
| **错误处理** | 运行时发现 | 调用前校验 + 运行时 |

## 四、实际案例：浏览器自动化

### 4.1 agent-browser（Skills 方式）

**定义文件**：

```markdown
# agent-browser Skill

## 常用命令
- `agent-browser open <url>` - 打开网页
- `agent-browser snapshot -i` - 获取元素引用
- `agent-browser click @e1` - 点击元素
- `agent-browser fill @e1 "文本"` - 填充输入框

## 完整流程示例
agent-browser open https://example.com && \
agent-browser snapshot -i && \
agent-browser fill @e1 "用户名" && \
agent-browser click @e2
```

**AI 执行**：

```bash
# AI 生成命令，通过 Bash 工具执行
agent-browser open https://example.com
agent-browser snapshot -i
# 解析输出，获取 @e1, @e2...
agent-browser fill @e1 "test@example.com"
agent-browser click @e2
```

### 4.2 MCP chrome-devtools（MCP 方式）

**工具定义**：

```json
{
  "name": "click",
  "inputSchema": {
    "type": "object",
    "properties": {
      "uid": { "type": "string" },
      "dblClick": { "type": "boolean", "default": false }
    },
    "required": ["uid"]
  }
}
```

**AI 执行**：

```javascript
// AI 直接调用，参数会被校验
mcp__chrome-devtools__navigate_page({ type: "url", url: "https://example.com" })
mcp__chrome-devtools__take_snapshot()
// 从快照获取 uid
mcp__chrome-devtools__fill({ uid: "e1", value: "test@example.com" })
mcp__chrome-devtools__click({ uid: "e2" })
```

### 4.3 两者对比

| 功能 | agent-browser (Skills) | chrome-devtools (MCP) |
|------|------------------------|----------------------|
| 使用方式 | CLI 命令 | 函数调用 |
| 参数错误 | 运行时报错 | 调用前校验 |
| 跨平台 | 任何 LLM | 仅支持 MCP 的客户端 |
| 状态管理 | 内置会话持久化 | 无 |
| 移动端 | 支持 iOS 模拟器 | 支持设备模拟 |

## 五、优缺点分析

### 5.1 Skills 优缺点

**优点**：
- ✅ **零代码**：只需写 Markdown 文档
- ✅ **可移植**：可在任何 LLM 中使用（ChatGPT、Claude、本地模型）
- ✅ **灵活**：可以包含复杂的上下文和示例
- ✅ **易于分享**：就是一个文本文件
- ✅ **利用现有 CLI**：任何命令行工具都可以变成 Skill

**缺点**：
- ❌ **依赖 AI 理解**：可能理解错误
- ❌ **无类型安全**：参数错误只能在运行时发现
- ❌ **无标准化**：每个 Skill 格式可能不同
- ❌ **调试困难**：问题可能在提示词、AI 理解、CLI 执行任何一环

### 5.2 MCP 优缺点

**优点**：
- ✅ **类型安全**：参数有 Schema 校验
- ✅ **标准化**：统一的协议规范
- ✅ **可靠性高**：函数调用不会"理解错误"
- ✅ **结构化输出**：JSON 格式，易于程序处理
- ✅ **发现机制**：客户端可以动态获取工具列表

**缺点**：
- ❌ **需要开发**：要写代码实现 MCP Server
- ❌ **平台绑定**：只能在支持 MCP 的客户端使用
- ❌ **部署复杂**：需要运行 Server 进程
- ❌ **不够灵活**：修改需要改代码

## 六、选择建议

### 6.1 适合用 Skills 的场景

- 快速原型，不需要写代码
- 需要跨多个 LLM 平台使用
- 包装已有的 CLI 工具
- 内容是"知识"而非"操作"（如代码规范、最佳实践）
- 个人使用，快速迭代

### 6.2 适合用 MCP 的场景

- 需要高可靠性的生产环境
- 复杂的参数验证逻辑
- 需要访问本地资源（文件、数据库）
- 需要结构化输出供后续处理
- 团队协作，需要标准化接口

## 七、类比理解

| 类比维度 | Skills | MCP |
|---------|--------|-----|
| **编程语言** | 动态类型 | 静态类型 |
| **接口定义** | 文档注释 | TypeScript 接口 |
| **调用方式** | `eval(command)` | `func(args)` |
| **错误发现** | 运行时 | 编译时 + 运行时 |
| **学习曲线** | 低（写文档即可） | 中（需要写代码） |

## 八、总结

| 机制 | 本质 | 一句话描述 |
|------|------|-----------|
| **Skills** | 提示词工程 | 给 AI 一本操作手册，让它学会使用工具 |
| **MCP** | 函数调用协议 | 给 AI 一组 API，让它直接调用 |

两者**殊途同归**——都是扩展 AI 能力：
- Skills 是"教 AI 说工具的语言"
- MCP 是"让 AI 直接调用工具"

选择哪种方式，取决于你的具体需求：快速迭代选 Skills，生产环境选 MCP。

---

## 参考资料

- [Claude Code Skills 文档](https://docs.anthropic.com/claude-code/skills)
- [MCP 协议规范](https://modelcontextprotocol.io/)
- [agent-browser GitHub](https://github.com/JoshuaKGoldberg/agent-browser)

#AI #LLM #Skills #MCP #扩展机制

Navigation Menu

Skills vs MCP - AI 扩展机制对比 #1

一、背景：为什么要扩展 AI 能力？

二、核心概念

2.1 什么是 Skills？

2.2 什么是 MCP？

三、架构对比

3.1 调用链路

3.2 详细对比表

四、实际案例：浏览器自动化

4.1 agent-browser（Skills 方式）

4.2 MCP chrome-devtools（MCP 方式）

4.3 两者对比

五、优缺点分析

5.1 Skills 优缺点

5.2 MCP 优缺点

六、选择建议

6.1 适合用 Skills 的场景

6.2 适合用 MCP 的场景

七、类比理解

八、总结

参考资料

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

维度	Skills	MCP
核心机制	提示词注入	工具函数调用
定义方式	Markdown 文件	JSON Schema + 代码
AI 如何学习	阅读文档理解	读取 Schema 定义
调用路径	LLM → 提示词 → Bash → CLI	LLM → Tool Call → MCP Server
参数验证	无（靠 AI 理解）	有（JSON Schema 校验）
返回格式	自由文本	结构化 JSON
错误处理	运行时发现	调用前校验 + 运行时

功能	agent-browser (Skills)	chrome-devtools (MCP)
使用方式	CLI 命令	函数调用
参数错误	运行时报错	调用前校验
跨平台	任何 LLM	仅支持 MCP 的客户端
状态管理	内置会话持久化	无
移动端	支持 iOS 模拟器	支持设备模拟

类比维度	Skills	MCP
编程语言	动态类型	静态类型
接口定义	文档注释	TypeScript 接口
调用方式	`eval(command)`	`func(args)`
错误发现	运行时	编译时 + 运行时
学习曲线	低（写文档即可）	中（需要写代码）

机制	本质	一句话描述
Skills	提示词工程	给 AI 一本操作手册，让它学会使用工具
MCP	函数调用协议	给 AI 一组 API，让它直接调用

Skills vs MCP - AI 扩展机制对比 #1

Description

一、背景：为什么要扩展 AI 能力？

二、核心概念

2.1 什么是 Skills？

2.2 什么是 MCP？

三、架构对比

3.1 调用链路

3.2 详细对比表

四、实际案例：浏览器自动化

4.1 agent-browser（Skills 方式）

4.2 MCP chrome-devtools（MCP 方式）

4.3 两者对比

五、优缺点分析

5.1 Skills 优缺点

5.2 MCP 优缺点

六、选择建议

6.1 适合用 Skills 的场景

6.2 适合用 MCP 的场景

七、类比理解

八、总结

参考资料

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions