MCP 与 Skills

MCP 是什么

你用 AI 写代码的时候，有没有遇到过这样的情况：你想让 AI 帮你查一下 GitHub 上某个 Issue 的详情，或者查一下数据库里的数据，或者帮你看看某个网页长什么样——但它做不到，因为它没有这些工具的访问权限。

MCP（Model Context Protocol） 就是来解决这个问题的。

简单说，MCP 是 Anthropic 提出的一个标准协议，它让 AI 可以连接外部工具和数据源。有了 MCP，AI 就像装上了"手"和"眼睛"，不再是只会说话的嘴了。

打个比方：没有 MCP 的 AI 就像一个被关在房间里的人，只能靠你口述来了解外面的世界。有了 MCP，它打开了门，可以直接去操作 GitHub、查数据库、浏览网页、调用各种 API。

MCP 的架构很简单：

┌──────────────┐     MCP 协议     ┌──────────────────┐
│  AI 客户端    │  ←───────────→  │  MCP Server       │
│ (Cursor/     │                  │  (GitHub/DB/      │
│  Claude Code)│                  │   Browser/...)    │
└──────────────┘                  └──────────────────┘

AI 客户端和 MCP Server 之间通过标准协议通信，每个 MCP Server 负责对接一种外部服务。你只需要配置一次，AI 就能自动在需要时调用对应的工具。

在不同 IDE 里安装 MCP

Cursor 中安装 MCP

Cursor 提供了最简单的 MCP 安装方式：

打开 Cursor，进入 Settings → MCP
点击 Add new global MCP server 或 Add new project MCP server
会打开一个 .cursor/mcp.json 文件，把配置粘贴进去就行

或者直接在项目根目录创建 .cursor/mcp.json：

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxxxxxxxxx"
      }
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/dir"]
    }
  }
}

Cursor 的好处是有个开关，你可以随时启用或禁用某个 MCP Server。

Claude Code 中安装 MCP

Claude Code 用 .mcp.json 文件来配置，放在项目根目录：

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxxxxxxxxx"
      }
    }
  }
}

也可以用命令行快速添加：

# 添加一个 MCP Server
claude mcp add github -- npx -y @modelcontextprotocol/server-github

# 添加带环境变量的 MCP Server
claude mcp add github -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_xxx -- npx -y @modelcontextprotocol/server-github

# 查看已安装的 MCP
claude mcp list

# 移除一个 MCP
claude mcp remove github

配置的作用域

不管是 Cursor 还是 Claude Code，MCP 配置都有两个级别：

全局配置：所有项目都能用。适合通用工具，比如文件系统 MCP
项目配置：只在当前项目生效。适合项目特定的工具，比如某个数据库的 MCP

项目级配置放在项目根目录的 .mcp.json 或 .cursor/mcp.json 里，可以提交到 Git，团队成员 clone 下来就能直接用。

Top 10 实用 MCP 推荐

下面是我认为最实用的 10 个 MCP，几乎每个独立开发者都能用上：

1. GitHub MCP

用途： 直接操作 GitHub 仓库 安装： npx -y @modelcontextprotocol/server-github 需要： GitHub Personal Access Token

让你的 AI 能创建 Issue、查看 PR、搜索代码、管理 Release、查看 Actions 状态。以前你在 GitHub 网页上点来点去的操作，现在直接用自然语言就行：「帮我创建一个 Issue，标题是登录页样式错乱，加上 bug 标签」。

2. Filesystem MCP

用途： 读写本地文件 安装： npx -y @modelcontextprotocol/server-filesystem /your/project/path

虽然 AI 本身就能读代码文件，但这个 MCP 让它能做更复杂的操作：批量处理文件、在多个目录间操作、查看文件元信息。适合需要跨目录管理文件的场景。

3. PostgreSQL / MySQL MCP

用途： 直接查询数据库 安装： npx -y @modelcontextprotocol/server-postgres "postgresql://user:pass@localhost:5432/mydb"

让 AI 直接连上你的数据库，查询数据、分析表结构、帮你写 SQL。调试的时候特别好用：「帮我查一下最近 10 条用户注册记录」，不用再开一个数据库客户端。

4. Brave Search MCP

用途： 让 AI 搜索互联网 安装： npx -y @modelcontextprotocol/server-brave-search 需要： Brave Search API Key（免费额度够用）

AI 的知识有截止日期，但有了搜索 MCP，它可以实时查找最新信息。比如「帮我搜一下 Next.js 15 的 breaking changes」。

5. Browser MCP / Puppeteer

用途： 让 AI 操控浏览器 安装： npx -y @modelcontextprotocol/server-puppeteer

让 AI 能打开网页、截屏、读取页面内容、填表单。做前端开发时可以让它检查页面渲染效果，做爬虫时可以自动抓取数据。

