研发提效：通过设计稿自动生成前端代码

今天抱着听不懂来见识的心态参加了全球架构师峰会，没想到还是大部分内容还是听得懂的。高手们都是可以用简单的话语讲透复杂的事情。

一天下来听了8位大佬分享，收获很多，今天就给大家分享其中一个（其他的写篇文章还挺有难度，😅）

先分享京东前端同学分享的通过UI设计稿自动生成前端代码的演讲。因为是纯理解分享，所以如果有理解错误的地方，请大家指正哈。

做过前端的同学可能知道，写页面并没有太大的技术含量，就是比较费时间。而做这个项目的目的就是为提高前端同学的研发效率，少写代码甚至不写代码。

所以京东就开始探索，如何利用设计稿直接自动生成代码的解决方案（匹配多端）。这里主要分为两个阶段。

第一阶段，UI设计稿直接生成静态页面。

第二阶段，UI设计稿直接生成带有逻辑的页面。

目前第一阶段的技术已经很成熟了，第二阶段还并不是非常熟，在生成代码之后，有时候还需要工程师去核查（小概率事件），不过对于一些常用组件，是可以做到自动化生成了。先说效果，这个项目已经运用在了京东app上了，并且把前端任务的工作量提升了将近一半，原来4天工作量的任务，现在只要2天多点就能完成。

我原来以为这个项目花了很长时间，但主讲者李伟涛老师说，参与开发项目的人只有7个人。花了多长时间我没记住，好像是一年？

在探索的过程中主要有三个难点：设计效果的还原度、代码逻辑的合理性、代码的可读性。

具体怎么做的呢？

首先，先要将设计稿数据处理成程序可使用的格式。

这里面有很多细节问题需要克服，具体我没做过所以不好具体说，不过我估计会对设计人员的设计稿制定一系列的标准，以便更好的生成代码。

其次，使用布局算法将设计稿数据还原为结构良好的代码。

这里简单说就是，你需要通过布局还原算法，智能的识别设计稿里的对象，如何正确的成行成列以及样式的合理计算。最终形成跟设计稿相同的程序代码。

再次，让代码具有语义化。

制定基础语义规则：样式、上下文、组件等。再加上AI协助处理文字分类、图片分类、翻译服务等。最后给到各个节点类名进行语义化处理。

最后，生成代码。

这里的代码要支持各类DSL及扩展。否则意义就不大了。

这时候的代码，还是静态代码。接下来要给代码加上逻辑，就需要扩展工作台，增加人工可视化逻辑处理。在生成的ui界面上自动设置一些业务逻辑，这块成熟后是完全可以给到其他业务人员用。整体结构如下图：

我们可以展望下，如果未来有一个专门的公司给中小企业提供自动生成前端代码的能力，那么你的工作方式会有哪些改变？前端工程师岗位还会存在？欢迎你留言与我交流。