由设计稿转化为前端代码的实现思路

从设计稿直接生成前端代码，省去中间流程，作到精度还原的同时并节约研发资源，已经有不少团队在研究和实践这样的思路。

笔者简单描述一下思路，以 sketch 为例，抛砖引玉。

先上图：

解释：

第一步：和设计师约定设计规范，好比如何排布图层，如何分组，如何命名等

第二步：编写 sketch 插件，将符合设计规范的设计稿转化为 “sketch code”（即 sketch 输出的一套 DSL）

图片内容来自 imgcook

第三步：制定映射关系，将 “sketch code” 映射为 “fe code schema”

图片内容来自 imgcook

第四步：将 “fe code schema” 转化为多平台特异的代码片断

图片内容来自 imgcook

第五步：将代码片断集成到项目工程中

Done.

相关工具

• Sketch2Code
• imgcook
• fusion design
• 鹿班
• Sketch 插件 Blade
• react-sketchapp
• pix2code
• PxCook

好文推荐

• www.cnblogs.com/sskyy/p/781…
• www.cnblogs.com/dhsz/p/8431…
• cloud.tencent.com/developer/n…