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/