本系列旨在带你探索 Claude Code 的那些有一定上手门槛，但一旦掌握，便能极大提升效率的进阶功能。

与官方文档相比，本系列力求：

• 更详尽：保姆级教程，每一步都清晰明了，手把手带你操作。
• 更直观：将核心概念和流程转化为可视化图示，一看就懂。
• 更实用：只分享那些经过验证的、有实际应用价值的功能。
• 更避坑：列出曾踩过的坑，让你少走弯路，使用体验更丝滑。
• 更联动：关联其他功能，教你打出效果拔群的“组合技”。

今天，我们要解锁的核心功能是——MCP（Model Context Protocol，模型上下文协议）。

1. MCP 出现之前的世界

在 MCP 出现之前，业内普遍采用一种由 OpenAI 提出的、名为**函数调用（Function Calling）**的技术。

这是一种强大且灵活的方式，它允许大语言模型与外部世界进行交互，从而获取其自身训练数据之外的实时信息。

它的工作原理其实很简单：

1. 定义工具：开发者会预定义好一系列可供模型使用的“工具”（也就是函数），并将这些工具的描述信息提供给模型。

例如，下面就是一个用于获取查询天气的 get_weather 函数定义：

{
    "type": "function",
    "name": "get_weather",
    "description": "根据给定的地点，获取当前的天气信息。",
    "parameters": {
        "type": "object",
        "properties": {
            "location": {
                "type": "string",
                "description": "城市和国家，例如：北京, 中国"
            },
            "units": {
                "type": "string",
                "enum": ["celsius", "fahrenheit"],
                "description": "返回的温度单位。"
            }
        },
        "required": ["location", "units"]
    },
    "strict": true
}

2. 模型决策：当你向模型下达一个任务时，模型会分析你的意图，并判断是否需要调用某个已定义的工具来更好地完成任务。
3. 执行与回归：如果模型决定调用工具，它会生成一个包含调用指令的响应，应用程序接收到这个指令后，会执行相应的本地代码，并将执行结果再返回给模型。最后，模型会基于这个结果，生成最终答案给到用户。

你可以把模型想象成一个聪明的“调度员”。你给了它一本工具清单和一本操作手册，然后告诉它你的目标。它会自己查阅手册，选择最合适的工具来高效地完成任务。

1.1. 函数调用的局限性

这种方式虽然简明而有效，并迅速被各大模型厂商跟进模仿，但随着应用场景的复杂化，其固有的问题也逐渐暴露出来：

• 接口不统一，适配成本高
• 缺乏标准化的“插件生态”
• 上下文管理困难

2. MCP 是什么？

正是在这样的背景下，MCP 应运而生。

MCP 是一个开放协议，它规范化了应用程序向大语言模型提供外部上下文的方式。

如果说函数调用像是为每一种电子设备都设计一个专用的、不可通用的充电器，那么 MCP 的目标就是成为 AI 应用领域的“USB-C”接口。

就像 USB-C 提供了一个标准化的方式，让你能将电脑连接到各种外设和配件一样，MCP 也提供了一个标准化的方式，让大语言模型可以轻松连接到各种不同的数据源和外部工具。

2.1. MCP 的重要性

MCP 的出现，为生态系统中的不同角色都带来了显著的好处：

• 对于开发者：在构建或集成 AI 应用、智能体时，MCP 能够显著减少开发时间和复杂性。你不再需要为每个工具编写定制的胶水代码，只需遵循 MCP 标准即可。
• 对于 AI 应用或智能体：MCP 提供了一个即插即用的方式来访问庞大的数据源、工具和应用程序生态系统，这将极大增强应用的功能并改善最终用户体验。
• 对于终端用户：MCP 将催生出更强大的 AI 应用程序。这些应用可以安全、可靠地访问你的个人数据（如日历、文档），并在必要时代表你采取行动（如预订会议、发送邮件）。

2.2. MCP 是如何工作的？

MCP 遵循经典的客户端 - 服务器（Client-Server）架构，在这个架构下主要包含以下几个角色：

• MCP 主机（Host）：指像 Claude Code 或 Claude 桌面版这样的 AI 应用。它们是终端用户交互的入口，负责协调和管理一个或多个 MCP 客户端。
• MCP 服务器（Server）：这是一个独立的进程或服务，负责连接到具体的数据源和工具（比如 Figma、高德地图、本地文件系统等），并按照 MCP 协议向外提供上下文信息。
• MCP 客户端（Client）：由 MCP 主机创建，用于和某一个 MCP 服务器建立一对一的专用连接。它充当了主机和服务器之间的桥梁，为主机获取并管理来自服务器的上下文。

举个例子：

