将设计稿转代码是前端工程师日常不断重复的工作，这部分工作复杂度较低但工作占比较高，往往又比较枯燥繁琐，有时候开发迭代周期短，静态页面又多，常常让有些前端开发苦不堪言！
那么，有没有一款设计稿自动生成代码的工具，减少前端工程师的工作量，提升开发效率？
本文推荐一款前端代码自动生成的神器CodeFun，能够完美生成可读性很高的代码，目前支持微信小程序端、移动端H5和混合APP等。也就是说，通过这款工具，设计师再也不用还原走查了，测试再也不用适配样式了，前端开发再也不用切图写样式了，这不就是我们期待已久的神器吗？
简要介绍
1、CodeFun是什么
CodeFun 是一款UI 设计稿智能生成源代码的工具，我们可以上传 Sketch、PSD等形式的设计稿，通过智能化技术一键生成可维护的前端代码，包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码。
在对设计稿轻约束的前提下实现高度还原，释放前端生产力，助力前端与设计师高效协作，让前端工程师关注更具挑战性的事情。在日常工作中，诸如像扣像素、调布局这些繁琐、枯燥的体力活都将得到极大的削减，原来 8 小时的工作量只需要 10 来分钟即可完成。
2、生成的代码是否会很难维护？
可能有人会质疑它生成的代码可读性，实际上生成的代码约等于一个中级工程师的前端水准。CodeFun 基于盒子模型的响应式布局和循环列表、九宫格等语义识别技术，可以生成如工程师手写一般的代码，精准还原设计稿，大幅度帮助前端工程师从繁琐的页面切图中拯救出来！该工具还在不断迭代进化中，日臻完善！
3、学习成本高吗？
对于前端工程师来说，几乎没有学习成本。
对于用惯了蓝湖/摹客的前端工程师来说，CodeFun使用流程与前者几乎一致：设计师上传完稿件后，工程师打开界面，选择任意需要的 UI 区域拷贝走想要的代码即可，只是从原来看标注变成了直接拷贝代码。
对于设计师来说，完全不需要遵循某些设计规范。
CodeFun 算法的识别过程并不依赖于设计稿中任何的手工标注、特殊编组或特定规范，所以设计师按照原有的流程和设计风格正常输出即可，零新增工作量、零学习成本。
这部分主要给大家介绍如何在 1 分钟内将设计稿转换为小程序源代码，这部分内容将上传 Sketch 设计稿的流程作为范本介绍，PSD设计稿还处于内测阶段。
CodeFun 的使用流程只有 3 个步骤：
1、安装 Sketch 插件
在CodeFun官网注册好账号后，登陆CodeFun后在用户菜单中下载插件。
图片下载然后解压，双击图片进行安装。
在安装插件之前，请确保系统中已经装好 Sketch 。由于 Sketch 只支持 MacOs，所以插件端需要在 MacOs 中操作。使用的 Sketch 的版本建议在 60.0 以上，否则插件可能无法正常工作。
接着，打开 Sketch，插件菜单中出现 CodeFun 选项，安装完成。
2、上传设计稿
加载一份 Sketch 设计稿（下载示例设计稿），然后插件菜单中打开 CodeFun 插件界面
Sketch 菜单 > 插件 > CodeFun > 上传设计稿
在插件上登陆账号,通过插件创建一个项目,然后选择项目和上传页面。
选择项目，表示当前上传的页面将放置到指定的项目中，这里选择刚刚创建的 “前端智能化codefun” 项目；
选择上传的页面，可以选择单张或上传全部页面。
例子中有 3 个页面，我想选择中间页面作为示例，这里选择【已选中画板】。上传完成后，点击【查看项目】按钮。
回到 CodeFun 工具界面，看到刚才上传的页面。
图片
3、获取代码
用户在上传完设计稿后，有两种获取代码的方式：
区域提取代码
整站打包下载
整站打包下载的方式相对来说比较简单，这里主要介绍区域提取代码，这种方式也是我们比较推崇的，用户可以根据自己的需求，拷贝任意区域的代码到自己已有的工程项目中。
我们选择 CodeFun 设计稿，进入详情页，如图所示：
详情页总体分为左中右三部分
左边栏显示文档树，后文称 Dom Tree，该树结构跟 HTML 的树结构保持一致
中间是画布区域，可以用于选择元素对象
右边栏是被选节点的属性面板，用于展示样式属性、交互配置和组件配置
点击顶部工具栏右上角的查看代码按钮，打开代码面板
代码面板中默认展示 4 列，分别展示 HTML、CSS、JS 和全局样式的代码。
第一次打开时，会默认展示设置面板，如果不做任何修改，那么查看到的是小程序平台的原生代码。
依次点击复制按钮，很方便地将代码拷贝到系统的粘贴板中。
打开小程序开发工具，分别将这四部分代码粘贴到小程序相应的文件中，这样就可以整页提取代码，但有时候页面中会遇到类似“Tab 标签页”、“Swipe 轮播”等交互式组件时，自动生成的整页代码并不能支持交互，此时我们就需要区域提取代码功能,拷贝我们想要区域的代码到已有的工程项目中。
点击 Dom 树或者画布上的任意节点，可以观察到代码窗口的代码会发生变化，这正是 CodeFun 最重要的区域提供功能。
注意：当点击画布的空白区域时，Dom 树和画板都不再选中任何节点，此时代码窗口将显示整页代码。
目前CodeFun组件化功能尚在开发中，如果页面中遇到交互式组件，我们不妨先采用下区域提取代码方式。
事实上，CodeFun这款工具还有很多进阶功能，比如提供编组解组、区域切图等功能，限于文章篇幅，不再一一展开说明，想了解更多可以查看官方文档。
当我们聊 UI 设计稿智能生成代码的工具时，关心的不仅仅是 UI 的还原度，也关心生成的代码是否合理、可维护，如果生成的代码属于不可读不可维护的快餐代码，开发使用时还需要对生成的代码进一步修改和调整，那这样工具估计会被束之高阁！
然而我们这款CodeFun工具不仅可以高度还原各种UI页面，关键是生成代码易于维护，将日常工作中的繁琐且耗时的静态页面交给它来智能化生成代码，释放前端开发者生产力，把省下来的精力聚焦在真正的业务逻辑上！做前端，不搬砖！
