【小沐学AI】Cursor + Figma MCP:让设计意图＂言出即代＂,从此告别界面设计截图猜测

文章导读：2025 年，Figma 推出官方 MCP 服务器，Cursor 原生深度支持 MCP 协议，两者握手，AI 直接读懂 Figma 的组件树、设计变量和布局约束。设计意图不再经由人工翻译，而是直接落地为代码。从"截图猜测"到"结构直达"，正式终结设计交付的千年乱局。

小沐：戈戈，战国时期各国变法图强，商鞅在秦国推行变法前，先立木取信——南门立木，言出必行，才让百姓相信新法有效。

戈戈：你这是在说"信息传递"的问题？设计师给开发者一张 Figma 截图，开发者凭图猜意图，和"口耳相传"没什么两样，信息损耗在所难免。

小沐：那有没有像"商鞅立木"一样，让设计意图"言出即行、分毫不差"地传到代码里的办法？

戈戈：有！Cursor 接入 Figma MCP，AI 直接读懂 Figma 文件结构，设计即规格，规格即代码，中间再无"翻译官"。

小沐：百家争鸣终有定论——这才是设计交付的正道！

一、认识 Cursor：深懂上下文的 AI 编码大脑

Cursor 是一款以 VS Code 为基础深度重构的 AI 原生代码编辑器，其核心优势不是单纯的代码补全，而是对整个代码库上下文的深度理解。它能读取项目中所有相关文件，理解团队的命名规范、架构模式和技术选型，生成的代码不是孤立的片段，而是与现有代码库高度吻合的有机延伸。

如何在 Cursor 中接入 Figma MCP

方式一（推荐）：官方远程服务器，连接地址为 https://mcp.figma.com/mcp，无需安装 Figma 桌面应用，在 Cursor 设置页面的 MCP 标签中添加该地址，完成 OAuth 授权即可。需要 Figma Dev 或 Full 席位。

方式二：桌面本地服务器，打开 Figma 桌面应用，在 Dev Mode 的检查面板中启用本地 MCP 服务器，本地运行于 http://127.0.0.1:3845/mcp，适合企业内网或离线场景。

方式三：开源 Framelink MCP，通过 Figma API Token 接入，免费账户可用，适合个人开发者和小团队快速上手，无需 Dev Mode 席位。

配置完成后，在 Cursor Agent 模式对话框中输入 /figma 确认 Figma 工具已加载，即可开始以设计稿链接驱动代码生成。

二、Figma MCP 核心能力：设计不再是一张"静态图片"

从像素猜测到结构化上下文

Figma MCP 服务器将 Figma 文件中的结构化内容——组件树、变体信息、布局约束、设计 Token 和资源引用——以 AI 可理解的格式传递给 Cursor，而截图类工具无法捕获这些信息。这意味着 AI 接收到的不是一张需要猜测的图片，而是一份可以精确解析的设计说明书。

四个核心工具

get_design_context 是最关键的工具，获取选中节点的完整结构化表示，包括所有子节点属性、样式规则和布局参数；get_screenshot 提供视觉截图，供 AI 生成代码后进行视觉比对；get_variable_defs 读取设计文件中定义的所有变量，将颜色 Token、间距值、圆角规则直接映射为可用的 CSS 自定义属性；get_code_connect_map 则是与 Code Connect 功能配合的核心——当团队已将 Figma 组件与代码库组件建立映射，AI 便能精准复用现有组件，而非凭空生成。

两种上下文传递方式

选择驱动（桌面服务器）：在 Figma 桌面应用中直接选中目标图层，Cursor 即可读取当前选中内容，操作直观，适合逐组件逐步实现的工作流。

链接驱动（远程服务器）：复制 Figma 图层链接，粘贴至 Cursor 对话框，AI 自动提取 node-id 并向 Figma 拉取对应设计数据，适合批量处理或跨设备协作场景。

在cursor配置figma mcp服务： https://github.com/f2c-ai/f2c-mcp

{
  "mcpServers": {
    "f2c-mcp": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@f2c/mcp"],
      "env": {
        "personalToken": "your figma key"
      }
    }
  }
}

配置figma mcp成功：

三、标准工作流：从 Figma 帧到生产代码

五步完整路径

第一步 → 规范 Figma 文件结构：用好Figma变量、组件与设计系统，文件越规范，AI 生成代码越准确。

第二步 → 在 Figma 中选中目标节点：先选单个组件再扩展到页面，聚焦范围可提升代码质量。

第三步 → 在 Cursor 中发起 Agent 对话：提供 Figma 链接，指定技术栈与规范，自动通过 MCP 获取设计结构。

第四步 → 审查代码并迭代：直接描述问题让 AI 修改，快速迭代 UI，体验如同与人协作。

第五步 → 纳入版本管理：按约定目录提交代码，与 Figma 版本对应，设计变更可同步更新代码。

四、界面设计案例

以下两个案例均基于真实 Figma 社区文件，通过 Cursor + Figma MCP 远程服务器链接驱动的方式完成设计转代码，完整还原了实际工作流的操作路径。

案例一：iPhone 16 设备展示组件还原

Figma 源文件： iPhone 16 and 16 Plus Mockups（社区共享文件，node-id 3-1034）

场景背景： 一位独立开发者正在构建产品官网，需要将 Figma 中的 iPhone 16 设备模型帧转化为可复用的 React 展示组件，用于产品截图的"设备套壳"展示区。设备模型包含精细的圆角边框、侧边按钮、摄像头模组等细节，手工还原极为耗时。

使用过程： 开发者在 Cursor Agent 对话框中直接粘贴 Figma 链接：

https://www.figma.com/design/yFLFx5SHvA4MLlwr7LJrzW/iPhone-16-and-16-Plus-Mockups--Community-?node-id=3-1034,读取该 Figma 节点，生成一个本地html文件，接受 `screenshotSrc` 作为 Props，将截图嵌入设备屏幕区域，使用 Tailwind CSS，保持设备外框的精确圆角和比例。

ai开始干活：生成前端代码在浏览器预览如下：小沐：和原始figma界面设计还有一点点差距，加油！！！

案例二：WhatsApp 聊天界面 UI 组件实现

Figma 源文件： WhatsApp UI Screens（社区共享文件，node-id 1118-2）

场景背景： 一个即时通讯应用团队正在参考 WhatsApp 的交互规范构建自有 IM 产品，设计师提供了完整的 WhatsApp UI 设计稿，包括聊天列表页、单聊会话页和底部输入栏。开发者需要将这套设计稿快速转化为 React Native 基础组件库，作为团队自有 UI 规范的参考实现起点。

使用过程： 开发者在 Cursor 中粘贴聊天界面节点链接：

https://www.figma.com/design/mjhb3OswsbOOAKZnCmheLy/WhatsApp-UI-Screens--Community-?node-id=1118-2,读取该节点，提取聊天会话界面的组件结构，识别消息气泡（发送/接收两种状态）、时间戳、已读状态图标、底部输入栏的布局规则，生成本地html文件，颜色使用 StyleSheet 常量，字体大小严格遵循设计文件中的 Token。

cursor通过figma接口，访问在线界面资源：生成的前端代码预览如下：小沐：和原始的figma界面已经复原很像了！