重磅系列文章！UI2CODE智能生成Flutter代码——整体设计篇

0 1背景

随着移动互联网时代的到来，人类的科学技术突飞猛进。然而软件工程师们依旧需要花费大量精力在重复的还原UI视觉稿的工作。

UI视觉研发拥有明显的特征：组件，位置和布局，符合机器学习处理范畴。能否通过机器视觉和深度学习等手段自动生成UI界面代码，来解放重复劳动力，成为我们关注的方向。

0 2UI 2 Code是什么

  UI2CODE项目是闲鱼技术团队研发的一款通过机器视觉理解+AI人工智能将UI视觉图片转化为端侧代码的工具。

  2018年3月UI2CODE开始启动技术可行性预研工作，到目前为止，经历了3次整体方案的重构（或者重写）。我们参考了大量的利用机器学习生成代码的方案，但都无法达到商用指标，UI2CODE的主要思想是将UI研发特征分而治之，避免鸡蛋放在一个篮子里。我们着重关注以下3个问题的解法：

视觉稿还原精度：我们的设计师甚至无法容忍1像素的位置偏差；	
准确率：机器学习还处于概率学范畴，但我们需要100%的准确率；	
易维护性：工程师们看的懂，改的动是起点，合理的布局结构才能保障界面流畅运行。

0 3UI 2 Code运行效果

UI2CODE插件化运行效果，如下视频：进过几轮重构，最终我们定义UI2CODE主要解决feeds流的卡片自动生成，当然它也可以对页面级自动生成。

---

0 4架构设计

简化分析下UI2CODE的流程：

大体分为4个步骤:

1.通过机器视觉技术，从视觉稿提取GUI元素	
2.通过深度学习技术，识别GUI元素类型	
3.通过递归神经网络技术，生成DSL	
4.通过语法树模板匹配，生成flutter代码

0 5版面分析

版面分析只做一件事：切图。
  图片切割效果直接决定UI2CODE输出结果的准确率。我们拿白色背景的简单UI来举例：