企业官网建设流程全解析

说实话，我最早看到“Claude Code + MCP”这个词组时，第一反应是“又一个营销号概念”。真正让我改变想法的是一个小场景：我给 Claude Code 派了个活，让它给项目加一个导出报表功能，它自己改了三个文件、跑了两次测试、还修了一个我平时根本没注意到的类型错误。网页版 Claude 做不到这种事，因为它只能“说”，不能“做”；而做到这一点的关键，正是 MCP。下面这篇内容，是我从零折腾 Claude Code 到日常依赖它的完整记录，覆盖安装、配置、MCP 实战和一堆坑，适合所有想把 AI 真正用进开发流程的人。

如果你还没搞清楚 Claude Code 是什么、MCP 到底干嘛用，或者已经在配置界面里卡了半天，这篇文章可以帮你把整条链路捋顺。从理论到落地，我尽量不用看不懂的黑话。

1. Claude Code 到底是什么，和网页 Claude 的区别在哪

1.1 它不是网页版的换皮

很多人第一次接触 Claude Code，可能会以为它是一个网页版 Claude 的桌面壳子。实际上，Claude Code 是 Anthropic 推出的命令行 AI 编程代理。它运行在终端环境，能在你的项目目录里直接工作——读文件、改文件、执行 Shell 命令、跑测试、提交代码。网页版 Claude 的定位是“对话助手”，你问它答，顶多就是把代码片段复制出来；Claude Code 的定位是“驻场工程师”，它跟你的仓库、操作系统、开发工具链直接打通。

这种能力差别的核心，来自它的 Agent 循环：Claude Code 不是一次性生成答案，而是会迭代调用工具，观察结果，再决定下一步。比如你说“修一下这个 bug”，它会先用 rg 搜索相关代码，再打开具体文件，修改后再跑一次测试，测试挂了就继续修。整个过程你只需要在旁边看，需要时插话打断。

1.2 一个小 Demo：从“告诉我怎么写”到“它直接写好”

我在一个 Express 项目里试过：让 Claude Code 给所有接口加统一的错误处理中间件。它的执行路径是：列出 src 目录、理解现有路由结构、找到错误处理缺失的位置、创建 middleware 文件、修改每个路由入口、启动项目验证、补充测试用例。全程大概三分钟，中间只问过我一次“是否允许安装新的 npm 包”。

这个体验跟“让 AI 写一段错误处理代码”完全不是一回事。前者是执行一个工程任务，后者是生成一段代码片段。MCP 的存在，让这种执行能力从“读仓库”“跑命令”进一步扩展到“操作浏览器”“读设计稿”“访问外部系统”等等。这也就是你把 Claude Code 和其他 AI 工具区分开来的关键：它是一个能动手干活的代理，不是一个只会出主意的顾问。

1.3 适合谁，不适合谁（含桌面版/客户端说明）

适合用的人：天天写代码但不想被重复劳动拖垮的开发者；需要快速做原型验证的产品经理；自己做小项目或独立开发的程序员；做自动化脚本、批处理任务的技术运营。不适合用的人：完全不懂终端操作，建议至少会 cd、ls、npm install；项目有强数据隔离要求、代码不能出内网的人，得先确认公司合规要求再考虑。

另外不少人搜“Claude Code 桌面版/客户端”，现在官方有桌面端形态（通过 Claude Desktop 或相关客户端集成的方案）。我在 macOS 上体验过图形化界面，配置逻辑和命令行完全一样，只是免去了开终端的步骤。如果你习惯图形操作，可以先从桌面端入手，再看后面的 MCP 配置，原理通用。

2. 从零安装：Windows 11 / Ubuntu / macOS 三平台实操

这是全流程最容易劝退新手的地方。我把三个平台分别跑了一遍，记录如下。

2.1 安装前的硬性条件

在装 Claude Code 之前，先把三个东西确认好：

• Node.js 18 以上。Claude Code 官方要求 Node >= 18，实测 Node 20/22 更稳。终端里输入node -v检查。
• npm 可用。一般装 Node 时会自带 npm，npm -v确认一下。
• 网络能正常访问 Anthropic 服务。因为登录和 API 调用都走官方服务，网络环境要稳定，这个我在后面踩坑部分会再提。

如果 Node 版本太低，别硬装，先升级 Node 再继续。很多安装失败的案例最后都发现是 Node 版本问题。

