Claude Code 进阶：32 个精选 Skills + 8 个 MCP 服务器实测指南

你是不是也有这样的困扰：

• 用 Claude Code 写代码，总觉得它不够懂需求，生成的内容还要反复修改
• 想让它做个 Dashboard / 落地页，结果生成的界面丑到没法直接用
• 想让它读写本地文件、操作浏览器、联动设计工具，却完全不知道怎么配置
• 会话一清空，之前的调试经验、项目细节全忘了，每次都要重新铺垫上下文

这篇文章整理了 32 个精选 Skills + 8 个 MCP 服务器，全部分享给你。一键安装、自动触发，让你的 Claude Code 从「只会补代码的助手」，变成「能帮你搞定全流程的开发搭档」。

一、先搞懂核心：Skills vs MCP 到底有啥区别？

很多新手刚上手会搞混这两个扩展能力，先一句话讲透：

• Skills：封装好的提示词 / 标准化工作流，让 Claude 变成特定领域的「专业人士」，本质是让 AI 更懂怎么干
• MCP 服务器：真正的工具能力，能让 Claude 访问本地文件、浏览器、外部 API、第三方工具，本质是让 AI 真的能去干

绝大多数能力都会自动触发，你不需要手动调用。当你说「帮我写个 README」「审查一下这段代码」时，Claude Code 会自动激活对应的能力。

核心区别对照表

一句话总结：Skills 让 Claude 更聪明，MCP 让 Claude 更能干，两者搭配使用才能把能力拉满。

二、Skills 技能全指南（32 个精选）

技能是 Claude Code 最轻量化的扩展方式，通过 Skills CLI 即可一键安装，类似前端常用的 npm 包管理器。

2.1 前置必看：技能安装与管理

核心安装命令

# 1. 搜索社区技能（关键词匹配）
npx skills find <关键词>

# 2. 安装技能（-y 跳过确认，-g 全局安装，必加！）
npx skills add <owner/repo@skill> -y -g

# 3. 查看已安装的全部技能
npx skills list -g

# 4. 检查技能更新
npx skills check

# 5. 更新所有已安装技能
npx skills update

关键提醒：安装技能必须加 -g 全局安装参数，否则 Claude Code 无法识别；安装完成后必须重启 Claude Code 才能生效。

技能市场

所有社区开源技能均可在官方市场查看：skills.sh，有完整的安装量排行榜，帮你快速筛选热门优质技能。

已安装技能查看方式

# Mac/Linux
ls ~/.claude/skills/
ls ~/.agents/skills/

# Windows
dir C:\Users\你的用户名\.claude\skills\

Claude Code 内直接输入 / 即可唤起完整技能列表，点击即可手动触发。

2.2 32 个精选技能分类清单

所有技能按开发场景分类，标注安装命令、核心能力和触发场景。

🔧 必装入口类（1 个）

find-skills — 技能发现神器

• 安装：npx skills add find-skills -y -g
• 能力：技能市场的内置搜索引擎，支持关键词匹配、热门推荐
• 触发：当你说「有没有处理 PDF 的技能」时自动激活
• 感受：所有新手第一个必装的技能，相当于给 Claude 装了个「应用商店」

🎨 前端开发全栈类（9 个）

📄 文档与办公处理类（6 个）

🏗️ 架构设计与代码质量类（5 个）

🧠 记忆与上下文管理类（3 个）

🧪 测试与自动化类（2 个）

⚡ 开发提效类（4 个）

🔒 安全审计类（1 个）

• audit-website：npx skills add squirrelscan/skills@audit-website -y -g — 网站安全漏洞扫描，安装量 15.3K

🛠️ 自定义技能开发类（1 个）

• skill-creator：npx skills add skill-creator -y -g — 引导创建自定义技能，封装重复工作流

2.3 拿来即用：分场景一键安装脚本

新手入门包（10 个必装）

#!/bin/bash
set -e

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 "✅ 新手入门包安装完成！重启 Claude Code 即可生效"

前端开发者专属包

#!/bin/bash
set -e

npx skills add find-skills -y -g
npx skills add frontend-design -y -g
npx skills add web-artifacts-builder -y -g
npx skills add canvas-design -y -g
npx skills add theme-factory -y -g
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -y -g
npx skills add vercel-labs/agent-skills@web-design-guidelines -y -g
npx skills add vercel-labs/agent-skills@vercel-composition-patterns -y -g
npx skills add shadcn/ui@shadcn -y -g
npx skills add webapp-testing -y -g
npx skills add obra/superpowers@requesting-code-review -y -g
npx skills add obra/superpowers@systematic-debugging -y -g
npx skills add technical-writer -y -g

echo "✅ 前端开发者专属包安装完成！重启 Claude Code 即可生效"

全栈开发全能包（全部 32 个）

#!/bin/bash
set -e

# 🔧 必装入口
npx skills add find-skills -y -g

# 🎨 前端开发全栈类
npx skills add frontend-design -y -g
npx skills add web-artifacts-builder -y -g
npx skills add canvas-design -y -g
npx skills add theme-factory -y -g
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -y -g
npx skills add vercel-labs/agent-skills@web-design-guidelines -y -g
npx skills add vercel-labs/agent-skills@vercel-composition-patterns -y -g
npx skills add shadcn/ui@shadcn -y -g
npx skills add vercel-labs/agent-skills@vercel-react-native-skills -y -g

# 📄 文档办公
npx skills add technical-writer -y -g
npx skills add doc-coauthoring -y -g
npx skills add docx -y -g
npx skills add pptx -y -g
npx skills add pdf -y -g
npx skills add xlsx -y -g

