Claude Code 不是终点：32 个 Skills + 8 个 MCP，让 AI 真正成为你的开发搭档

Claude Code 很强，但「裸用」始终差一口气——界面丑、上下文丢、工具链残缺。真正把它变成「开发搭档」的，是 Skills 和 MCP 这两套扩展机制。

本文基于 Claude Code 官方生态，系统梳理 32 个经过社区验证的精选 Skills，以及 8 个实测可用的 MCP 服务器。所有安装命令均附 npm 真实包名和版本，拒绝空谈，拿来即用。

一、Skills vs MCP：不是替代，是分工

很多人在这两个概念上绕不清。一句话讲透：

Skills 是封装好的提示词和标准化工作流，让 Claude Code 更懂需求、更聪明，核心是让 AI「知道怎么干」。MCP（Model Context Protocol）是更底层的工具协议，让 Claude 真正能访问本地文件、浏览器、数据库——核心是让 AI「真的能去干」。

两者搭配使用，才能把 Claude Code 的能力拉满。

二、Skills 系统：Claude Code 的「应用商店」

2.1 安装与管理

Skills 通过官方 CLI 管理，类似 npm 包安装：

# 安装技能（-g 全局安装，Claude Code 才能识别）
npx skills add <owner/repo@skill> -y -g

# 搜索社区技能
npx skills find <关键词>

# 查看已安装
npx skills list -g

# 检查更新
npx skills check

# 更新全部
npx skills update

官方技能市场：https://skills.sh，有完整的安装量排行榜，参考价值很高。

2.2 精选 Skills 分类

入口必装

find-skills — 技能市场搜索器，帮你快速定位想要的技能。

npx skills add find-skills -y -g

安装后相当于给 Claude Code 装了一个内置「应用商店」，后续找技能再也不用翻网页了。

前端开发类

# 核心 3 件套
npx skills add frontend-design -y -g
npx skills add canvas-design -y -g
npx skills add shadcn/ui@shadcn -y -g

文档与办公类

架构与代码质量类

记忆与上下文管理类

这三个记忆类技能配合使用，能彻底解决 Claude Code /clear 后上下文全丢的问题。

开发提效类

2.3 分场景一键安装脚本

新手入门包（10 个必装）：

#!/bin/bash
npx skills add find-skills -y -g
npx skills add frontend-design -y -g
npx skills add technical-writer -y -g
npx skills add docx -y -g
npx skills add pptx -y -g
npx skills add pdf -y -g
npx skills add obra/superpowers@requesting-code-review -y -g
npx skills add obra/superpowers@brainstorming -y -g
npx skills add obra/superpowers@systematic-debugging -y -g
echo "✅ 新手入门包安装完成！"

前端开发者专属包：

#!/bin/bash
npx skills add find-skills -y -g
npx skills add frontend-design -y -g
npx skills add canvas-design -y -g
npx skills add shadcn/ui@shadcn -y -g
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -y -g
npx skills add webapp-testing -y -g
npx skills add obra/superpowers@systematic-debugging -y -g
npx skills add technical-writer -y -g
echo "✅ 前端专属包安装完成！"

三、MCP 服务器：让 AI 真正「能干」

MCP（Model Context Protocol）是一种让 AI 与外部工具交互的协议标准，通过 JSON 配置文件管理，安装在 ~/.claude/mcp.json（全局）或项目根目录的 .mcp.json（项目级）。

基础配置格式：

{
  "mcpServers": {
    "服务器名称": {
      "command": "执行命令",
      "args": ["参数"],
      "env": { "环境变量": "值" }
    }
  }
}

修改配置后必须完全重启 Claude Code。

3.1 本地文件系统访问

@modelcontextprotocol/server-filesystem — 突破当前文件限制，访问整个工作区。

npm install -g @modelcontextprotocol/server-filesystem

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/你的工作区路径"]
    }
  }
}

支持读写指定目录、创建/删除文件、按内容搜索。安全提醒：严禁开放系统根目录，仅授权开发工作区即可。

3.2 浏览器自动化

@playwright/mcp — 基于 Playwright 的专业级 E2E 测试和页面自动化。

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

支持全浏览器（Chrome/Firefox/Safari）、页面导航自动化、视频录制、网络请求拦截、性能监控。纯本地运行，无需 API Key。

3.3 推理能力增强

@modelcontextprotocol/server-sequential-thinking — 把复杂问题拆成结构化多步推理。

{
  "mcpServers": {
    "sequential-thinking": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
    }
  }
}

适合复杂算法设计、架构选型、系统设计文档编写。处理这类问题时效果拔群。

3.4 Figma 设计工具联动

figma-developer-mcp（v0.11.0）— 读取 Figma 文件，提取设计规范自动生成代码。

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": { "FIGMA_API_KEY": "你的 Figma Personal Access Token" }
    }
  }
}

Token 获取：Figma → Settings → Personal Access Tokens → Generate new token。

supercharged-figma-mcp（v1.0.9）— 更进一步，支持实时编辑 Figma 画布。

{
  "mcpServers": {
    "supercharged-figma": {
      "command": "npx",
      "args": ["-y", "supercharged-figma-mcp", "--local", "--relay-host", "127.0.0.1", "--relay-port", "8888"]
    }
  }
}

需要先在 Figma 里安装 supercharged-figma 插件并启动，纯本地连接，无需 API Key。

3.5 MCP 服务器速查

四、避坑指南

Skills 避坑：

• 必须加 -g 全局安装参数，否则 Claude Code 识别不了
• 安装超过 20 个技能会增加上下文负担，导致响应变慢，按需安装
• 安装完成后必须完全重启 Claude Code（不是刷新，是退出重开）
• 更新前先关闭 Claude Code，避免文件占用导致更新失败

MCP 避坑：

• JSON 格式必须正确，推荐用 JSON 校验工具先检查
• Windows 系统路径分隔符用 \ 不要用 /
• neural-memory 等依赖 Python/Node 的 MCP，必须先安装依赖再配置
• Figma MCP 确认 Token 有文件读写权限，且文件是本人账号有权限访问的

安全红线：

• 文件系统 MCP 严禁开放系统根目录，仅授权工作区目录
• API Key 只填在本地配置文件，不要提交到 Git
• 优先选择官方和社区热门开源项目，慎用小众/未知来源的扩展

五、推荐安装顺序

1. 先装 find-skills：相当于内置应用商店，方便后续按需发现更多
2. 新手入门包 10 个：frontend-design、technical-writer、docx、pptx、pdf 等办公和提效类
3. 配置 filesystem MCP：解决文件访问限制，这是很多开发场景的基础需求
4. 按需扩展：前端装前端类，后端装架构类，测试装 testing 类
5. 进阶探索：memory 系列解决上下文丢失，supercharged-figma 实现设计和代码联动

Skills 和 MCP 是两套互补的能力体系。Skills 让 Claude 更聪明，MCP 让 Claude 更能干。两者配合，才能真正把 AI coding 从「高级补全工具」升级为「靠谱的开发搭档」。