2.2 Windows 11 安装的两个思路

Windows 上有两条路线，我建议直接走 WSL 路线，而不是在 PowerShell / CMD 里装。原因很简单：Claude Code 在 Windows 原生环境里跑，很多命令（比如 shell 脚本、权限模型、文件路径）会跟你想的不一样；而在 WSL 里跑，它就是一个标准的 Linux 环境，网上绝大多数教程都能直接套用。

路线一：WSL（推荐）

• 先装好 WSL 和 Ubuntu 发行版，打开 Ubuntu 终端。
• 安装 Node，推荐用 nvm（具体命令见 2.3）。
• 然后执行npm install -g @anthropic-ai/claude-code。
• 进入项目目录，运行claude，首次会引导登录。

路线二：PowerShell 原生安装

• 同样需要先装 Node（去 nodejs.org 下载 LTS 版本）。
• 打开 Windows Terminal，执行npm install -g @anthropic-ai/claude-code。
• 如果提示“claude 不是内部或外部命令”，说明 npm 全局 bin 目录没加到 PATH。用npm config get prefix查看路径，把得到的目录加入系统环境变量 Path，然后重开终端。
• 直接claude启动。

实测下来 WSL 路线几乎零坑，PowerShell 路线偶尔会遇到权限、路径、热键冲突。既然是“从入门到精通”，我更希望你先避免没必要的折腾。

2.3 Ubuntu 安装：用 nvm 管理 Node 版本

Ubuntu 上最容易踩的坑是系统源里的 Node 版本太老（比如还停留在 16），直接导致 Claude Code 装不上，或者装上了运行报错。我建议别用 apt 装 Node，用 nvm。

# 1. 安装 nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash # 装完重开终端或 source ~/.bashrc # 2. 安装 LTS 版本 Node nvm install --lts nvm use --lts node -v # 3. 全局安装 Claude Code npm install -g @anthropic-ai/claude-code # 4. 在项目目录启动 cd ~/work/my-project claude

如果你之前用 apt 装过旧版 Node，建议先把它卸干净再装 nvm，否则会有版本冲突的诡异问题。

2.4 升级、卸载与残留清理

这节可能平时没人讲，但实际很关键。Claude Code 更新很勤，官方建议直接用 npm 升级：

# 升级到最新版 npm install -g @anthropic-ai/claude-code@latest # 查看当前版本 claude --version # 彻底卸载 npm uninstall -g @anthropic-ai/claude-code

如果你遇到过“升级后配置不生效”“MCP server 启动方式变了”之类的问题，大概率是旧版本残留。除了 npm 卸载，还要把~/.claude目录（Windows 下是用户目录里的.claude文件夹）一并删掉或备份，再重装。注意，这里存着登录凭据和用户配置，删之前想清楚，或先备份。macOS 用户可能还需要检查~/Library/Application Support下的 Claude 相关文件。

3. MCP 协议拆解：一个 Host 对应多个 Server 的协作模型

这章我把理论讲明白，后面配置的时候你才会知道自己在改什么。

3.1 MCP 是什么：用 USB-C 类比

MCP 全称 Model Context Protocol（模型上下文协议），Anthropic 在 2024 年底开源。它解决的是一个很实际的问题：每个 AI 应用都要对接外部工具，如果每个工具都自己写一套集成方式，那 AI 和工具之间就是“网线乱接”的状态。MCP 定义了一套统一的协议，让 AI 应用通过标准方式发现、连接、调用外部能力。

我类比过很多次，最贴切的是 USB-C：你的电脑（AI 应用）有 USB-C 口，各种外设（MCP Server）只要遵守同一个标准，插上就能用，不用给每个外设单独配一根转接线。所谓“MCP 的 m+n”，我的理解就是“1 个 Host + N 个 Server”：一个 AI 宿主应用可以同时挂载任意数量的能力服务。Host 负责管理连接，Server 负责提供能力，Client 是 Host 内部跟 Server 通信的组件。

三个角色分别是：

• MCP Host：Claude Code、Claude Desktop、Cursor、Trae 这类 AI 应用，它们提供对话/代理能力，并管理 MCP 连接。
• MCP Server：一个提供特定能力的独立程序，比如读写文件系统、操作浏览器、查数据库。它可以是本地的 Node 进程，也可以是远程 HTTP 服务。
• MCP Client：Host 内部负责跟 Server 发请求、收结果的部分，作为连接器存在。

