Skip to main content

CodeFun 简介

CodeFun 是什么?

CodeFun 是一款 UI 设计稿智能生成源代码的工具,可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。它最大的特色是:

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

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

什么样的团队、业务适合使用 CodeFun ?

CodeFun 的使用并不局限于特定的团队规模和业务形态,只要研发团队有前端开发的需求,都是 CodeFun 的适用范围。从我们长期合作的客户来看,包括但不局限于以下这些客户画像:

  • 追求交付速度和项目量的软件服务商或者外包公司
  • 长期迭代、自研产品的中小型创业团队
  • 中大型企业内部,涉及到产品经理、设计师和前端工程师需要深度协作的研发部门

最佳实践

虽然 CodeFun 可以快速生成前端代码,但是它并不是一个完全取代前端工程师、端对端自动上线产品的低代码系统,根据我们的长期实践,总结了一些使用 CodeFun 的最佳实践场景:

  • 加速研发进度

可以将 CodeFun 作为代码查阅、拷贝的辅助插件,从而消除掉前端开发过程中手工调布局、扣像素这些体力活,让工程师聚焦在真正的业务逻辑上

  • 促进产品需求评审、销售打单过程

一个中型团队内部或者软件服务商在跟客户沟通的早期,一般只能通过分享设计稿的形式向领导、客户去展示产品设计理念和需求,通过 CodeFun 可以在一天以内交付出一个完整的静态小程序,让领导、客户真实的体验到产品需求,从而降低需求返工的频次,加快和客户成交的速度。

研发流程

研发流程有什么变化?

原有研发流程:

设计师画 UI 稿 -> 分享给产品经理、客户、老板确认 -> 工程师查看标注 -> 编写代码 -> 结束

新的研发流程:

  1. 全新项目

设计师画 UI 稿 -> 设计师上传设计稿至 CodeFun -> 配置交互跳转 -> 工程师下载全站代码包 -> 快速部署应用 -> 分享给产品经理、客户、老板确认 -> 根据反馈二次调整 -> 结束

  1. 长期迭代项目

设计师画 UI 稿 -> 分享给产品经理、客户、老板确认 -> 设计师上传设计稿至 CodeFun -> 工程师拷贝代码到自己的项目中 -> 结束

使用成本

设计师是否需要遵循某些设计规范?

完全不需要

CodeFun 算法的识别过程并不依赖于设计稿中任何的手工标注、特殊编组或特定规范,所以设计师按照原有的流程和设计风格正常输出即可,零新增工作量、零学习成本。

生成的代码是否会很难维护?

约等于一个中级工程师的前端水准

  • 可阅读、可维护的代码
  • 基于盒子模型的响应式布局
  • 循环列表、九宫格等语义识别

学习成本高吗?

几乎没有学习成本,使用也极其简单,和原来使用蓝湖、摹客的流程几乎一致:设计师上传完稿件后,工程师打开界面,选择任意需要的 UI 区域拷贝走想要的代码即可,只是从原来看标注变成了直接拷贝代码。