背景
设计稿转代码，简称 D2C。简单来说，D2C 就是利用各种自动化技术，把 Sketch、PS、图片类的设计稿转为前端代码，减少前端工程师的工作量，提升开发效率，从而创造业务价值。
在 D2C 的链路上，设计稿输入的格式主要包括：
- Sketch、PS等矢量格式的设计稿。
- 图片格式设计稿。
设计稿所表达的前端页面的主要类型包括：
- C 端。
- 中后台。
本文探讨的主要是 AI 助力中后台场景下的 D2C。
中后台系统的特点
相对于 C 端而言，中后台系统的前端开发有如下特点：
- Antd、Fusion 等 UI 组件库的应用已经成为标配，很少会手撕 DIV + CSS。
- 除了编写界面外，还会有大量复杂的业务逻辑。
- 表单、表格、描述列表、图表等通用复杂组件的开发占据了绝大部分工作，约 60%-70%。
针对这样的特点，如果使用 sketch2react 这样的工具，直接从 sketch 设计稿中生成一大堆 DIV + CSS 代码，那么肯定是不合适的。那么如何做中后台页面类的 D2C 呢？Solution 就是 AI 组件识别。具体来说，就是利用深度学习技术，从图片设计稿中提取组件信息，生成可读的、可维护的、组件化的代码。
AI 能写什么代码？
从 0 生成通用复杂组件的 MV 两层代码
目前为止，我们的 AI 能力可以从设计稿图片上提取信息，生成通用复杂组件（比如，表单/表格/描述列表）的 MV 两层代码（按照 MVC 架构），也就是 Model 层和 View 层，Controller 层暂时无法生成，因为即便是真人也无法从图片中提取联动、提交等逻辑信息。但我们会在不久的将来通过 NL2Code 的链路补齐 Controller 层的代码，让 AI 可以真正地“看”和“听”，多模态生成代码。
快速检索复用已有代码
除了从 0 生成通用复杂组件代码外，我们还可以从上千上万份已有的代码中，快速检索复用用户需要的代码。比如：
- 从成千上万个图标库中，快速截图生成图标代码。
- 从几十个图表中，快速截图生成图表示例代码。
- 从成千上百个业务组件库中，快速截图生成业务组件示例代码。
AI 暂时只是帮手
我们期望 AI 可以成为独当一面的前端工程师，但是目前为止是不可行的。当前阶段下，AI 依然存在一些弊端：
- 只能识别学习过的组件，没有学习过就无法识别。
- 只能生成 View 层的代码和简单逻辑代码，对于一些无法用图片表达的联动逻辑、提交逻辑都没有办法。
所以，我们决定让 AI 在现有的工作流下，辅助前端工程师进行开发。这样即便有上述问题，程序员还可以进行修正和补充。
当前阿里在中后台领域开发的主要两条工作流是：
- Pro Code
- Low Code
那么 Pro Code 和 Low Code 具体是什么意思呢？简单来说：
- Pro Code 就是源码链路，因为源码链路可以写出 Pro（专业） 级别的程序，所以叫 Pro Code。
- Low Code 就是可视化搭建，因为可视化搭建不怎么需要写代码，所以叫 Low Code。
下面我们就演示一下 AI 组件识别在 Pro Code 和 Low Code 中的应用。
AI 助力中后台 D2C 示例
Pro Code 示例
先看 Pro Code，以阿里 CCO 前端团队的 MID GUI 工具为例，在设计稿中对表单区域进行截图，然后快捷键 CMD + V 粘贴到 AI 组件识别里，或者如果你有一张表单图片，也可以点击或者拖拽上传，就可以生成代码以及对应的 live demo 了，如图所示：
如果您对 AI 生成的代码满意，可以点击“下载使用”按钮，输入任意组件名后，就可以把代码下载到当前项目里，如图所示：
打开当前项目，就可以查看使用下载好的代码，代码生成在 aicode/(用户输入的组件名称) 目录下，包含：
- 一个 dsl.json 文件，里面是通用复杂组件的协议，可以发现我们不光生成了表单代码，甚至连字段都翻译好了，而且是小驼峰命名法。
- 一个 index.js 文件，里面调用了 dsl.json 的协议，最终导出为一个 React 组件。
你可以直接使用 AI 生成的代码，也可以修改 AI 生成的代码。如图所示：
如果识别效果不好，可以点击报错反馈按钮，我们会第一时间重新训练模型。2 小时后，模型就能学会您反馈的 bad case 了，深度学习模型会随着学到的知识越来越多，而变得越来越智能。
更多 Pro Code 示例效果
表格
描述列表
图表
图标
我们的 AI 能力也接入了 Antd 官网，欢迎大家直接在官网使用 AI 截图搜图标的能力。
Low Code 示例
除了应用在 Pro Code 中，为开发者提效外，还可以通过截图生成组件协议，加速可视化搭建。比如阿里 CCO 前端团队的 XForm 产品，本来是通过拖拽表单项进行表单搭建，现在可以通过 AI 组件识别服务，上传图片生成协议自动帮用户生成界面，后续如果不准确或不完整，还可以人工干预。
未来展望
逍遥子在 2019 年的云栖大会说过，大数据和算力是数字经济时代的石油和发动机。当前在前端行业，组件化已经初具规模，海量的组件可以作为大数据，同时，业界算力也在不断提升，人工智能技术有很大可能性会改变前端开发的格局，让我们拭目以待。
笔者团队招聘
上述技术只是中后台智能的冰山一角，笔者所在的阿里 CCO 前端团队还探索和实践了更多中后台智能相关领域，并和阿里前端委员会智能化小组的同学一起共建，我们欢迎感兴趣的同学加入，邮箱：tianke.lyq@alibaba-inc.com
