ai设计稿是什么-提高研发效率：通过设计稿自动生成前端代码

今天我抱着不懂但想学的心态参加了全球架构师峰会。 没想到我还是听懂了大部分内容。 大师可以用简单的语言来解释复杂的事情。

一天听了8位大佬的分享，学到了很多东西。 今天我就分享其中的一个给大家（其他的很难写一篇文章）

首先分享一个京东前端同学分享的关于通过UI设计稿自动生成前端代码的演讲。 因为这纯粹是理解分享吉祥物设计，如有错误，还请指正。

做过前端工作的同学可能都知道，写页面没有太多技术含量，但是比较耗时。 本项目的目的是提高前端同学的研发效率，少写代码甚至不写代码。

于是京东开始探索如何利用设计稿直接自动生成代码方案（匹配多个终端）。 这里主要有两个阶段。

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

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

目前第一阶段的技术已经非常成熟，但第二阶段还不是很成熟。 生成代码后，工程师有时需要进行验证（小概率事件）。 但对于一些常用的组件，是可以实现自动生成的。 。 先说一下效果。 该项目已应用于京东App，前端任务工作量增加近一半。 原本需要4天工作的任务卡通形象，现在只需2天多就可以完成。

我原本以为这个项目需要很长时间，但演讲者李伟涛先生说，参与开发项目的只有7个人。 我不记得花了多长时间，比如一年？

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

具体是如何完成的？

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

有很多细节需要克服。 我没有做过，所以不能详细说。 不过我估计会为设计者的设计稿制定一系列的标准，以便更好的生成代码。

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

简单来说，就是需要利用布局还原算法来智能识别设计稿中的对象，如何正确地将它们排列成行和列，以及样式的合理计算。 最终的程序代码与设计稿相同。

再次，使代码语义化。

制定基本的语义规则：样式、上下文、组件等。此外，AI辅助文本分类、图像分类、翻译服务等。最后给出每个节点类名进行语义处理。

最后，生成代码。

这里的代码必须支持各种 DSL 和扩展。 否则没有多大意义。

此时的代码仍然是静态代码。 接下来，要向代码中添加逻辑，需要扩展工作台并添加手动可视化逻辑处理。 一些业务逻辑是在生成的UI界面上自动设置的。 当这个软件成熟后，就可以被其他业务人员使用。 整体结构如下：

我们可以展望未来。 如果有一家专门的公司为中小企业提供自动生成前端代码的能力，你的工作方式会发生怎样的改变？ 前端工程师职位还会存在吗？ 欢迎您留言与我交流。