企业官网建设流程全解析

1. 先理清两个词：Claude Code 和 MCP 到底是什么关系

我第一次听说 Claude Code 的时候，说实话没什么感觉。一个跑在终端里的 AI 编程助手，当时我想，这不就是给命令行套了个 ChatGPT 皮肤吗？真正让我改变看法的，是在我搞清楚 MCP 是什么、并且亲手把设计稿、本地文件、数据库全部接进 Claude Code 之后。也就是从那一刻起，我才意识到自己之前只用到了这套工具 10% 的能力。

1.1 MCP 不是插件，也不是 API，它是一套“外设协议”

很多人第一次看到 MCP 三个字母，第一反应是"又一个 AI 插件格式"。但 MCP（Model 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 上推荐 Homebrew，Windows 上推荐去官网下载 LTS 安装包。装完以后在终端里执行node -v确认版本号，如果终端提示找不到命令，说明 Node 没有加到 PATH 里面，Windows 用户需要重启终端或者检查系统环境变量。

2.2 npm 安装与权限处理

确认 Node 环境没问题之后，直接执行：

npm install -g @anthropic-ai/claude-code

这是全局安装，所以任何目录下都能直接使用claude命令。安装完成后先验证一下版本：

claude --version

Mac 和 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 --stdio，Claude 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下对应一个 key，key 是你给这个服务器起的名字，自己定。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:/data，Windows 下大部分工具都能接受。

5.2 环境变量没有生效的排查链路

环境变量不生效的情况我遇到过很多次，而且每次都是同样的套路。你在终端里执行export FIGMA_API_KEY=xxx，然后马上跑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_URL=https://api.deepseek.com/anthropic export ANTHROPIC_AUTH_TOKEN=你的DeepSeek API Key export ANTHROPIC_MODEL=deepseek-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 MCP

Trae 是字节跳动推出的 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，把配置文件弄熟，再逐步加服务器。别一口气上太多，否则排错会把你劝退。工具链的核心不在于多，而在于你能否在正确的时候让它启动、在错误的时候快速发现。