你有多久没和前端小哥哥小姐姐撕逼了呢？
作为UI设计师和我们对接最频繁的莫过于前端工程师了， 那你和前端“撕”的最多的是什么呢？站在设计师角度，我想无非是前端没法99%还原我们的设计稿，很多细节都看不到写不好！站在前端工程师角度便是对设计细节不敏感，很难按设计要求还原，什么分割线、阴影、颜色、间距、像素大概差不多就行。导致的结果就是前端天天被UI追着改界面，让我们前端很不爽、苦不堪言，从此UI和前端便成了一对欢喜冤家。。。那么，有没有一款设计稿自动生成代码的工具，可以减少前端工程师的工作量又可提升开发效率，同时还不必被设计追着改呢？别说还真有！！今天给各位小伙伴们推荐一款UI前端效率神器——CodeFun，上传UI设计稿就可一键转换为源代码，而且代码还原度极高，瞬间解放前端双手，UI无需设计走查，从此欢喜冤家双双把家还！
一、CodeFun是什么
CodeFun是一款致力于UI设计效果图智能生成代码神器，可以精准还原设计稿，不再需要反复 UI 走查，生成的代码如工程师手写一般的丝滑，无需进行二次修改，8 小时工作量，10 分钟就可完成，大大解放双手。
它是通过强大的 AI 算法可以识别页面中的循环列表、九宫格、等比例等多种业务模式，并输出为 v-for、grid、flex-grow 等多种仿人手风格的代码。对设计稿进行重新的计算，不依赖于设计稿中原有的分组关系和命名，所以UI设计师同学再也不用担心会增加工作量，节约大量时间来摸鱼
。
三步完成上传下载：
在 Sketch 插件中上传设计稿
在 CodeFun 工具中查看代码
将生成的代码拷贝到自己已有的工程中即可
1、安装 Sketch 插件
在CodeFun官网注册好账号，登陆CodeFun后在用户菜单中下载插件。
CodeFun官网：
https://ide.code.fun/u/1tE60yAu
接着，打开 Sketch，插件菜单中出现 CodeFun 选项，表示安装完成。
2、上传设计稿
打开一份 Sketch 设计稿，然后插件菜单中打开 CodeFun 插件界面，Sketch 菜单 > 插件 > CodeFun > 上传设计稿
