探索设计稿自动生成Flutter代码的技术方案

京东云开发者
• 阅读 135

作者:京东物流 冷先锋

近年来,随着人工智能和大模型技术的发展,设计稿(UI视图)自动生成代码的技术也在不断进步。本文将探讨几家知名企业在这一领域的探索和实践,包括美团、京东、微软等,以及一些常见的工具和方法,最后尝试大模型生成flutter代码在项目中的实践。

一、美团的探索

美团在2021年3月25日发表了一篇关于设计稿自动生成代码的文章,探讨了sketch2json和imgCook两种技术方案。sketch2json通过解析Sketch源文件中的图层信息,转化成DSL并生成代码,而imgCook则基于AI技术来实现这一过程。尽管当时大模型技术尚未成熟,sketch2json的生成算法较为简单粗暴,复杂层布局的准确率较低且可解释性不高,难以持续优化。

原文:设计稿(UI视图)自动生成代码方案的探索

二、咸鱼的UI2CODE的设计思路

咸鱼将整个工程结构分为五个部分,其中四块内容核心处理机器视觉的问题,通过机器学习将它们链接起来。代码的线上发布是非常严格的事情,而机器学习属于概率学解法,很难达到我们要求的精度,所以我们选择以机器视觉理解为主,机器学习为辅的方式,构建整个UI2CODE工程体系。

原文: UI2CODE智能生成Flutter代码——整体设计篇

三、微软的Sketch2Code

微软也曾推出过一个类似的项目,名为Sketch2Code。这个项目的目标是通过识别草图生成网页代码。虽然这项技术在形式上较为新颖,但其背后依然依赖于大量的研究工作。微软强调,通过草图生成代码并不意味着AI可以通过任意图像生成复杂逻辑的代码。在实际开发中,产品经理等角色需要将需求转化为设计,再由工程师通过代码实现。GPT-4等大模型目前只能在从设计到代码生成的环节提供辅助,而在需求理解和设计阶段仍需人工介入。

探索设计稿自动生成Flutter代码的技术方案

除了上述企业的探索,还有一些工具和方法可以帮助设计师和开发人员将设计稿转化为代码:

1.Uizard:可以将手绘草图和设计图像转换为数字原型和代码,支持HTML/CSS代码生成。

2.Adobe XD + Plugins:通过插件(如"Export Kit"或"Anima")将设计稿导出为HTML、CSS和JavaScript代码。

3.Figma + Plugins:类似于Adobe XD,通过插件(如"HTML Generator"或"Figma to Code")将设计稿转换为代码。

4.Zeplin:设计师可以将设计稿上传到Zeplin,开发人员可以从中提取CSS代码和设计规范。

5.Avocode:支持将Sketch、XD、Photoshop等设计稿转换为代码,自动生成HTML和CSS代码。

6.Sketch2React:将Sketch设计稿转换为React组件。

7.CodeMyUI:提供大量UI设计和代码示例,供设计师和开发人员参考。

四、Flutter代码生成工具

将设计稿直接转换为Flutter代码是一项复杂的任务,但以下工具可以显著简化工作流:

1.Supernova:支持从Sketch、Adobe XD、Figma导出Flutter代码。

2.Flutter Studio:在线工具,可以将设计转换为Flutter代码。

3.Parabeac:开源工具,支持从Sketch、Figma转换为Flutter代码。

4.Figma to Flutter:Figma插件,可以将设计稿转换为Flutter代码。

5.Adobe XD to Flutter:Adobe XD插件,可以将设计稿导出为Flutter代码。

6.Sketch2Flutter:将Sketch设计稿转换为Flutter代码。

7.Draftbit:低代码平台,支持从设计到Flutter代码的转换。

这些工具通常需要经过以下步骤:

1.设计阶段:在设计工具中创建设计稿。

2.导出设计:使用相应的插件或工具导出设计稿。

3.生成代码:导出的设计稿自动转换为代码。

4.手动调整:根据需要手动调整生成的代码。



五、京东的Ling平台

京东的Ling平台可以根据设计稿生成H5代码和Android布局代码,但目前尚无法生成Flutter代码。该平台的主要目标是简化开发流程,提高开发效率。

探索设计稿自动生成Flutter代码的技术方案

羚珑平台

六、大模型生成flutter探索和经验总结

1、尝试用历史的UI设计图生成,下图是把UI设计图导入到ling平台,可以生产web前端代码。

探索设计稿自动生成Flutter代码的技术方案 在这里插入图片描述

2、把前端WEB代码输入到大模型,让生成flutter代码,然后运行效果如下:

探索设计稿自动生成Flutter代码的技术方案

发现整体UI都正式出来,所有元素都能展示出来,字体和颜色还原度很高,就是位置偏差比较大。分析认为,设计图画的层次结构比较自由,没有结构化,大模型不能很高理解位置和层级关系。

3、原型设计图结构化和组件化

