设计工程化三部曲

1. 设计工程化三部曲杨昱帆（倏昱）徐文彬（闻冰）蚂蚁集团体验设计师 · Kitchen 开发者

2. CODE / DESIGN TO WIN 设计工程化三部曲_ 杨昱帆（倏昱）徐文彬（闻冰）蚂蚁集团体验设计师 · Kitchen 开发者

3. 杨昱帆「倏昱」徐文彬「闻冰」蚂蚁链体验设计师 · Kitchen 开发者蚂蚁链体验设计师 · Kitchen 开发者

4. 回顾：我们在 SEE Conf 2021 开始探索「设计工程化」隐形的设计体系 Invisible Design System 设计资产与前端资产打通代码转设计稿 C2D 设计稿转代码 D2C

5. SEE Conf 2022「设计工程化」三部曲设计工程化下的低漏损协同同源让设计中台走出孤岛分布式产研协同高速公路 C2D2C ODS DCM Code to Design to Code Original Design System Work ow Distributed Collaboration Model Key Flow Model

6. 设计工程化下的低漏损协同 C2D2C Code to Design to Code Key

7. 设计师前端工程师

8. 设计组件使用组件设计页面设计环节交付设计开发页面

9. 已成功！你所提交的信息已经审核通过，请及时跟进申请状况。如有问题，请联系审核人员或在线客服。设计组件使用组件设计页面交付设计开发页面

10. 已成功！你所提交的信息已经审核通过，请及时跟进申请状况。如有问题，请联系审核人员或在线客服。设计组件使用组件设计页面交付设计开发页面

11. 这个组件有没有设计规范？已成功！你所提交的信息已经审核通过，请及时跟进申请状况。如有问题，请联系审核人员或在线客服。我可以改成什么样？设计组件使用组件设计页面交付设计开发页面

12. 已成功！你所提交的信息已经审核通过，请及时跟进申请状况。如有问题，请联系审核人员或在线客服。设计组件使用组件设计页面交付设计开发页面

13. 已成功！你所提交的信息已经审核通过，请及时跟进申请状况。如有问题，请联系审核人员或在线客服。设计组件使用组件设计页面交付设计开发页面

14. 这个设计稿用了哪个前端组件？已成功！你所提交的信息已经审核通过，请及时跟进申请状况。如有问题，请联系审核人员或在线客服。可以直接用组件配置项配出来吗？设计组件使用组件设计页面交付设计开发页面

15. 设计侧开发侧 Sketch文件 NPM包信息漏损信息漏损 • 设计组件是否对应研发组件 • 组件模态配置和研发组件一致性 • 是否明确设计中的组件对应 • 组件原生配置项是否满足设计组件使用组件设计页面交付设计开发页面

16. 生产端设计师设计侧设计组件生产端工程师开发侧开发组件 Sketch文件 NPM包业务端设计师消费设计组件业务端工程师消费前端组件

17. 不「同源」，是混乱之始，漏损之根

18. Ant Design Switch 开关开 Radio 单选框关开 Form 表单用户名密码 : : 关 CheckBox 多选框未选中项未选中项未选失效项未选失效项选中失效项选中失效项未选悬停项未选悬停项选中项选中项下拉菜单请输入密码记住密码提交大号列表，Sketch58以上支持智能布局大号列表，Sketch58以上支持智能布局大号列表，Sketch58以上支持智能布局大号列表，Sketch58以上支持智能布局 Pagination 分⻚ 1 下拉菜单 1 下拉菜单 / 2 5 3 4 下拉菜单下拉菜单操作操作操作大号列表，Sketch58以上支持智能布局操作大号列表，Sketch58以上支持智能布局操作 2 6 3 7 4 10 5 6 7 8 9 DatePicker 日期选择框 2020年 9月 2020/09/24 - 2020/09/26 日一二三四五六 28 29 30 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 01 02 03 04 05 06 07 08 09 今天 5 1 DatePicker 日期选择框操作 5 下拉菜单 1 List 列表请输入用户名 Dropdown 下拉菜单 2020年 9月 2020年 10月日一二三四五六日一二三四五六 28 29 30 01 02 03 04 28 29 30 01 02 03 04 05 06 07 08 09 10 11 05 06 07 08 09 10 11 12 13 14 15 16 17 18 12 13 14 15 16 17 18 19 20 21 22 23 24 25 19 20 21 22 23 24 25 26 27 28 29 30 01 02 26 27 28 29 30 01 02 03 04 05 06 07 08 09 03 04 05 06 07 08 09

