CodeFun是一款 UI 设计稿智能生成源代码的工具，可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。这是来自CodeFun官方定义，看到这里不少同学肯定会想到另外一款工具-蓝湖，如果CodeFun的作用仅仅类似于蓝湖/摹客等工具，那么也不值得我花费时间写一篇文章来推荐它，更不能将它定义为前端变革性工具。它最大的特色是：

• 精准还原设计稿，不再需要反复 UI 走查
• 可以生成如工程师手写一般的代码

在日常工作中，诸如像扣像素、调布局这些繁琐、枯燥的体力活都将得到极大的削减，原来 8 小时的工作量只需要 10 来分钟即可完成。

CodeFun的使用

开始使用 CodeFun 前，需要先准备好如下环境：

1. CodeFun 账号
2. 安装 Chrome 浏览器
3. 安装设计软件 Sketch 或者 Photoshop/XD
4. 安装 Sketch / Photoshop 插件，登陆 CodeFun 后即可下载
5. 安装小程序开发者工具或者 vscode 等 IDE，用于预览 CodeFun 生成的代码
6. 准备一份移动应用页面的设计稿

CodeFun 的使用流程只有 3 个步骤：

1. 在 Sketch 插件中上传设计稿
2. 在 CodeFun 工具中查看代码
3. 将生成的代码拷贝到自己已有的工程中即可

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/3606