企业官网建设流程全解析

第一次在终端里敲下claude这个命令的时候，说实话我没抱太大期待。当时市面上号称"AI 编程助手"的东西太多了，多数是套一层 IDE 插件壳，真正问两句就露馅。但 Claude Code 不一样——它直接在终端里跑，能读写文件、执行命令、改完代码自己跑测试，第一次用就有种"这不是聊天框，是一个真的在帮你干活的实习生"的感觉。

不过用了一阵子就撞到天花板：它能操作你电脑上的东西，却看不见你浏览器里的页面、Figma 里的设计稿、数据库里的表结构。直到我把 MCP 接进去，才发现前面的使用方式只发挥了三成功力。这篇教程我就按自己从零折腾到熟练的路线，把"Claude Code 是什么、MCP 是什么、怎么装、怎么配、怎么接各种服务器、怎么避坑"一次讲透。不管你是刚听说 MCP 的小白，还是已经装好但不知道怎么深入的老手，都应该能从这里找到对应的答案。

1. 先搞清楚底层逻辑：MCP 是什么，Claude Code 又是什么

1.1 MCP 不是插件，是"AI 世界的 USB-C 接口"

MCP 全称是 Model Context Protocol，模型上下文协议。如果你搜过"MCP 是什么"，会看到各种绕来绕去的定义，我用自己的话说：MCP 是一套让 AI 应用连接外部工具的标准化接口协议，由 Anthropic 在 2024 年底开源。

拿充电接口类比最好理解。以前每个手机品牌都有自己的充电口，你出门要带好几根线，后来大家统一成 USB-C，一根线走天下。MCP 干的就是这件事：在没有 MCP 之前，每个 AI 工具要接入一个新服务，都得为它专门写一套对接代码，A 工具接完 Figma，B 工具想接还得重写一遍。有了 MCP 之后，服务方只需要按照统一协议暴露一个"MCP Server"，任何支持 MCP 的 AI 应用都能直接连上，一次开发，到处复用。

所以说，MCP 不是某个具体软件，也不是某个插件，它是一套"约定"。你平时听到的"蓝湖 MCP""Figma MCP""Playwright MCP"，都是基于这套约定写出来的具体服务器程序。

1.2 Claude Code 是 MCP 体系里的"宿主"

那 Claude Code 是什么？简单说，它是 Anthropic 官方推出的终端版 AI 编程代理。注意"代理"这个词——它不是简单的问答工具，而是能直接在你电脑上执行操作的程序。你给它一个任务，它会自己规划步骤，读写代码文件、执行 shell 命令、运行测试、根据报错修改代码，全程像有一个远程同事在替你操作终端。

在 MCP 体系里，Claude Code 扮演的是Host（宿主）角色。所谓 Host，就是"运行 MCP 客户端、并且最终把工具能力呈现给 AI 模型"的那个应用。你可以把 Host 理解成插座，MCP Server 理解成电器，插上哪个电器，AI 就多出哪个本领。

这里有个很容易混淆的点：很多人以为"装了 Claude Code 就等于有了 MCP"，其实不对。Claude Code 本身只是 Host，它自带了一些基础能力（文件读写、执行命令），但那些五花八门的外部能力——看图、操作浏览器、连数据库——全部要靠你主动接入 MCP Server 才能获得。

1.3 三角色分工：Host、Client、Server

MCP 协议里有三个角色，搞清楚了你就不会再被各种教程绕晕：

MCP Server 对外暴露三类能力：Tools（工具），AI 可以主动调用的函数，比如"读取设计稿图层""点击页面按钮"；Resources（资源），AI 可以读取的数据，比如配置文件、文档内容；Prompts（提示模板），预置好的交互模板。日常使用中你接触最多的是 Tools，因为 Claude Code 干活基本都是在调工具。

搞清楚这个关系之后，你会发现整个人工智能工具链的玩法都变了：以前是"每个 AI 应用各自为政"，现在是"一个 Host + N 个 Server"，插拔组合，自由拼装。

2. 安装部署实测：Win11、Ubuntu、macOS 三平台记录

2.1 前置环境：先检查 Node.js 和 npm

Claude Code 是基于 Node.js 的命令行工具，安装前先把环境准备利索，省得后面各种报错。官方要求 Node.js 版本18 以上，但根据我实际使用的经验，建议直接用 20 LTS 或更新的版本，旧版本在加载一些 MCP Server 时会出现兼容问题。

检查命令：

node -v npm -v

如果提示找不到命令，说明 Node.js 还没装。Windows 用户建议去官网下载 LTS 安装包，一路下一步；Ubuntu 用户我推荐用 nvm 管理 Node 版本，避免直接用 apt 装的版本过旧：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash nvm install 20 nvm use 20

