从低保真原型中生成前端代码

今天聊下《 技术 Mix 设计 》的话题。技术与设计两者的边界，越来越模糊，从用机器视觉判断平面设计作品的视觉焦点，到用深度学习指导用户体验设计，还有用深度学习实现设计思维中的类比，设计不断地经由算法的改造，升级，算法驱动型的设计让我们看到设计超乎想象力的无限可能……

Airbnb 是一家对技术和设计非常有追求的公司，不管是此前对打通 react 与 sketch 的设计工具（从react-sketch.app说起），还是近期研究机器学习在设计工具上的应用 Generating code from low fidelity wireframes（ 2017-10 ），都融合（ Mix ）了技术与设计，模糊了两者的边界，提高两者的生成效率。

Airbnb 设计师是这么思考的，他们觉得从需求，设计，开发，交付这一过程中的信息流失，是因为这几个过程的标准跟文档都不一致，涉及每个独立工种的解读，导致从最初的需求至最后的产品交付所产生的各种不符合预期的成果。于是提出需要有一款非常顺畅，统一标准，自动生成各个阶段的文档的系统。

他们认为设计的开始，是草图。草图是设计最直观的表达方法。

同时，Airbnb 的设计系统是有规则、有规律的，系统中的每个组件都有独立的名称。于是 Airbnb 的设计师们做了一个假设，如果机器学习算法能够精确地分类复杂的数千个手写符号（如手写汉字），那么我们应该能够对我们系统中的150个组件进行分类，用机器来识别他们。

思路是这样的，Airbnb 使用大约十几个手绘组件作为训练数据，利用开源机器学习算法以及少量自研代码来将他们设计系统中的组件渲染到浏览器中，从而构建了一个产品原型，使用手绘的原型图自动生成前端代码。

——核心是深度学习中的图像分类

实际效果，这个系统显示出巨大的潜力。他们已经尝试过使用相同的技术从草图图纸中构建原型，然后将原型转换为开发所使用的组件类别，同时把组件的代码翻译成设计文件，供设计人员进行迭代。

——草图与代码之间互相转化

随着设计系统的不断迭代，界面变得更加标准化，设计师将专注于回归设计最优雅的手绘方式，创作最佳的设计作品，其他高保真、工程的实现，都交由人工智能自动生成，Airbnb 的设计师们相信人工智能辅助设计和开发将被推广到下一代设计工具中。

另外一个例子就是，从 UI 图自动生成前端代码的 pix2code :

Generating Code from a Graphical User Interface Screenshot

这边我就不详细的介绍啦，相信各位读者从前几个月的各大内容平台都看到过啦。核心是运用了 DSL , Domain Specific Language 。通过机器学习技术( 神经网络+图像分类 )，将图片“训练”成 DSL ，再将 DSL 转为代码。

——与《 人工智能「 建筑师 」之 由手绘生成3D模型 》中使用的基于参数的描述性语言：  Snippet Grammar   一脉相承。

给大家补充点知识。我们需要了解下元数据，指的是对数据信息的描述，比如 Latex 对排版的描述，Mac 中的 plist ，gradle 对 Android 项目的描述，web 应用经常使用的 json 文件，甚至通信领域中通过 ASN.1 对 LTE 报文的描述，都称作“元数据”。这种描述可以看作为一种抽象语法，即 Abstract Syntax 。如果这种抽象语法的描述只为特定领域设计，就被称作领域专属语言 ( DSL ,  Domain Specific Language )。

网上有一部分评论质疑说只是把 UI 转成代码，解决不了 UX 的问题，解决 UX 的问题可以类比成解决视频相关的问题，是由一帧帧的 UI 组成的。这个我持乐观态度。还有个问题，考虑到现在 UI 跟 UX 设计都习惯使用 sketch 了，sketch 的文件就是个 json ，所以直接把这个 json 对应代码，来完成设计稿自动生成代码这件事似乎会更简单。不过有个问题，不是所有设计师都会使用 sketch 来完成设计的，有些人就直接画草图～

临近春节，送大家一张海报：

by ARKie