6. Memory MCP

用途： 让 AI 记住跨会话的信息 安装： npx -y @modelcontextprotocol/server-memory

给 AI 一个持久化的"记忆"。你可以让它记住你的项目架构、技术偏好、常用命令等，不用每次都重新说一遍。

7. Linear MCP

用途： 操作 Linear 项目管理工具 安装： npx -y mcp-remote https://mcp.linear.app/sse 需要： Linear 账号授权

如果你用 Linear 管理项目，可以让 AI 直接创建任务、更新状态、添加评论。「帮我创建三个任务，关于用户系统的待办事项」。

8. Supabase MCP

用途： 操作 Supabase 后端服务 安装： npx -y @supabase/mcp-server-supabase 需要： Supabase Access Token

让 AI 能管理 Supabase 的数据库、Auth、存储等。如果你的项目用 Supabase 做后端，这个 MCP 能极大提升开发效率。

9. Notion MCP

用途： 读写 Notion 页面和数据库 安装： npx -y @anthropic/notion-mcp 需要： Notion Integration Token

让 AI 帮你整理 Notion 笔记、更新文档、查询数据库。「帮我在 Notion 的 TODO 页面添加三个任务」。

10. Figma MCP

用途： 读取 Figma 设计稿 安装： npx -y @anthropic/figma-mcp 需要： Figma Access Token

让 AI 直接看你的 Figma 设计稿，然后生成对应的前端代码。设计师和开发者之间的协作效率大幅提升。

Skills 是什么

如果说 MCP 是给 AI 装工具，那 Skills 就是教 AI 用工具的"技能书"。

一个 Skill 本质上是一段可复用的指令，告诉 AI 在特定场景下该怎么做。比如你可以定义一个"代码审查"Skill，里面写清楚：检查类型安全、检查错误处理、检查是否有硬编码的值、检查命名规范。以后每次让 AI 审查代码，它就按这个标准来，而不是每次都凭"感觉"。

Skills 的好处是一致性。你可能今天问 AI 一个问题，明天换一种问法，得到的答案完全不同。但如果你把最佳实践封装成 Skill，每次的结果就稳定多了。

Skills 的配置方式

不同的 IDE 有不同的 Skills 配置方式：

Claude Code：CLAUDE.md

在项目根目录创建 CLAUDE.md 文件，Claude Code 每次启动时都会自动读取：

# 项目规范

## 技术栈
- 框架：Next.js 14 App Router
- 样式：Tailwind CSS
- 数据库：Supabase（PostgreSQL）
- 部署：Vercel

## 代码规范
- 使用 TypeScript 严格模式
- 组件用函数式写法，不用 class
- 所有 API 请求都要有错误处理
- 不使用 any 类型
- 命名：组件用 PascalCase，工具函数用 camelCase

## 项目结构
- `/app` — 页面路由
- `/components` — 可复用组件
- `/lib` — 工具函数和配置
- `/types` — TypeScript 类型定义

你还可以在子目录放 CLAUDE.md，该目录下的规则会覆盖上级。比如 /app/api 目录下放一个 CLAUDE.md，专门写 API 开发的规范。

Cursor：.cursorrules

在项目根目录创建 .cursorrules 文件，作用类似：

你是一个 Next.js 全栈开发专家。

代码规范：
1. 使用 TypeScript，开启严格模式
2. React 组件使用函数式写法
3. 使用 Tailwind CSS，不写自定义 CSS
4. API 路由统一返回 JSON，格式为 { data, error }
5. 数据库操作使用 Supabase Client，不用原生 SQL
6. 所有用户输入都要做验证（用 Zod）

项目结构：
- 页面在 /app 目录
- 共享组件在 /components
- 工具函数在 /lib

VS Code + Continue：.continue/config.json

如果你用 VS Code 的 Continue 插件，也有类似的系统提示配置。

创建自定义 Skills

除了基础的项目规范，你还可以创建更专业的 Skills 来应对特定场景。

Skill 示例 1：API 开发

# API 开发规范

## 所有 API 端点必须：
1. 使用 Zod 验证请求参数
2. 检查用户认证状态
3. 返回统一格式：{ success: boolean, data?: T, error?: string }
4. 设置正确的 HTTP 状态码
5. 添加适当的缓存头

## 错误处理模板：
try {
  // 业务逻辑
} catch (error) {
  if (error instanceof ZodError) {
    return Response.json({ success: false, error: '参数错误' }, { status: 400 })
  }
  console.error(error)
  return Response.json({ success: false, error: '服务器内部错误' }, { status: 500 })
}

Skill 示例 2：UI 组件开发

# UI 组件规范

