AI助力90.4%双11前端模块自动生成

简介：与大家分享，我们是如何看待人工智能在前端领域的未来发展方向，如何推进智能化能力在智能生成代码平台 imgcook 上的应用落地和迭代升级助力今年双 11 会场 90.4% 新模块的代码智能生成，编码效率提升 68% 的。

作者 | 淘系-苏川

2017 年，一篇论文 pix2code: Generating Code from a Graphical User Interface Screenshot 引起业界关注，论文讲述了使用深度学习技术实现从一张 UI 截图识别生成 UI 结构描述，然后将 UI 结构描述转成 HTML 代码。有人认为这种从 UI 截图直接生成代码的意义不大，AI 和 Sketch 软件本来就是用数据结构保存设计文件的结构描述，不需要通过机器学习来获取，而且生成的代码不确定性很大。也有一部分人对这个思路给予肯定，提出让深度学习模型学习 UI 界面特征，还可以做 UI 智能设计。

随后基于 pix2code 开发的 Screenshot2Code 项目进入 Github 排行榜第一名，该工具能够自动将 UI 截图转成 HTML 代码，该项目作者号称 3 年后人工智能会彻底改变前端开发，对此也有不少用户表示质疑，认为前端技术复杂框架各异，仅 HTML 代码无法满足需求。

2018 年，微软 AI Lab 开源了草图转代码工具 Sketch2Code ，一些人认为生成代码效果不理想不适用于生产环境，但也有人认为代码自动生成还处于初级阶段，未来发展值得想象。

2019 年，阿里巴巴对外开放智能生成代码平台 imgcook，可以通过识别设计稿（Sketch/PSD/图片）智能生成 React、Vue、Flutter、小程序等不同种类的代码，并在同年双 11 大促中自动生成了 79.34% 的前端代码，智能生成代码不再只是一个线下实验产品，而是真正产生了价值。

每当这些新的自动生成代码产品发布，网络上总会出现“人工智能会不会取代前端”“一大批前端程序员要失业了”这些讨论。

那人工智能到底会不会取代前端？人工智能在未来很长的一段时间内不会取代前端，但是会改变前端。一是会改变在前端智能化方向的前端领域探索者，他们除了可以成为 Nodejs 服务端工程师，还可以成为机器学习工程师，为前端智能化领域创造更多的价值和成果；二是会改变享受前端智能化成果的前端开发者，改变他们的研发方式，例如代码智能生成、代码智能推荐、代码智能纠错、UI 自动化测试等可以帮助他们完成大量简单重复的工作，可以把更多的时间放在更有价值的事情上。

本篇文章将给大家分享作为前端智能化领域的探索者，我们是如何看待人工智能在前端领域的未来发展方向，如何推进智能化能力在智能生成代码平台 imgcook 上的应用落地和迭代升级助力今年双 11 会场 90.4% 新模块的代码智能生成，编码效率提升 68% 的。

阶段性成果

imgcook 官网首页平均每月 PV 6519， 平均每月 UV 3059。相比于 2019 年， 2020 年月平均 PV 和 UV 均是 2019 年的 2.5 倍。

imgcook 用户共有 18305 个，其中社区用户占比 77%，阿里集团内用户占比 23%。imgcook 模块共有 56406 个，其中外部模块占比 68%，内部模块占比 32%。相比 2019 年之前总量，2020 年用户增长 2.7 倍，模块增长 2.1 倍。

社区覆盖公司至少 150 家，集团内部覆盖 BU 10 个以上，双 11 会场新增模块覆盖度 90.4%，无人工辅助情况下智能生成的代码被保留发布上线的占比 79.26%，编码效率（模块复杂度和研发耗时比值）提升 68%。

与 2019 年相比，用户感官提效提升 14%；和完全不使用 D2C 相比，固定人力单位时间模块需求吞吐量提升约 1.5 倍。与传统研发模式相比，使用 imgcook 研发链路编码效率可提升约 68%。

（Imgcook 研发效能数据概览）

技术产品体系升级

技术原理简介

我们先来了解下 imgcook 智能生成代码的原理， imgcook 能够自动生成代码主要是做了两件事: 从视觉稿中识别信息，然后将这些信息表达成代码。

本质是通过设计工具插件从设计稿中提取 JSON 描述信息，通过规则系统、计算机视觉和机器学习等智能还原技术对 JSON 进行处理和转换，最终得到一个符合代码结构和代码语义的 JSON，再用一个 DSL 转换器，转换为前端代码。DSL 转换器就是一个 JS 函数，输入是一个JSON，输出就是我们需要的代码。例如 React DSL 的输出就是符合 React 开发规范的 React 代码。

（D2C 智能生成代码使用动线）

其中核心部分在于 JSON to JSON 这部分。设计稿中只有图像、文本这些元信息，位置信息是绝对坐标，并且设计稿中的样式与 Web 页面中的样式表现存在差异，例如 sketch 中透明度 opacity 属性不会影响子节点，但在网页中 opacity 会影响子节点，而人工编写的代码具有各种布局类型、DOM 结构需要合理可维护、代码需要语义化、组件化、循环等信息。

如何能智能生成像人工编写这样的代码，这是智能还原这部分要解决的事情。我们把 D2C