1. Claude Code 作为 MCP 主机。
2. 当它连接到 Figma MCP 服务器时，Claude Code 会实例化一个 MCP 客户端对象来维护与该服务器的连接。
3. 当 Claude Code 随后又连接到另一个本地文件系统服务器时，它会再实例化另一个独立的 MCP 客户端对象来维护此新连接。
4. 这种设计始终保持了 MCP 客户端与 MCP 服务器的一对一关系，使得连接管理清晰、隔离且稳定。

这种模块化的系统设计，意味着为 AI 应用添加新功能变得像给电脑添加新配件一样简单。
你无需改动 AI 应用本身，只需要接入一个新的、符合 MCP 规范的服务器即可，这极大地提升了系统的可扩展性。

2.3. MCP vs. 函数调用：直观对比

至此，我们可以用一个表格来更直观地对比传统的函数调用与 MCP 之间的核心区别：

3. 实战演练

理论讲完了，让我们通过一个实战案例来感受 MCP 的魅力。

我们将使用 Framelink MCP 服务器，它能将你的 Figma 设计数据暴露给 Claude Code。
这些结构化的设计信息，远比一张截图包含的细节要多，能帮助 Claude Code 生成质量更高、更能还原设计稿的前端代码。

3.1. 第 1 步：获取 Figma 个人访问令牌（Access Token）

首先，你需要一个令牌来授权 MCP 服务器访问你的 Figma 账户。

1. 登录 Figma，在主页点击左上角的个人资料头像，在下拉菜单中选择 Settings。

2. 在弹出的设置菜单中，选择 Security 标签，向下滚动到 Personal access tokens 部分，点击 Generate new token。

3. 为这个令牌起一个描述性的名字，例如 claude-mcp-token。

4. 在权限（Scopes）设置中，至少确保 Dev resources 和 File content 设置为 Read only。

5. 点击 Generate new token，然后立即复制并妥善保管好这串生成的令牌，因为它只会出现一次。

3.2. 第 2 步：安装并启动 Figma MCP 服务器

现在，我们打开终端，用一行命令来安装并启动这个 MCP 服务器。

将下面命令中的 YOUR-KEY 替换为你刚刚复制的 Figma 访问令牌。

claude mcp add "Framelink_Figma_MCP" -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

这行命令做了几件事：

• claude mcp add "Framelink_Figma_MCP"：告诉 Claude Code 我们要添加一个名为 “Framelink_Figma_MCP” 的服务器。
• --：这是一个分隔符，它告诉 claude 命令，后面的所有内容都是用于启动服务器的外部指令，而不是 claude 命令自身的参数。
• npx -y figma-developer-mcp …：这部分是真正启动服务器的命令，它会临时下载并运行 figma-developer-mcp 这个包，并通过 --figma-api-key 参数传入你的令牌。

执行命令后，你会看到服务器成功添加的日志信息。

3.2.1. 关于 MCP 安装范围的说明

你可以根据需求，将 MCP 服务器安装在不同的范围下：

• 本地范围（local）：这是默认选项。服务器配置仅对当前项目（文件夹）有效。这非常适合个人开发、功能实验或包含敏感密钥（如个人令牌）的配置。

# 添加本地范围的服务器（默认）
claude mcp add my-private-server /path/to/server
# 明确指定本地范围
claude mcp add my-private-server --scope local /path/to/server

• 项目范围（project）：配置会保存在项目根目录下一个名为 .mcp.json 的文件中。这个文件可以提交到版本控制系统（如 Git），从而让整个团队共享相同的工具集，确保开发环境的一致性。

# 添加项目范围的服务器
claude mcp add shared-server --scope project /path/to/server

• 用户范围（user）：配置对你本机的所有项目都可用，无论你在哪个文件夹中工作，都可以随时访问。这非常适合那些你个人经常跨项目使用的通用工具。

# 添加用户服务器
claude mcp add my-user-server --scope user /path/to/server

3.3. 第 3 步：检查 MCP 服务器是否配置成功

你可以随时在终端运行 claude mcp list 命令来查看当前已配置的 MCP 服务器列表，确保我们刚刚添加的服务已经成功注册并正在运行。

如果一切正常，你应该能在列表中看到状态为 “connected” 的 Framelink_Figma_MCP。

3.4. 第 4 步：复制特定 Figma 设计元素的链接

现在，去 Figma 社区里找一个你喜欢的设计模板，或打开你自己的设计文件。

接下来，我们要获取一个精确指向某个设计元素的链接：

1. 在画布中，找到并选中你想要让 AI 实现的那个具体设计元素（可以是一个按钮、一个卡片，甚至整个页面框架）。
2. 在该元素上点击右键，在菜单中选择 Copy/Paste as -> Copy link to selection。

这样，你就获得了一个能够精确定位到该设计元素的 URL。

3.5. 第 5 步：向 Claude Code 发起实现请求

万事俱备，只欠东风。
现在，你可以直接向 Claude Code 发起请求了，例如：“用 Flutter 实现这个 Figma 页面设计”，然后粘贴上一步复制的链接。

