Cursor MCP 简单使用教程及 Skills 使用指南

这篇文章再介绍一下 MCP 和 Skills 简单教程

先推荐第三方网站，方便大家快速获取 MCP 服务器资源和 Skills 模板：

一、MCP 第三方推荐网站

• Cursor Directory（Cursor 专属 MCP 资源库）：https://cursor.directory/mcp，收录2000+为 Cursor 定制的 MCP 服务器，分类清晰，提供预配置模板，无需复杂配置即可上手。

• Smithery（MCP 快速配置平台）：https://smithery.ai/，提供现成的 Cursor MCP 配置，复制即可使用，还清晰标注了各客户端的安装方式，对新手十分友好。

• MCP.so（MCP 资源聚合平台）：https://mcp.so/servers，收录近7000个 MCP 服务器，支持按场景筛选，可快速找到浏览器自动化、数据库连接等各类工具的 MCP 配置。

二、Skills 第三方推荐网站

• GitHub awesome-agent-skills 仓库：https://github.com/volta-gent/awesome-agent-skills，收录500+来自官方和社区的 Skills 模板，兼容 Cursor，涵盖编码、自动化等多种场景，可直接下载复用。

• GitHub cursor-skills 专题：https://github.com/topics/cursor-skills，汇聚各类 Cursor 专用 Skills 仓库，包含视频生成、代码审查、接口文档等特色 Skills，可按需查找和安装。

• Skills.sh（AI Agent 技能生态平台）：https://skills.sh，这是一个开放的跨平台 AI 技能市场，相当于 AI Agent 技能的“npm 仓库”，支持 Cursor 等18+种主流 AI 编程工具，收录海量优质 Skills，可通过一行命令一键安装，还提供技能排行榜，方便筛选高实用性技能，新手可快速复用各类场景的现成 Skills。

第一部分：Cursor MCP 简单使用教程

一、MCP 是什么

MCP 是 Cursor 的「外部工具连接协议」，简单说就是帮 Cursor 打通外部工具（比如浏览器、数据库、GitHub、Notion 等）的“桥梁”，让 Cursor 的 AI 能直接调用这些工具，不用切换窗口，实现“一站式开发”。

核心价值：不用反复在 Cursor 和其他工具间切换，AI 可直接操作外部工具（如用浏览器截图、查数据库、创建 GitHub PR），解决 AI “能力有限”的问题。

二、前置准备

1. 确保 Cursor 已更新至 最新版本；

2. 无需额外安装插件，Cursor 自带 MCP 功能，仅需配置对应外部工具的连接信息即可。

三、核心使用步骤

步骤 1：打开 MCP 配置界面

打开 Cursor → 点击界面右上角「齿轮图标」（设置）→ 选择「Tools & MCP」标签页 → 点击「Add new MCP server」（添加新的 MCP 服务器）。

步骤 2：选择 MCP 连接方式

MCP 有两种连接方式，新手优先选「本地连接」（简单无部署），需要跨设备使用选「远程连接」。

1. 本地连接（stdio 方式）：适用于本地工具（如 Playwright 浏览器自动化、本地数据库），只需填写「服务器名称」和「启动命令」。示例：配置 Playwright（浏览器工具），命令填写 npx -y @playwright/mcp@latest，保存即可（第一次运行会自动下载依赖）。

2. 远程连接（HTTP/SSE 方式）：适用于已部署好的远程工具（如 Slack、Notion 官方 MCP 服务），只需填写「服务器名称」和「远程 URL」，部分工具需添加请求头（如 API Key）。示例：连接 Slack MCP 服务，URL 填写 https://mcp.slack.com/mcp，保存即可。

步骤 3：验证 MCP 是否生效

1. 配置完成后，新建一个「Agent 对话」；

2. 输入自然语言指令，比如配置了 Playwright 就输入「用浏览器打开 https://example.com 并截图」；

3. 若 AI 步骤中出现「browser_navigate」「browser_take_screenshot」等工具调用，说明 MCP 已生效，等待执行完成即可。

四、新手常用 MCP 推荐

