Claude Code 与 MCP 实战指南：从设计稿到本地数据的完整接入

1. 先理清两个词Claude Code 和 MCP 到底是什么关系我第一次听说 Claude Code 的时候说实话没什么感觉。一个跑在终端里的 AI 编程助手当时我想这不就是给命令行套了个 ChatGPT 皮肤吗真正让我改变看法的是在我搞清楚 MCP 是什么、并且亲手把设计稿、本地文件、数据库全部接进 Claude Code 之后。也就是从那一刻起我才意识到自己之前只用到了这套工具 10% 的能力。1.1 MCP 不是插件也不是 API它是一套“外设协议”很多人第一次看到 MCP 三个字母第一反应是又一个 AI 插件格式。但 MCPModel Context Protocol模型上下文协议跟插件完全不是一个层面的东西。它更像是一套通用接口规范解决的是AI 应用如何访问外部数据与工具这个核心问题。你可以把 MCP 理解成电脑上的 USB-C 接口。在没有统一标准之前厂商之间都是私有接口你想让 AI 读 Figma就得给 AI 写一个 Figma 专属插件想让 AI 查本地数据库又得给 AI 写另一个数据库专属插件。每次接入一个新工具都要重新做一遍适配哪怕背后的通信逻辑 90% 是重复的。MCP 做的事情就是把接口统一起来。任何工具方只要按照 MCP 协议暴露自己的能力任何 AI 应用只要实现了 MCP 客户端两边就能直接握手。今天你要接 Figma就启动一个 Figma MCP Server明天要读本地文件就启动一个 Filesystem MCP Server。Claude Code 作为宿主应用不需要关心对面是谁只需要按照协议调用。这个协议由 Anthropic 在 2024 年底开源现在已经被大量工具原生支持。你在热搜词里看到的各种xxx MCP包括蓝湖 MCP、通达信股票数据 MCP、Figma MCP本质上都是遵守同一套协议的服务端程序只是它们暴露的数据/能力不同。1.2 Claude Code 在 MCP 生态里的角色Host 客户端Claude Code 是 Anthropic 官方出品的命令行 AI 编程工具核心能力是在终端里帮你读写代码、执行命令、分析项目。但它的定位不只是对话机器人它同时也是一个标准的 MCP Host也就是 MCP 架构里的宿主层。整个 MCP 链条里一共有三个角色。Host 是用户直接面对的应用也就是 Claude Code 本身Client 是 Host 里面负责跟服务器保持连接的协议客户端它负责把用户的指令转成 MCP 请求Server 是具体的工具提供方它暴露三类能力给 Host 调用——Tools可执行的函数、Resources可读取的数据、Prompts可复用的提示词模板。打个比方Claude Code 是主人MCP Server 是家里的各种家电而 MCP 协议就是墙上的标准插座。你去他家做客不需要知道每个家电的说明书你只需要用插座协议就能操控所有电器。这就是为什么 Claude Code 官方模型能力很强但真正让它好用的反而不是模型本身而是能接多少个高质量的 MCP Server。1.3 哪些场景真正值得上 MCP哪些是伪需求我见过不少初学者一上来就装了十几个 MCP Server然后发现 Claude Code 频繁报错、工具互相冲突于是得出结论这玩意儿就是个玩具。实际上问题出在没想清楚需求。真正值得上 MCP 的场景有三类。第一类是设计稿到代码的强需求把 Figma 或蓝湖的标注数据直接喂给模型省去手动截图和描述的时间第二类是本地私有数据的访问比如读取指定目录的文件、查询本地数据库、分析股票软件导出的行情数据第三类是外部服务联动比如操作浏览器、调用内部 API、读写飞书或 Jira 这类协作工具。伪需求也很明显。如果某个工具本身就有现成的 API而你的使用频率并不高那直接用 curl 调 API 可能更简单。MCP 最大的价值在高频、反复、需要模型自主决定调用时机的场景。装 MCP Server 之前先问自己一句这个调用我需要反复做吗需要让 AI 自己判断什么时候调吗如果答案是肯定的再下手。2. 环境安装与登录Mac、Windows、Linux 三端实测Claude Code 的安装本身不复杂但它有一些前置依赖和权限细节尤其是 Windows 上的坑不少人卡了很久。我把三端的实测过程完整走一遍你对照着操作就能少走弯路。2.1 前置依赖Node.js 版本怎么选Claude Code 是 npm 包所以第一个前提是装好 Node.js。官方要求 Node.js 18.0.0 及以上版本但我个人强烈建议你直接装 Node.js 20 LTS 甚至更新的 22 LTS。原因有两个。一个是新版 Claude Code 某些依赖在高版本 Node 环境下的兼容性更好遇到报错的概率明显更低另一个是很多 MCP Server 是通过 npx 运行的npx 本身依赖 npm 的解析流程Node 版本太老会导致包安装缓慢或者启动失败。你不用刻意追求最新的 Node但至少保住 LTS 版本线。安装 Node.js 的方式这里不展开Mac 上推荐 HomebrewWindows 上推荐去官网下载 LTS 安装包。装完以后在终端里执行node -v确认版本号如果终端提示找不到命令说明 Node 没有加到 PATH 里面Windows 用户需要重启终端或者检查系统环境变量。2.2 npm 安装与权限处理确认 Node 环境没问题之后直接执行npm install -g anthropic-ai/claude-code这是全局安装所以任何目录下都能直接使用claude命令。安装完成后先验证一下版本claude --versionMac 和 Linux 上最常见的报错是 EACCES 权限不足也就是 npm 全局目录属于 root普通用户没写权限。你可以用 sudo 临时解决sudo npm install -g anthropic-ai/claude-code但这只是治标。治本的办法是把 npm 的全局目录改成当前用户可写网上搜npm permission error fix能找到标准方案。Windows 上一般不会遇到权限问题前提是你用管理员身份的 PowerShell 或者普通 PowerShell 都能正常读 node 命令。2.3 首次登录与认证安装完成后在任意项目目录下执行claude就会进入首次使用的登录流程。它会给你一个链接在浏览器里打开确认授权后回到终端就开始正式会话了。登录认证这里有一个很关键的细节Claude Code 默认依赖 Anthropic 账号体系也就是说你需要一个能正常访问 Anthropic 官网的账号。如果你只是想在项目里批量使用建议登录一次后不要频繁退出。后续如果碰到认证过期重新执行登录流程就好。很多人关心的Claude Code 接入 DeepSeek其实也是在这个环节做手脚。逻辑是用环境变量把 Claude Code 默认的 API Base URL 指向 DeepSeek 提供的 Anthropic 兼容接口这样它展示的是 Claude Code 的壳背后跑的是 DeepSeek 模型。这个我放到第 6 节详细讲。2.4 验证安装与卸载方法要确认 Claude Code 是否真的可用最简单的验证方式是在一个临时目录里执行claude然后让它写一个 hello world 脚本。它如果能在几步之内给你生成一个能跑的文件说明基础链路没问题。卸载也很简单一条命令npm uninstall -g anthropic-ai/claude-code但注意这只会移除程序本体不会删除你的配置文件、MCP 配置和对话历史。如果你想彻底清干净还要手动删除两个东西用户目录下的~/.claude文件夹以及项目目录下的.mcp.json文件。如果你之前设置过全局配置文件可能还要删掉~/.claude.json。这个配置还在程序没了的问题就是有人说卸载不干净的原因。3. 配置 MCP 服务器的完整姿势三层级、两传输、一份配置初步跑通 Claude Code 之后接下来才是重头戏配置 MCP Server。这一节是整个教程的核心我会把配置层级、传输类型、命令方式和 JSON 文件全部讲透。3.1 三种配置层级的选择Claude Code 里 MCP Server 的配置有三种作用范围你可以根据场景选。第一层是项目级配置。配置文件放在项目根目录文件名固定为.mcp.json。这个文件可以提交到 Git 仓库里团队其他人 clone 下来就能直接复用同一套 MCP 配置。不过要注意项目级配置里面如果带了 API Key 这类秘密信息就千万别提交到公开仓库否则等于把密钥公开了。第二层是用户级配置。文件位置在用户目录下的~/.claude.json。这个配置对所有项目生效适合放个人常用的全局服务器比如文件系统 MCP、浏览工具 MCP。好处是跟项目无关但坏处是如果你在不同项目里用不同工具链配置容易混乱。第三层是通过命令临时添加。claude mcp add命令支持--scope local只对当前会话生效--scope project写入项目配置--scope user写入用户配置。具体用哪个 scope取决于你希望这个服务器的生效范围。我的建议是简单的规则团队共享的服务器放.mcp.json个人私有的放用户级配置调试中的临时测试用 local 就行了。3.2 stdio 与 HTTP/SSE 两种传输方式的区别MCP Server 与 Claude Code 之间有两种通信方式你必须搞清楚这个区别否则配置的时候很容易一头雾水。第一种是 stdio 方式也就是 Claude Code 在本机启动一个子进程通过标准输入输出跟它通信。绝大多数本地 MCP Server 都是这种玩法配置里要写清楚command和args。比如启动 Figma MCP Server你配置的命令是npx -y figma-developer-mcp --stdioClaude Code 会在本地跑起这个进程然后用管道通信。这种方式响应速度快、不需要开放端口适合本地工具。第二种是 HTTP/SSE 方式。MCP Server 跑在某个远程服务器上Claude Code 通过 URL 访问它。配置里只需要写url和可选的headers。比如某些团队内部部署的统一 MCP 网关就是一个远程 HTTP 地址。这种方式的好处是多个客户端可以共享同一个服务器坏处是受网络影响而且需要仔细处理认证。配置时先想清楚你要接的服务器是哪一种然后选择对应的配置格式。3.3 配置文件逐行解析下面这份 JSON 是我在本地项目中实际用的.mcp.json配置包含了 stdio 和 HTTP 两种类型你可以把它当模板{ mcpServers: { filesystem: { command: npx, args: [ -y, modelcontextprotocol/server-filesystem, /Users/me/projects/data ] }, figma: { command: npx, args: [-y, figma-developer-mcp, --stdio], env: { FIGMA_API_KEY: 你自己的Figma令牌 } }, company-gateway: { url: https://mcp.example.com/mcp, headers: { Authorization: Bearer 你团队网关的令牌 } } } }每个 MCP Server 在mcpServers下对应一个 keykey 是你给这个服务器起的名字自己定。stdio 类型的服务器必须指定command和args可选env用于传递环境变量。HTTP 类型的服务器只需要写url如果需要认证就加headers。我把密钥写在.mcp.json里其实不算最安全更稳妥的做法是env字段里引用当前系统环境变量比如FIGMA_API_KEY: {env.FIGMA_API_KEY}这样文件提交到 Git 里也不会泄露秘密。虽然 Claude Code 支持这个语法但不同版本支持程度有差异保守起见你可以在本地跑claude mcp list确认字段是否解析成功。3.4 终端里最快的 MCP 增删改查命令除了手写配置文件我更推荐你在终端里先用命令把服务器加好再回头看 JSON 文件这样最快的路子。添加一个本地 stdio 服务器命令格式是claude mcp add my-server -- npx -y modelcontextprotocol/server-filesystem /data/allow添加带环境变量的服务器claude mcp add figma --env FIGMA_API_KEY你的令牌 -- npx -y figma-developer-mcp --stdio添加一个远程 HTTP 服务器claude mcp add remote-server --transport http --url https://mcp.example.com/mcp查看当前已有哪些服务器claude mcp list查看某个服务器的详细配置claude mcp get figma删除某个服务器claude mcp remove figma这里有一个高频踩坑点就是--前后不能写错。--前面的部分是给 Claude Code 命令本身用的参数比如--env、--scope--后面的部分是要在子进程里执行的命令和参数。很多人把npx写在了--前面结果 Claude Code 把npx当成了自己的参数怎么配置都不对。4. 实操把 Figma、蓝湖的设计稿喂给 Claude设计稿到代码的链路是我觉得 MCP 带来的体验提升最明显的一个场景。以前要人工截图、描述颜色、间距、字号现在 Claude 直接读设计稿数据。这一节把 Figma MCP 和蓝湖 MCP 都走一遍。4.1 Figma MCP 的 Token 去哪获取Figma MCP token 在哪获取是搜索热度很高的一个问题答案其实就藏在 Figma 的账号设置里。步骤是打开 Figma 网站点击左上角头像进入 Settings左侧菜单选 Security安全往下拉到 Personal access tokens 区域点击 Generate new token。生成的时候Figma 会列出这一类的可选权限范围。MCP Server 主要读设计稿信息你必须勾选File content相关的读取权限实践里对应file_content:read这个 scope。如果你勾的权限不足后面 Claude 调用 Figma 接口时会返回 403 或权限错误。还需要注意的一点是Figma 的 Dev Mode MCP 目前对账号方案有要求免费版账户访问不了 Dev Mode 相关接口。所以如果你在免费账号上装好了 MCP 却拿不到数据先别急着怀疑配置有问题先确认账号有没有 Dev Mode 权限。这不是技术问题是权限分级问题。生成的 token 只显示一次复制后妥善保存。把它配置到 MCP Server 的env.FIGMA_API_KEY字段里。如果你担心安全可以先把 token 放到系统环境变量然后在配置里引用。4.2 Figma MCP 的安装与配置Figma 官方提供给开发者的是figma-developer-mcp这个 npm 包。它的安装方式不是传统意义上的装一次而是通过 npx 按需运行每次启动时拉取对应版本。在 Claude Code 里添加 Figma MCP我推荐用 CLI 命令方式claude mcp add figma --env FIGMA_API_KEY你的令牌 -- npx -y figma-developer-mcp --stdio命令执行完你可以先跑claude mcp list看看服务器状态是不是 connected。如果 status 是 connected说明握手成功。如果显示 failed 或者 error大概率是 token 有问题或者 npx 拉包失败先用claude mcp get figma查看完整配置再排查。配置好之后进入 Claude Code 会话你可以直接说读取这个 Figma 文件的 frame 信息它会通过 MCP 工具去操作。实际体验中最有用的几个操作包括读取页面内所有图层名称、读取某个 frame 的坐标与尺寸、读取文本节点的内容。拿到这些数据之后你再让模型生成前端代码就不用靠肉眼去猜设计尺寸了。4.3 蓝湖 MCP 的配置与设计工具对比蓝湖是国内团队常用的设计协作平台它也在跟进 MCP 的方向。蓝湖 MCP 的目标跟 Figma MCP 类似把设计稿上的标注数据暴露给 AI 工具让 Claude Code 能直接读取切图信息、颜色标注、距离测量等数据。接入方式一般是先登录蓝湖网页版在个人设置里找到访问令牌或者 MCP Token。拿到令牌后根据官方文档提供的地址配置远程 MCP 服务器。蓝湖 MCP 通常走 HTTP 方式在配置里写上它的服务器地址和你的鉴权头。配置模板大致如下{ mcpServers: { lanhu: { url: 蓝湖官方提供的MCP地址, headers: { Authorization: Bearer 你的蓝湖Token } } } }跟 Figma MCP 相比蓝湖 MCP 有一个优势国内访问稳定不需要额外的网络环境。如果你的设计团队主力工具是蓝湖直接走这条链路会顺畅得多。而 Figma MCP 在功能深度和 Dev Mode 数据完整度上更成熟两者选谁归根结底看你团队的设计资产在哪一端。4.4 设计稿上下文在真实项目里的用法配置好 MCP 之后怎么把它真正用进开发流程我给你描述一个我实际跑过很多次的场景。前端项目进行中设计稿刚出了新版本。我在终端里启动 Claude Code告诉它查看当前 Figma 文件里首页登录按钮 frame 的样式参数它通过 Figma MCP 拿到按钮的宽高、颜色、字号、圆角、内边距然后直接生成对应的 Vue/React 组件代码。以前这个过程我要手动开 Figma、切到 Dev Mode、鼠标悬停查看每个属性再复制出来。现在变成了自然语言描述加一次代码生成省掉的时间非常可观。这种用法有一个前提就是你在对话里要给 Claude 足够的文件信息最好把 Figma 文件的 URL 或者文件 key 告诉它。因为 MCP 服务器虽然能访问你的文件但它不知道你当前脑子里想的是哪一个 frame。上下文描述得越清晰结果越准。我自己的习惯是先把页面结构或者组件清单写进对话里再让 Claude 去读对应的 frame这样它拿着名单去读取路径明确多了。5. 踩过的坑路径、环境变量、Token 失效配置 MCP 的过程不可能一帆风顺这一节我把自己踩过的坑整理出来。很多问题不是你的操作错误而是工具设计本身就有容易忽略的细节。5.1 Windows 路径与引号炸弹Windows 上配置 MCP 的一个经典报错是command写了npx但启动时提示找不到命令。原因是 Windows 下 npx 实际的可执行文件名是npx.cmd而不是 Unix 系没有扩展名的npx。MCP 子进程通过某种方式直接执行时找不到对应的 exe。解决办法是把命令改成npx.cmd或者更通用的写法{ mcpServers: { filesystem: { command: cmd, args: [/c, npx, -y, modelcontextprotocol/server-filesystem, C:\\data] } } }这样通过 cmd 间接调用 npx避开了 Windows 的解析问题。路径的坑也在这里C:\data在 JSON 字符串里必须把反斜杠写成C:\\data否则 JSON 解析时会把\d当成转义字符直接导致配置无效。如果你对转义不熟更省事的方式是路径里全部用正斜杠C:/dataWindows 下大部分工具都能接受。5.2 环境变量没有生效的排查链路环境变量不生效的情况我遇到过很多次而且每次都是同样的套路。你在终端里执行export FIGMA_API_KEYxxx然后马上跑claude mcp add figma配置里也确实写上了这个 key进会话后发现 MCP 依然报鉴权失败。问题出在作用域和启动时机上。终端里 export 的环境变量只对当前 shell 进程生效Claude Code 如果是在那之前启动的启动时就没有这个变量。你改完环境变量以后必须先重启 Claude Code 进程再添加或启动 MCP Server。很多情况下你以为自己在改环境变量其实改的只是一个已经过期的 shell 会话里的局部变量。排查时按顺序做先确认变量值正确执行echo $FIGMA_API_KEY再确认 Claude Code 是新启动的进程最后确认配置文件里没有手误尤其是拼写错误。如果你用了中文启动器那样的 GUI 工具还要注意别同时存在系统环境变量和 GUI 内变量两边的优先级容易让人迷惑。5.3 识别 Token 过期与权限不足的报错Token 过期和权限不足是使用远程 MCP 时最常遇到的两类问题但它们的报错样式很像容易让人误判。如果你收到 HTTP 401 错误基本可以确定是认证信息失效或者根本没传对。先回服务器管理后台确认 token 是否有效再看看 headers 里Authorization的格式有没有写对。Bearer token 的写法是Bearer 空格 token很多人把空格漏掉服务器不认。如果收到 403说明认证通过但权限不够。比如 Figma token 没有勾选file_content:read权限或者蓝湖令牌没开通对应团队空间。这时候不是 token 失效而是你在令牌创建页面勾选的 scope 跟当前 MCP Server 需要的不匹配。回到令牌创建页面生成一个新令牌并勾选足够权限然后替换旧值。经验之谈无论 401 还是 403先去拿日志。在 Claude Code 里多关注 MCP 服务器返回的具体错误字段如果日志里能看到unauthorized或insufficient_scope原因就清楚了。只凭一个 HTTP 状态码猜往往会浪费很多时间。6. 进阶把 DeepSeek、本地文件、通达信数据接进来6.1 用 DeepSeek 当 Claude Code 后端模型Claude Code 接入 DeepSeek之所以热门核心原因是成本。DeepSeek 的接口价格确实很有吸引力而 Claude Code 本身又是个好用的壳两者结合就是用最低的成本体验强大的编程助手。关键在于 DeepSeek 已经提供了 Anthropic 兼容的 API 端点Claude Code 不需要做任何代码层面修改改几个环境变量就能切换。具体操作是设置三个环境变量export ANTHROPIC_BASE_URLhttps://api.deepseek.com/anthropic export ANTHROPIC_AUTH_TOKEN你的DeepSeek API Key export ANTHROPIC_MODELdeepseek-chat设置完之后执行claude对话就会走后端 DeepSeek 的模型。你还可以把模型切到deepseek-reasoner来获取更强的推理能力代价是响应更慢。这个方案最方便的地方在于 Claude Code 不用重装MCP 配置也完全不用动只是换了个后端脑子。这里有个小提醒用 DeepSeek 后端时Claude Code 界面上显示的模型名可能仍然是默认的 Claude 相关字样不要被误导。是否真的切到了 DeepSeek可以在对话里问它你现在是什么模型它会老实回答自己的身份。6.2 本地文件系统 MCP 的权限设计本地文件 MCP 是我给 Claude Code 配置的第二个服务器用的就是官方示例包modelcontextprotocol/server-filesystem。它的作用是让 Claude Code 能读取和写入某个目录下的文件。配置方法是把允许访问的目录列表放在命令参数里claude mcp add fs -- npx -y modelcontextprotocol/server-filesystem /Users/me/projects/data这里面的权限设计非常关键也是最容易被忽略的地方。官方允许你一次性挂载多个目录形如... /dir1 /dir2但我建议只挂载当前项目需要的目录千万不要图省事把整个用户目录甚至整个磁盘挂进去。一旦挂载整个磁盘就等于给了 AI 代理对所有本地文件的读写能力一旦你让它执行某个自动化脚本它可能顺着目录扫出你所有私人文件风险非常大。我在实际使用中就把这个限制保持得很严只挂载一个data子目录。如果你需要让 AI 访问多个项目每次按需挂载即可。信任 AI 可以但对 AI 做权限最小化原则不能丢。6.3 通达信股票本地数据 MCP 的接入通达信这类股票软件给 AI 用 MCP属于本地私有数据给 AI的代表案例。通达信默认会把行情数据存在本地但这些数据格式比较封闭并不适合直接让 AI 去解析。社区里的解决办法是写一个桥接程序读取通达信本地数据文件然后通过 MCP 接口暴露出来。这类 MCP Server 一般会提供几个工具接口查当前行情、读日 K 线、查询自选股列表等。配置方式和普通 stdio 服务器没有区别你把对应入口命令写进.mcp.json即可。但因为本项目比较小众安装过程需要针对具体工具源码构建不同版本的通达信数据路径不同需要你根据自己安装目录去调整配置参数。从实用角度来说把静态行情数据喂给 AI 的价值在于做复盘分析、生成自定义指标解读而不是实时交易。真要交易信号你不会想让 AI 通过这个链路做决策延迟和数据完整性都不够。把它当成数据分析工具别当成交易终端。6.4 数据类 MCP 的安全意识无论是本地文件、通达信数据还是设计稿数据本质都是把敏感数据暴露给模型。安全意识比你的配置习惯更重要。有两条边界我始终守住了。第一条能只读就不要读写。如果某个 MCP 支持只读模式优先使用。比如文件系统 MCP 虽然支持读写但很多场景你只希望 AI 读文件不需要它改文件。无法在服务器层配置权限的时候只能靠自己的对话约束和目录白名单来控制。第二条密钥永远不要提交到 Git。为了偷懒大家很容易在项目级.mcp.json里直接写死 token。如果这个仓库是公开的你的 Figma Key、蓝湖 Token 就等于公之于众了。要么用环境变量引用要么把带密钥的配置放到用户级配置里项目级的只放不含密钥的服务器定义。7. 实战工作流VS Code 联动、Trae、Skills 与二开命令行用的多了你会慢慢希望把它嵌到日常开发工具链里而不是每次切到终端去敲命令。这一节讲怎么让 Claude Code 在不同的 IDE 工作流里发光发热顺便说说 Skills 和二次开发那些事。7.1 VS Code 扩展安装与联动VS Code 上可以直接安装 Claude Code 扩展。装完之后扩展会复用你已经配好的 CLI 授权和 MCP 配置不需要重新登录一遍。我最早在 VS Code 里用的时候最方便的是它会在侧边栏展示 MCP 服务器列表和状态你能一眼看到哪些服务器 connected、哪些 failed出了问题不用回终端反复查询。另一个很爽的点是扩展允许你选中代码片段直接扔进对话上下文。以前我要复制代码再贴到终端现在通过 VS Code 的面板就能完成代码引用了。对于日常写接口、做重构、写单测这些任务体验比纯命令行顺滑得多。有一点需要注意如果你在 VS Code 里同时启用了多个 AI 插件比如 Cursor 的代理、其他助手它们可能会抢占模型 API 的并发额度或者出现快捷键冲突。我的建议是只用一套 AI 工具链别一股脑全开。7.2 Trae 里面怎么用 Figma MCPTrae 是字节跳动推出的 AI IDE它内部同样支持 MCP 标准。所以你在 Claude Code 里配好的 Figma MCP 思路在 Trae 里完全可以复用。在 Trae 中添加 MCP 服务器是在设置面板里操作。你选择添加 MCP 源类型可以选 stdio然后把前面那份配置里的 command、args、env 依次填进去。Trae 跟 Claude Code 的配置字段没有根本差异你只需要把figma-developer-mcp的 npx 命令照样填上把FIGMA_API_KEY塞进环境变量区。通信过程对用户透明配置完直接在 Trae 的对话里让它读设计稿就行。一个细节要特别提醒Trae 的 MCP 配置面板有时要求填绝对路径尤其是command字段。如果你填npx找不到命令试一下填 Node 安装目录下的完整路径比如C:\Program Files\nodejs\npx.cmd。这是因为 IDE 子进程的环境变量可能跟终端不一样。7.3 Skills 的安装与编写Skills 是 Claude Code 里另一种扩展玩法跟 MCP 是互补关系。如果说 MCP 提供的是外部工具能力Skills 提供的则是内化的做事方法——你教给 Claude Code 一套固定流程它遇到对应任务时按流程执行。安装 Skill 的方式很简单在~/.claude/skills/目录下新建一个文件夹里面放一个SKILL.md文件。这个文件分两部分开头是 YAML 格式的 frontmatter包含name和description后面是 Markdown 正文写清楚这个 Skill 的完整执行步骤。举个例子你可以写一个写周报的 Skill里面定义好第一步读取本周的 Git 提交记录第二步筛选关键变更第三步按指定格式输出周报。Claude Code 在对话中遇到写周报的需求时就会自动读取这个 Skill 并执行。Skill 跟 MCP 配合起来威力很大——MCP 负责拉取提交记录Skill 负责定义输出格式。7.4 Claude Code 二开的切入点如果你不满足于现成配置想在自己项目里集成 Claude Code 或者写自定义 MCP Server主要有两个切入点。第一个是写 MCP Server。MCP 官方提供了 TypeScript、Python、Java 等语言的 SDK你可以把内部服务包装成标准 MCP Server然后用 Claude Code 直接调用。我之前把一个内部订单查询服务封装成了 stdio 类型的 MCP团队所有人通过 Claude Code 就能查询订单状态不用再打开管理后台。第二个是嵌入 Claude Code SDK。Anthropic 提供了anthropic-ai/claude-code这个 SDK允许你把 Claude Code 的会话能力集成到自己的 Web 应用或桌面工具里。Spring Boot 这类工程里也能用它做 AI Agent 服务层配合 MCP 客户端做出自己的 Agent 应用。二次开发的门槛不在代码而是你要先想清楚你的工具对外暴露什么能力、对内保留什么权限。这比写几行代码重要得多。8. 用了一段时间之后该薅的羊毛和该避的坑8.1 真正节省时间的场景用到现在我最依赖 Claude Code 的场景排序很清楚第一是设计稿转组件代码第二是自动化读代码库做重构第三是写单测和修补 bug。这三个场景的共同点是模型需要大量上下文——设计稿需要图层的坐标数据重构需要完整理解一个模块的调用关系修 bug 需要看到报错栈和周边代码。MCP 恰好把上下文供给这件事自动化了所以体验是质变。反过来有些场景我用了几次就放弃了。比如让 AI 自己翻遍整个项目找一处小问题它的检索效率不如 IDE 的全局搜索。这时候硬上 MCP 和 Agent反而浪费时间。工具要放到对的场景里用MCP 不是万能钥匙它解决的是打通数据和模型的问题而不是帮你把所有工作都自动化的问题。8.2 给本地文件 MCP 划分最小权限我对想接文件系统 MCP 的读者给一条最实在的建议永远只挂载必要目录。你可以在项目根目录下专门建一个ai-files之类的文件夹把需要 AI 读写的文件都放进去MCP 配置里只挂载这一个目录。这个习惯有三个好处。第一AI 不会无缘无故扫描到你的私人文件第二当 AI 错误地写入了不该写的位置你的容错范围很小最多就是ai-files一个目录里有垃圾文件第三团队协作时新人只要看配置文件就知道 AI 能碰哪些目录权限心里有数。我见过有人在用户级配置里挂了整个开发目录AI 跑自动化时把另一套项目的代码格式全改了这种事故就是权限边界没划清的结果。8.3 最后分享一个我自己常用的小技巧最后说一个我每次搭建新项目都会做的事。我先在项目根目录写好.mcp.json里面只放这个项目确实需要的服务器定义然后在 Claude Code 里让 AI 先巡检一遍所有 MCP 服务器检查当前项目的 MCP 配置列出每个服务器的状态和可用工具。它会把claude mcp list的结果整理成表格发给我哪台通了、哪台挂了一目了然。接着我直接继续对话让它基于 MCP 工具干活。这个巡检动作虽然简单但能在每次开始大任务之前把工具链可用性确认掉省得写到一半发现 MCP 没连上再回头排查。对这套东西感兴趣的话建议你先跑通一个最常用 MCP把配置文件弄熟再逐步加服务器。别一口气上太多否则排错会把你劝退。工具链的核心不在于多而在于你能否在正确的时候让它启动、在错误的时候快速发现。