2C 设计稿转代码是怎么实现的？自己做一个可行吗？

D2C 是指 Design to Code，设计稿转代码，输入是 sketch、figma、PSD 等设计稿，输出是 vue、react、小程序等各平台的前端代码。,对前端工程师来说，如果能直接把设计稿转成可用的代码，是非常有意义的，那这样一个工具是怎么实现的呢？,vue、react 等各平台的前端代码都可以通过一种树形数据结构来描述，比如 vdom。当然这里不是用 vdom，而是需要设计一种中间数据结构，叫做 DSL（领域特定语言），专门用于描述界面结构的一种语言。,也就是说我们要把从设计稿中提取出的信息转成中间的 DSL，然后再通过 DSL 打印成各种代码。,那怎么从设计稿提取信息呢？,其实 figma、sketch 等的设计稿都是矢量的，也就是由各种图形组合而成，它们设计稿的存储也是 json 格式的：,下面就是一个 figma 设计稿的存储结构：,,可以看到是一个节点的树，通过 children 关联子节点，每个节点有 type 和位置信息。,比如 TEXT 节点有 absoluteBoundingBox 的位置信息 x、y、width、height，有 fontSize、fontFamily 等文本样式信息：,,比如 RECTANGLE 节点有 fills 信息表示背景，如果是 image 类型的 fill 会有图片的 hash 来关联到图片。,,这些所有的节点都是可以对应到 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 算法生成。,手工标注就是使用者在设计稿中添加一个名字的标识，比如这样：,,,再就是通过算法来识别不同类型的组件，加上语义化的名字了。,还有一个问题就是现在只能转换成 text、image 这种基础组件，很多时候我们是有组件库的，比如可能会用 antd。,能不能直接把设计稿转换成基于组件库的代码呢？,可以的，其实这就是个对应关系的问题，如果我们能把不同的节点识别为不同的组件，从中提取不同的参数信息，之后不就可以生成对应的组件代码了么？,这种组件标注同样也有人工和 AI 自动标注两种方式：,,通过 AI 来识别出不同的组件，然后打上自动打上标记，或者通过编辑器来人工打标记。,,这个编辑器可以是通过 sketch 插件、figma 插件的形式在设计软件里做，也可以是一个独立的 web 平台来做。,这个编辑器完全可以对接低代码编辑器，也就是可以拖拽一些组件进来，再生成 DSL，然后打印成代码。,不过设计稿转成的 DSL 不是全部由组件构成，和低代码的 DSL 还是有区别的。,这就是设计稿转代码的实现原理了，理想情况下，直接把设计稿结构转成 DSL 的结构，生成 flex 布局和对应的组件信息，然后打印成代码就可以。,但很多情况下，设计稿多少存在一些问题，需要人工编辑或者 AI 自动处理的方式来调整分组、className、标注组件等，很难做的通用。,而且我们是直接从结构化存储的矢量设计稿开始处理的，如果是从图片开始，那需要通过 AI 的方式先把其中的信息提取出来，再转成 DSL，这样多了一步用到 AI 的地方。,D2C 的原理还是挺清晰的，但是能够做的多智能，上限取决于 AI 算法，当然，下限可以通过做一个编辑器来人工干预来保证。,原理理清了，我们再来过一遍现有的各种 D2C 的产品：,先看一下 58 的 picasso，他提供了一个 sketch 设计稿转代码的 sketch 插件：,,直接把设计稿信息转成 DSL，然后打印成代码了，没有做编辑器，所以用起来比较简单，,但是不能人工干预。,看下它的源码分包，也是设计稿信息转成 DSL，做分组和布局的处理，然后打印成代码的流程：,,它支持生成使用绝对布局的运营版代码，也可以生成使用 flex 布局的可维护性比较高的代码。,我试了一下，还原度还可以：,设计稿是这样：,,Picasso 生成的 flex 布局的代码是这样：,,结构和样式还原度还行。,再用 Picasso 生成运营版代码是这样：,,所有元素平铺，布局使用绝对定位。,这样的代码还原度更可靠一些，但是代码基本没啥可维护性，做做活动页还可以。,总体看下来，Picasso 没有使用 AI 算法，只是做了 sketch 设计稿数据到 DSL 的转换，处理了下分组和布局转换，同时支持绝对定位和 flex 布局，然后打印成各种代码。,没有支持编辑器、也没有做 className 的处理，对组件标注的支持也不好。,再来看下京东的 deco，它也是支持 sketch 设计稿转各平台代码。,不过它提供了一个 web 版的工作台，可以选中画板，点击导出数据，之后浏览器会打开工作台：,,导出完成后会提示你到工作台粘贴：,,然后会在工作台展示设计稿信息转换之后的 DSL 和生成的页面的预览，可以修改 DSL 之后再生成代码。,,还原度也还行，生成的是 flex 布局的代码。,当然这只是它公开的部分，内部版本据说支持了组件标注、数据注入、事件绑定等逻辑层的东西，可以直接产出包含了包含了布局和逻辑的可用代码。,,整体看下来，Deco 做的比 Picasso 更完善，内部版本实现了编辑器，支持 flex 布局计算，组件标注、通过 AI 算法实现了通过聚类来自动分组、通过推理引擎生成语义化的 className 等，编辑器甚至还支持了逻辑层的处理，可以生成完整的前端代码。,Code Fun 是国内专门做设计稿转代码的创业公司，因为是通用工具，所以它们支持的平台更多， 提供了 Sketch、PSD、Figma 等的插件来上传设计稿数据，支持生成的代码也包含的更多，包括 vue、react、uni-app、taro、小程序等，不过现在只是移动端，桌面端后续也会支持。,,可以在 Figma 里上传设计稿：,,然后在编辑器里打开：,,可以标注组件、可以切换 flex 布局和绝对布局，可以手动分组、编辑样式，之后预览或者下载代码。,可以人工干预的地方比较多，当然，他们也做了一些 AI 的智能处理。,整体看下来， code fun 支持的平台更多，支持的人工干预手段更多，可以手动编组、标记组件、切换布局方式等，下限比较高。,Imgcook 是淘宝开源的设计稿转代码的工具，支持 figma、sketch、psd，甚至还支持图片。,除了通过插件上传数据外，也可以直接上传设计稿文件。,,通过插件上传数据，还可以做一些分组和切图的标记：,,然后在 web 的编辑器里打开，也可以直接导出代码：,,可以编辑样式、属性、绑定事件等，但是这还原度一言难尽：,,总体来看，imgcook 支持的设计稿类型比较多，甚至支持从图片来提取信息，也提供了编辑器功能可以做一些人工干预，功能还是比较全面的。,Locofy 是国外的设计稿转代码的工具，支持 figma 设计稿转 react、react native、next.js、gatsby 等代代码。,,支持 next.js 和 gastby 这点就可以看出是国外的工具了。,它的编辑器是在 figma 插件里实现的，而不是独立的 web 工作台：,,可以手动标注组件，然后设置属性。,还有低代码编辑器的功能，可以直接拖拽组件进去：,,手工标注比较麻烦，locofy 也支持 AI 自动标注组件。生成的代码也可以选择使用不同的技术：,,生成代码之后会在 web 平台预览代码，可能是因为这个在 figma 插件里做不大好吧：,,之后可以导出代码，或者一键部署。,总体看下来，locofy 对组件标注的支持做的挺好的，也支持了低代码的方式编辑，并且都是在 figma 里做的，这是和其他工具的一个很大的区别，其他工具都是在 figma 里上传设计稿数据，然后在 web 的编辑器里处理，这样能跨各种工具复用，而 locofy 可能就只想支持 figma 吧，所以在 figma 插件里做了很多功能。,知道了 D2C 的实现原理和已有的各种实现，那我们自己实现一个符合自己需求的 D2C 工具可行吗？成本高么？,其实还是挺高的，做的足够通用很难，但就算不需要特别通用，只支持某些业务场景，也大约需要一到两个人一年的时间去全职搞这个。这对于小公司来说是很高的成本了，ROI 比较低。但是对中大规模的公司来说，能够用在很多项目上，ROI 会相对较高，就值得投入人力长期去做了。,这也不是我个人的观点，是转转的一篇文章里提到的：,,设计稿转代码的原理是从结构化的矢量图中提取信息，转换成中间 DSL，然后再生成各平台的代码。,从设计稿转 DSL 的过程需要处理分组、做绝对布局到 flex 布局的转换，生成语义化的 className，支持组件的标注。,这个过程可以通过编辑器来实现人工干预，也可以通过 AI 来智能化处理。,下限是编辑器人工干预保证的，上限就要靠 AI 了。,然后我们看了一下各种 D2C 工具：,58 的 Picasso 没有支持编辑器，组件标注支持的也不好，但是支持生成绝对布局和 flex 布局的代码，还原度也还行，并且是开源的,京东的 Deco 支持了编辑器，通过 AI 做了很多自动化的处理，还支持了逻辑层的处理，但是目前公开的部分还比较简单，也没开源,淘宝的 imgcook 支持的设计稿类型比较多，还支持从图片来提取信息，也支持了编辑器，在里面实现了低代码的组件拖拽编辑，功能比较全面,专门做 D2C 工具的 CodeFun 做的比较通用，支持各种矢量设计稿（不支持图片），也支持生成很多种代码，编辑器功能也挺多，还原度不错，只不过是收费的，没开源,国外的 Locofy 只做 figma 转 react 系列技术栈，所以在 figma 插件里做了很多功能，比如组件标注、低代码编辑，之后在 web 预览代码，还可以一键部署,这些 D2C 工具其实都不够通用，要支持自己的一些需求估计还得自研，但是自研一个 D2C 的工具还是需要挺高的成本的，对于中大公司来说，如果业务场景比较合适，ROI 还行，还是值得长期去做的。