CodeFun 简介
CodeFun 是什么?
CodeFun 是一款 UI 设计稿智能生成源代码的工具,可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。它最大的特色是:
- 精准还原设计稿,不再需要反复 UI 走查
- 可以生成如工程师手写一般的代码
在日常工作中,诸如像扣像素、调布局这些繁琐、枯燥的体力活都将得到极大的削减,原来 8 小时的工作量只需要 10 来分钟即可完成。
什么样的团队、业务适合使用 CodeFun ?
CodeFun 的使用并不局限于特定的团队规模和业务形态,只要研发团队有前端开发的需求,都是 CodeFun 的适用范围。从我们长期合作的客户来看,包括但不局限于以下这些客户画像:
- 追求交付速度和项目量的软件服务商或者外包公司
- 长期迭代、自研产品的中小型创业团队
- 中大型企业内部,涉及到产品经理、设计师和前端工程师需要深度协作的研发部门
最佳实践
虽然 CodeFun 可以快速生成前端代码,但是它并不是一个完全取代前端工程师、端对端自动上线产品的低代码系统,根据我们的长期实践,总结了一些使用 CodeFun 的最佳实践场景:
- 加速研发进度
可以将 CodeFun 作为代码查阅、拷贝的辅助插件,从而消除掉前端开发过程中手工调布局、扣像素这些体力活,让工程师聚焦在真正的业务逻辑上
- 促进产品需求评审、销售打单过程
一个中型团队内部或者软件服务商在跟客户沟通的早期,一般只能通过分享设计稿的形式向领导、客户去展示产品设计理念和需求,通过 CodeFun 可以在一天以内交付出一个完整的静态小程序,让领导、客户真实的体验到产品需求,从而降低需求返工的频次,加快和客户成交的速度。
研发流程
研发流程有什么变化?
原有研发流程:
设计师画 UI 稿 -> 分享给产品经理、客户、老板确认 -> 工程师查看标注 -> 编写代码 -> 结束
新的研发流程:
- 全新项目
设计师画 UI 稿 -> 设计师上传设计稿至 CodeFun -> 配置交互跳转 -> 工程师下载全站代码包 -> 快速部署应用 -> 分享给产品经理、客户、老板确认 -> 根据反馈二次调整 -> 结束
- 长期迭代项目
设计师画 UI 稿 -> 分享给产品经理、客户、老板确认 -> 设计师上传设计稿至 CodeFun -> 工程师拷贝代码到自己的项目中 -> 结束
使用成本
设计师是否需要遵循某些设计规范?
完全不需要。
CodeFun 算法的识别过程并不依赖于设计稿中任何的手工标注、特殊编组或特定规范,所以设计师按照原有的流程和设计风格正常输出即可,零新增工作量、零学习成本。
生成的代码是否会很难维护?
约等于一个中级工程师的前端水准
- 可阅读、可维护的代码
- 基于盒子模型的响应式布局
- 循环列表、九宫格等语义识别
学习成本高吗?
几乎没有学习成本,使用也极其简单,和原来使用蓝湖、摹客的流程几乎一致:设计师上传完稿件后,工程师打开界面,选择任意需要的 UI 区域拷贝走想要的代码即可,只是从原来看标注变成了直接拷贝代码。