经验｜Figma + Cursor 保姆级教程！设计直出 AI Coding（完整落地流程）

楽活人

426人浏览 · 2026-07-29 12:55:36

楽活人 · 2026-07-29 12:55:36 发布

1. 引言

设计师把 Figma 画板交给前端，前端凭肉眼还原间距、色值和交互状态——这种"人肉切图"模式既低效又容易失真。随着 Figma Dev Mode 与 Cursor MCP（Model Context Protocol）的成熟，设计稿一键生成可运行代码已成为现实，而且不再是玩具 demo，而是可以直接落进项目工程的标准组件。在这里插入图片描述

本教程将从零开始，手把手带你走通两条主流链路（云端 MCP 与本地 Dev Mode MCP），并给出可以直接复制使用的万能提示词模板，涵盖 React/Tailwind、Vue3/Element Plus、纯静态页三大场景。另外还会讲到代码反向同步 Figma 的双向协同工作流，让设计与开发真正统一标准。

2. 前置准备（全部装好再开始）

2.1 必备软件

软件	版本要求	说明
Figma 桌面客户端	≥ v127，开启 Dev Mode	云端方案可用 Web 版，本地 MCP 必须用桌面端
Cursor AI 编辑器	官网 cursor.so 下载，免费版可用	—
Node.js	LTS v20+	终端输入 `node -v` 校验，无则去官网下载安装

2.2 权限前置操作（关键避坑）

打开要转代码的 Figma 文件 → 右上角 Share → 权限设置：

Anyone with the link → Can view

如果不设为"任何人可查看"，Cursor 将无法读取设计数据，整套流程直接卡死。

3. 方案 A：通用 MCP 打通（稳定主流，推荐设计师 / 前端）

这条方案使用 Figma 官方 API + figma-developer-mcp 服务，只要你拿到 API Token 并写入 Cursor 的 MCP 配置，就可以在任何网络环境下解析 Figma 文件。

Step 1：生成 Figma 专属 API Token（通信密钥）

在这里插入图片描述

Figma 左上角菜单 → Help and account → Account settings → Security
找到 Personal access tokens → Generate new token，命名为 Cursor-MCP
权限必勾选：Files:read、Variables:read，其余按需勾选
⚠️ Token 仅展示一次，立刻复制保存，关闭页面无法二次查看

Step 2：复制对应系统的 MCP 配置代码

在这里插入图片描述

Mac / Linux 配置：

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=你的Figma Token"]
    }
  }
}

Windows 配置：

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=你的Figma Token"]
    }
  }
}

把代码中的 你的Figma Token 替换成 Step 1 复制的密钥，不要有多余空格或换行。

Step 3：Cursor 写入 MCP 配置文件

打开 Cursor，快捷键：
- Mac：Cmd + K → 输入 Open Settings (JSON)
- Win：Ctrl + K → 输入 Open Settings (JSON)
清空原有空模板，粘贴上一步修改好的 JSON 代码，保存文件
重启 Cursor，自动加载 Figma 通信服务

Step 4：校验连通性

Cursor 聊天面板快捷键：Cmd + L / Ctrl + L
粘贴任意带 node-id 的画板链接，发送指令：

读取这个 Figma 画板所有尺寸、色值、文字样式

AI 如果能完整输出图层、间距、色号，即代表打通成功。

4. 方案 B：Figma 官方 Dev Mode 本地 MCP（极简快速，新手首选）

如果你只是个人项目、设计文件比较私密，或者觉得配置 API Token 太麻烦，可以直接用 Figma 桌面端自带的本地 MCP 服务，无需 Token，本地直连。

Step 1：Figma 开启本地 MCP

Figma 桌面端 → 偏好设置 → Dev Mode → 勾选 Enable Dev Mode MCP server，提示端口 3845 运行。

Step 2：Cursor 添加本地服务

Cursor 打开 MCP 配置（同方案 A 的 Step 3）
新增本地服务，填写地址：

http://127.0.0.1:3845/mcp

保存并重启 Cursor，无需任何 Token。

适合处理私密设计文件，数据全程走本地回环，不经过 Figma 云端 API。

5. 标准 AI Coding 实操流程（设计一键转可运行代码）

5.1 获取精准 Figma 链接（核心！不要用整文件链接）

选中要开发的单个组件 / 画板 → 右键 Copy/Paste as → Copy link to selection

链接末尾会带 ?node-id=xxx:xxx，AI 只会解析你选中的区域，不会把整个文件的多层页面混在一起。

5.2 万能提示词模板（直接复制使用）

模板 1：React + Tailwind 业务组件（最常用）

基于这个 Figma 链接的设计稿，生成标准 React 函数组件，要求：
1. 严格匹配设计内边距、圆角、阴影、字号、色值，复用 Figma 设计变量
2. 使用 Tailwind CSS，不写原生冗余 CSS
3. 拆分原子子组件，规范 TS 类型定义 props
4. 区分静态展示 / 交互按钮状态（hover、disabled）
5. 代码贴合当前项目目录规范，给出文件存放路径

模板 2：Vue3 + Element Plus

根据该 Figma 画板实现 Vue3 setup 语法糖组件，使用 Element Plus 内置组件，
样式 1:1 还原设计，抽离公共样式常量，增加基础点击交互示例。

模板 3：纯静态 HTML/CSS 页面

输出可直接打开的 HTML 文件，内联 CSS，完全还原 Figma 布局，
适配移动端，图片使用占位链接。

5.3 AI 生成后标准化精炼步骤（避免垃圾代码）

结构校验：让 AI 区分容器组件 / 展示组件，规范 Props 入参
设计系统对齐：强制复用项目现有 token，禁止 AI 擅自新增色值 / 间距
交互补全：补充 hover、点击、加载、空状态 UI
工程整合：让 AI 把组件挂载到现有路由，导入全局公共组件

6. 双向协同：代码反向同步 Figma（加分功能）

除了"设计 → 代码"这条正向链路，Cursor 还支持代码反向同步 Figma，实现设计与开发的双向闭环。

在 Cursor 聊天框输入指令：/prototype-to-figma
粘贴本地运行的项目 localhost 地址
AI 会自动将代码页面同步为 Figma 可编辑画板

这条链路特别适合前端驱动设计的工作流：先写代码快速验证交互，确认无误后再一键同步回 Figma 沉淀为设计规范，让设计师和开发者始终在同一个源上协作。

7. 高频踩坑 & 解决方案

问题	现象	原因	解决方案
Cursor 读不到 Figma 图层	AI 提示“无法获取设计数据”、长时间无响应或返回空结果	文件未公开或 Token 权限不足	检查文件权限是否设为 Anyone with link → Can view；Token 是否勾选 Files:read；重启 Cursor
`npx` 命令报错	终端出现 `npx: command not found` 或 `SyntaxError` 等错误	Node 版本过低	更新 Node 到 v20+，重启终端 / 电脑
样式尺寸偏差大	生成的代码中颜色、间距、字号与设计稿明显不一致	用了整文件链接或截图，AI 未精确定位到单个画板	必须使用带 `node-id` 的选中链接；开启 Figma Dev Mode 复制 CSS 辅助校准
MCP 服务启动失败	Cursor 右下角 MCP 状态显示未连接，或控制台报端口 3845 被占用	端口被占用或网络拦截	关闭占用 3845 端口的程序；切换方案 B 的官方 Dev Mode 本地 MCP