Claude Code 技能与 MCP 配置指南 - 总结

wscqs
8 阅读3分钟

Claude Code 技能与 MCP 配置指南 - 总结

原文：《别再裸用 Claude Code 了！32 个亲测 Skills + 8 个 MCP，开发效率直接拉满！》 juejin.cn/post/762006…

一、核心概念对比

维度SkillsMCP
本质提示词 / 标准化工作流封装本地运行的工具 / API 服务
作用让 Claude "更懂怎么干"让 Claude "真的能去干"
安装npx skills add修改 mcp.json 配置文件
运行位置Claude 大模型内部本地独立进程
访问外部资源❌ 不支持✅ 支持

一句话总结：Skills 让 Claude 更聪明，MCP 让 Claude 更能干。

二、32 个 Skills 分类速查

🔧 必装入口（1个）

技能用途安装命令
find-skills技能市场搜索发现npx skills add find-skills -y -g

🎨 前端开发（9个）

技能核心能力
frontend-design网页、Dashboard、落地页设计
web-artifacts-builder复杂 SPA、带路由的前端项目
canvas-design架构图、流程图生成
theme-factory主题美化、视觉风格统一
vercel-react-best-practicesReact 最佳实践（Vercel 官方）
web-design-guidelines网页设计规范（Vercel 官方）
vercel-composition-patterns组件组合模式
shadcnshadcn/ui 组件库专属支持
vercel-react-native-skillsReact Native 开发指导

📄 文档办公（6个）

技能核心能力
technical-writerREADME、API 文档生成
doc-coauthoring技术方案、RFC 文档撰写
docxWord 文档处理
pptxPPT 演示文稿生成
pdfPDF 合并、拆分、OCR
xlsxExcel 数据处理、图表生成

🏗️ 架构质量（5个）

技能核心能力
planning-with-files任务拆解、进度追踪
project-planner项目需求梳理、架构设计
architecture-patterns架构模式推荐
architecture-decision-recordsADR 架构决策记录
requesting-code-review专业代码审查

🧠 记忆管理（3个）

技能核心能力
memory-intake经验、规范记忆录入
memory-audit记忆库健康检查
memory-evolution记忆库优化整理

🧪 测试自动化（2个）

技能核心能力
webapp-testingE2E 自动化测试（Playwright）
test-driven-developmentTDD 测试驱动开发

⚡ 开发提效（4个）

技能核心能力
brainstorming技术问题头脑风暴
systematic-debugging结构化 Bug 排查
writing-plans开发任务拆解计划
executing-plans开发计划执行追踪

🔒 安全/自定义（2个）

技能核心能力
audit-website网站安全漏洞扫描
skill-creator创建自定义技能

三、8 个 MCP 服务器配置

配置文件路径

# Mac/Linux
~/.claude/mcp.json

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

配置清单

1. neural-memory - 跨会话记忆系统
{
  "mcpServers": {
    "neural-memory": {
      "command": "neural-memory",
      "args": ["--mcp"]
    }
  }
}

前置依赖: pip install neural-memory 或 npm install -g neural-memory

2. playwright - 浏览器自动化
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}
3. filesystem - 文件系统访问
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/你的/工作区/路径"]
    }
  }
}

⚠️ 安全提醒: 仅授权开发工作区，严禁开放系统根目录

4. sequential-thinking - 链式推理
{
  "mcpServers": {
    "sequential-thinking": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
    }
  }
}
5. web_reader - 网页内容抓取
{
  "mcpServers": {
    "web_reader": {
      "command": "npx",
      "args": ["-y", "web-reader-mcp"]
    }
  }
}
6. figma-developer-mcp - Figma 数据读取
{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "你的 Figma Personal Access Token"
      }
    }
  }
}
7. supercharged-figma - Figma 实时编辑
{
  "mcpServers": {
    "supercharged-figma": {
      "command": "npx",
      "args": ["-y", "supercharged-figma-mcp", "--local", "--relay-host", "127.0.0.1", "--relay-port", "8888"]
    }
  }
}
8. 4_5v_mcp - AI 图片分析
{
  "mcpServers": {
    "4_5v_mcp": {
      "command": "npx",
      "args": ["-y", "4_5v_mcp"]
    }
  }
}

四、API Key 需求汇总

MCP 服务器需要 API Key获取方式
neural-memory❌-
playwright❌-
filesystem❌-
sequential-thinking❌-
web_reader❌-
figma-developer-mcp✅Figma → Settings → Personal Access Tokens
supercharged-figma❌Figma 插件配合使用
4_5v_mcp⚠️ 可能需要取决于具体实现

五、新手推荐安装顺序

  1. Skills: find-skills → 新手入门包（10个）→ 按需扩展
  2. MCP: neural-memory → filesystem / web_reader → 按需扩展

六、关键踩坑提醒

Skills

  • 必须加 -g 全局安装
  • 安装后必须 重启 Claude Code
  • 不要一次装超过 20 个技能（影响性能）

MCP

  • JSON 格式必须正确（括号闭合、逗号）
  • 修改配置后必须 重启 Claude Code
  • filesystem 严禁开放根目录

官方技能市场：skills.sh/ 所有技能安装量、更新信息可在该网站查看

avatar
文章
阅读
粉丝