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

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

摘要

D2C 是指 Design to Code，设计稿转代码，输入是 sketch、figma、PSD 等设计稿，输出是 vue、react、小程序等各平台的前端代码。

对前端工程师来说，如果能直接把设计稿转成可用的代码，是非常有意义的，那这样一个工具是怎么实现的呢？

vue、react 等各平台的前端代码都可以通过一种树形数据结构来描述，比如 vdom。当然这里不是用 vdom，而是需要设计一种中间数据结构，叫做 DSL（领域特定语言），专门用于描述界面结构的一种语言。

也就是说我们要把从设计稿中提取出的信息转成中间的 DSL，然后再通过 DSL 打印成各种代码。