从 Figma 到AI编程：Trae Solo 打通设计与开发的关键一步

昨天发了一篇用 Figma Make 开发网页的设计文章。

AI 小白必备：30 分钟搞定你的专属 AI 官网！

评论区有朋友留言，想看看 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 也不再只是写代码的助手。

它们之间的界限，正在慢慢消失。

你看懂了嘛？