Claude Code 从去年年底开始进入大众视野之后我身边几乎所有写代码的朋友都在聊它。再加上 MCP 这个词频繁出现在各种技术文章里很多人一开始以为它俩是什么绑定关系其实并不是。Claude Code 是 Anthropic 推出的命令行 AI 编程工具而 MCP 是一套开放的协议标准两者可以配合使用也可以各自独立存在。这篇文章我会从零开始把我实际使用 Claude Code 和配置 MCP 的完整经验写下来包括安装、授权、配置第三方模型、接入蓝湖和 Figma 这类真实项目以及我在使用过程中踩过的坑。不管你是刚听说这两个名字的小白还是已经装了但不知道如何深入使用的开发者这篇教程都值得你花几分钟过一遍。1. 开箱之前Claude Code 到底是什么解决什么问题先用一句大白话说清楚Claude Code 是一个跑在终端里的 AI 编程助手。它不像 Cursor 那样给你一个完整的图形界面编辑器而是直接嵌入你的命令行环境让你在终端里用自然语言让 AI 帮你读代码、改代码、跑测试、查日志、提交 commit。它跟其他 AI 编程工具最大的区别在于它不只是“补全代码片段”而是能真正理解你整个项目结构跨文件进行修改甚至能自主执行一系列终端命令来完成一个完整任务。很多人第一次听到“命令行 AI 工具”会觉得反直觉都什么年代了还用黑乎乎的终端但恰恰是这种设计让 Claude Code 在复杂工程项目里的表现非常稳。图形界面的编辑器虽然好看但在处理大规模重构、批量替换、跨模块追踪调用链这些场景时反而没有一个能直接操作文件系统和终端命令的 CLI 工具来得高效。Claude Code 天然就是为“干活”设计的。MCP 又是另一回事它的全称是 Model Context Protocol模型上下文协议。你可以把它理解成 AI 世界里的 USB-C 接口。以前每接入一个数据源或工具AI 应用都需要专门开发一套适配逻辑而 MCP 统一了这个过程。任何支持 MCP 的 AI 客户端都可以通过标准化的方式连接任何支持 MCP 的服务器从而获得到数据或操作能力。Claude Code 作为 AI 客户端自然就支持 MCP这也是它迅速成为开发者圈热门话题的核心原因之一。这篇文章的读者我建议分三类。第一类是完全没装过的纯新手跟着第一步到第二步把环境跑起来第二类是已经装了 Claude Code 但一直只用来聊天、还没配过 MCP 的人可以直接跳到第三章看协议原理和配置方法第三类是已经在业务中使用 AI 编程工具、想真正把它接入蓝湖、Figma、本地数据库等“真实世界数据源”的工程师我会给出实际可复制的配置示例。2. 安装与第一跑把 Claude Code 跑起来其实很轻松2.1 全局安装与常见系统差异Claude Code 的本质是一个 npm 包官方推荐通过 Node.js 的包管理器全局安装。只要你的电脑上已经有 Node.js 环境安装过程就是一条命令的事npm install -g anthropic-ai/claude-code安装完成后在终端输入claude就可以启动。这里有一点需要注意如果你之前装过旧版本建议先执行claude update检查更新因为 Claude Code 的迭代速度非常快几乎每周都有版本更新有些新功能和老版本的差异非常大。Windows 用户也完全可以正常使用Claude Code 对 Windows 11 的终端支持已经很成熟我实测在 PowerShell、Windows Terminal 里跑都没有问题。不过有一点小坑Windows 下如果遇到权限报错比如 EACCES 或 EPERM大概率是 npm 全局目录权限的问题建议用管理员身份的 PowerShell 重新安装或者把 npm 的全局目录配置到一个用户目录下。macOS 用户其实是最顺滑的。如果没有 Node.js我建议直接用 Homebrew 安装brew install node装完 Node 再执行 npm 安装命令即可。Linux 服务器上部署同理唯一需要注意的是服务器环境往往没有图形界面但 Claude Code 在纯终端下反而发挥得更好所以在远程开发机上配置这个工具是很多团队的标准操作。2.2 授权认证和第一印象启动claude之后第一次运行会引导你登录 Anthropic 账号并完成授权。这个过程需要你在浏览器里确认一次然后把授权码粘贴回终端。很多人在这一步会疑惑明明装的是 Claude Code为什么还要登录网页版这是因为 Claude Code 走的 API 认证体系和你平时在网页上使用 Claude 是同一套账号体系授权码是一次性的有效期也很短所以不用担心安全问题。认证完成之后你会进入一个交互式的 REPL 界面可以直接输入问题。我第一次测试的时候输了一句“解释一下当前目录项目的整体架构”它立刻开始自动扫描目录结构、读取关键配置文件然后从入口文件开始向上追溯最后给出了一个完整的分层说明。那一刻我突然意识到以前用 AI 聊天时反复地“复制文件内容—粘贴—提问”的日子可能真要结束了。在正式开始用之前我还建议你先做两个设置。第一执行/config打开设置界面把权限模式改为 “acceptEdits”自动接受编辑这样 AI 改文件时不用每次弹窗确认效率会大幅提升。第二在项目根目录创建一份CLAUDE.md文件把项目的技术栈、目录规范、常用命令、注意事项写进去Claude Code 每次对话都会自动读取这个文件作为上下文相当于你给 AI 写了一份“入职手册”这比每次对话都重复交代背景要高效得多。3. MCP 协议入门AI 从“聊天”到“干活”的那把钥匙3.1 MCP 的核心架构Host、Server、Client要理解 MCP 到底解决了什么问题得先了解它的三个核心角色。MCP Host也就是宿主程序通常是 Claude Code、Cursor、Trae 这类 AI 应用负责与用户交互并将请求分发给各个 MCP Server。MCP Server独立运行的进程或服务负责暴露特定的工具或数据源。比如一个蓝湖 MCP Server就能让 AI 读取蓝湖上的设计稿、标注信息、切图资源一个本地文件 MCP Server则能让 AI 读取你电脑上的特定目录文件。MCP ClientHost 与 Server 之间的连接器负责协议通信、消息路由。这三者的关系用一个生活化类比更好懂。想象你在一个跨国餐厅吃饭Host 是服务员MCP Server 是后厨的各个部门饮品部、凉菜部、热菜部MCP Client 是服务员和后厨之间的传菜窗口。你的需求通过服务员传达到对应后厨部门做好的菜再传回来。这个传菜窗口规格是标准统一的所以不管你是哪家餐厅的服务员都能跟任何一家后厨协作。以前没有 MCP 的时候你想让 AI 访问蓝湖设计稿就得专门写一个“蓝湖插件”AI 工具的厂商也要为这个插件做适配。现在只要蓝湖团队实现一个标准的 MCP Server任何支持 MCP 的 Host包括 Claude Code、Cursor 等就都能直接用了。这背后最大的改变是数据接入的边际成本被大幅降低了AI 工具不再是一个封闭的聊天框而是一个能自由连接几乎所有工作流的中枢。3.2 为什么要用 MCP它能带来哪些实际价值我用一段真实的经历来说明。有一次我们要开发一个登录页需求文档在飞书设计稿在蓝湖后端接口在内部文档站。以前我需要在浏览器里开五六个标签页来回切换把关键信息复制粘贴给 AI。配置了 MCP 之后我只需要在 Claude Code 里说“帮我根据蓝湖上的登录页设计稿对接文档站里的登录接口把页面实现出来”它就能自己从蓝湖拉取设计稿信息从接口文档站读取接口定义然后生成一版能直接运行的前端代码。这个体验的差别不是快了多少的问题而是整个工作流从“人肉搬运信息 AI 写代码”升级成了“AI 自己获取信息 自己写代码”。前者 AI 是一个更聪明的打字员后者 AI 是一个真正的实习生。对个人开发者来说这可能只是省下了一些复制粘贴的时间但对团队来说这意味着一整套工具链可以被 AI 语言统一驱动沟通成本和上下文损耗都会有质的改变。MCP 的第二个价值是生态复用。今天你给 Claude Code 配了一个 Figma MCP Server明天换到 Cursor 或者 Trae只需要把同样的配置复制过去几乎不用改动。这种“配一次到处用”的特性最大限度保护了企业或个人的投入不会因为你切换了一个 AI 工具就把之前的全部连接工作推倒重来。4. 手把手配置 Claude Code 的 MCP 环境4.1 MCP Server 的三种常见类型在动手配置之前先了解一下 MCP Server 的形态。目前主流的 MCP Server 大概分为三类。第一类是远程 HTTP 服务型也就是服务商直接把 MCP Server 部署在他们的云端你只需要在配置里填一个 URL 和令牌即可。蓝湖 MCP、Figma MCP 都属于这一类。这类配置最简单因为不需要本地安装任何额外进程。第二类是本地命令启动型通常是 npm 包或 Python 包你配置好启动命令MCP Host 会在本地把这个进程拉起来。比如modelcontextprotocol/server-filesystem它就是一个可以让你把本地目录暴露给 AI 的本地服务型 MCP。第三类是自定义开发型也就是自己写一个 MCP Server把内部工具或数据源封装成 MCP 接口。比如有人把通达信股票软件的本地数据封装成 MCP让 AI 能直接查询行情和个股信息还有人把 Cheat Engine 封装成 MCP Bridge让 AI 能操控内存调试工具。这类自定义 Server 是中高级开发者最喜欢的玩法因为它真正做到了“万物皆可 MCP”。4.2 以蓝湖 MCP 为例的完整配置流程蓝湖作为国内使用率极高的设计协作平台最近也发布了官方 MCP Server。配置方式非常直接在蓝湖网页端或团队设置里找到“开发者”或“开放平台”的入口创建一个新的应用拿到属于你自己的 Auth Token。然后在 Claude Code 的配置文件里新增一条记录即可。Claude Code 的 MCP 配置路径是项目根目录的.mcp.json或者用户全局的配置文件。下面是我实际使用的蓝湖 MCP 配置{ mcpServers: { lanhu: { url: https://mcp.lanhuapp.com/mcp, headers: { Authorization: Bearer 你的蓝湖API令牌 } } } }配置完成后在 Claude Code 里重启会话执行/mcp命令查看当前已连接的服务器列表。只要看到lanhu的状态是 connected就说明接入成功了。之后你就可以试着让它“获取蓝湖项目里最新的登录页设计稿信息”如果一切正常它会自动调用 MCP 工具拉取设计稿的标注数据。同类流程也适用于 Figma。Figma MCP 的 Token 获取方式是进入 Figma 个人设置里的 Security 或 Personal Access Token 页面生成令牌然后在 Claude Code 或 Trae 里配置 Figma 的 MCP 服务。这个 Token 本质上就是你的身份凭证不要把 Token 提交到公开的 Git 仓库里否则别人可以拿你的身份去访问 Figma 资源。我见过不止一次开发者在示例配置里直接贴上了真实 Token这种事故虽然不会直接泄露文件内容但也会带来不小的安全隐患。4.3 本地 MCP Server 的配置方法与适用场景如果你需要让 AI 直接读取你电脑上的文件比如某个目录下的文档、CSV 或日志文件本地型 MCP Server 会更合适。安装方法以文件系统 MCP Server 为例npm install -g modelcontextprotocol/server-filesystem然后在.mcp.json里指定要暴露的目录{ mcpServers: { filesystem: { command: npx, args: [ modelcontextprotocol/server-filesystem, /Users/你的用户名/Documents/项目资料, /Users/你的用户名/Downloads/临时文件 ] } } }我的习惯是只暴露最小必要目录绝不把整个用户目录或根目录丢给 AI。一方面是为了防止 AI 误读敏感文件另一方面也是出于性能考虑暴露目录太多AI 在扫描时会消耗大量 token成本也会显著上升。MCP 的核心价值是精准连接不是把所有东西都一股脑塞给 AI。4.4 如何验证 MCP 是否被正常调用配置完成后最重要的一步是验证。你可以用一句非常直白的指令测试“你当前有哪些 MCP 工具可用”如果配置成功Claude Code 会列出所有已经加载的工具函数名和简介。更进一步你可以直接触发一次调用比如让 AI 读取文件系统 MCP 暴露目录下的某个文件内容如果它能准确说出文件里的关键信息就说明这条路是通的。还有一个小技巧在 Claude Code 里执行/mcp之后如果你发现某个 Server 状态是 failed通常有三种原因一是 Token 过期或填错了二是 URL 地址写错了三是本地启动型 Server 的启动命令有误。排查的时候用排除法一项一项看基本都能在几分钟内解决。5. 实战进阶MCP 在真实开发工作流中的落地5.1 场景一用 MCP 串联设计稿和前端开发我在一个后台管理系统的改版项目里实际用到了蓝湖 MCP。旧版系统的列表页布局杂乱交互逻辑也很绕。按照以前的流程我得打开设计稿逐个像素地比对间距、字号、颜色然后再去代码里找对应的组件文件修改。这个过程一来一去往往要大半天。配置了蓝湖 MCP 之后流程变成了这样先在 Claude Code 里输入“读取蓝湖项目《后台管理系统 V3》中列表页的设计稿提取所有的布局信息、间距规范、色彩变量”AI 自动调起 MCP 工具返回了结构化数据。然后我再输入“根据这些信息重构当前的表格页面优先使用项目已有的 design token”它就开始自动定位文件、修改代码。最后我只需要在浏览器里做一层视觉复核整个页面的改版时间缩减到了两小时以内。5.2 场景二MCP 与股票数据的本地化应用有开发者把通达信这类股票软件的本地数据封装成了 MCP Server让 AI 能直接查询 K 线、均线、成交量等数据。这种玩法的核心思路是股票软件本身有海量的本地数据但它们的格式并不适合 AI 直接读取MCP 作为一个中间层把这些数据翻译成 AI 能理解的结构化信息。这样一来你可以在 Claude Code 里直接问“帮我分析最近 20 个交易日某只股票的成交量变化趋势”而不需要自己先去软件里导出 CSV 再喂给 AI。这种思路其实可以复制到很多传统工具上。你手里只要有数据就能写一个 MCP Server 把它暴露出来让 AI 变成你的数据助手。MCP 真正意义上的“杀手级能力”不在于它本身有多复杂而在于它给了开发者一个极低的成本去打通数据和 AI 之间的连接。5.3 场景三在 VSCode 与 Trae 等编辑器环境中配置 MCPClaude Code 不是唯一支持 MCP 的宿主VSCode 和 Trae 同样也支持。区别在于配置入口不同。VSCode 需要在设置里找到 MCP 相关的配置项或者通过插件市场安装 Claude Code 相关插件来桥接Trae 则在界面里有更直接的 MCP 配置面板。如果你平时主力编辑器是 VSCode又不想切到终端写代码可以直接搜索并安装 Claude Code 插件然后在插件设置里配置 MCP Server这样你可以在编辑器里获得类似 Claude Code 的体验同时还能保持图形界面的编辑习惯。我个人的体会是终端版 Claude Code 更适合批量操作和复杂重构编辑器内嵌版更适合在写代码时随时提问或生成片段两者不是替代关系而是互补关系。真正高效的工作流是日常写代码在编辑器里遇到跨文件级别的修改或需要 MCP 拉取外部数据时切到终端让 Claude Code 来执行。5.4 MCP 与 AI Agent 的记忆和技能系统再往深一层说MCP 和 Agent 的“记忆与技能”体系结合之后价值会更大。很多团队已经不再满足于让 AI 每次对话都从零开始理解项目而是希望它像老员工一样长期记住业务逻辑和偏好。这时候 MCP 可以连接一个长期记忆数据库比如把项目的决策记录、代码规范、历史修复方案都放在数据库里AI 通过 MCP 查询这些记忆就能在做类似任务时直接复用之前的经验。我在一个客户项目中尝试过用 MCP 连接团队的轻量级知识库效果非常明显。以前新接手一个模块时我需要翻遍文档、看 commit 记录、问同事才能搞清楚设计意图现在 AI 能主动从知识库中提取相关上下文并且在我提问时自动引用来源。这种体验让 AI 从一个“对话工具”真正转变成了“参与项目运转的一等公民”。6. 高频问题和完整排查指南问题现象可能原因解决方式安装时报 EACCES 权限错误npm 全局目录无写入权限用管理员终端执行或重新配置 npm 全局目录到用户目录启动后提示未授权或登录过期Token 过期重新登录 Claude 账号获取新的授权码常用终端用户建议启用持久登录MCP Server 状态显示 failedToken 错误、URL 写错、依赖未安装齐全检查配置文件的认证信息和地址本地型 Server 先手动运行启动命令看报错AI 无法感知外部的 MCP 资源会话没有重启修改 MCP 配置后必须重启 Claude Code 会话 或 执行 /mcp reinit蓝湖/Figma Token 无效令牌类型选错或已过期在对应平台重新生成 Personal Access Token确认权限范围包含读设计资源Claude Code 回答质量下降使用的模型版本偏旧或上下文太长执行claude update更新版本必要时用 /clear 清理上下文再重新开始对话历史丢失没启用会话持久化官方推荐使用claude --resume或 /resume 恢复最近会话也可配合文件系统 MCP 定期导出聊天记录输出速度太慢单次请求携带的上下文过大精简暴露给 AI 的目录范围避免让 AI 全量扫描超大目录用claude命令在远程服务器上没有交互 UI终端限制确认 SSH 连接支持伪终端或升级到更高版本在实际使用中我最常遇到的问题其实是“AI 拿到了 MCP 数据但不会主动用”。这通常不是 MCP 本身的问题而是指令措辞的问题。你得明确告诉它“请使用蓝湖 MCP 工具获取……”或者“调用文件系统工具读取……”而不是含糊地说“参考设计稿”。MCP 工具不像人有主动性它只会执行需要用户把意图表达清楚。这是一个使用习惯问题一旦习惯了这种“指名道姓调用工具”的交互方式效率会直线上升。另外提醒一句任何 MCP 配置涉及 Token 的都一定不要把它提交到公开仓库。我习惯把.mcp.json加入.gitignore或者使用环境变量引用 Token比如写成Authorization: Bearer ${LANHU_TOKEN}这种形式既能保证配置模板可共享又不泄露真实凭证。这是最基本的工程素养也是使用 MCP 时最容易忽略的一环。7. 从一个玩具到一个工具MCP 生态的发展方向与个人实践体会用了一段时间 Claude Code 和 MCP 之后我最大的感受是AI 编程工具已经从拼“谁会写代码”转向拼“谁能更好地连接数据和工具”。MCP 把AI 从聊天框里解放了出来让它能真正跟你的项目、你的设计工具、你的数据系统握手协作。我个人目前的生产力配置是Claude Code 作为主力终端工具配上蓝湖 MCP 和文件系统 MCP再加上一个团队知识库的 MCP Server。每天开工第一件事打开终端启动claude然后直接以自然语言下任务从解析需求文档到生成接口代码到提交 PR一条龙走完。很多以前需要几个小时甚至一天的重复工作现在压缩到了几十分钟。最后再说一个很少被提到的细节Claude Code 自带的 Skills 功能值得单独研究。Skills 相当于给 AI 预定义的“技能包”你可以把某个项目的标准操作流程写成一个 Skill比如“数据库迁移流程”“发布上线检查单”AI 在执行相关任务时就会自动参考这些流程。虽然 Skills 和 MCP 是两个独立体系但它们搭配起来效果非常好——MCP 负责让 AI 能看到外部世界Skills 负责让 AI 知道怎么按照规范做事。两者结合AI 才真正成为一个合格的“项目级助手”。如果你刚开始接触这些工具我的建议是先别追求配齐所有炫酷的 MCP Server从文件系统 MCP 或一个你最常用的工具开始跑通一次完整的“AI 获取数据—AI 完成任务”的流程你很快就能体会到这套体系的核心价值。等到你熟练了再慢慢加新工具逐步把整个工作流全都交给 AI 来调度。这条路值得每个人亲自走一遍。