昨天发了一篇用 Figma Make 开发网页的设计文章。
评论区有朋友留言，想看看 Figma 是怎么打通 Trae（AI 编程 IDE） 的。
其实，这正是未来所有 AI 编程 IDE 都要解决的核心问题——
如何从产品原型（Figma）一步走到 MVP（可运行的网页应用）。
这条路径，正是未来 AI 工具链竞争的关键节点。
于是我动手实测了一下 Figma 与 AI IDE 的打通方式。
下面是一些实操经验，也顺便聊聊这背后的趋势。
一、Figma 与 AI 编程 IDE 的两种集成方式
实测下来，目前主流 AI 编程 IDE 与 Figma 的结合，大致有两种思路：
嵌入式集成
将 Figma 的网页直接嵌入 IDE 右侧，左侧为代码编辑区。
这样能做到设计与代码的同步浏览，不用跳转（实际上不同页面切换还是有点问题），但交互仍然偏“视觉层面”。
这样方便实时对照，但更多只是视觉同步，并没有数据层面的交互。
基于 MCP 协议集成
通过 Figma MCP（Model Context Protocol）接口，对单独的 Section 页面进行智能编码。
这种方式更“原生”，可直接在 AI 智能体内调用 Figma 设计数据。
二、如何在 MCP 中连接 Figma
首先，在 MCP 市场中搜索 “Figma”。
接着进入 Figma → Settings → Security，创建一个自定义的 Personal Access Token。
将这个 Token 填写到 Figma MCP 的配置参数中，确认后即可。
出现这个状态表示已经添加成功。
连接完成后，可以在 “Build with MCP” 这个智能体中看到所有已添加的 MCP。
三、从设计到生成代码
打开 Build with MCP 智能体后，选择你要开发的 Figma 设计原型。
我以之前在 Figma Make 上制作的“虚拟试衣间”项目为例👇
可以让 AI 按页生成代码，也能先转成 Figma Design，再由 AI 解析。
在 Figma 中，右键页面 → “Copy/Paste As” → 选择 Link Section， 复制类似这样的链接：
https://www.figma.com/site/vfJ1tEttgzw2RV7yuqRaAI/Modern-Product-Launch--Community-?node-id=0-3&t=xxx
✅ 模型选择建议：
推荐使用 Claude 模型（或 Auto 模式），生成代码的能力更稳定、语义理解也更强。
四、优化 Prompt 提示词
在生成前，可以点击右上角的小星星，对 Prompt 进行优化。
初始提示词通常比较简短，适当补充产品逻辑或组件说明，生成结果会更贴近预期。
调整完毕后点击确认，静待 AI 自动生成。
当系统提示 “已完成所有网页的开发”，说明流程结束。当系统提示 “已完成所有网页的开发”，说明流程结束。
五、最终效果对比
下图是原始设计稿与 AI 生成网页的对比：
原稿：
生成版本：
可以看到，目前的还原度大约在 70%-80% 左右，结构基本一致，但在布局细节、字体样式等方面仍有差距。
这也说明了一个趋势：
未来 AI IDE 的竞争，不只是谁写代码更快，不是谁的功能更加全面，谁更卷，
你说功能那么多，用户体验那么差，不等于白做嘛，是吧
而是谁能更好地理解 设计语言与产品意图。
六、写在最后
Figma + AI IDE 的结合，还只是第一步。
真正的未来，是让 AI 能读懂「设计语言」和「产品逻辑」，从生成页面走向生成体验。
而这种打通，不仅是设计工具与开发工具的融合，更是产品经理思维、交互逻辑、AI 理解能力的融合。
当 Figma 不再只是画原型，而是产品开发的起点，AI IDE 也不再只是写代码的助手。
它们之间的界限，正在慢慢消失。
你看懂了嘛？
本文由公众号“AIGC新知”授权AI产品之家转载，原文连接： https://mp.weixin.qq.com/s/8In4cctd3hha--_J6RZpCA