MCP = Model Context Protocol，给 Cursor 增加访问 Figma 开放 API 的能力，粘贴链接 AI 自动拉取全部图层、色值、尺寸，然后生成 Flutter 代码GitHub。

步骤 1：生成 Figma 个人访问 Token

1、Figma 网页右上角头像 → Settings → Account → Personal access tokens 2、Create new token，权限勾选 Read 只读权限，名字随便填 cursor‑figma 3、复制保存 Token（只会出现一次，丢失需要重新生成）

步骤 2：Cursor 添加 Figma MCP 服务

1、打开 Cursor 编辑器，快捷键 Ctrl+Shift+P / Cmd+Shift+P 2、输入 Open MCP Settings，打开.cursor/mcp.json配置文件 3、填入配置（本地开源 Figma‑Flutter‑MCP 服务）GitHub

{

  "mcpServers": {

    "figma": {

      "command": "node",

      "args":["你的本地figma‑mcp服务入口.js"],

      "env":{

        "FIGMA_API_KEY":"你刚才生成的figd_xxxx token"

      }

    }

  }

}

需要电脑提前装好 Node.js，并且下载开源 figma‑flutter‑mcp 项目运行本地服务。

步骤 3、直接粘贴链接给 Cursor 生成 Flutter 代码

打开你的 dart 页面文件，侧边 AI 直接发送指令：

读取下面Figma画板链接，生成完整Flutter Material3页面代码。

优先自适应布局，使用Column、Row、Padding。

图片资源保存路径 assets/images/。

Figma链接：https://www.figma.com/design/xxxx?node-id=xxxxx

AI 自动拉取 Figma 全部图层数据，直接生成可运行 dart 代码。

优点：真正全自动读取链接，不需要手动抄写标注 缺点：配置繁琐，需要部署 MCP 本地服务；新手门槛高

方案三：无 MCP，Cursor + 截图半自动（你现在最实用、零门槛工作流）

不用搭建任何服务，90% 开发者日常的方案： 1、Figma 选中画板 Frame，复制画板截图 2、把截图 + 带 node‑id 的完整 Figma 链接一起发给 Cursor AI 3、提示词：

基于截图以及这个Figma链接，生成Flutter Dart页面。

Material3，自适应布局，不要硬编码坐标。

图片资源路径 assets/images/xxx.png。

链接：https://www.figma.com/design/xxx?node-id=xxx

缺点：AI 只能看图视觉估算，不能拿到精准图层 JSON，颜色、间距偶尔偏差，最后手动微调标注数值即可。

3 套方案对比速查表

表格

方案	难度	能否直接读取链接	适合人群
Figma 插件 Figma‑to‑Code	⭐极低	✅（Figma 内部）	快速出初稿，不想折腾
Cursor + Figma MCP	⭐⭐⭐高	✅Cursor 直接读链接	长期高频 Figma 转 Flutter 开发
Cursor + 截图半自动	⭐低	❌仅看图	临时页面，不想配置环境（你优先选这套）

生成完代码后配套操作

1、Figma 选中图片 → Inspect → Export，导出 @2x/@3x 图片 2、图片放到项目文件夹 assets/images 3、pubspec.yaml配置资源路径

flutter:

  assets:

    - assets/images/