一、MCP 协议基础
1.1 概念
MCP(Model Context Protocol,模型上下文协议)是一种开放协议,旨在实现大型语言模型(LLM)应用与外部数据源、工具和服务之间的无缝集成。它类似于网络中的 HTTP 协议或邮件中的 SMTP 协议,通过标准化模型与外部资源的交互方式,提升 LLM 应用的功能性、灵活性和可扩展性。

1.2 架构组成
MCP 的架构主要由四个关键部分组成,它们协同工作以确保通信清晰、安全且高效:
- 主机(Host):期望从服务器获取数据的人工智能应用,例如集成开发环境(IDE)、聊天机器人等。主机负责初始化和管理客户端、处理用户授权及上下文聚合。
- 客户端(Client):连接主机与服务器的桥梁。它与服务器保持一对一的连接,负责消息路由、能力管理、协议协商和订阅管理。
- 服务器(Server):提供外部数据和工具的组件。它通过工具、资源和提示模板为大型语言模型提供额外的上下文和功能,例如调用 Gmail、Slack 等外部服务的 API。
- 基础协议(Base Protocol):定义了主机、客户端和服务器之间如何通信,包括消息格式、生命周期管理和传输机制。
MCP 就像 USB-C 接口一样,让不同设备能够通过相同的标准连接在一起。

1.3 Figma MCP 服务
Figma 官方在 9 月份正式推出了 MCP 服务,实现了原生集成。这不仅简化了连接步骤,更大幅提升了 UI 代码生成的准确率和效率,彻底打通了'设计→开发'的链路壁垒。
通过 MCP 直接读取 Figma 文件的结构化设计数据,结合 Cursor 的代码智能,可以实现多平台 UI 代码的自动生成,包括 Android XML、iOS SwiftUI、H5、React Native 等,无需手动对照设计稿还原样式。
主要解决的开发痛点:
- 消除信息偏差:直接获取设计稿中精确的尺寸、颜色、字体、间距等结构化数据,避免人工测量误差,确保还原度。
- 减少重复劳动:自动化生成基础 UI 代码,开发者可将精力聚焦于业务逻辑开发。
- 提升跨平台一致性:基于同一 Figma 设计源,生成多平台规范一致的 UI 代码,降低维护成本。
- 加速迭代:从设计定稿到生成可用 UI 代码仅需几分钟,适合需求快速迭代场景。
二、实战指南:Cursor + Figma MCP 连接流程
这里以 Cursor(AI 代码工具)与 Figma MCP 联动为例,全程无需复杂配置,新手也能快速上手。每一步均搭配实操截图,确保可落地。
2.1 连接流程
- 启动验证:插件安装完成后,点击页面中的 Connect 按钮,启动 Figma 账号身份验证。需确保 Figma 账号已登录,且与 Cursor 登录环境一致。
- 授权访问:在 Figma 授权页面中,点击 Allow access,授权 Cursor 访问 Figma 的 MCP 服务。授权后自动返回 Cursor,无需额外操作。









