探索让 AI 直接读取 Figma 设计稿生成 UI 代码的可行性。
结论：技术上可行，但在传统 XML 项目中还原度不高。调研发现，Jetpack Compose + Auto Layout 才是最佳组合，要落地需要设计和开发一起推动技术栈升级。
Figma MCP
MCP（Model Context Protocol） 是让 AI 模型能够与外部数据源和工具交互的标准协议。cursor-talk-to-figma-mcp 基于 MCP 协议，在 Cursor 和 Figma 之间建立连接，可以在 Cursor 里直接：
- 读取 Figma 设计稿的完整信息（图层、样式、布局、组件等）
- 编辑 Figma 文件（创建图形、修改属性、调整布局）
- 生成代码：根据设计稿生成对应的 UI 代码
配置
Step 1：打开 Figma 桌面端，搜索 Cursor Talk To Figma MCP Plugin，点击安装。
Step 2：插件和 Cursor 之间需要一个中转服务来通信，打开终端运行：
bunx cursor-talk-to-figma-socket服务启动后会在本地监听端口，保持终端窗口不要关。
如果没有安装 bun，可以先用
npm install -g bun安装。
Step 3：在任意 Figma 文件里打开插件面板，可以看到 Channel ID 和 MCP 配置信息。
Step 4：把配置复制到 Cursor 的 mcp.json 文件中。
配置完成后，在 Cursor 的 Chat 里就能直接和 Figma 设计稿交互了。
权限问题
配置过程顺利，但使用时踩了个坑：企业账号没有编辑权限。
Figma 的账号体系有两个维度：
| 维度 | 类型 |
|---|---|
| 账号类型 | Starter（免费）、Professional、Organization、Enterprise |
| 席位类型 | Full Seat、Dev Seat、Collab Seat、View Seat |
公司用的是 Enterprise 账号，给开发分配的是 View Seat（只读席位），意味着在公司 Figma 里只能看不能编辑，而 Figma MCP 插件需要编辑权限才能正常工作。
| 账号 | 席位 | 能否使用插件 |
|---|---|---|
| 公司 Enterprise 账号 | View Seat | 不行，Drafts 和 Projects 都没有编辑权限 |
| 个人 Starter 免费账号 | Full Seat | 可以，Drafts 里有完整权限 |
解决办法：把设计稿复制到个人账号里。在公司 Figma 里打开目标设计稿，选中需要的 Frame，Cmd + C 复制，切换到个人账号，在 Drafts 里新建文件，Cmd + V 粘贴进去。
还原度
配置完成后，尝试用 Cursor 根据设计稿生成对应 XML 布局 文件。结果是能用，但还原度一般，生成的代码需要大量调整才能用。
问题 1：几何式布局缺乏语义
传统 Figma 布局是几何式的，设计师通过绝对坐标定位元素：
Text A → (x: 20, y: 50)Text B → (x: 20, y: 80)AI 拿到这些数据后，只知道两个文本框垂直相距 30px，但无法判断设计师的意图：
- 这是一个垂直列表，间距固定 30px？
- 这是两个独立元素，碰巧对齐了？
- 这是某个列表项的一部分，设计师手动复制出来的？
AI 只能靠启发式算法猜测。猜错了布局就会有问题，猜测过程本身也消耗算力，影响生成速度和准确度。
问题 2：XML 与声明式设计不匹配
即使设计稿用了 Figma 的 Auto Layout（一种声明式的布局方式，类似前端 Flexbox），生成 XML 代码的效果也不理想。
根本原因是：Auto Layout 是声明式的，而 XML 布局是命令式的。
Auto Layout 明确标注「这是一个垂直容器，子元素间距 30px」，但转成 XML 时，AI 需要把这些声明式规则翻译成 LinearLayout + layout_marginTop 等命令式属性，这个转换过程会损失很多信息，也容易出错。
调研结论
调研后发现，Jetpack Compose + Auto Layout 才是最佳组合。
Compose 是声明式 UI 框架，它的布局理念和 Auto Layout 天然契合。对应关系如下：
| Figma Auto Layout 属性 | Jetpack Compose 实现 |
|---|---|
| Horizontal（水平排列） | Row { } |
| Vertical（垂直排列） | Column { } |
| 无 Auto Layout / Group | Box { } |
| Fill Container（填充容器） | Modifier.fillMaxWidth() |
| Hug Contents（包裹内容） | Modifier.wrapContentSize() |
| Fixed Size（固定尺寸） | Modifier.size(dp) |
| Padding（内边距） | Modifier.padding() |
| Space between items（间距） | Arrangement.spacedBy() |
| Alignment（对齐） | Arrangement.Center / Alignment.* |
几乎是一一对应。AI 拿到 Auto Layout 数据后，不用猜测和转换，直接映射成 Compose 代码即可。
当前价值
虽然在传统 XML 项目中无法完美还原 UI，但 Figma MCP 现阶段仍然有价值：
- 提取设计参数：快速获取颜色值、字号、间距、圆角等，不用手动量
- 理解页面结构：读取图层层级和命名，帮助理清组件划分
- 生成骨架代码：生成大致的布局框架，在此基础上微调
- 辅助设计走查：对比设计稿和实现，快速定位差异
把它当作辅助工具，而不是完全自动化的解决方案。
升级路径
要真正发挥 AI 设计转代码的能力，需要从两个方向推进：
设计侧
- 全面使用 Auto Layout：所有组件都用声明式方式组织，而不是绝对定位
- 建立 Design System：统一的设计组件库，命名规范化
- 组件化思维：设计时就按开发的组件粒度拆分
开发侧
- 迁移到 Jetpack Compose：声明式 UI 框架，和 Auto Layout 理念一致
- 搭配 KMP（Kotlin Multiplatform）：一套 Compose UI 代码，Android 和 iOS 都能用
- 实现对应组件库：Figma 里的组件和代码里的组件一一对应
当设计和开发都采用声明式体系，Figma 里的组件和代码里的组件形成映射关系后，AI 只需要做「翻译」工作：
Figma Auto Layout (声明式设计) ↓ AI 直接映射Jetpack Compose (声明式代码)这时候，设计师在 Figma 里调整一个按钮的圆角和间距，开发在 Cursor 里让 AI 同步更新代码，几秒钟就能完成，效率提升会非常明显。
理想的技术栈是：Cursor + Figma MCP + Jetpack Compose + KMP + Auto Layout。