我最近刷技术博客和公众号的时候，被各种"AI 一键生成前端代码"、"10 秒完成界面开发"之类的标题刷屏了。
说实话，作为码农的我，内心也是既兴奋又有点小忐忑。兴奋的是，AI 的确有可能极大地提高我们的开发效率；忐忑的是，这会不会取代我们这些"手工码农"？
今天，我就决定亲自下场试一试，看看这些 AI 工具到底有多神奇！我的目标很简单：使用 AI，将一份 Figma设计稿转化为可用的前端代码。测试结果有让我失望的，也有让我惊喜的。
一、准备Figma设计稿
想要用 AI 生成代码，首先你得有一份完整的设计稿。我这里以MM开源示例中的智慧场馆设计稿为例，这个页面包含了一些系统的基本元素，包括标题、按钮、背景、图表等，它在Figma中长这样：
二、选择AI工具
目前市面上有很多声称可以一键生成代码的AI工具，我挑选了几个比较热门的进行了测试。
#01：Anima
AnimaApp 是一个在线平台，它可以将 Figma设计稿转换为 HTML或者React工程。它的操作很简单，只需要输入Figma设计稿链接，选择编码语言后即可生成。
官网地址：dev.animaapp.com/
我上传了我的Figma设计稿，AnimaApp 很快就生成了相应的代码，并且提供了在线预览功能。
它的优势在于还原度相对较高，适用于做简单的示例Demo，但是它不适用于做实际项目，原因如下：
-
只支持React和HTML，不支持Vue。
-
只能实现静态页面，无法实现响应式组件。
-
代码质量不高，非常冗余，界面元素大小按照设计稿大小完全写死，未做自适应。
代码预览
笔记本预览效果-显示不全
显示屏预览效果-未铺满整个界面
#02：Bolt
Bolt和AnimaApp很像，它也是一个在线平台，操作也很简单，只需要输入Figma设计稿链接即可，但它不仅拥有AnimaApp所有的缺陷，还原度还比AnimaApp低。
官网地址：bolt.new/
效果预览
#03：Trae IDE
Trae IDE与AI深度集成，提供智能问答、代码自动补全以及基于Agent的AI自动编程能力。其中，它有模型上下文协议（MCP）功能，通过使用MCP Server - Figma AI Bridge，自动将Figma设计稿转换为前端代码，并生成相应的网页。
官网地址：www.trae.com.cn/
它还提供了一个官方教程：MCP 教程：将 Figma 设计稿转化为前端代码 - 文档 - Trae CN（docs.trae.com.cn/ide/tutoria...
官方效果展示
虽然它的教程很详细，看着也很让人心动，但是测试下来，让我很失望......生成的界面与设计稿简直就是天差地别！
效果预览
经过对上述工具的测试，我发现它们虽然各有优点，但生成的代码和效果都难以满足实际项目的需求。要么是代码质量不高，需要大量手动修改；要么是功能不够完善，无法处理复杂的设计和交互。所以，AI距离真正的"一键生成"还有很长的路要走。
#04：Figma to Cursor插件+Cursor IDE
那么，现阶段，我们该如何使用AI，既能得到高质量代码又能还原设计效果呢？经过我的多方搜索与测试，我终于找到了一个相对符合要求的方案：Figma to Cursor（Figma 插件）+ Cursor IDE。
- Figma to Cursor 插件 这款插件是专门为与Cursor IDE协作而设计的。它可以更准确地解析Figma设计稿中的元素，并将其转换为Cursor IDE可以理解的格式。这款插件在处理复杂布局和组件方面表现出色，能够更好地保留设计稿的原貌。www.figma.com/community/p...
- Cursor IDE它是一个专门为 AI 编程设计的集成开发环境。它可以接收从Figma导出的设计稿信息，并利用其强大的 AI 引擎生成高质量的前端代码。Cursor IDE不仅支持多种前端框架和库，还提供了丰富的代码编辑和调试功能，可以让我们在生成代码的基础上进行进一步的优化和调整。www.cursor.com/cn
三、手把手教你用AI实现UI界面
#安装Figma插件
打开我们准备的Figma设计稿，在插件中搜索Figma to Cursor，点击打开即可使用。
由于该插件只能识别以Frame或者Group为单位的元素，所以我们这里需要将设计稿中零散的元素分成不同的Frame或Group，注意每个Frame或Group包含的元素不宜过多。
针对我准备的智慧场馆设计稿，按照功能模块分成了顶部、设备状态、设备信息、设备列表等9个Group。
#安装Cursor IDE
由于Cursor官网提供了详细的安装和使用教程，这里就不展开说明啦，教程网址：Cursor -- Installation：docs.cursor.com/get-started...
#创建新项目
创建一个新的Vue工程，可以自己创建也可以命令Cursor创建，并在Cursor IDE中打开。为了使系统看起来更加完整，我先使用Mapmsot SDK for WebGL添加了三维场景模型。
SDK加载效果
#分组件生成代码
- 点击Figma设计稿中的对应的Group，再点击Copy to Cursor按钮复制代码。
- 打开Cursor，新建Notepad，将代码复制进去，并说明相关要求。
- 在Cursor对话框中引用对应的Notepad，命令它根据要求生成代码。
- 如果Group中需要用到一些图片或者图标，可以先下载好，并告诉Cursor图片所在的位置。
- 如果生成的效果有点偏差，可以命令Cursor逐步调整。我测试下来，改动的代码不是很多，大多都是颜色和位置的调整。
#UI效果查看
我们先来查看一些组件初步生成和简单调整后的效果对比。
效果对比图
从上述对比图中，可以看出，AI根据插件转换的代码生成的效果与实际效果有颜色差异、位置轻微错位、图片丢失、部分细节丢失等问题，通过1-5次的对话就可以自动调整过来。
再看一下整个系统的对比效果，还原度有90%了，因为我只是做测试，没有那么精益求精，如果还原度要达到100%的话还可以继续进行对话调整。
设计稿效果图
AI生成效果图
此外，选择Figma to Cursor+ Cursor IDE这种方式还有一个原因是它可以快速实现交互式组件，比如按钮之间与状态切换的交互。
AI生成按钮交互效果
#实现功能模块
完成了UI界面的搭建，后面就可以使用Mapmost SDK for WebGL完成各个功能模块的实现啦。
SDK消防路线实现效果
SDK游客管理实现效果
四、总结
总的来说，AI编程与传统编程相比，有以下几点区别：
-
效率： AI编程在处理简单、重复的UI布局时，效率远高于传统编程。
-
门槛： AI编程降低了前端开发的门槛，即使你不懂代码，也可以快速搭建出一个简单的页面。
-
灵活性：传统编程更加灵活，可以精确控制每一个细节，而AI编程目前还难以处理一些复杂的交互和动画。
-
创造性：传统编程更加依赖开发者的经验和创造力，而AI编程目前更多地是执行预先定义的任务。
关注 Mapmost，持续更新 GIS、三维美术、计算机技术干货
Mapmost 是一套以三维地图和时空计算为特色的数字孪生底座平台，包含了空间数据管理工具（Studio）、应用开发工具（SDK）、应用创作工具（Alpha）。平台能力已覆盖城市时空数据的集成、多源数据资源的发布管理，以及数字孪生应用开发工具链，满足企业开发者用户快速搭建数字孪生场景的切实需求，助力实现行业领先。
欢迎进入官网体验使用： Mapmost------让人与机器联合创作成为新常态