为了获取更高质量的代码，我们还可以额外定义一个专门的子 “Figma 实现器” 代理。

---
name: figma-implementer
description: Figma设计稿到Flutter像素级还原专家。当需要将Figma设计转换为Flutter代码，确保UI实现与设计稿完全一致时使用。专注于精确的布局、颜色、字体、间距和交互效果复制。
model: inherit
color: red
---
你是一位专业的Figma到Flutter像素级还原专家，专门负责将Figma设计稿精确转换为Flutter代码实现。

## 核心职责
1. **设计分析**: 深入分析Figma设计稿的所有视觉元素
2. **精确实现**: 确保Flutter代码实现与设计稿在视觉上完全一致
3. **细节优化**: 处理像素级的细节差异，包括阴影、圆角、渐变等
4. **响应式适配**: 确保在不同屏幕尺寸下保持设计一致性

## 工作流程
当被调用时，请按以下步骤执行：

### 1. 设计稿分析阶段
- 仔细检查Figma设计稿的所有视觉元素
- 记录精确的尺寸、间距、颜色值、字体规格
- 识别所有UI组件及其层次结构
- 分析交互状态和动画效果
- 提取所有资源文件（图片、图标、字体）

### 2. 代码结构规划
- 根据设计稿创建合理的Widget层次结构
- 规划可复用的组件
- 确定状态管理方案
- 设计响应式布局策略

### 3. 精确实现阶段
- 使用精确的数值进行布局（避免近似值）
- 实现精确的颜色匹配（使用十六进制色值）
- 配置准确的字体样式和行高
- 实现精确的阴影、圆角、边框效果
- 处理图片的精确定位和尺寸

### 4. 质量验证阶段
- 在不同设备尺寸下测试UI效果
- 对比设计稿检查像素级差异
- 验证交互效果和动画
- 确保性能优化

## 技术要求

### 布局精度
- 使用Container、Padding、Margin的精确数值
- 利用Positioned进行绝对定位时的像素级控制
- 使用Flexible、Expanded时确保比例准确
- 处理SafeArea和设备适配

### 视觉还原
- 颜色：使用Color(0xFF...)格式确保颜色精确匹配
- 字体：配置FontWeight、fontSize、letterSpacing、height等精确参数
- 阴影：使用BoxShadow精确还原elevation和模糊效果
- 渐变：使用LinearGradient/RadialGradient精确匹配设计
- 圆角：使用BorderRadius精确设置圆角半径

### 资源处理
- 优化图片资源（支持多分辨率）
- 正确配置自定义字体
- 处理SVG图标和矢量图形
- 实现adaptive icons和启动屏

## 代码质量标准
- 代码结构清晰，组件化程度高
- 使用语义化的变量名和注释
- 遵循Flutter最佳实践
- 确保代码可维护性和扩展性
- 处理边界情况和异常状态

## 输出格式
为每个实现提供：
1. **对比报告**: 设计稿vs实现效果的详细对比
2. **实现代码**: 完整的Flutter代码实现
3. **关键参数说明**: 重要尺寸、颜色、字体参数的解释
4. **测试建议**: 在不同设备上的测试要点
5. **优化建议**: 性能和用户体验的优化建议

## 注意事项
- 始终以设计稿为准，不做主观改动
- 处理设计稿中的不一致时，主动询问确认
- 考虑不同平台（iOS/Android）的UI差异
- 确保可访问性和用户体验
- 保持代码的可读性和可维护性

专注于实现完美的像素级还原，让最终效果与设计稿分毫不差。

提交请求后，你会看到 Claude Code 开始工作。
它会自动识别出这个任务需要使用 Figma 的设计数据，并调用我们刚刚配置好的 Framelink_Figma_MCP 服务器所提供的 get_figma_data 函数。

Claude Code 会利用从函数返回的详细、结构化的设计信息（如颜色代码、字体参数、布局尺寸、圆角半径等），为你生成高质量的 UI 代码。

最终，我们得到了一个还算不错的初步结果。
左边是原始的设计稿，右边是用 Flutter 实现的 App 页面。

可以看到，整体的布局和核心元素都已正确生成，后续只需在此基础上进行一些细节的微调即可。

4. 总结

与传统函数调用方式相比，MCP 提供了如同 “USB-C” 般的标准化接口。
这使得 Claude Code 能够轻松、稳定地连接到如 Figma 等各类外部工具与数据源。

对开发者而言，这意味着能将设计稿、数据库、API 等上下文信息直接、结构化地提供给模型。

其结果是，Claude Code 能生成更精确、更高质量的代码，并能自动化完成从设计到编码等复杂工作流，显著提高了开发效率和最终产出的质量。

在接下来的系列中，我们将继续探索更多实用的高级功能，敬请关注！

5. 参考

• Function Calling - OpenAI Platform
• Model Context Protocol - Anthropic
• MCP 文档 - Anthropic
• Figma MCP Complete Guide - UX Planet