• Playwright（浏览器自动化）：命令 npx -y @playwright/mcp@latest，用途：截图、端到端测试、网页爬取；

• Firecrawl（网页爬取）：命令 npx -y firecrawl-mcp，用途：快速爬取网页内容，供 AI 分析。

五、常见问题

• MCP 不生效？ → 检查是否在「Agent 对话」中使用，普通聊天无法调用；

• 命令执行失败？ → 确保本地安装了 Node.js（npx 依赖），或对应工具的环境已配置；

第二部分：Cursor Skills 使用指南

一、Skills 是什么

Skills 是 Cursor 的「可复用 AI 能力模板」，相当于给 AI 预设了“固定工作流程”，比如“代码审查”“API 文档生成”“部署脚本生成”等，调用后 AI 会按预设流程执行，不用反复引导，节省时间。

核心价值：把重复的开发操作（如每次都要写 API 文档）做成“一键调用”，让 AI 按标准化流程工作，减少沟通成本。

二、前置准备

1. 确保 Cursor 已更新至 最新 

三、Skills 核心操作（3 步：添加 → 调用 → 管理）

第一步：添加 Skills（优先装 Claude 默认 Skills，再装前端专用）

推荐先装好 Claude 默认 Skills（Anthropic 官方出品，适配 Cursor 最新版本，稳定不踩坑），基础功能拉满后，再补充前端高频 Skills，不用额外折腾，一步到位提升编码效率。

方式 1：先装 Claude 默认 Skills（优先推荐，官方适配，必装基础）

Claude 默认 Skills 是 Anthropic 官方为 Cursor 适配的基础技能包，包含代码规范、基础调试、上下文优化等核心功能，是所有技能的基础，装完后 AI 处理代码的专业性会明显提升，且完全兼容最新 Nightly 版本。

1. 打开 Cursor 终端（Ctrl+` 或 Cmd+`），确保终端能正常联网；

2. 输入 Claude 默认 Skills 一键安装命令（复制粘贴即可，自动安装所有官方默认技能）：openskills install anthropics/skills；

3. 安装完成后，输入同步命令：openskills sync，将 Claude 默认 Skills 同步到项目的 AGENTS.md 文件；

4. 重启 Cursor，默认 Skills 自动生效，无需额外配置（包含前端常用的基础代码审查、语法纠错功能）。

补充：Claude 默认 Skills 核心功能（前端必用）：基础代码审查、语法错误修复、代码格式标准化，为后续安装前端专用 Skills 打基础。

方式 2：再装前端专用第三方 Skills（按需补充，提升前端开发效率）

装好 Claude 默认 Skills 后，补充前端高频 Skills，覆盖接口文档、React/Next.js 开发、UI 设计、调试等前端专属场景，无需自己编写，复制命令即可安装，适配前端日常开发需求。

推荐 4 个前端必装第三方 Skills（按高频程度排序，复制命令直接安装）：

1. API 文档生成（前端接口开发必备）：安装命令：openskills install cursor-labs/api-doc-generator，装完可一键生成接口文档，包含参数、响应示例、错误码，不用手动编写；

2. React/Next.js 最佳实践（前端框架必备）：安装命令：npx skills add vercel-labs/agent-skills，Vercel 官方出品，装完让 AI 写 React/Next.js 代码时，自动遵循最佳实践（如包体积优化、重渲染优化）；

3. 前端 UI 设计优化（提升页面质感）：安装命令：npx skills add anthropics/skills/frontend-design，解决 AI 生成 UI 太“AI 味”的问题，自动优化配色、字体、微交互，适配前端设计需求；

4. 前端系统化调试（快速排错）：安装命令：npx skills add obra/superpowers/systematic-debugging，让 AI 按标准化流程排查前端 bug（如 JS 报错、样式错乱），不用瞎猜试错[1]。

补充：所有前端 Skills 安装完成后，再次输入 openskills sync 同步，确保所有技能都能被 Cursor 识别，重启后即可正常使用。

方式 3：自定义 Skill（特殊需求专用，可选）

