AI在Sloth D2C中的探索实践：从设计到代码助力业务提效

从设计到代码，助力业务提效—AI在 Sloth D2C中的探索实践 毛亮亮｜腾讯音乐娱乐集团（TME) -高级前端开发工程师 毛亮亮 腾讯音乐娱乐集团（TME) ，高级前端开发工程师 2015年毕 业后 先后 在百 度、腾讯 音乐 工作，工作 近10年以来深耕前端领域，对于大型 Web/ 小程序应用 架构设计与 优化有 丰富的 经验。在团队技术 基建方面整 体负责 前端研 发智能 化相关 系统的开发 及规划，涉及 设计稿 转码（D2C）、AI生稿、AI编程 等领域。 目 录 CONTENTS 01 02 03 04 Sloth D2C介绍 D2C关键链路解析 A2D关键链路解析 总结及展望 PART1 Sloth D2C介绍 Sloth D2C介绍 •行业对设计稿转码（D2C）领域的持续探索 •Sloth的研发历程 业务价值 设计稿转码 （D2C） ➢TO C领域 高质量还原设计稿，提升前端交付效率及质量，让研发专注业务逻辑开发。 设计稿查看标注 手写代码UI走查 修复代码 UI高还原代码 ➢TO B领域 辅助生成产品原型及设计初稿，缩短业务上线周期，快速验证新功能。 prompt(图文) 生成代码 设计稿 二次调整 生成代码交付前端 AI生稿 （A2D） 设计稿转码 （D2C） PART2 D2C关键链路解析 D2C/整体实现 figma插件 1 设计清洗稿 将设计稿原始数据转成标准DSL（UI还原度） 不可见节点 过滤冗余节点 被遮挡节点 透明节点 干扰节点 平台处理 在线调整 低码托管 图标节点 节点转换 图片节点 文本节点 容器节点 属性映射 预设父节点 图标合并 图片字体处理 资源压缩 字体裁剪 图片托管 2 布局计算 分析节点空间关系、成组关系，还原真实布局信息（结构还原度） 坐标重置 分析布局关系 计算父子关系 计算行列关系 抽离独立节点 分析成组关系 相似合