了解了角色划分，再看“蓝湖 MCP”“Figma MCP”“Playwright MCP”这类词就不会懵了——它们都是某个具体能力的 MCP Server 实现。

3.2 MCP Server 是怎么被声明和启用的

MCP Server 通常是一个命令行程序。Claude Code 通过配置文件或者claude mcp add命令来了解“有哪些 Server、怎么启动它们”。配置的核心字段就四个：命令、参数、环境变量、工作目录。

举个例子，你想让 Claude Code 能读写某个项目目录，官方有一个 filesystem server，配置后 AI 就能通过工具函数列出文件、读内容、写文件，但它只能操作你指定的根目录。

这里还要说一个点：并不是所有 MCP Server 都是 npx 启动。有的依赖 Python 环境，有的依赖 Java 运行时（比如一些 SpringBoot 相关的 MCP 需要在 JDK 下运行），有的依赖特定桌面软件（比如 Blender MCP 要求本机装好 Blender）。所以报错时先看它的运行环境要求，别急着怪配置文件。

3.3 RAG 和 MCP 的区别，为什么别再搞混了

只要聊 AI 开发，RAG 这个词一定会出现。RAG（检索增强生成）解决的是“模型不知道”的问题：把外部知识库切成向量存起来，回答问题时先检索相关内容塞进上下文。MCP 解决的是“模型做不到”的问题：把外部系统变成可调用的工具，让模型能真实操作外部环境。

一个是增强“知道什么”，一个是增强“能做什么”，两者互补但不同路。你在配置 MCP 时，如果潜意识里把它当成 RAG 知识库，方向就偏了——MCP 不是为了给 AI 喂资料，而是为了给 AI 接工具。搞清楚这一点，后面的配置思路会顺畅很多。

4. 让 Claude Code 跑在你的编辑器里：VSCode 配置全流程

为什么单拎 VSCode 出来讲？因为大多数人日常写代码还是在编辑器里，如果只能开一个终端窗口来用 Claude Code，就总想在编辑器里找快捷键。哪怕不用 IDE 插件，Claude Code 也是可以舒服地嵌进 VSCode 工作流的。

4.1 方案一：集成终端直接跑，约等于零配置

