零代码编程体验之Figma设计稿到前端代码

在代码的海洋中自由航行

于 2025-06-18 00:00:06 发布

阅读量1k

点赞数 25

CC 4.0 BY-SA版权

文章标签： figma 前端人工智能 AI编程 ai

本文链接：https://blog.youkuaiyun.com/alex195/article/details/148725610

一、前言

上一篇我们尝试了Google Stitch生成设计稿，最终的设计稿导出到了Figma。这里，我们尝试使用三个方案来生成第一个页面的前端代码：

使用bolt.new的import from Figma功能；
使用Trae集成Figma MCP智能体方式；
使用bolt.diy的开源方案；
设计稿如下：

二、使用bolt.new的import from Figma功能

根据bolt.new界面的提示，操作如下三个步骤即可：

bolt.new首页选择“Figma”；

注：如果是第一次使用Figma导入功能，按照界面提示完成bolt.new到figma网站的连接建立。
按照界面提示获取Figma设计稿链接URL；
输入链接URL，点击“Import Figma frame into Bolt”；

第一次生成的效果还可以，但有些偏差，经过简单的沟通交流后，结果相当接近原设计稿。
聊天过程如下：

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/b80d9e491f844a7c8f412a45cfeaaf31.png

最终生成的效果图：

三、使用Trae集成Figma MCP智能体方式

Trae工具添加智能体
简单概括添加过程如下：Builder with MCP->创建智能体->配置智能体（需要按提示在Figma创建API Token并填入）->使用智能体
详细添加步骤详见：https://docs.trae.com.cn/ide/agent
使用官方的标准promt及Figma设计稿来对话：

可以看到这里Figma的MCP其实只是两个API，一个下载设计稿对应的描述文件（metadata），另一个是下载图片。而最终也只生成了HTML代码及下载部分的图片，最终的效果图如下：

可以看到其实缺少了很多的图片，相关图标也不对，其它内容及样式还行：
尝试让它修复一下（详见上述聊天截图内容），效果一般：

四、使用bolt.diy的开源方案

由于bolt.new有使用频率限制，考虑使用其开源版本。不过，并没有找到import from Figma功能，也没找到添加智能体的入口（如果有熟悉的同学可以告知下）。硬着头皮将Figma的设计稿及跟Trae同样的Promt提示语给到Deep Seek Coder生成，一开始还以为可以，看到结果时就知道，其根本没按设计稿来。后来想想也对，它都没像bolt.new有连接Figma的流程，也不像Trae需要设置Figma的API Token，怎么能访问到设计稿内容呢。应该只是根据提示语和链接的文本信息本身，再结合它自身的理解来生成而已，结果如下：
在这里插入图片描述
尝试过把设计稿截图给它，不过生成的最后一步报错了：

五、使用总结

从bolt.new的结果来说，直接从设计人员提供的设计稿来生成前端代码，而且是高度还原，已经近在眼前；
国产的Trae效果还有待改进，不过其使用智能体方式，类似插件机制相当不错，不知道是否有sketch之类的，国内的设计人员好像比较喜欢用这个；
从Google Stitch到Figma再从Figma到前端源码，这个路径来说看似比直接从一句话到前端代码的方式要显得多余，但从体验来看，完全跳开设计人员从一个想法到直接代码实现还不现实。实际开发产品过程中，设计人员在产品和开发之间的作用就是一个转换和不断调整美化的过程，这个角色还是相当重要的。