任跃华-智能协同高效的 UI 生产体系探索和实践.pdf

1、演讲人：任跃华任跃华1 1快手快手 UI UI 生产现状和行业趋势生产现状和行业趋势2 2 从设计创意到代码实现全链路提效方案从设计创意到代码实现全链路提效方案3 3 支撑方案实现的技术要点支撑方案实现的技术要点4 4 阶段成果和未来展望阶段成果和未来展望问题归类问题归类解决思路解决思路提示词和图片生代码 无法满足企业设计规范和还原度要求优化算法 D2C 代码可读性(企业级企业级 D2C D2C 趋势趋势)保留企业设计规范和高还原度，增强算法 D2C 代码可读性方案愿景方案愿景的的 UI UI 生产体系生产体系通用通用智能智能高效高效协同协同结合结合 协同设计平台协同设计平台 和和AIAI，构

2、建，构建适配快手多业务场景结合 AI提效设计研发沟通目标愿景设计师插件设计师插件研发插件研发插件研研发发工工作作台台UI 设计沟通协同UI 编码资产设计师业务设计师组件开发人员业务开发人员设计资产规范设计提效工具组件出码主题生成图片优化源码定位拖拽换图设计师插件研发插件研发工作台组件建联还原度对比D2CB端C端前端RN客户端插件拓展场景使命愿景提升从设计创意到代码实现的效率和体验通用智能协同高效的 UI 生产体系可以只做可以只做 UI UI 编码环节提效吗编码环节提效吗？设计稿图层结构影响出码质量，设计师不关注图层结构，需要通过技术赋能影响设计师产出利于出码的设计稿建设研发工作台必要性建设研发

3、工作台必要性？除了转码，图片优化导出、还原度对比和代码写入 IDE 等功能在工作台交互体验更好核心核心能力能力三大三大协议协议设计稿命名设计稿命名标记协议标记协议组件建联组件建联协议协议D2CD2CSchemaSchema设计稿设计稿协议协议代码产物代码产物单个设计稿节点数量 17W+节点遍历耗时 5min 浏览器缓存浏览器缓存CDN CDN 缓存缓存协同设计平台协同设计平台OpenAPIOpenAPI虚拟节点树虚拟节点树Canvas Canvas 画布画布节点目录树节点目录树读取读取缓存缓存读取读取缓存缓存画布画布可视区域变化可视区域变化低清晰度低清晰度概览数据概览数据高清晰度高清晰度详情数

4、据详情数据按需渲染按需渲染独立独立 iframeiframe 渲染渲染清晰度拆分清晰度拆分-概览：根节点 1 倍图+框架数据-详情：根节点 4 倍图+完整数据按需导入按需导入-初次只导入概览数据-放大画布时按需获取详情数据按需渲染按需渲染-画布缩小渲染概览、放大渲染详情-只渲染可视区域数据分级缓存分级缓存-画布缩小渲染概览、放大渲染详情-只渲染可视区域数据概览概览详情详情绝对布局转绝对布局转 flex flex 布局布局循环列表识别循环列表识别冗余图层合并冗余图层合并多行文本合并多行文本合并无用节点删除无用节点删除样式精简样式精简图片图片HashHash去重去重节点层级优化节点层级优化D2C D2C SchemaSchema代码代码设计稿JSONgetComputedStyle()Plugin APIPlugin API样式解析伪元素处理字体图标处理默认状态文本变量状态插槽变量状态布尔变量状态枚举变量状态提供特定任务的上下文提供特定任务的上下文CoT CoT 的应用的应用学习优秀的提示词学习优秀的提示词语法和格式语法和格式协同从从 AI AI 辅助辅助 设计师设计师 和和 研发协同研发协同到到 AIAI、设计师、研发、设计师、研发 三方协同三方协同THANKS