Design to Code，如何⽣成程序员真正为之“买单”的代码

1. Design to Code 如何生成程序员真正为之“买单”的代码？杨帆 CodeFun 创始人 & CEO

2.

3. About me 杨帆 CodeFun 创始人 & CEO 前腾讯 PC QQ 团队高级工程师、Win8QQ Team Leader，TGO 鲲鹏会成员技术狂热爱好者，九零年代开始接触互联网和编程，曾为 Palm 智能机开发过多款热⻔ App 2011 年曾在团队内部主导 PC QQ Web 化技术的探索（类 Electron 方案） 2017 年正式开始创业，希望通过 AI、编译器等相关技术，在跨平台、代码生成器、低代码等多种解决方案的融合下，打造下一代软件工程解决方案

4. 1 2 3 4 项目背景普适性 D2C 让用户为之买单的算法 D2C 的未来

5. 已上线可体验的 D2C 产品 Picasso

6. 目前 D2C 常⻅应用场景

7. CodeFun 项目介绍唯一初创团队 10 规模人 20 个月匍匐式前进

8. CodeFun 的愿景

9. 愿景美好现实残酷 2019年 2020年 2020年 9 6 9 月启动项目月开始内侧月挥泪下线

10. 用户为什么不“买单”？工程师不愿意用设计师不愿意学

11. 工程师不愿意用分组问题 CSS冗余组件化

12. 设计师不愿意学学习成本工作量扯皮

13. 1 2 3 4 项目背景普适性 D2C 让用户为之买单的算法 D2C 的未来

14. 为什么要普适？ • 希望 D2C 可以放之四海而皆准 • 任意的设计稿⻛格均可适配 • 全场景覆盖，而不是特定场景下的专项工具

15. “零规范”概念 • 无需遵循某种方式对设计稿元素进行编组和命名 • 不给设计师增加工作量 • 不需要任何的储备知识和学习成本 • 设计师可以按照自己习惯的⻛格、工具、技能来进行设计

16. “零规范”带来的困难与挑战

17. 技术路线的多次变迁与迭代 Sketch Plugin Flex 布局推算输出代码

18. 技术路线的多次变迁与迭代 Sketch Plugin 分组算法 Flex 布局推算输出代码

19. 技术路线的多次变迁与迭代 Sketch Plugin 分组算法 Flex 弹性预测输出代码

20. 技术路线的多次变迁与迭代 “瘦” Plugin “富”预处理输出代码分组算法 Flex 弹性预测

21. 技术路线的多次变迁与迭代 “瘦” Plugin 输出代码 “富”预处理智能分组预测 CSS 压缩 Flex 弹性预测

22. CodeFun 算法流程架构 Sketch Plugin 矢量图形解析编译器输出 DSL AI 智能推算 1. 2. 3. 4. 5. 6. 图像识别脏数据清理模式识别分组预测 Flex 推算 CSS 压缩多平台输出

23. 研发工作量分布 • 矢量图形解析（5%） • AI 智能推算（90%+ ）（大大小小共有上百个算法） • 多平台输出（1%）

24. 1 2 项目背景普适性 D2C 3 让用户为之买单的算法 4 D2C 的未来

25. 脏数据清理

26. 在“零规范”下倒逼出来的 N 种算法场景介绍 • 噪音元素自动清理

27. 在“零规范”下倒逼出来的 N 种算法场景介绍 • 背景色推算

28. 在“零规范”下倒逼出来的 N 种算法场景介绍不居中 • 像素误差自动消除左右白边不相等 ListItem 间距不相等

29. 模式识别

30. List 识别场景

31. Grid 识别场景

32. 等分模式

33. Flexbox 弹性预测

34. space-* 推算

35. ﬂex-grow 推算

36. 用户落地效果分享 500%+ 效率提升 80%+ 效率提升

37. 1 2 3 4 项目背景普适性 D2C 让用户为之买单的算法 D2C 的未来

38. CodeFun 的下一步工作展望 • 关键算法持续精进 • 更多 Plugin 的支持 • 组件化

39. D2C 各大厂牌是竞争还是协作？ • D2C 还是一个很早期的方向 • 小圈子的高端玩具 • 需要各大厂牌一起来推动工作方式的变革 • ⻜入百姓寻常家，成为前端工作方式的标配

40. Q & A https://code.fun

41.