Claude Code 这几个月在开发圈里火得不是一星半点连带着 MCP 这个词也从一个小众协议变成了热词。如果你平时用 AI 写代码、搞自动化或者在做设计工具和代码之间的联动大概率已经刷到过“Claude Code 接入 MCP”“Figma MCP 切图”这类内容。我最初看到也是一头雾水觉得无非又是套壳工具但真正用下来发现MCP 这套东西确实把 AI 从“聊天框里的助手”变成了“能操作你电脑里真实工具的助手”。这篇文章我打算从实际使用者的角度把 Claude Code 和 MCP 完整拆一遍。从安装到配置从概念到实战包括我在 Windows 11 和 Ubuntu 上踩过的坑、权限问题怎么解、蓝湖和 Figma 这类设计协作工具到底怎么接 MCP 才能真干活都会一一讲到。适合刚听说 Claude Code 想快速上手的新手也适合已经在用但还没搞明白 MCP 配置和 Skills 安装的进阶用户。1. Claude Code 是什么为什么值得用1.1 一句话认识 Claude CodeClaude Code 是 Anthropic 推出的命令行编程助手简单说就是你可以在终端里启动一个 AI让它直接读你项目里的代码、改文件、跑命令、提 PR。它不像网页版对话那样只能“给建议”而是真正能落地的——你说一句“帮我看看这个报错是哪里引起的”它会自己打开相关文件、定位问题、改好代码然后跑一遍测试给你看结果。同样是 AI 编程工具Claude Code 更贴近“开发者在终端里写代码”这个真实场景。它不是在 IDE 里做一个悬浮助手而是以终端为核心你可以用自然语言驱动它完成一整个开发流程。这一点用过之后很难回去。1.2 它能解决什么问题我列几个自己实际用得最多的场景读代码接手一个别人写的项目直接说“梳理一下这个项目的模块结构和核心逻辑”它会自己翻文件、画依赖关系用文字把架构讲清楚。改代码定位 bug、重构函数、补测试这些操作它都能直接改文件而不是只输出一段让你自己粘的代码。跑命令编译、测试、打包这些操作它可以直接在终端执行失败了自己看日志继续排查。跨工具协作这是 MCP 发挥作用的地方。通过 MCP 协议Claude Code 可以调用 Figma、浏览器、数据库、设计稿管理平台等外部工具把设计到代码这条链路串起来。1.3 和 IDE 插件的区别在哪里很多人会把 Claude Code 和 VS Code 里的 AI 插件搞混。VS Code 插件是在编辑器里面给你补全代码、解释代码核心是“辅助你写”。Claude Code 的核心是“替你执行”它拥有终端的控制权能操作的远不止编辑器范围内的事。它也可以装成 VS Code 扩展使用但只是换了个界面底层能力没有缩水。我在实际体验中最深的感受是它的多文件修改能力和上下文管理比插件模式强很多。2. 准备工作与全平台安装指南2.1 前置条件Node.js 和 API KeyClaude Code 依赖 Node.js 运行安装前先确认你的机器上有 Node.js 18 以上版本。没装的话去 Node.js 官网下载 LTS 版本直接装就行。装完在终端输入node -v能输出版本号就算过了第一关。第二个前提是 An Anthropic API Key 或者 Claude 账号的订阅权限。Claude Code 需要调用 Claude 模型能力所以你得有可用的 API Key并且注意 API 调用是按量计费的。如果只是体验可以先充少量额度跑通流程再决定要不要重度使用。提示API Key 属于敏感凭据不要写进项目代码或提交到 Git 仓库。配置到系统环境变量里即可。2.2 Windows 11 安装全流程Windows 上装 Claude Code 分两种情况用原生终端或者用 VS Code。先说原生终端方式。打开 PowerShell 或 Windows Terminal执行安装命令npm install -g anthropic-ai/claude-code安装完成后输入claude启动首次启动会提示你登录账号或设置 API Key按提示操作。如果遇到claude命令找不到多半是 npm 全局目录没加到系统 PATH把 npm 的 global bin 目录路径加到环境变量里就好。我在 Win11 上遇到的一个典型问题是系统自带终端的编码问题Claude Code 输出中文或特殊符号时偶尔乱码。解决办法是到终端设置里把字符编码调成 UTF-8Windows Terminal 默认就是老版 PowerShell 需要手动设置一下。2.3 Ubuntu 安装注意点Ubuntu 上安装同样是 npm 全局安装但有两个坑提前说权限问题直接用npm install -g可能会报 EACCES 权限错误。最快的解法是用 nvm 安装 Node.js这样全局安装目录就在用户目录下不需要 sudo。依赖缺失有些基础镜像里缺build-essential和python3Claude Code 某些功能会用到原生模块装之前先补一下依赖。完整的 Ubuntu 流程curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash source ~/.bashrc nvm install 20 npm install -g anthropic-ai/claude-code claude2.4 VS Code 里的集成方式如果你习惯在 VS Code 里干活可以直接在扩展市场搜索 Claude Code 官方扩展安装后左侧栏会出现 Claude Code 面板。这个面板本质上是把终端里的 Claude Code 搬到 IDE 里优势是可以直接引用当前打开的文件、选中代码发送给 Claude Code省去了自己在终端里写路径的麻烦。我自己是终端和 VS Code 混合用日常改代码用 VS Code 集成批量操作、跑脚本用终端原生模式。两者的配置文件是互通的不会出现一边配了 MCP 另一边要重配的情况。3. MCP 协议核心概念Host 和 Server 到底什么关系3.1 MCP 解决的痛点在解释 MCP 之前先说一个真实痛点。AI 助手在没有 MCP 的时候能力边界很死。你让它“帮我读一下本地 D 盘的项目代码”它做不到因为它的运行环境是隔离的访问不了你的文件系统。你让它“帮我把这个设计稿转成前端代码”它连设计稿在哪都不知道。早期各家 AI 工具都自己搞插件体系你给 A 工具写的插件B 工具用不了生态是割裂的。MCPModel Context Protocol模型上下文协议就是 Anthropic 牵头定义的统一协议相当于给 AI 和外部工具之间定了一个通用接口标准。工具方只要按这个标准实现一个 MCP Server任何支持 MCP 的 AI 客户端都能直接调用。3.2 MCP Host 和 MCP Server 的分工用大白话讲MCP Host 就是“AI 客户端”比如 Claude Code、安装 Claude Code 的 VS Code、以及集成了 MCP 的其他工具。MCP Server 是“工具适配层”它把某个具体工具的能力包装成 MCP 协议能识别的接口。举个例子Figma MCP Server 做的工作就是把 Figma 的设计稿数据、图层信息、切图资源包装成一个个标准化的工具调用接口。Claude Code 作为 Host 通过这些接口向 Figma 提问“这个页面的尺寸是多少”“这个按钮的颜色是什么”Figma 侧就通过 Server 把数据回传给 Claude Code。理解这个关系特别重要的原因在于配置 MCP 时你要搞清楚自己是在配 Host 还是配 Server。绝大多数情况里你只需要在 Host 端声明“我要用哪个 Server、Server 跑在哪个地址”而 Server 本身是独立的进程或服务不需要你去改它的实现代码。3.3 MCP 和 RAG 的区别这两个概念经常被放在一起讨论但解决的问题完全不同。RAG检索增强生成解决的是“AI 的知识不够”问题——它把外部文档切成片段存到向量数据库里AI 回答问题时先检索相关片段再生成答案。MCP 解决的是“AI 的能力不够”问题——它让 AI 能调用真实工具去执行操作比如读文件、操作浏览器、查询数据库。简单类比RAG 是给 AI 配了一个图书馆它能进去查资料MCP 是给 AI 配了一双手它能动手干活。两者不冲突甚至可以配合使用但别把思路搞混——你接了一个 MCP Server不会让 AI 凭空变聪明只会让 AI 多一项可操作的工具。3.4 完整的工作链路一个典型的 MCP 调用链路是这样的用户在 Claude Code 里发指令“用 Playwright 打开这个页面截图给我看”。Claude Code 解析指令发现需要调用 Playwright 相关能力。Host 通过 MCP 协议找到配置好的 Playwright MCP Server。Server 执行真实的浏览器自动化操作把截图结果返回给 Host。Claude Code 把结果截图展示给用户。整个过程里Host 不关心 Server 内部是怎么实现的Server 也不管用户最终看到什么界面。协议把两边解耦了这也是为什么 MCP 生态能快速扩大的原因——任何一个工具开发者都可以独立做一个 Server接入主流 AI 客户端。4. MCP 接入实战从文件系统到 Figma、蓝湖4.1 MCP 配置文件写在哪儿Claude Code 的 MCP 配置是分作用域的常见的有两个位置项目级配置写在项目根目录的.mcp.json用户级配置写在~/.claude.json。项目级配置跟着项目走适合团队共享用户级配置是当前用户全局生效适合个人常用工具。配置格式基本是这样{ mcpServers: { server-name: { command: npx, args: [-y, some-org/some-mcp-server], env: { API_KEY: your-key-here } } } }这里的command和args指定了如何启动这个 Serverenv是传给 Server 的环境变量。Claude Code 会在需要用到某个 Server 时按这个配置去启动对应的进程和服务。4.2 接入本地文件系统 MCP文件系统 MCP 是最容易理解和验证的入门案例。它让 Claude Code 可以按你的指定路径范围读写本地文件。配置方式是在.mcp.json里注册一个 filesystem server并指定允许访问的目录{ mcpServers: { filesystem: { command: npx, args: [-y, modelcontextprotocol/server-filesystem, /path/to/allowed/dir, /another/dir] } } }配置完成后重启 Claude Code让它“列出指定目录下的所有文件按修改时间排序”它会通过 filesystem server 去真实读取目录内容并整理给你。这一步跑通了就说明你的 MCP 链路是通的后面接任何 Server 都是同样的套路。注意文件系统 Server 的权限边界完全由配置时指定的目录决定。不要图省事把整个根目录放进去AI 误操作删文件的风险谁都不想碰。4.3 Figma MCP设计稿到代码的桥Figma MCP 是设计侧用得最多的接入之一。它解决的问题非常实际以前设计师给你一个 Figma 链接你要自己开 Figma 一个个量尺寸、看颜色、切图。现在通过 Figma MCPClaude Code 可以直接读取设计稿的结构化数据图层、布局、样式都能拿到。接入步骤大致是获取 Figma API Key在 Figma 账号设置里生成注意权限范围勾选。配置 Figma MCP Server把 API Key 填进env。启动后给 Claude Code 一个 Figma 文件链接让它“分析这个页面的布局结构输出对应的 HTML/CSS”。实际体验中Figma MCP 对“读取设计稿信息”这件事做得很好但别指望它直接一键生成完美前端复杂交互和响应式布局仍然需要开发者自己把控。把它当成“快速理解设计稿的助手”而不是“全自动切图机”。至于热词里提到的“Figma MCP 可以直接切图吗”我的答案是它能读出选中图层的导出信息和切图资源但能不能直接拿到 PNG 文件取决于 Server 版本和文件权限设置。建议先用官方文档确认你用的 Server 版本支持哪些能力。4.4 蓝湖 MCP国内设计协作场景的接入蓝湖Lanhu是国内团队常用的设计协作平台蓝湖 MCP 的定位和 Figma MCP 类似让 AI 能读取蓝湖项目里的设计数据。接入前你需要拿到蓝湖的访问凭据然后在配置里指定 Server 地址。我观察到很多人看到“蓝湖 MCP”的热词第一反应是“能自动切图吗”。实话说蓝湖 MCP 更多是解决“设计信息获取”的问题像切图这类操作蓝湖本身有成熟的切图功能不一定要通过 MCP 来走。更合理的用法是让 Claude Code 读取设计稿规范直接产出带正确样式变量的前端代码减少人工翻设计稿的时间。4.5 其他高价值 Server 举例MCP 生态里值得玩的 Server 远不止设计工具热词里提到的这几个我简单点评一下Playwright MCP让 Claude Code 操作真实浏览器。做端到端测试、页面截图、表单自动填写都很方便。Blender MCP用自然语言驱动 Blender 建模和脚本操作。对做 3D 内容自动化的人很有帮助。IDA MCP逆向工程场景让 AI 辅助分析反汇编结果适合二进制安全研究人员。Vivado MCPFPGA 开发场景连接 Vivado 工具链做综合、仿真相关操作。DevSpace MCPKubernetes 开发环境管理可以直接让 AI 帮你查看 Pod、日志和调试容器。每个 Server 的配置方式都遵循前面说的 MCP 配置格式区别只在command、args和env。遇到新的 Server先读它的 README把这三项填对链路就通了一大半。5. Claude Code Skills更轻量的技能扩展5.1 Skills 和 MCP 的区别热词里有“claude code skills 安装”这里单独说一下。Skills 是 Claude Code 近期推出的技能扩展机制和 MCP 并列但定位不同。MCP 是“外部工具接入”核心是让 AI 调用外部系统的能力。Skills 是“知识注入”核心是给 AI 预置一套完整的操作指引和最佳实践。你可以把 Skills 理解成给 AI 的一本操作手册它不需要启动额外的 Server 进程只需要把技能文件放在指定目录AI 就会在相关任务中自动读取并遵循。5.2 如何安装一个 SkillsSkills 的基本形态是一组目录和 Markdown 文件里面写了角色定义、触发条件和执行步骤。安装方式一般是克隆到 Claude Code 的 skills 目录中比如git clone https://github.com/example/some-skills.git # 将技能目录复制到 ~/.claude/skills/ 下装好之后你可以在 Claude Code 里问它“你会哪些技能”它会列出已加载的技能清单。实际使用中Skills 对“规范一致性”的提升比较明显比如代码风格、提交信息格式、文档模板这些反复出现的规范写成一个 Skill 之后AI 每次都会按规范执行不用你反复强调。6. 接入 DeepSeek 等第三方模型6.1 为什么要换模型Claude Code 默认用的是 Anthropic 的 Claude 模型但很多国内用户会因为访问成本、计费方式等原因想接入 DeepSeek 等国产模型。接入的思路是Claude Code 支持通过环境变量自定义模型 API 地址和密钥只要接口兼容就能换成其他模型。需要注意第三方模型的上下文能力、工具调用稳定性和指令遵循能力和 Claude 原生模型存在差异。MCP 这类强依赖“模型正确调用工具”的场景对模型要求很高换模型之后一定要实测工具的调用成功率。6.2 配置方法配置方式是在启动 Claude Code 前设置环境变量把模型接口指向 DeepSeek 的 OpenAI 兼容端点并设置对应的密钥。伪代码如下export ANTHROPIC_BASE_URLhttps://api.deepseek.com/anthropic export ANTHROPIC_AUTH_TOKENyour-deepseek-api-key export ANTHROPIC_MODELdeepseek-chat claude不同版本的 Claude Code 对环境变量名有细微差异按照官方文档为准。我第一次配置时卡在了协议版本不兼容上后来发现是模型接口需要指定特定路径前缀换成官方推荐路径后就正常了。提示换模型属于“能跑但体验有差异”的操作。建议保留一套原生 Claude 配置测试工具调用和复杂任务时切回去生产环境不要轻易换。7. 常见问题与排查技巧实录7.1 安装和启动报错我把实际遇到的高频问题整理成了速查表症状可能原因解决办法claude命令找不到npm 全局目录不在 PATH把 npm global bin 路径加入系统 PATHnpm 安装报 EACCES 权限错误全局目录无写权限用 nvm 管理 Node.js或修复 npm 全局目录权限启动后输出乱码终端编码不是 UTF-8切换 Windows Terminal 或改终端编码启动时提示 Node 版本过低Node.js 版本低于要求升级到 Node.js 18 以上 LTS 版本MCP Server 启动失败依赖缺失或端口被占用查看详细日志按提示安装缺的依赖7.2 MCP 连接失败怎么排查MCP 连接失败是接入 Server 时最头疼的问题。我的排查顺序是先在终端手动运行command里的那行命令看能不能正常启动。很多时候是 npx 下载失败或依赖缺失手动一跑就暴露了。确认配置里的args路径和参数对不对路径写错是最低级的错误。查看 Claude Code 的日志通常在~/.claude/目录下日志里会写明 Server 启动失败的具体原因。检查env里的 API Key 是否有效。凭据过期、权限不足都会导致 Server 能启动但请求报错。7.3 权限问题和安全隐患Claude Code 拥有终端执行权限再加上 MCP 能访问外部工具权限边界一定不能放松。我给自己的原则是文件系统类 Server 只给最小必要目录API Key 一律用环境变量注入不写进配置文件提交到仓库生产环境的项目不用全局用户配置避免 MCP Server 被意外工具调用。7.4 实现干净的卸载不想用了怎么卸载热词里也有人在搜。卸载分两层先卸载 npm 包本身npm uninstall -g anthropic-ai/claude-code再清理用户目录下的配置和缓存主要是~/.claude/目录和.mcp.json这类项目配置文件。如果不清理虽然命令没了但残留的配置和凭据还留在磁盘上。我见过有人卸载后重新安装发现claude还能读到旧配置就是因为残留文件没删干净。8. 进阶玩法与我的实操心得8.1 让 MCP 和 Skills 配合起来很多人把 MCP 和 Skills 当两条独立的路但实际配合起来效果更好。我举一个自己在项目中实践的方案用 Filesystem MCP 让 AI 能读项目代码同时用一个“代码审查”Skill 规定 AI 按项目规范去分析代码。结果是 AI 自动读取目标文件后严格按照预设规范给出优化建议效率和一致性都比单纯用 MCP 或单纯用 Skill 高很多。核心思路是MCP 负责解决“能不能访问”Skills 负责解决“怎么做得对”。两者缺一不可。8.2 给新手的三个实操建议第一不要一上来就装十个 MCP Server。先只接一个本地文件系统 Server把整个链路跑通理解 Host、Server、配置、日志这四件事之后再按需扩展。第二重视日志和手动启动测试。MCP 报错不可怕可怕的是不会定位。学会手动跑命令、看日志你就能解决 80% 的连接问题。第三保持配置的“最少权限原则”。AI 能力越强权限边界越重要。只给它完成任务所需的最小权限不仅能降低误操作风险也能减少很多由权限过大引发的意外问题。8.3 我踩过的坑和最终建议最后分享一个最真实的体会我刚开始用 Claude Code 时走了不少弯路最典型的是花了大量时间折腾各种 MCP Server结果大部分项目里根本用不上。真正让我觉得“值回票价”的功能其实是最基础的——让它帮我读代码、改代码、跑命令。MCP 是在你有明确的外部工具联动需求时才需要接入的比如你在做设计稿转前端、浏览器自动化测试、3D 脚本生成这些场景下 MCP 是不可替代的。所以我的建议是先熟练使用原生 Claude Code把它的核心工作流玩明白。当你发现“我需要它去操作某个外部的东西”时再去翻对应工具的 MCP Server 文档接一个用一个。这样一步步把工具链加厚而不是一上来就追求大而全反而更能体会到这个工具链的爽点。