把这个想法和UI设计师沟通后,在新的项目中,尝试结构化UI设计图,按照顺序编排元素的位置,并且组件化。派送引导式作业的组件化化的设计图如下: 探索设计稿自动生成Flutter代码的技术方案 

组件一:头部卡片

探索设计稿自动生成Flutter代码的技术方案 探索设计稿自动生成Flutter代码的技术方案

组件二:运单卡片

探索设计稿自动生成Flutter代码的技术方案

探索设计稿自动生成Flutter代码的技术方案

小结

设计稿的组件在羚珑平台( https://ling.jd.com)生成web前端代码,然后拿生成的web前端代码输入到大模型,直接告诉大模型生成flutter代码。上图组件一和组件二,左边是设计稿,右边是大模型输入在项目运行的效果,还原效果比未结构化的情况,大模型理解翻译的提高90%,基本可以用于日常项目中,对设计师的画图有一定要求,这个时间投入,可以让研发节省更多的时间。

点赞
收藏
评论区
推荐文章
Stella981 Stella981
3年前
Android组件化方案及组件消息总线modular
背景组件化作为Android客户端技术的一个重要分支,近年来一直是业界积极探索和实践的方向。美团内部各个Android开发团队也在尝试和实践不同的组件化方案,并且在组件化通信框架上也有很多高质量的产出。最近,我们团队对美团零售收银和美团轻收银两款AndroidApp进行了组件化改造。本文主要介绍我们的组件化方案,希望对从事Android组件化开发
四儿 四儿
12个月前
大模型数据集:构建、挑战与未来趋势
一、引言随着深度学习技术的快速发展,大型预训练模型如GPT4、BERT等在各个领域取得了显著的成功。这些大模型背后的关键之一是庞大的数据集,为模型提供了丰富的知识和信息。本文将探讨大模型数据集的构建、面临的挑战以及未来发展趋势。二、大模型数据集的构建收集数
四儿 四儿
12个月前
大模型数据集:突破边界,探索未来
一、引言随着人工智能技术的快速发展,大型预训练模型如GPT4、BERT等在自然语言处理领域取得了显著的成功。这些大模型背后的关键之一是庞大的数据集,为模型提供了丰富的知识和信息。本文将探讨大模型数据集的突破边界以及未来发展趋势。二、大模型数据集的突破边界数
四儿 四儿
12个月前
大模型数据集:构建、挑战与未来发展
一、引言随着深度学习技术的迅速发展,大型预训练模型如GPT4、BERT等在自然语言处理领域取得了显著的成果。这些大模型的表现得益于其背后庞大的数据集,这些数据集为模型提供了丰富的知识和信息。本文将探讨大模型数据集的构建、面临的挑战以及未来的发展趋势。二、大
京东云开发者 京东云开发者
6个月前
大模型应用之基于Langchain的测试用例生成
一用例生成实践效果在组内的日常工作安排中,持续优化测试技术、提高测试效率始终是重点任务。近期,我们在探索实践使用大模型生成测试用例,期望能够借助其强大的自然语言处理能力,自动化地生成更全面和高质量的测试用例。当前,公司已经普及使用JoyCoder,我们可以
京东云开发者 京东云开发者
5个月前
大模型应用之基于Langchain的测试用例生成
一用例生成实践效果在组内的日常工作安排中,持续优化测试技术、提高测试效率始终是重点任务。近期,我们在探索实践使用大模型生成测试用例,期望能够借助其强大的自然语言处理能力,自动化地生成更全面和高质量的测试用例。当前,公司已经普及使用JoyCoder,我们可以
京东云开发者 京东云开发者
5个月前
大模型技术及趋势总结
本篇文章旨在希望大家对大模型的本质、技术和发展趋势有简单的了解。由于近期大模型技术发展很快,这里对大模型的技术、本质及未来趋势进行总结和探讨时,因为水平有限,疏漏在所难免。请大家谅解。引言大模型将成为通用人工智能的重要途径。在这个由0和1编织的数字时代,人
京东云开发者 京东云开发者
3个月前
电商搜索革命:大模型如何重塑购物体验?
自我介绍:京东零售搜推算法部算法工程师,专注于大模型技术以及在AI助手搜推等领域的应用探索和实践。在AI助手,NLP和搜索领域有十多年研发实践经验,在AI/NLP领域申请超过15项发明专利并出版两部著作。随着电商行业的蓬勃发展,搜索技术作为连接用户与商品的
京东云开发者 京东云开发者
1个月前
【玩转金融素材生成】探索交互式AIGC组合素材生成技术
作者:京东科技蒋煜襄本文介绍了一种交互式可控组合素材生成技术,本方案基于StableDiffusion模型,结合位置控制生成技术,实现了金融领域中的多元素素材组合交互式生成能力,增加了素材生成的丰富性以及使用上的易用性,可以帮助设计师和运营人员快速制作ba