19. 关 CheckBox 多选框选中项 Dropdown 下拉菜单下拉菜单 Pagination 分⻚ 1 下拉菜单 1 下拉菜单 / 2 5 3 4 5 下拉菜单 1 5 6 7 10 未选悬停项下拉菜单选中项下拉菜单 1 2 3 4 5 6 「如果设计师也能用 Ant Des i g n 的前端组件就好了」 List 列表大号列表，Sketch58以上支持智能布局大号列表，Sketch58以上支持智能布局大号列表，Sketch58以上支持智能布局大号列表，Sketch58以上支持智能布局 DatePicker 日期选择框 2020年 9月操作操作操作操作大号列表，Sketch58以上支持智能布局操作大号列表，Sketch58以上支持智能布局操作 DatePicker 日期选择框 2020/09/24 - 2020/09/26 日一二三四五六 28 29 30 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 01 02 03 04 05 06 07 08 09 今天 2020年 9月日一二三四五六 28 29 30 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 01 02 03 04 05 06 07 08 09

20. 前端代码转设计稿 Code to Design

21. 前端代码转设计稿 Code to Design 前端代码 ❓ 设计稿

22. C2D 的「先行者」们

23. React Sketch.app

24. React Sketch.app “Painting with code” 「用写代码的方式做设计」

25. React Sketch.app 「用写代码的方式做设计」优点 🥳 真正实现了代码生成设计稿局限 😵 设计师普遍不会写代码 😵 前端需要为设计师定制组件库

26. html-sketchapp

27. html-sketchapp “Web to Sketch solution.” 「网页转 Sketch 通用方案」

28. html-sketchapp React Sketch.app 「网页转 Sketch 通用方案」优点 🥳 任何前端代码都能转为设计稿局限 😵 使用流程过于晦涩 😵 设计稿还原度只能达到80%~90% 😵 转换后的设计稿无法拿来二次使用

29. 理想与现实的「鸿沟」 😵 需要写代码 😵 命令行执行前端代码设计稿

30. 站在设计与工程的「十字路口」 🚏

31. 前端代码转设计稿 Code to Design antd组件 Kitchen 设计组件

32. 阶段性探索产物

33. 文本 Sketch 原生 Kitchen C2D

34. Kitchen C2D面板 antd组件设计组件

35. 前端组件 API API 类型 danger type 文本 1 2 3 这是最好的时代 4 ••• 30 字符串 10 / page children 布尔值 size shape ghost 枚举属性可视化配置器

36. 前端组件 API block loading ghost shape icon onClick danger children size … 文本 htmlType API 类型属性可视化配置器字符串布尔值切换器枚举自定义组件自定义设计这是最好的时代暂无绑定自定义组件创建编辑资源解绑 href 1 2 3 4 ••• 30 数组 10 / page target type 多个ReactNode 布局 0 函数 … 组件主按钮 0

37. 文本按钮 Button 分页器 Pagination 1 2 3 4 ••• 30 进度条 Progress 10 / page 输入框 Input 这是最好的时代单选框 Radio 未选中项

38. 输入框 Input 这是最好的时代单选框 Radio 未选中项多选框 Checkbox 选中项切换器 Switch 评分 Rate

39. 文本 1 2 3 这是最好的时代未选中项选中项 4 ••• 30 10 / page Ant Design 组件库 2022年中旬实现全覆盖

40. 前端组件 API danger type 设计 children size shape ghost

41. 设计稿转前端代码 Design to Code

42. 已成功！你所提交的信息已经审核通过，请及时跟进申请状况。如有问题，请联系审核人员或在线客服。

43. 已成功！你所提交的信息已经审核通过，请及时跟进申请状况。如有问题，请联系审核人员或在线客服。

44. 跟进申请状况。如有问题，请联系审核人员或在线客服。「设计样式」转代码「设计意图」转代码

45.

46.

47. C2D 前端组件转设计组件 D2C Code to Design 设计意图还原前端组件 Design to Code 不「同源」，是混乱之始，漏损之根 • 前端组件和设计组件同源，一一对应 • 设计师能轻松配置组件设计组件使用组件 • 直接看到设计稿中用了哪个组件 • 直接知道组件样式对应的配置项怎么写设计页面交付设计开发页面

48. Kitchen C2D 组件面板 D2C 设计意图转前端代码已成功！你所提交的信息已经审核通过，请及时跟进申请状况。如有问题，请联系审核人员或在线客服。在 Sketch 中使用 Kitchen 工具 C2D2C 标准组件研发流程 Code to Design to Code 资产配置通用模型 Ant Design 组件全覆盖

49. 设计工程化下的低漏损交付同源让设计中台走出孤岛分布式产研协同高速公路 C2D2C ODS DCM Code to Design to Code Original Design System Work ow Distributed Collaboration Model Key Flow Model

50. 同源让设计中台走出孤岛 ODS Original Design System Work ow Flow

51. 中台业务域 📦 主按钮定制业务设计系统主按钮

52. 主按钮定制一个「按钮」需要做几个组件状态？