若 Claude 默认 Skills + 前端专用 Skills 仍无法满足个性化需求（如定制项目专属接口文档格式、适配特定前端框架规范），可手动编写，步骤如下：

1. 在你的项目根目录，新建一个文件，命名为 skill.md（或 SKILL.md，大小写均可）；

2. 按以下固定格式编写（复制模板修改即可）：--- name: api-doc-generator # Skill 名称（自定义，便于调用） description: 自动生成 REST API 文档（描述 Skill 用途） --- # API 文档生成 Skill ## 触发条件 - 用户说“生成 API 文档”“生成接口文档” - 对 Controller/Service 类进行文档化 ## 执行流程 1. 分析目标 API：请求方法、路径、参数、返回值 2. 按 Markdown 表格输出：接口名、URL、参数、响应示例、错误码 3. 字段名加中文注释 ## 示例输出 ### 用户登录接口 - 方法：POST - URL：/api/user/login - 参数： | 参数名 | 类型 | 必填 | 说明 | |-------|------|------|------| | username | string | 是 | 用户名 | | password | string | 是 | 密码（加密传输） |

3. 保存文件后，输入 openskills sync 同步，Cursor 会自动识别该 Skill，无需额外配置。

第二步：调用 Skills（3 种方式，按需选择）

1. 自动触发（推荐，最便捷）：在 Agent 对话中输入包含 Skill 关键词的指令，AI 会自动加载对应 Skill。示例：输入“帮我生成用户模块的 API 文档”，AI 会自动调用 api-doc-generator Skill，按预设流程生成文档。

2. 显式引用（精准调用）：用 @ 符号或 / 命令直接指定 Skill，避免歧义。示例：@api-doc-generator 生成登录接口文档，或输入 /review（调用代码审查 Skill）。

3. Composer 模式（智能匹配）：按 Ctrl+I（Windows/Linux）或 Cmd+I（Mac）打开 Composer，描述你的任务（如“审查当前选中的代码”），AI 会自动匹配并调用对应 Skill。

第三步：管理与调试 Skills

• 查看所有可用 Skill：在终端输入 openskills list；

• 同步 Skill 到项目：输入 openskills sync；

• 刷新 Skill 缓存：按 Ctrl+Shift+P → 输入“Reload Skills” → 回车即可；

• Skill 未触发？ → 检查 Skill 关键词是否匹配、skill.md 格式是否正确、是否已同步到 AGENTS.md。

四、前端常用 Skills 汇总（Claude 默认 + 前端专用）

整理好前端必装 Skills 清单，包含 Claude 默认基础技能和前端高频专用技能，方便快速核对安装情况：

• Claude 默认 Skills（必装基础）：基础代码审查、语法错误修复、代码格式标准化（通过 openskills install anthropics/skills 一键安装）；

• 前端专用 Skills（按需补充）：

  • API 文档生成（api-doc-generator）：快速生成接口文档，包含参数、响应示例；

  • React/Next.js 最佳实践（vercel-labs/agent-skills）：自动遵循前端框架最佳实践，优化代码性能；

  • 前端 UI 设计优化（frontend-design）：提升 AI 生成 UI 的设计感，适配前端视觉需求；

  • 系统化调试（systematic-debugging）：标准化排查前端 bug，节省排错时间；

  • 部署脚本生成（deploy）：输入/deploy staging，生成测试环境部署脚本；

  • 代码审查（review）：选中代码 → 输入 /review，AI 自动检查语法错误、代码规范。

总结

1. 最新版本中，MCP 核心是「连接外部工具」，已优化连接稳定性和安全性，修复了旧版本远程代码执行漏洞，新手从本地连接（如 Playwright）入手最易上手[1][5][7]；

2. 最新版本中，Skills 核心是「复用工作流程」，新增动态技能发现、模块化组合等功能，可与子智能体联动，把重复操作做成模板，一键调用，节省引导 AI 的时间[3][6][8]；

两者结合使用，能让 Cursor 从“代码编辑器”升级为“全流程 AI 开发助手”，大幅提升开发效率。