CodeFun是一款 UI 设计稿智能生成源代码的工具，可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。这是来自CodeFun官方定义，看到这里不少同学肯定会想到另外一款工具-蓝湖，如果CodeFun的作用仅仅类似于蓝湖/摹客等工具，那么也不值得我花费时间写一篇文章来推荐它，更不能将它定义为前端变革性工具。它最大的特色是：
- 精准还原设计稿，不再需要反复 UI 走查
- 可以生成如工程师手写一般的代码
在日常工作中，诸如像扣像素、调布局这些繁琐、枯燥的体力活都将得到极大的削减，原来 8 小时的工作量只需要 10 来分钟即可完成。
CodeFun的使用
开始使用 CodeFun 前，需要先准备好如下环境：
- CodeFun 账号
- 安装 Chrome 浏览器
- 安装设计软件 Sketch 或者 Photoshop/XD
- 安装 Sketch / Photoshop 插件，登陆 CodeFun 后即可下载
- 安装小程序开发者工具或者 vscode 等 IDE，用于预览 CodeFun 生成的代码
- 准备一份移动应用页面的设计稿
CodeFun 的使用流程只有 3 个步骤：
- 在 Sketch 插件中上传设计稿
- 在 CodeFun 工具中查看代码
- 将生成的代码拷贝到自己已有的工程中即可
链接: https://www.fly63.com/nav/3606
