当前位置：首页 > news >正文

AI生成Flutter UI代码实践（一）

news 来源：原创 2025/5/17 12:25:48

请添加图片描述

之前的杂谈中有提到目前的一些主流AI编程工具，比如Cursor，Copilot，Trea等。因为我是Android 开发，日常使用Android Studio，所以日常使用最多的还是Copilot，毕竟Github月月送我会员，白嫖还是挺香的。

但是用过Cursor的也都知道它的强大，但是做Android开发还是不方便，需要两个工具来回切换使用。所以就在想写flutter应该不错，所以在早些时间就试了试，整体来说还是不错的。但是刚开始还是有些不习惯，整体效率没有明显提升，就搁置了。

后来受到启发，在想能否上传设计图给Cursor，让它帮我写UI。毕竟在我的经验里，UI的耗时基本占一个需求的60%左右，毕竟要还原设计稿，细节还是不少的，也需要不断适配调式。于是测试了一番，最近有了一些阶段性成果，整理分享一下，抛砖引玉。

测试页面

在这里插入图片描述
选了一个很简单的页面，试试水。公平起见，以下效果均是第一次生成的结果，不会尝试多次，挑选效果好的或是差的对比。

测试方案

Codia

figma插件，可以在figma上将设计稿转换为代码并导出。使用方法不做过多介绍，见官网。

测试效果：
请添加图片描述

优点：

使用方便，直接导出flutter项目，图片资源等都打包好。
还原度高。页面大小，间距，颜色等信息都是正确的。

缺点：

宽高和位置都是写死的（用的Stack + Positioned），导致代码几乎不可用。
页面中的状态栏，底部的黑色小条当做页面内容生成了，比较傻瓜。
不灵活，不能交互。例如图中的底部进度条都是图片。banner的部分也是图片一张，不能滑动。

Cursor + Claude 3.5

在Cursor中上传UI页面的图片，提示词：根据图片，生成Flutter代码。

测试效果：
请添加图片描述
优点：

生成的代码中各个控件位置不会写死。

缺点：

还原度差的远，或许多次尝试会有好的。
也无法获取页面中的切图，上面的人物图片是我自己替换的。

原因：figma插件掌握的信息更多，上传图片的方式只能靠ai识别图中信息，在间距，大小，颜色上都做不到不准确。

Cursor + Claude 3.7

后面更新了Claude 3.7，编程能力有所提升，所以我又试了一次。

效果：下图中最后一张是Claude 3.7生成的效果。

在这里插入图片描述
还原度有提升，但问题还是一样，颜色，圆角，大小，间距都是不对的。同时截止目前没有一个方案可以识别图中的轮播效果并实现。

以上是第一阶段测试，基于当时（25年2月20日）的工具和AI能力实现的。两种方案各有千秋，如果可以综合到一起那效果可以更好。

CodeParrot

地址：https://codeparrot.ai
VSCode插件，将figma页面地址粘贴进去，可以基于当前项目的主题，组件库去生成代码。

效果：

在这里插入图片描述
优点：

可以获取页面信息，宽高大小等信息比较准确，自动切图。
有一定还原度，代码灵活。例如这里的轮播效果实现了。

缺点：

页面理解能力不强，比如状态栏和底部小条的处理。
切图不准确（这个例子中是将图片和指示器一块切出，同时上传图片到它们的服务器上，这里用的图片是链接地址。。。）

但整体来说，又进步了一些。

Cursor + MCP + Claude 3.7

到这里就来到了本篇的重点。

前一阵Cursor支持了MCP，同时也有了大量的MCP工具出现。这次我使用到的是Figma-Context-MCP。

配置好后如下图，它提供两个工具，一个是获取figma页面信息，一个是下载切图。这正是我们需要的。

在这里插入图片描述
使用方法也很简单，Cursor选Agent模式，填入figma地址，加上提示词。

第一轮测试

请添加图片描述
使用Cursor的好处是，可以帮我们将图片下载到对应的文件夹内并引用，包括轮播依赖的引用等。

请添加图片描述

左边这个是我第一次尝试时的效果，右边是第二次。差距这么大的一个原因是figma给到的信息是json，里面包含页面的层级，控件大小，颜色这些。一开始figma上页面的层级是不标准的，例如：按钮的文字和按钮不在一个组里面，指示器也一样。所以布局也就有概率混乱。

第二轮测试

后面调整了一下figma上的层级，每个组的命名也规范了。这样等于是给到了AI更多的信息。

在这里插入图片描述
重新生成了一下，效果：

在这里插入图片描述
左边是生成的效果，右边是我改了一下轮播区域比例后的效果。看的仔细的话，你会发现字体也是对的，之前其实都是默认字体。同时不知道是不是命名的关系，iOS底部的黑条（Home Indicator）也没有了。

其实上面的CodeParrot就是用调整后的设计稿生成的，所以轮播效果大概率也是因为这点才实现了。

第三轮测试

后面我看了一下代码，发现文字颜色，大小，字体，字重都是对的，但是间距，宽高这些还是有问题。看了一下figma给到的信息中是有宽高的，间距没有（其实也可以理解，毕竟间距是给相对概念，不太好给到）。但是这个mcp在简化json信息的时候去掉了宽高。所以我修改了源码，将控件宽高信息保留。测试效果如下：

在这里插入图片描述
我本身以为给到AI宽度会让它写死宽高，但实际上它自己会做识别（不稳定），在合适的地方使用。比如指示器就使用宽高，底部按钮就只使用高度。这个效果基本上改改已经可以用了。

不过这次顶部的渐变背景不见，字体也不对了。看来这块还是不稳定。

优点：

可以获取页面信息，自动下载切图。
还原度较高，代码灵活。
自由组合，后面可以使用更优秀的模型或是MCP来提升效果。

缺点：

要求设计对页面进行标准命名，分组。
需要更多的配置（MCP，rules）

以上是第二阶段测试，基于当时（25年4月1日）的工具和AI能力实现的。目前来说Cursor + MCP是目前最理想的方案。同时以目前的情况看，大多数AI生成代码只能用figma，蓝湖目前没有接口，这方面差的远。

到此本篇结束，下一篇我会介绍进一步优化的方案及效果。很快，敬请期待~