图片转代码？原型图生成代码？这里转载摘录现有的一些工具总结。
设计稿转代码的原理是从结构化的矢量图中提取信息，转换成中间 DSL，然后再生成各平台的代码。
从设计稿转 DSL 的过程需要处理分组、做绝对布局到 flex 布局的转换，生成语义化的 className，支持组件的标注。
这个过程可以通过编辑器来实现人工干预，也可以通过 AI 来智能化处理。
下限是编辑器人工干预保证的，上限就要靠 AI 了。
然后我们看了一下各种 D2C 工具：
- 58 的 Picasso 没有支持编辑器，组件标注支持的也不好，但是支持生成绝对布局和 flex 布局的代码，还原度也还行，并且是开源的
- 京东的 Deco 支持了编辑器，通过 AI 做了很多自动化的处理，还支持了逻辑层的处理，但是目前公开的部分还比较简单，也没开源
- 淘宝的 imgcook 支持的设计稿类型比较多，还支持从图片来提取信息，也支持了编辑器，在里面实现了低代码的组件拖拽编辑，功能比较全面
- 专门做 D2C 工具的 CodeFun 做的比较通用，支持各种矢量设计稿（不支持图片），也支持生成很多种代码，编辑器功能也挺多，还原度不错，只不过是收费的，没开源
- 国外的 Locofy 只做 figma 转 react 系列技术栈，所以在 figma 插件里做了很多功能，比如组件标注、低代码编辑，之后在 web 预览代码，还可以一键部署
这些 D2C 工具其实都不够通用，要支持自己的一些需求估计还得自研，但是自研一个 D2C 的工具还是需要挺高的成本的，对于中大公司来说，如果业务场景比较合适，ROI 还行，还是值得长期去做的。
作者：zxg_神说要有光
链接：https://juejin.cn/post/7154300576925220871
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。