研发提效 2.0：设计稿转代码的探索与实践之路

1. 研发提效 2.0：设计稿转代码的探索与实践之路李伟涛京东资深前端开发工程师

2. 李伟涛 https://github.com/luckyadam 2013 年加入百度·贴吧 2015 年加入京东·凹凸实验室负责 Taro/Deco/Nerv 等工具及业务的研发管理

3. • Content Title 2 • Content Title 3 • Content Title 4 • Content Title 5 • Content Title 6

4. 1. 研发提效还能怎么做 2. 如何将设计稿转为静态代码 3. 为静态代码注入灵魂 4. 业务落地实践 5. 总结与展望

5. 1. 研发提效还能怎么做

6. 我们面临的问题个性化需求井喷研发效率提升瓶颈明显研发资产沉淀缓慢业务快速增⻓以及千人千面带来的挑战传统研发模式在提效上遇到瓶颈低代码平台需要大量组件以满足各种需求

7. 研发提效三阶段阶段二阶段一多端统一开发一份代码多端适配思想带来效率爆发式提升极致的工程化基于工程化思想为研发带来效率提升阶段三 ?

8. 研发提效三阶段阶段一阶段二阶段三更快地写代码一次性写出多平台代码少些甚至不写代码？组件化/复用/工程工具/研发流程 Taro/uni-app/kbone/Remax 基于工程化思维的传统提效方式

9. 研发提效三阶段基于组件模板的低代码模式 01. 组件物料增⻓缓慢 02. 无法及时满足个性需求

10. 探索设计稿自动生成代码的解决方案智能代码设计稿一键生成多端代码面向个性化研发场景的研发交付提效解决方案

11. 2. 如何将设计稿转为静态代码

12. 设计稿转代码方案探索生成设计稿代码

13. 设计稿转代码方案探索导出设计稿数据处理设计稿数据将数据转换为代码代码设计稿三大诉求还原度合理性可读性

14. 设计稿转代码方案探索设计稿精准还原代码结构合理类名语义化

15. 将设计稿数据处理成我们需要的格式

16. 设计稿数据处理设计稿获得结构描述数据 • 节点之间的结构特征 • 节点自身的 UI 特征 • 节点自身的逻辑特征 • 等等...

17. 设计稿数据处理 Step 1 图层解耦处理设计稿 Step 2 蒙层处理 Step 3 Step 4 Step 5 无用图层检测智能图层合并图片 CDN 化 Step 6 文字导出处理信息数据

18. 使用布局算法将设计稿数据还原为结构良好的代码

19. 布局还原算法布局算法设计稿信息数据如何成组 • 还原设计稿 • 布局结构 • 结构合理化 • 样式合理化如何正确成行成列代码结构样式合理计算

20. 布局还原算法设计稿数据节点预处理输入数据空间布局布局算法调用布局算法投影布局背景图布局输出结果特征布局坐标布局样式计算

21. 布局还原算法-节点预处理容器节点图片节点设计稿信息数据文本节点

22. 布局还原算法-空间位置成组相离相交包含根据『相交面积』大小判断位置关系相交（外切）包含（内切）

23. 布局还原算法-投影算法切割行列投影原理光线需要投影的节点投影结果

24. 布局还原算法-投影算法切割行列同层级元素投影使用 Cavas 绘制水平、垂直方向投影投影分割计算节点筛选根据颜色区块、透明区块进行分割基于四叉树算法进行节点区域内坐标碰撞检测

25. 布局还原算法-背景图算法推断图片背景能够「包含」子元素的图片节点

26. 布局还原算法-特征检测增强可用性成组关系不当行列划分不当

27. 布局还原算法-特征检测增强可用性列表检测 Tab 检测价格检测 Border 检测基于向量计算相似度规则匹配 Tag 标题检测

28. 布局还原算法-自动修复算法提升还原度开始布局算法布局规则纠错布局预渲染节点节点绝对定位节点坐标对比布局结束基于 puppeter 预渲染节点，判断布局是否正确局部错位

29. 让代码具备语义化

30. 代码语义化处理布局后的数据语义规则引擎基础语义规则样式上下文语义化引擎推理 AI 协助处理组件文字分类图片分类翻译服务节点类名语义化

31. 代码语义化处理 goods goods_img goods_tit interest price oriprice goods_btn

32. 生成代码

33. 支持各类 DSL 及拓展 Vue AST 经过布局、语义的数据通用数据 JS AST 自由拓展

34. 支持各类 DSL 及拓展

35. 设计稿处理设计稿布局算法处理语义化处理静态代码

