设计稿（UI视图）自动生成代码方案的探索

　　设计稿转代码是前端工程师日常的核心任务，尽管这部分工作看似简单，却占据了相当大的工作量。因此，提升这一过程的效率一直是工程师们追求的目标。过去，工程师们尝试通过构建通用视图库来简化工作，但这种方法逐渐显现出局限性，无法满足所有个性化需求。于是，我们提出了一种新的设计稿自动生成代码的方案，旨在进一步提升工作效率。

　　当前，行业内的主流代码生成方案主要分为两类：一种是通过训练神经网络，直接从图片或草图生成代码；另一种则是基于Sketch源文件，解析图层信息转化为DSL（描述性语言）并生成代码。经过实践对比，我们发现基于神经网络的方案在复杂布局上的准确率较低，且可解释性不强。而基于Sketch的方案则因其丰富的信息量和高度可定制的算法而更具优势。因此，我们研究了多个基于Sketch的代码自动生成方案，并尝试解决其中发现的问题。

　　在算法准确率方面，淘宝的imgCook支持AI组件识别，但不支持成组布局，准确率中等；而58 Picasso则仅支持原始组件识别，复杂组件生成错误较多。在代码可读性方面，imgCook在生成布局时使用了基于根布局的绝对定位方式，不符合预期，而我们的方案采用相对定位方式，可读性更好。在研发流程覆盖度方面，imgCook构建了一个IDE用于样式调整和逻辑绑定，而我们的方案则从产研协作角度出发，支持数据、逻辑、埋点的可视化配置及上线。

　　我们的解决方案包括三个主要部分：设计稿转视图树（UI2DSL）、视图树转代码（DSL2Code）以及业务信息绑定。UI2DSL负责将设计稿转化为平台无关的DSL视图树；DSL2Code则将DSL视图树转化为基于Flex布局的MTFlexBox静态代码；业务信息绑定则提供可视化配置工具，支持静态代码绑定后台数据、业务逻辑以及埋点逻辑。

　　UI2DSL的实现过程分为四个步骤：设计稿导入、组件识别、可视化干预和生成DSL视图树。其中，可视化干预是关键环节，通过工具帮助用户快速合并冗余图层、修复图层交叉问题以及处理复杂背景图层。

　　在生成DSL视图树时，我们采用了递归算法作为主框架，并结合“横竖切割+布局结构+模型评估”的方法。横竖切割通过切割点将大布局切分为小布局；布局结构则根据矩形之间的位置关系进行分类；模型评估则用于选择最优的切割方式。

　　在DSL2Code阶段，我们进行属性推断和属性信息调整。属性推断包括样式属性和结构属性两部分；属性信息调整则通过可视化工具辅助完成。最终，通过语法映射将DSL转化为MTFlexbox模板代码。

　　通过实践，我们取得了不错的效果。未来，我们将继续引入机器学习和神经网络算法以进一步优化过程。我们期待更多有价值的建议和反馈。