D2C是指DesigntoCode，将设计稿转化为代码。输入为sketch、figma、PSD等设计稿，输出为vue、react、applets等各种平台的前端代码。对于前端工程师来说，如果能够直接将设计稿转化为可用的代码，是非常有意义的。如何实现这样的工具？vue、react等各种平台的前端代码都可以用树状数据结构来描述，比如vdom。当然这里不用vdom，而是需要设计一个中间数据结构，叫做DSL（DomainSpecificLanguage），一种专门用来描述接口结构的语言。也就是说，我们需要把设计稿中提取出来的信息，转换成中间的DSL，再通过DSL打印成各种代码。那么如何从设计稿中提取信息呢？事实上，figma、sketch等设计稿都是vector，即由各种图形组成，其设计稿的存储也是json格式：下面是一个figma设计稿的存储结构：可以看到是一个节点Tree，通过children关联子节点，每个节点都有类型和位置信息。例如TEXT节点有absoluteBoundingBox位置信息x,y,width,height,以及fontSize,fontFamily等文字样式信息；例如，RECTANGLE节点有填充信息来指示背景，如果它是图像类型的填充，它将有图像的哈希值与图像关联。这些节点都可以对应DOM节点，样式也可以对应CSS。因此，将设计稿的树形存储结构转换成描述页面的DSL，然后打印到各个平台的代码中就可以了：是不是看起来挺简单的？这只是一种理想情况，实际上还有很多问题没有得到解决。比如布局，根据从设计稿中提取的信息，只能做成绝对布局。这样的代码不便于维护，我们需要将其转换为flex布局。比如结构，现在设计稿的结构直接转成DOM结构。事实上，设计稿的层次结构不一定合理，需要转换成适合网页的结构。有了绝对位置，可以用投影的方式转换成flex布局：比如左边的布局可以水平向右边投影，可以分为上组和下组两组。投影距离可以设置为margin-top，margin-bottom：每组垂直投影，可以计算出每个元素之间的距离，分别设置为margin-left和margin-right：则元素内部为同样投影，分别设置padding-left，padding-top等。这样可以将绝对定位布局转化为flex+margin+padding布局，代码可维护性会更高。然后是分组，可以手动完成。提取设计稿信息后，可以使用编辑功能自行调整分组：但这需要用户了解前端需要什么样的结构。还有一些要求。分组可以自动调整吗？羊毛布？这就需要AI算法的介入，这里就需要聚类算法。另外，生成的前端代码必须有一个className。className是否语义化也是可维护性的一个重要方面。这个问题也有两种解决方案，一种是人工标注，一种是AI算法生成。人工标注是指用户在设计稿中添加名称，例如：通过算法识别不同类型的元器件，添加语义名称。另一个问题是它只能转换为文本和图像等基本组件。很多时候我们都有组件库，比如antd。能不能直接根据元件库把设计稿转成代码？是的，其实这是一个对应关系的问题。如果我们能够将不同的节点识别为不同的组件，并从中提取不同的参数信息，那我们后面是不是可以生成相应的组件代码呢？这种元器件标注也有人工标注和AI自动标注两种方式：利用AI识别不同的元器件，然后自动标注，或者通过编辑器人工标注。这个编辑器可以以sketch插件或figma插件的形式在设计软件中创建，也可以建立在独立的网络平台上。这个编辑器可以完全连接到一个低代码编辑器，也就是说，你可以拖放一些组件进去，生成一个DSL，然后打印成代码。但是，从设计稿转换出来的DSL，并不都是由组件组成的，这与低代码DSL还是有区别的。这就是将设计稿转化为代码的原理。理想情况下，可以将设计稿的结构直接转换成DSL结构，生成flex布局和相应的组件信息，然后打印成代码。但很多时候，设计稿存在一些问题，需要人工编辑或AI自动处理调整分组、className、标签组件等，很难做到普适。我们直接从结构化存储中的矢量设计稿开始处理。如果我们从图片入手，需要先通过AI提取信息，然后再转化为DSL。这是使用AI的额外步骤。.D2C的原理很清楚，但是能智能到什么程度，上限还是要看AI算法。当然，下限可以作为编辑通过人工干预来保证。原理讲清楚了，我们再回顾一下现有的各种D2C产品：Picasso首先，我们看一下58的picasso，它提供了一个sketch设计稿转代码的sketch插件：直接将设计稿信息转为DSL，以及然后print已经编码好了，没有编辑器，所以使用起来比较简单，但是人工干预是不行的。看一下它的源码分包，也是将设计稿信息转成DSL，处理分组布局，再打印成代码的过程：支持使用绝对布局生成运营版代码，还可以生成使用flex布局的可维护布局。高性能代码。我试了一下，还原度还可以：设计稿是这样的：Picasso生成的flex布局的代码是这样的：结构和样式的还原度还可以。然后用Picasso生成操作版代码是这样的：所有元素平铺，布局使用绝对定位。这种代码缩减比较靠谱，但是代码基本不可维护，可以作为活动页面使用。一般来说，Picasso不使用AI算法，只是将草图设计稿数据转换为DSL，处理分组和布局转换，支持绝对定位和flex布局，然后打印成各种代码。没有支持编辑器，没有className处理，对组件注解的支持也不好。Deco再来看看京东的deco，它也支持草图设计稿到各平台代码的转换。不过它提供了网页版的workbench，可以选择画板，点击导出数据，然后浏览器会打开workbench：导出完成后，会提示在workbench中粘贴：然后就是转换后的设计稿信息将显示在工作台上DSL和生成页面的预览，您可以在生成代码之前修改DSL。还原度还不错，生成的代码是flex布局。当然，这只是它公开的部分。据说内部版本支持组件注解、数据注入、事件绑定等逻辑层的东西，可以直接生成包含布局和逻辑的可用代码。总的来说，德科比毕加索更完整。内部版本实现了一个编辑器，支持flex布局计算，组件标注，通过AI算法通过聚类实现自动分组，通过推理引擎生成语义类名。Edit编译器甚至支持逻辑层的处理，可以生成完整的前端代码。CodeFun码趣是国内一家专注于将设计稿转化为代码的初创公司。因为它是一个通用工具，所以它们支持更多的平台。提供Sketch、PSD、Figma等插件上传设计稿数据，支持生成代码。更多，包括vue、react、uni-app、taro、applets等，不过现在只是移动端，桌面端以后也会支持。可以在Figma中上传设计稿：然后在编辑器中打开：可以标记组件，切换flex布局和绝对布局，手动分组编辑样式，然后预览或下载代码。有许多地方可以进行人为干预。当然，他们也做了一些AI智能处理。整体来说，码趣支持的平台更多，支持的人工干预方式也更多。可以手动分组、标记组件、切换布局方式等，下限比较高。ImgcookImgcook是淘宝开源的设计稿转代码工具。它支持figma、sketch、psd，甚至图片。除了通过插件上传数据，还可以直接上传设计稿文件。通过插件上传数据，还可以做一些分组切标：然后在网页编辑器中打开，也可以直接导出代码：可以编辑样式、属性、绑定事件等，但是还原度不好说：总体看，imgcook支持多种设计稿类型，甚至支持从图片中提取信息。还提供了手动干预的编辑器功能，功能还是比较全面的。LocofyLocofy是一款国外设计稿转代码的工具。支持将figma设计稿转为react、reactnative、next.js、gatsby等代码。支持next.js和gastby，可以看成是国外的工具。它的编辑器是在figma插件而不是独立的web工作台中实现的：组件可以手动注释，然后可以设置属性。还有低代码编辑器的功能，可以直接拖拽组件进去：手动标注比较麻烦，locofy也支持AI自动标注组件。生成的代码也可以选择使用不同的技术：代码生成后，代码会在web平台上预览，可能是因为这在figma插件中不容易做到：代码可以稍后导出，或者用单击一下。总体来说，locofy在支持组件标注方面做得很好，也支持低代码编辑，而且都是在figma中完成的。这与其他工具有很大的不同。其他工具是在figma中上传设计稿数据，然后在web编辑器中进行处理，这样可以跨各种工具复用，而locofy可能只想支持figma，所以在figma中做了很多功能插入。知道了D2C的实现原理和现有的各种实现方式，我们是否可以实现一个符合自己需求的D2C工具呢？成本高吗？其实是挺高的，很难做到足够通用，但即使不需要特别通用，只支持某些业务场景，也大概需要一两个人来做全——一年的时间。这对小公司来说成本很高，而且投资回报率比较低。但对于中大型企业来说，可以在很多项目中使用，ROI会比较高，值得长期投入人力。这不是我个人的观点，在转转的一篇文章中提到：总结设计稿转换代码的原理就是从结构化矢量图中提取信息，转换成中间DSL，然后生成各个平台的代码。设计稿转DSL的过程需要处理分组，将绝对布局转为弹性布局，生成语义类名，支持组件注解。这个过程可以通过编辑器人工干预来实现，也可以通过AI智能处理。下限靠编辑人工干预保证，上限靠AI。然后我们看了一下各种D2C工具：Picasso58不支持编辑器，对组件标注的支持也不好，但是支持绝对布局和flex布局的代码生成，还原度还不错，而且是开源的JDDeco编辑器支持的，很多自动化处理是通过AI完成的，逻辑层的处理也支持，但是目前公共部分比较简单，没有开源的淘宝imgcook支持更多类型的设计稿，也支持从图片上传提取信息，还支持编辑器，实现低代码组件的拖拽式编辑。功能比较全面。专门做D2C工具的CodeFun，比较通用，支持各种矢量设计稿（不支持图片），也支持生成代码种类很多，编辑器功能很多，还原度不错，不过就是带电。国外不开源的locofy，只做figmatoreact系列技术栈，所以在figma插件里做了很多功能，比如组件标注，底层代码编辑，网页预览代码，一键部署。这些D2C工具其实还不够通用。为了支持您自己的某些需求，您可能必须开发自己的需求。但是，自研D2C工具的成本还是很高的。对于中大型企业来说，如果业务场景比较合适，ROI还不错的话，还是值得长期做的。