36. 3. 为静态代码注入灵魂

37. 需要还原的部分需要还原的部分可复用的部分基础组件可以复用的部分 UI 控件 ICON HTML 业务组件可以复用的部分需要还原的部分商品店铺优惠券

38. 组件智能识别映射方案

39. 组件智能识别映射流程设计稿图片⻚面分割 UI 区块识别 DOM 树节点映射组件分类识别

40. 组件智能识别—⻚面分割将⻚面分割为高度适中的若干图片边缘检测轮廓提取

41. 组件智能识别—UI 区块识别识别出图片中包含的 UI 区块目标检测基于 Mask R-CNN

42. 组件智能识别—节点映射识别区块 DOM 节点将识别区块映射成 DOM 节点

43. 组件智能识别—组件分类制作分类样本使用 Mobilenet 模型模型训练模型调参模型上线

44. 提升组件识别准确率 01. 样本优化 02. 模型调参 03. 多层级识别方案

45. 组件识别映射落地

46. 通用的组件智能识别映射

47. 组件识别能力可以开放给多业务使用大促活动营销活动组件库 A 中后台组件库 B 组件识别映射能力 PC 频道平台类业务组件库 C

48. AI 能力开放平台

49. AI 能力开放平台

50. 设计稿处理设计稿布局算法处理语义化处理组件智能识别包含组件复用的静态代码

51. 4. 业务落地实践

52. 如何在真正业务中进行落地？

53. 落地实践三诉求无侵入高效率平台化

54. 一站式在线研发工作台项目管理项目设置可视化干预编辑器代码下载

55. 算法处理插件操作数据解析布局算法处理语义化处理组件智能识别工作台二次编辑样式调整节点调整属性调整组件替换生成代码

56. 能否生成业务逻辑？

57. 扩展工作台增加人工可视化逻辑处理工作台二次编辑样式调整节点调整属性调整组件替换组件化生命周期处理属性设置事件绑定循环体处理字段绑定智能提示组件多态埋点上报组件懒加载二次布局智能提示异步数据请求 NPM 包引用 Context 上下文

58. 扩展工作台增加人工可视化逻辑处理组件化

59. 扩展工作台增加人工可视化逻辑处理异步数据请求面板

60. 扩展工作台增加人工可视化逻辑处理带智能提示的字段绑定

61. 扩展工作台增加人工可视化逻辑处理循环体处理

62. 扩展工作台增加人工可视化逻辑处理全局处理函数

63. 将 Sketch 设计稿处理成所需数据可视化人工干预工作台基于智能算法处理设计稿数据 1 支持生成多 DSL 代码进行二次开发智能组件识别图层/画板 JSON 数据⻚面分割区块识别节点映射组件识别编辑器还原度对比预览模式代码预览底层能力插件处理边缘检测插件上传节点树轮廓提取图像分类 AST 处理目标检测多 DSL 支持设计规范检查 2 空间布局组件识别智能布局算法投影切割插件处理背景图算法组件替换一键替换组件入参二次识别特征布局默认支持 React/Vue 3 symbol 处理矢量图合并蒙层剪裁智能语义处理组件化节点遍历通用规则 AI 规则数据集管理图层打平事件绑定循环体处理 + 定制 DSL 无用图层处理样本制造机属性设置规则聚合底层能力样式提取生命周期处理同时支持生成 Taro 多端代码文本分类数据标注文本翻译模型训练 OpenC V 图片分类模型评估字段绑定智能提示组件多态埋点上报组件懒加载二次布局智能提示异步数据请求 NPM 包引用 Context 上下文模型部署测试集测试用例测试任务 UI 兼容性测试支持生成单模块代码还原结果测试支持定制化项⺫模板测试结果

64. 大促活动大规模投入使用 0 1 2 3 4 5 6 7 传统流程设计用时 … ⻚面开发用时逻辑开发用时交付/发布智能流程设计用时交付/发布智能代码、二次编辑平均单个模块节约 48% 左右研发时间

65. 5. 总结与展望

66. 近期规划 01. 智能化布局和语义处理升级基于 AI 算法让布局和语义处理更加符合研发习惯 02. 标准化一站式研发工作台剥离业务耦合的标准化研发工作台 03. 外部版本提供对外服务的智能代码开发平台

67. 我们的未来愿景成为基础产研设施拥有更优秀的算法、更全面的工程化能力实现端到端的生成向设计即交付迈进，打造高效生产链打造开放生态建设开放生态，减低接入门槛，赋能更多业务场景

68.

69.