最简单的做法：在 VSCode 里按 Ctrl+打开终端，cd 到项目目录，直接运行claude`。终端里的 Claude Code 会用 TUI 界面显示思考过程、工具调用、文件改动，你还可以在对话里 @ 路径来引用某个具体文件。这种方式不需要装任何插件，唯一要注意的是字体和中文输入法的兼容性——个别终端字体在 Claude Code 的边框渲染下会错位，一般换成 Meslo 或系统默认等宽字体即可。

如果你懒得每次手动开终端，可以写一个任务配置。在项目.vscode/tasks.json里加一个任务，按快捷键就能启动 Claude Code：

{ "version": "2.0.0", "tasks": [ { "label": "打开 Claude Code", "type": "shell", "command": "claude", "options": { "cwd": "${workspaceFolder}" }, "presentation": { "panel": "dedicated", "clear": true } } ] }

之后在命令面板里输入 “task 打开 Claude Code” 就能一键进入，不需要每次敲命令。

4.2 方案二：官方 VS Code 扩展（图形界面）

想更进一步，Anthropic 有官方的 Claude Code for VS Code 扩展（预览阶段）。安装后左侧会出现 Claude 面板，可以直接对话、添加文件到上下文、查看 Claude Code 的变更记录。它的底层其实还是同一个 Claude Code CLI，所以 MCP 配置、权限配置逻辑全部复用，不冲突。

我在新版扩展里还看到可以直接列出 MCP Server 状态的功能，配置完能立刻知道 Server 有没有连接成功，比盲改配置文件直观很多。

4.3 MCP 配置前的统一认知：.mcp.json 与 claude mcp 命令

不管你在 VSCode 里还是在纯终端里，MCP 的配置入口都有两条：写配置文件，或者用命令动态管理。两条路殊途同归，我先讲命令方式：

# 查看当前项目/用户级 MCP Server 列表 claude mcp list # 添加一个 MCP Server claude mcp add <名称> -- <命令> [参数...] # 用环境变量方式添加 claude mcp add <名称> -e KEY=VALUE -- <命令> # 移除 claude mcp remove <名称>

另一种是直接在项目根目录建.mcp.json，这个文件会被 Claude Code 自动读取。为什么要用文件？因为可以提交到 git 里，团队成员 clone 下来就自动拥有同样的 MCP 配置，这是工程化的关键。后面第 5 章的每个例子，我都会用.mcp.json的格式展示。

5. 五类 MCP Server 实测：从设计稿到浏览器自动化

配置原理讲完了，接下来上硬菜。我挑了几类热度最高、也最常用的 MCP Server，按真实使用体验说。

5.1 Figma MCP：设计稿到代码的工作流

“Figma MCP 怎么用”“能不能直接切图”——这是搜索最多的两个问题。Figma 官方提供了 figma-developer-mcp，它通过 Figma API 读取设计文件的节点信息：图层的尺寸、位置、颜色值、文本内容、样式定义，都能结构化地交给 AI。这样 Claude Code 就能“看到”设计稿，然后生成对应的前端代码。

先看配置。你得先在 Figma 个人设置里生成一个 Access Token（Figma 登录后，Settings → Security → Personal Access Token），然后把配置写进.mcp.json：

{ "mcpServers": { "figma": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key=你的Token"], "env": { "FIGMA_API_KEY": "你的Token" } } } }

启动后问它“把 Figma 文件里 xxx 页面的导航栏实现成 React 组件”，它会先读取节点，拿到样式和布局信息，再生成代码。至于“能不能直接切图”——它能拿到节点信息和图片导出地址，配合 Figma API 可以实现资源导出；但严格说“切图”这个动作还是需要你确认尺寸和目录，AI 会帮你把资源拿回来并放好，不是零人工介入的魔法。

在 Trae 这类以 AI 为卖点的编辑器里，Figma MCP 有更傻瓜的接入方式：在设置里找到 MCP 面板，添加 Figma AI Bridge（或者直接输入 npx 命令），界面会提示连接状态。很多找了半天的人其实就卡在“不知道设置入口在哪”，Trae 里一般是设置 → MCP → 添加 Server。

5.2 蓝湖 MCP：国内设计协作场景下的选择

如果你在国内团队做过前后端对接，大概率用过蓝湖（Lanhu）。蓝湖 MCP 的存在，意味着 Claude Code 可以直接读取蓝湖上的设计稿标注、切图、交互备注。它的配置需要从蓝湖开放平台申请 API Key，然后：

npx -y lanhu-mcp --transport=stdio --apiKey=你的key

把它写进.mcp.json也一样，只需要把 command 固定成 lanhu-mcp，参数带上 apiKey。实测体验：让 AI 根据蓝湖里的视觉稿生成页面，生成结果能精确到 px，因为它拿到的是标注数据，不是截图肉眼识别。对做中后台系统、活动页这种大量参照设计稿的开发场景，非常省力。

5.3 Playwright MCP：让 AI 自己打开浏览器验证

这是我的日常必备。Playwright MCP 把浏览器自动化能力打包成 MCP Server，Claude Code 接到它之后，可以去打开网页、点击元素、填写表单、截图、读取控制台日志。对前端开发的闭环非常有用：AI 改完页面，让它自己开浏览器看效果。

配置：

{ "mcpServers": { "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] } } }

实测中我最常让它做的事：修改完组件后，“用 Playwright 打开本地开发服务器，访问首页，截图确认导航栏没有遮挡”。它会自己启动浏览器、访问地址、截图，并把图片反馈给我。效果比“只跑单元测试”更接近真实用户体验。

5.4 专业向 MCP：Blender、IDA、Vivado、Burp、DevSpace

MCP 的价值在于生态开放，所以你会发现各专业领域都冒出了自己的 MCP Server：

• Blender MCP：在 Blender 里装对应插件后，可以用自然语言控制建模、材质、场景调整，对 3D 资产批量处理特别有用。
• IDA MCP：把逆向分析工具 IDA Pro 的能力接给 AI，可以自动分析函数流程、查找交叉引用。
• Vivado MCP：FPGA 开发场景下，让 AI 辅助生成时序约束、查看综合报告。
• Burp MCP：安全测试方向，配合 Codex 或 Claude Code 做自动化漏洞探测（这也是为什么搜“Codex 联动 Burp MCP”的人那么多）。
• DevSpace MCP：Kubernetes 开发场景，直接在对话里操作集群、部署应用。

这些 Server 的安装方式基本都是“本机装好对应软件 + npx 安装 MCP Server + 配置 token 或路径”，原理和 5.1、5.2 完全一样。这也是我强调理解 Host 与 Server 关系的原因：一旦掌握模式，任何新 MCP 都可以快速上手。

6. 权限、Skills 与模型切换：进阶操作和踩坑总结

前面已经能跑通基础配置，这一章聊聊把 Claude Code 当成生产工具后必然遇到的问题。

6.1 权限控制：别让 AI 乱执行命令

Claude Code 默认情况下，需要执行的命令如果被认为有风险，会弹出来问你是否允许。频繁弹窗很烦，但全放开又危险。正确做法是用 settings.json 做白名单。全局配置文件在~/.claude/settings.json，项目级配置在项目目录的.claude/settings.json，可以针对不同项目设置不同权限。

{ "permissions": { "allow": [ "Bash(npm run *)", "Bash(git status)", "Read(~/.gitconfig)" ], "deny": ["Bash(rm -rf /)"], "ask": ["Bash(curl *)", "Bash(wget *)"] } }

allow 列表里的命令不再询问直接执行；ask 列表里的命令还会继续问；deny 列表里的直接拒绝。我的习惯是：把常用构建、测试命令放 allow，把网络请求放 ask，把删除类的危险操作放 deny。这样既顺手又有底线。

6.2 Skills：给 Claude Code 写“技能”

很多人知道 MCP，但不一定知道 Claude Code 还有一个叫 Skills 的东西，它相当于预置的“执行技能包”。和 MCP 不同，Skills 不需要启动外部 Server，它只是一组带说明的指令，放在~/.claude/skills目录下，每个技能一个文件夹，里面是 SKILL.md。

mkdir -p ~/.claude/skills/code-review vim ~/.claude/skills/code-review/SKILL.md

SKILL.md 示例：

--- name: code-review description: 对当前分支相对 main 的改动做代码审查，并输出问题清单 --- 当收到代码审查请求时： 1. 运行 git diff main...HEAD --stat 查看改动范围 2. 逐个文件阅读差异 3. 重点关注安全问题、边界条件、异常处理 4. 输出 Markdown 格式的问题清单，标注风险等级

之后在 Claude Code 里说“对当前分支做代码审查”，它就会加载这个技能流程去执行。这很适合团队沉淀自己的规范：Code Review、发布检查、环境初始化，都能写成 Skills。

6.3 把 Claude Code 接到 DeepSeek 等第三方模型

Claude Code 不止能连 Anthropic 官方模型。因为它是一个相对开放的客户端，API endpoint 可以切换，所以可以对接兼容 Anthropic 消息格式的第三方模型。搜“Claude Code 接入 DeepSeek”的朋友应该都是为了这条。DeepSeek 官方提供了兼容 Anthropic API 的接入地址，配置方式是通过环境变量指定：

export ANTHROPIC_BASE_URL=https://api.deepseek.com/anthropic export ANTHROPIC_AUTH_TOKEN=你的DeepSeek API Key claude

这样启动 Claude Code 后，对话请求会发给 DeepSeek 的接口，按 DeepSeek 的 token 计费。适合想用 Claude Code 的交互体验、但模型成本或配额上更倾向第三方模型的场景。注意一点：不是所有第三方模型都完整支持 Claude Code 的工具调用，实测有些模型能聊天但不一定能稳定调用工具，建议先用小任务验证再上量。

6.4 踩坑复盘：按症状排错

最后把这些天我踩过的坑按“症状→原因→解法”列一遍，很多问题搜不到答案，但基本都逃不出这几类：

还有一个容易被忽略的点：如果你配置了多套 MCP，Server 的启动顺序会影响 Claude Code 的启动速度。我不建议一上来就挂十几个 Server，按项目实际需求挂三四个足够，需要时再临时加。

我在实际使用中的体会是：Claude Code 的学习曲线不算陡，真正花时间的反而是理解 MCP 这种“能力插拔”的思维方式——想清楚哪些事 AI 能直接做、哪些事要靠外接能力补上，用起来才会有质变。你不需要记住所有 Server 的名字，只需要掌握配置套路和排错路径，遇到新工具时自然知道怎么接进去。