53. 主按钮类型主按钮次按钮虚框按钮文字按钮文本按钮主要次要虚框链接文本危险主按钮危险按钮默认危险

54. 主按钮类型主按钮次按钮虚框按钮文字按钮文本按钮主要次要虚框链接文本危险主按钮危险按钮默认危险危险按钮危险按钮危险按钮危险按钮

55. 5 2 2 主按钮 3 3 2 2 2

56. 5 x 2 x 2 x 3 x 3 x 2 x 2 x 2 = 1440

57.

58. 设计系统 Big-Bang

59. 繁荣表象下的中台「孤岛」 🏝

60. 🏝 孤岛升级成本高昂中台 ❌ 业务域 v4.0 ❌ 业务组件无法回流定制后设计系统分叉 v3.0 📦 业务设计系统

61. 中台 📦 业务设计系统 📦 业务设计系统 v4.0 v3.0

62. 走出「孤岛」的最后一块 🧩

63. 🧩 Token

64. 设计时需要人肉关联样式也就改个主色有用历史的“孤儿” 看不懂 Token 的关联性提升效率 × 降低效率 √ 🧩 Token 设计师与开发的“假笑”链接 Sketch 中恐怖的 Text Style Token 规范的什么业务开发中很难运用设计系统生产者的自嗨改了这个 Token 怎么那边也变了定制一个设计系统要找几千行 Less 变量

65. Make Token Great Again

66. 通用性与规范 🧩 Token 》能被机器看懂的 Token 体系方便定制与维护》可视化配置，自动生成组件保证后续使用》自动化 Token 引用

67. 🧩 「可计算，可生长」 Token System *专利审核期暂时无法披露具体细节

68. Browser

69. Browser 中台 🧩 Token System 主题编辑器

70. C2D Design Browser LowCode + Token NPM Token Package ProCode LESS SCSS inJS

71. ✅ 方便定制与维护设计组件使用组件如何保证后续使用？设计页面交付设计开发页面

72. Browser Token 自动替换 border-radius: @shape-border-default 设计组件使用组件设计页面交付设计开发页面

73. Browser Token 智能提示 💡 Token Suggest: @shape-border-default 设计组件使用组件设计页面交付设计 16px 开发页面

74. Browser 同源让中台走出「孤岛」可视化主题编辑器在海兔 DSM 中管理维护资产 ODS 一次定制三端使用 Original Design System Workflow ! Token System Token 自动引用在 Kitchen 中使用 C2D 组件

75. 设计工程化下的低漏损交付同源让设计中台走出孤岛分布式产研协同高速公路 C2D2C ODS DCM Code to Design to Code Original Design System Work ow Distributed Collaboration Model Key Flow Model

76. 分布式产研协同高速公路 DCM Distributed Collaboration Model Model

77. Browser

78. Browser PD 设计语雀写 PRD Sketch 画设计稿研发开发并调试数据

79. PD 设计语雀写 PRD Sketch 画设计稿研发开发并调试数据

80. Browser PD 设计语雀写 PRD Sketch 画设计稿研发开发并调试数据

81. 上游一次小改动，下游瀑布轮动变更 PD 设计语雀写 PRD 👩💼 PD Sketch 画设计稿开发并调试数据 PD：需要改个字段名称设计语雀写 PRD 研发 Sketch 画设计稿研发开发并调试数据

82. 职能错配和重叠，带来大量重复劳动不同的角色，在不同的地方，对「同一份信息」重复做功 PD 文案字段页面样式数据绑定设计研发

83. ! 。。。 ! PD ! 设计研发我们有很好用的组件，你用Sketch直接改吧

84. ! 。。。 ! PD ! 。。。设计我们有很好用的 LowCode 工具，你们直接在上面搭就行研发

85. 在保留原有工作习惯的同时解决「重复做功」专业工作，交给专业工具 PD 文案字段页面样式数据绑定设计研发

86. PD 设计文案字段页面样式 ❓ ❓ 产品源代码研发数据绑定

87. PD 文案字段设计页面样式信息连接器产品源代码研发数据绑定

88. 多方角色连接器

89. Browser

90. PD Browser

91. Browser 设计

92. Browser 设计研发 Browser

93. 多方角色连接器 PD Browser 设计研发 Browser 在不改变用户习惯的基础上做到同源共流（Source of Truth）与无形连接。

94. 多平台灵活嵌入 Ant Design Studio DCM Distributed Collaboration Model 产研高速公路 !"# 多方角色连接器

95. 同源无形

96. 同源共流尚可百花齐放无形无印方能变化万千 @倏昱 @闻冰 @曼桃 @豆酱 @辟起 @南取

97. ✨ Kitchen 3 全新上线！ 🔗 kitchen.alipay.com

98. 谢谢观看