# 🏗️ 架构与代码质量
npx skills add planning-with-files -y -g
npx skills add shubhamsaboo/awesome-llm-apps@project-planner -y -g
npx skills add wshobson/agents@architecture-patterns -y -g
npx skills add wshobson/agents@architecture-decision-records -y -g
npx skills add obra/superpowers@requesting-code-review -y -g

# 🧠 记忆管理
npx skills add memory-intake -y -g
npx skills add memory-audit -y -g
npx skills add memory-evolution -y -g

# 🧪 测试自动化
npx skills add webapp-testing -y -g
npx skills add obra/superpowers@test-driven-development -y -g

# ⚡ 开发提效
npx skills add obra/superpowers@brainstorming -y -g
npx skills add obra/superpowers@systematic-debugging -y -g
npx skills add obra/superpowers@writing-plans -y -g
npx skills add obra/superpowers@executing-plans -y -g

# 🔒 安全审计
npx skills add squirrelscan/skills@audit-website -y -g

# 🛠️ 自定义技能
npx skills add skill-creator -y -g

echo "✅ 全栈开发全能包安装完成！重启 Claude Code 即可生效"

三、MCP 服务器全指南（8 个亲测可用）

MCP（Model Context Protocol）是 Claude Code 更底层的扩展机制，能让 Claude 突破大模型的限制，真正访问本地文件系统、浏览器、数据库、第三方工具。

3.1 前置必看：MCP 配置全流程

配置文件路径

# 全局配置（所有项目生效，推荐）
# Mac/Linux
~/.claude/mcp.json
~/.claude/mcp.local.json

# Windows
C:\Users\你的用户名\.claude\mcp.json

# 项目级配置（仅当前项目生效）
项目根目录/.mcp.json

标准配置格式

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

⚠️ 修改配置文件后必须重启 Claude Code 才能生效。生效后，输入框下方会显示「工具」图标，点击即可查看已连接的 MCP 服务器。

3.2 8 个精选 MCP 服务器清单

🧠 neural-memory — 神经网络记忆系统

解决痛点：技能里的记忆功能是轻量版，需要更强大的跨会话记忆能力。

# 安装（二选一）
pip install neural-memory     # Python 方式（推荐）
npm install -g neural-memory  # Node 方式

{
  "mcpServers": {
    "neural-memory": {
      "command": "neural-memory",
      "args": ["--mcp"]
    }
  }
}

核心能力：跨会话长期记忆、神经元结构化记忆模型、知识图谱可视化。纯本地运行，无需 API Key。

🌐 playwright — 浏览器自动化

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

全浏览器支持，可执行 E2E 测试、页面自动化、视频录制。无需 API Key。

📁 filesystem — 文件系统访问

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

⚠️ 严禁开放系统根目录，仅授权开发工作区目录即可。

🤔 sequential-thinking — 链式推理增强

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

把复杂问题拆成多步结构化推理，处理复杂算法、架构设计问题时效果拔群。

🌐 web-reader — 网页内容抓取

{
  "mcpServers": {
    "web_reader": {
      "command": "npx",
      "args": ["-y", "web-reader-mcp"]
    }
  }
}

抓取公开网页内容并转为 Markdown，自动过滤广告。仅能访问公开页面。

🎨 figma-developer-mcp — Figma 设计稿读取

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

自动提取颜色、字体、尺寸等设计规范，生成 HTML/CSS 代码。需 Figma API Key。

🎨 supercharged-figma — Figma 实时编辑

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

可在 Figma 画布上实时创建、删除、修改图层，无需 API Key。需配合 Figma 插件使用。

🖼️ 4_5v_mcp — AI 图片分析

{
  "mcpServers": {
    "4_5v_mcp": {
      "command": "npx",
      "args": ["-y", "4_5v_mcp"]
    }
  }
}

分析图片内容、识别 UI 组件、描述图片场景。部分版本可能需要 API Key。

3.3 API Key 汇总表

四、亲测踩坑避坑指南

Skills 安装与使用高频坑

1. 安装超时/失败：确保网络稳定，能正常访问 npm 官方源
2. 安装了不显示：必须加 -g 参数，安装后重启 Claude Code
3. 技能不自动触发：检查提问关键词是否匹配，或手动输入 / + 技能名
4. Claude 响应变慢：不要一次性装超过 20 个冗余技能，按需安装即可
5. 技能更新失败：更新前先关闭 Claude Code，避免文件占用

MCP 配置与生效高频坑

1. 配置完不生效：先检查 JSON 格式是否正确，然后重启 Claude Code
2. 文件系统访问失败：仅指定工作区目录，检查目录读写权限
3. Figma MCP 连不上：确认 Token 权限、网络可访问 Figma
4. 工具调用报错：检查 MCP 依赖是否提前安装完成
5. Windows 路径问题：路径分隔符用 \，不要用 /

安全红线

• 文件系统 MCP 严禁开放系统根目录
• 第三方工具优先选择官方、社区热门的开源项目
• API Key 不要提交到 Git 仓库
• 不要给 Claude 过高系统权限

五、总结与新手推荐安装顺序

Skills 和 MCP 是两套互补的扩展机制，搭配使用才能把 Claude Code 的能力发挥到极致。

新手推荐安装顺序：

1. 先装 find-skills — 相当于装了应用商店
2. 安装新手入门包的 10 个必装技能，先上手体验
3. 配置 neural-memory MCP — 解决跨会话记忆丢失的核心痛点
4. 根据自己的开发场景，按需安装对应的技能和 MCP
5. 慢慢探索进阶玩法，开发自己的专属技能和 MCP

所有命令和配置均适配 Windows / Mac / Linux 全平台。