macOS 用户如果装了 Homebrew，直接brew install node也行。这一步没什么技术含量，但值得多说一句：尽量别用系统自带的旧版 Node，我见过好几个报错案例，最后排查下来都是 Node 版本太老。

2.2 安装命令与版本验证

三平台的安装命令完全一样，全局安装：

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

装完之后验证：

claude --version

能输出版本号就说明装好了。如果提示"command not found"，大概率是 npm 全局 bin 目录没在 PATH 里。Windows 上常见于 PowerShell 执行策略限制，可以试试：

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Ubuntu 上如果出现 EACCES 权限报错，说明 npm 全局目录的权限有问题，不建议用 sudo 硬装，一劳永逸的办法是把 npm 全局目录改到用户目录下：

mkdir -p ~/.npm-global npm config set prefix '~/.npm-global' # 然后在 ~/.bashrc 里加上 export PATH=~/.npm-global/bin:$PATH

更新版本也很简单，Claude Code 的迭代速度很快，基本一两周就有新版本：

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

2.3 登录认证与第一次对话

装好后在终端输入claude，首次启动会进入登录流程。Claude Code 需要 Anthropic 账号认证，支持订阅用户登录，也支持 API Key 方式。如果用 API Key，记得先设置环境变量：

export ANTHROPIC_API_KEY=你的key

Windows 用户用setx ANTHROPIC_API_KEY "你的key"设置永久环境变量。

登录成功后会进入交互界面，先别急着干活，用几个命令摸摸底：

• /status：查看当前登录账号、模型、工作目录
• /help：查看所有斜杠命令
• /cost：查看本次会话的 token 消耗
• /config：打开配置文件编辑器

首次对话我建议让它做点简单的事，比如"列出当前目录的文件并说明每个文件的作用"，先确认它能正常读写文件。如果这一步都报错，多半是目录权限问题，后面第 6 节专门讲。

3. 配置体系拆解：settings.json、权限模型与 VS Code 集成

3.1 配置文件放哪、优先级怎么算

Claude Code 的配置分散在几个位置，搞清楚它们的优先级很重要，不然你明明改了一个配置却不生效，会怀疑人生。

• 用户级配置：~/.claude/settings.json，所有项目生效
• 项目级配置：项目目录/.claude/settings.json，跟着项目走，适合团队共享
• 本地覆盖配置：项目目录/.claude/settings.local.json，一般不提交到版本库，放个人偏好
• 环境变量：.claude/settings.json里可以读${VAR}形式的环境变量

优先级从高到低大致是：本地覆盖 > 项目级 > 用户级。也就是说，同一个配置项出现在多个文件里，生效的是优先级高的那个。

一个典型的用户级 settings.json 长这样：

{ "model": "opus", "permissions": { "allow": [ "Bash(npm run *)", "Read(credentials/*)" ], "deny": [ "Bash(rm -rf *)" ] }, "env": { "ANTHROPIC_MODEL": "claude-sonnet-4-5" } }

注意model字段控制模型偏好，env里的ANTHROPIC_MODEL也可以指定模型，两者同时出现时以 env 为准。我通常把model设置成sonnet，平衡速度和效果，大任务再临时切换到opus。

3.2 权限控制：allow / ask / deny 三档

Claude Code 能直接操作你的终端，所以权限控制是配置里的重头戏。它的权限模型分三档：

• allow：直接执行，不询问
• ask：每次执行前弹确认，让你决定放不放行
• deny：直接禁止

默认情况下，Claude Code 对敏感操作（删除文件、安装依赖、执行未知命令）会走 ask 流程。用久了你会觉得每次都弹窗很烦，这时可以把一些安全的命令加进 allow 列表。比如我经常让它跑项目测试：

"permissions": { "allow": [ "Bash(npm run test)", "Bash(npm run lint)" ], "ask": [ "Bash(git push *)" ], "deny": [ "Bash(rm -rf /)", "Bash(.*sudo.*)" ] }

还有个--dangerously-skip-permissions参数，加上之后所有操作都不询问，直接执行。这玩意儿听着省事，实际就是在裸奔，非隔离环境千万别用。我见过有人图省事全程跳过权限，结果 AI 误删了.git目录，欲哭无泪。

3.3 在 VS Code 里使用 Claude Code

虽然 Claude Code 的战场是终端，但很多人更习惯在编辑器里用。官方提供了 VS Code 扩展，装好之后有几种用法：

