未来能否实现设计稿自动生成全适配页面的技术突破？

本文共计7008个文字，预计阅读时间需要29分钟。

这篇文章主要记录了我在加入支付宝后，在设计稿生成代码这个方向上的尝试和团队中的实践。不涉及行业历史和辩论方向。以目前的状态和我的想法为主线，展开叙述。

这篇文章只打算描述我加入支付宝之后，在设计稿生成代码这个方向上自己做的尝试和看到的团队中的尝试。不谈行业历史，不争论方向。文章以现状的形成和我的想法演进为主脉络，文末会提到我所看到的新契机。所以读者如果对现状和推演没兴趣可以直接翻到后面《投石》一章。

立足

三年前刚开始做 Sketch 生成代码插件时，定位的就是原型工具，不是可用页面。我当时认为直接由设计稿生成可用代码是走不通的，原因有两个:

• 当时的前端自己都还处在争论用什么框架的时期，得先解决了这个问题设计工具才可能生成被大部分开发者接受的代码。
• 设计语言与编程语言差异比想象中的大。

关于第二点这里详细说明一下。设计稿中的图层通常表达的是离人眼前后顺序，前面的覆盖后面。而图层的分组也只是为了管理而已，没有逻辑上的聚合关系。如下图，背景的红色图层与形状图层是平级的，没有展示出包含关系。

并且在设计中常常会按类型而不是按逻辑归属把一些东西放在同一图层，这样设计师在修改的时候比较容易批量操作。而在前端的组件化中，组件几乎一定是按逻辑功能划分的。而组件的层级表达也是逻辑上的包含关系。这种关系只有一部分能和视觉上的从前到后匹配。以 React 为例，很多组件层级的表达就不是前后关系。

因此，想要实现视觉上到逻辑上的完美转化，只有两种可能，一是按逻辑的要求约束视觉上的图层、分组使用。二是靠机器学习之类的方式去智能识别(社区已有开源项目)。

第一种方式其实技术上可行，但是不人性。两个方面，一是给设计师造成了巨大的学习成本。