每个组件必须：
1. 有 TypeScript Props 接口定义
2. 使用 forwardRef 支持 ref 传递
3. 支持 className 自定义样式
4. 加载状态用 skeleton 或 spinner
5. 空状态要有友好的提示
6. 移动端和桌面端都要测试

组件模板：
interface XxxProps {
  className?: string
  // 其他 props
}

export function Xxx({ className, ...props }: XxxProps) {
  return (
    <div className={cn("base-styles", className)} {...props}>
      {/* 内容 */}
    </div>
  )
}

Skill 示例 3：Git 提交规范

# Git 提交规范

commit message 格式：
<type>(<scope>): <description>

type 取值：
- feat: 新功能
- fix: 修复 bug
- refactor: 重构
- docs: 文档
- style: 样式调整
- test: 测试
- chore: 构建/工具

示例：
feat(auth): 添加微信登录功能
fix(api): 修复用户列表分页问题
refactor(utils): 重构日期格式化函数

真实工作流示例

下面展示一个完整的开发工作流，看看 MCP 和 Skills 是怎么协同工作的：

场景：开发一个新功能

你：帮我查看 GitHub 上 issue #42 的详情

AI：（调用 GitHub MCP）这个 issue 描述是：用户反馈登录页面在移动端样式错乱。
    标签是 bug，优先级是 high。

你：帮我定位问题，然后修复

AI：（读取项目代码，按照 CLAUDE.md 的规范）
    找到问题了，登录页面的输入框在小屏设备上没有做响应式处理。
    （生成修复代码，风格完全符合你定义的规范）

你：写个测试，然后提交代码

AI：（按照 .cursorrules 里的测试规范写测试）
    测试写好了，全部通过。
    （按照 Git 提交规范）commit message: fix(auth): 修复登录页移动端样式错乱

你：创建一个 PR，关联 issue #42

AI：（调用 GitHub MCP）PR 已创建，标题是 "修复登录页移动端样式"，
    关联了 issue #42，等待 review。

整个流程下来，你几乎没有离开对话窗口。MCP 提供了操作外部工具的能力，Skills 确保了代码质量和规范的一致性。

场景：调研 + 开发

你：帮我搜一下现在主流的 rate limiting 方案有哪些

AI：（调用 Brave Search MCP）主要有这几种方案：
    1. 令牌桶算法...
    2. 滑动窗口...
    3. Upstash Rate Limit...

你：我们项目用的 Supabase，帮我用 Upstash Redis 实现一个 rate limiting 中间件

AI：（按照 CLAUDE.md 的技术栈和代码规范生成代码）
    这是基于 Upstash Redis 的 rate limiting 中间件...
    （代码风格、错误处理、类型定义全部符合项目规范）

MCP 生态现状与展望

MCP 生态还处于早期，但发展非常快。目前：

官方维护的 MCP Server 已经覆盖了主流工具（GitHub、数据库、浏览器、文件系统等）
社区贡献的 MCP 在快速增长，涵盖 Figma、Notion、Linear、Supabase 等
企业级 MCP 开始出现，一些 SaaS 产品开始提供官方的 MCP 接入

未来趋势：

更多 SaaS 产品会提供 MCP：以后你用的每个工具可能都有对应的 MCP
MCP 会内置到产品里：不只是开发工具，普通产品也会通过 MCP 让用户用自然语言操作
Skills 生态会更成熟：可能出现 Skills 市场，大家分享和复用最佳实践

建议你现在的做法：

先装两三个最常用的 MCP（GitHub、文件系统、搜索），体验一下
把项目的 CLAUDE.md 或 .cursorrules 写好，这是最低成本但收益最高的事
随着项目发展，逐步添加更多 MCP 和自定义 Skill

早用早受益，MCP 和 Skills 会成为你 AI 开发工作流的核心组成部分。

MCP 是什么​

在不同 IDE 里安装 MCP​

Cursor 中安装 MCP​

Claude Code 中安装 MCP​

配置的作用域​

Top 10 实用 MCP 推荐​

1. GitHub MCP​

2. Filesystem MCP​

3. PostgreSQL / MySQL MCP​

4. Brave Search MCP​

5. Browser MCP / Puppeteer​

6. Memory MCP​

7. Linear MCP​

8. Supabase MCP​

9. Notion MCP​

10. Figma MCP​

Skills 是什么​

Skills 的配置方式​

Claude Code：CLAUDE.md​

Cursor：.cursorrules​

VS Code + Continue：.continue/config.json​

创建自定义 Skills​

Skill 示例 1：API 开发​

Skill 示例 2：UI 组件开发​

Skill 示例 3：Git 提交规范​

真实工作流示例​

场景：开发一个新功能​

场景：调研 + 开发​

MCP 生态现状与展望​