1. 集成终端：在 VS Code 内置终端里直接跑claude，工作在项目目录下，这其实是我最常用的方式。
2. 命令面板：Ctrl+Shift+P搜 "Claude Code"，可以快速启动对话。
3. 侧边栏视图：新版扩展有独立的侧边栏界面，能把对话和代码编辑并排显示。

在 VS Code 里用有个天然好处：Claude Code 修改文件后，你能在编辑器的变更提示里直观看到改了什么，随时回滚。我习惯在 VS Code 里用它改代码，在纯终端里用它做运维操作，分工明确。

4. MCP Server 接入实战：设计稿、浏览器自动化、3D 场景一次讲透

4.1 添加 MCP Server 的三种方式

这是全篇最核心的部分。接 MCP Server 有三种方式，对应不同场景：

方式一：命令行直接添加

claude mcp add playwright -- npx @playwright/mcp@latest claude mcp add figma -e FIGMA_API_KEY=你的token -- npx -y @figma-dev/mcp-server

claude mcp add后面跟的是给这个服务器起的名字，--之后是启动命令。加环境变量用-e KEY=value。查看和管理：

claude mcp list claude mcp remove playwright

方式二：项目配置文件 .mcp.json

在项目根目录创建.mcp.json，内容格式如下：

{ "mcpServers": { "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] }, "figma": { "command": "npx", "args": ["-y", "@figma-dev/mcp-server"], "env": { "FIGMA_API_KEY": "你的token" } } } }

这个文件会跟着项目走，团队成员 clone 下来就能用，强烈推荐。注意.mcp.json和.claude/settings.json是两回事：前者只存放 MCP 服务器的定义，后者是 Claude Code 自身的配置。

方式三：连接远程 MCP Server

claude mcp connect --transport http https://example.com/mcp

适合连接已经部署在服务器上的 MCP 服务，走 streamable HTTP 或 SSE 协议。这个是进阶玩法，本地开发用得少。

4.2 Figma MCP：设计稿直接进上下文

Figma MCP 是社区里呼声最高的服务器之一，它解决的核心痛点是：AI 终于能"看见"设计了。

接入步骤：

1. 在 Figma 个人设置里生成 Personal Access Token
2. 从设计稿 URL 里提取 File Key（URL 里file/后面那串字符）
3. 按 4.1 的方式添加服务器，设置FIGMA_API_KEY环境变量
4. 对话时直接把 Figma 文件链接丢给 Claude Code

之后你可以问它"这个设计稿用的什么色值""首页的间距体系是什么"，甚至让它根据设计稿直接生成前端代码。很多人关心的"Figma MCP 可以直接切图吗"，答案是：能拿到图层信息和导出资源，但生产级的切图还是要在 Figma 里配合规范来做，MCP 更适合让 AI 理解设计意图、快速生成结构代码。

实测下来，让 Claude Code 读一张复杂设计稿然后写 Tailwind 页面，还原度能有七八成，剩下的细节需要人工校对样式变量。这一步对前端效率的提升是质变级的——以前从设计到代码要经历"看图-理解-手写"三个阶段，现在 AI 可以直接跳过看图环节。

4.3 蓝湖 MCP：国内设计协同场景的补充

蓝湖是国内团队常用的设计协作平台，它家也出了 MCP Server，原理和 Figma MCP 类似：让 AI 直接读取蓝湖上的设计稿、标注信息、切图资源。对国内团队来说，设计资产放在蓝湖而不是 Figma 的非常多，这个 MCP 的价值就在于此。

接入方式同样是拿到蓝湖的访问凭证，配置好服务器后，让 Claude Code 去读某个设计稿页面的标注和样式数据。实际协作场景里，我一般用它来做"设计稿信息问答"和"标注数据提取"，比如让 AI 确认某个按钮的圆角、边框、字号，避免反复切图软件人工核对。

4.4 Playwright MCP：让 AI 自己操作浏览器

Playwright MCP 是微软出的官方服务器，它把 Playwright 的浏览器自动化能力暴露给 AI。接上之后，Claude Code 可以：

• 自己打开浏览器访问页面
• 点击、输入、滚动，模拟真实用户操作
• 截图，然后"看"截图判断页面渲染是否正确
• 抓取控制台报错、网络请求信息

这对前端开发的调试效率提升是惊人的。以前排查"为什么这个页面白屏"要自己开 DevTools 慢慢看，现在直接让 Claude Code 打开页面、截图、检查控制台，很多问题它自己就能定位并修复。

有一个技巧：让 Claude Code 跑 Playwright 的时候，明确告诉它"每一步操作后都截图"，这样你能通过截图看到它的操作过程，发现问题时也方便回溯。我踩过的坑是，有些网站有反爬机制，Playwright 默认的浏览器指纹容易被识别，这种时候需要设置--browser chromium并考虑使用持久化上下文。

4.5 值得关注的生态案例：Blender、Burp、IDA、Vivado

MCP 生态的想象力远比"接几个官方服务器"大。我在实际使用和调研中整理了几个方向：

• Blender MCP：连接 Blender，让 AI 通过自然语言控制 3D 建模场景——创建物体、调整材质、设置动画关键帧。对 3D 内容生产流程是个潜在的游戏规则改变者。
• Burp MCP / IDA MCP：安全测试和逆向工程领域，让 AI 直接操作 Burp Suite 的代理数据、IDA 的反编译结果。做安全测试的人已经在探索让 AI 辅助分析流量和二进制代码。
• Vivado MCP：FPGA 开发领域，有人把 Xilinx Vivado 的工具链封装成 MCP，AI 辅助写约束文件、分析综合报告。
• Spring Boot MCP：Java 生态的集成，Spring AI 官方支持 MCP，Java 服务可以暴露 MCP Server 给 AI 调用。
• DevSpace MCP：Kubernetes 开发环境管理，AI 直接操作集群资源。

这些案例说明一件事：MCP 的价值不在于某一个服务器有多强，而在于它是统一接口。任何工具，只要有人封装成 MCP Server，就能立刻接入所有 MCP Host。作为使用者，你不需要知道每个工具的底层 API，只需要会接 MCP。

5. 进阶玩法：Skills 技能、自定义 MCP Server 与模型联动

5.1 Skills 和 MCP 的区别，以及技能的安装

用熟 MCP 之后，你还会碰到一个概念：Skills（技能）。很多人把它和 MCP 混为一谈，其实两者解决的问题完全不同。

• MCP 给 AI 的是"手"：能调用外部工具做事情
• Skills 给 AI 的是"脑内知识库"：教它特定任务怎么做、遵循什么规范

一个 Skills 就是项目里的一个目录，里面有一个SKILL.md文件，用 Markdown 写清楚这个技能的使用场景、步骤、注意事项。Claude Code 在干活时会自动加载相关技能，按里面的指引来执行。

安装方式很简单：创建.claude/skills/技能名/SKILL.md，然后把内容写进去。比如我团队写了一个"如何规范提交代码"的技能：

# 代码提交规范 ## 适用场景 当需要执行 git commit 时使用。 ## 步骤 1. 先运行 git diff 查看变更内容 2. 根据变更类型选择前缀：feat/fix/refactor/docs 3. 提交信息格式：<type>(<scope>): <description>

也可以从 GitHub 上找别人写好的 skills 仓库直接 clone 到.claude/skills目录。Skills 是纯文本、零依赖、跟着仓库走，非常适合团队沉淀最佳实践。

5.2 用 TypeScript 写一个本地 MCP Server

如果现成的 MCP Server 满足不了需求，你可以自己写。MCP 官方提供了 SDK，支持 TypeScript 和 Python。我用 TypeScript 写一个最简版本地服务器，让你感受一下：

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; import { z } from "zod"; const server = new McpServer({ name: "demo-server", version: "1.0.0", }); server.tool( "add", "计算两个数字之和", { a: z.number(), b: z.number() }, async ({ a, b }) => ({ content: [{ type: "text", text: String(a + b) }], }) ); const transport = new StdioServerTransport(); await server.connect(transport);

这段代码做的事情就是：定义了一个叫add的工具，接收两个数字参数，返回它们的和。通过 stdio 传输层和父进程（即 Claude Code）通信。编译成 JS 之后，在.mcp.json里用 node 命令启动它：

{ "mcpServers": { "demo": { "command": "node", "args": ["/path/to/demo-server.js"] } } }

对你来说，技术难点不在写工具逻辑，而在理解协议边界——工具的参数要定义得足够清晰，AI 才知道怎么调用你。我写过几个内部工具，血泪教训是：参数描述比实现更重要，因为 AI 是拿你的描述来理解工具用途的。

5.3 RAG 和 MCP 到底有什么区别

这两个概念经常被放在一起问，因为都涉及"给 AI 更多信息"。它们的区别可以一句话概括：

• RAG（检索增强生成）解决的是"模型不知道的知识"：把文档切块、向量化、存到数据库里，用户提问时先检索相关内容，拼进提示词再让模型回答。
• MCP 解决的是"模型做不到的事情"：读文件、调接口、操作浏览器，这些需要实际执行的动作。

一个是"喂知识"，一个是"给手"。它们不冲突，甚至经常配合使用——你可以用一个 MCP Server 去查询向量数据库，把检索到的内容返回给模型。我接触过的很多所谓"知识库问答"项目，本质就是 RAG + MCP 的组合。

5.4 把 Claude Code 接到 DeepSeek 等模型的思路

很多人问 Claude Code 能不能接 DeepSeek、通义这类国产模型，因为它们的 API 价格便宜不少。原理上可行，但有个坎：Claude Code 原生只认 Anthropic 的 Messages API 格式，而 DeepSeek 提供的是 OpenAI 兼容接口，两者协议格式不同。

社区给出的解法是加一层"协议转换路由层"，常见工具如claude-code-router。它把 Claude Code 发来的 Anthropic 格式请求转成 OpenAI 格式，转发给 DeepSeek 等模型，再把结果转回。配置思路大致是：

1. 安装路由工具
2. 在配置文件里注册模型提供商，填 DeepSeek 的 API Key 和接口地址
3. 启动 Claude Code 时指定走路由层

另一个更直接的字段是ANTHROPIC_BASE_URL，它用来指向任何兼容 Anthropic API 格式的服务端。如果你的模型服务商提供了 Anthropic 兼容端点，直接用这个环境变量就能切换。

需要提醒的是：Claude Code 的一些特性（比如工具调用、思考过程）对不同模型的兼容度不一样，接了第三方模型后可能出现工具调用格式对不上、行为不稳定。拿来玩玩可以，生产环境我仍然建议用官方模型，稳定性优先级最高。

6. 高频问题排查：权限拒绝、卸载残留、版本兼容全记录

6.1 权限拒绝与高危命令审批

遇到最多的报错是 Claude Code 执行命令时被权限系统拦下来，提示类似 "The user denied access to this tool" 或者 "permission not granted"。这不是 bug，是权限模型在正常工作。处理思路分两步：

第一步，看这个操作是不是必要的。如果只是偶尔一次，直接在弹窗里批准即可；如果是高频操作，加到settings.json的permissions.allow里。

第二步，检查是不是写错了权限规则。Claude Code 的权限规则支持通配符和正则形式的命令匹配，比如：

"allow": [ "Bash(npm run *)", "Read(.*\\.env$)" ]

注意规则写得太宽会有安全风险，Bash(.*)等于放行所有命令，和裸奔没什么区别。我一般只放行自己反复确认过的安全命令前缀。

6.2 彻底卸载与残留目录清理

卸载 Claude Code 的命令：

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

但很多人卸载完还会遇到claude命令还能用的情况，这是因为用户目录下有残留的可执行文件。检查并清理这些位置：

• ~/.claude/：保存了配置、历史会话、日志，删掉之后所有配置和登录信息都没了
• ~/.config/claude-code/：部分版本的用户配置在这里
• %USERPROFILE%\.claude（Windows 下）

删之前想清楚，如果只是重装，保留~/.claude/settings.json可以省去重新配置的麻烦；如果是彻底卸载，全部删掉。

6.3 版本更新带来的兼容性问题

Claude Code 版本更新频繁，有次我升级后，之前能用的一个自定义 MCP Server 突然连不上了，报 JSON-RPC 解析错误。排查下来发现是服务器用的 SDK 版本太老，和新版 Claude Code 的协议版本不兼容。

解法很直接：

npm update @modelcontextprotocol/sdk claude mcp list # 查看各服务器的连接状态

遇到 MCP 连接异常，先用claude mcp list看状态，再用claude mcp inspect 服务器名（如果支持）看具体报错。多数情况下，把 MCP Server 的依赖更新到最新版就能解决。

另一个常见问题是 NVM 用户升级 Node 版本后，全局安装的 Claude Code 找不到了。因为 NVM 的全局包是按 Node 版本隔离的，切了版本之后需要重新安装。这个坑我踩过不止一次，后来在 shell 配置里加了自动安装的逻辑，切到新版本 Node 时自动跑一遍npm install -g @anthropic-ai/claude-code。

最后分享一个我长期使用下来的心得：别急着把所有 MCP Server 都接上，先想清楚你日常工作里最痛的那个环节是什么。前端就优先接 Figma 和 Playwright，设计协作就接蓝湖，测试就接浏览器自动化。MCP 的真正用法是把你的工作流拆成一个个"可被 AI 调用的小能力"，而不是把一堆服务器堆在一起显得很酷。我现在自己维护的项目里，.mcp.json一般只放两到三个服务器，但每一个都在生产环境里实打实地提效。另外一个建议是，给团队用的话，把.mcp.json和.claude/skills都提交到版本库，新成员 clone 下来就能获得完整能力，这是最省心的团队协作姿势。