达芬奇绘制的 AI 多端生码世界

1. 2026.03.21 阿巴巴全球总部_访客中中国杭州 HANGZHOU CHINA

2. 达芬奇绘制的 AI 多端码世界

3. 演讲嘉宾喜橙（段凯）前端技术专家

4. 国际化场景的效能挑战 Android iOS 多端 Msite 营销会场国家本地化多国别

5. D2C 模块达芬奇智能 Native/H5 代码转换能

6. 1 D2C 模块码能

7. D2C 设计背景 D2C 要成“可直接投产的质量代码” 可覆盖全量业务需求：缩短设计到上线周期。完整实现：UI 符合还原、功能、数据实现完整。程规范：可维护、可迭代、可测试。

8. D2C 的三重瓶颈：四度依赖设计稿质量使 AutoLayout布局、按照模块化来组织设计节点、图打标，避免冗余元素等设计稿精准解析不增加设计负担的情况下，通过技术法持续优化精度还原、体验产级代码" 的升级 Spec 驱动隐式功能显性化、复杂功能精准描述规范段产出结构化视图致性、延续性数据标准化建前后端契约数据与功能逻辑难成数据流转与功能逻辑很难从静态设计中推断业务领域模型复杂，数据字段和结构没有统解法：从 "Demo 级 UI” 到 “ 物料架构向 AI 成，码与物料脱节多次成代码不致，难以复代码健壮性、性能、户体验 D2C 设计思路

9. 共建组件库设计 / 开发达成套组件共识，结合FIgma Slot，可降低画图成本和码组件识别成本设计稿动优化原始稿存在“噪 ”，通过规则范化程 + AI 处理，将设计稿规视图解析算法研视图解析算法，导出模块化视图产物 Flex布局/滚动区块/组件/图 /交互热区插件调优/质检提供 Figma 插件，作为设计侧的调优和质检 D2C 模块具

10. D2C 模块码实现—物料架构组件容器商品状态管理品牌标商卡 Token 主图组件加购营销氛围价格原价销量评星数据 Hooks 加购 SDK 事件联动性能优化 SDK

11. 统物料架构规范 UI 和逻辑分离，组件原化，逻辑层能组件间可持任意组合嵌套标准化领域能抽象领域能分类定义常功能统封装为SDK、HOC 和 Hooks等形式组件间可进组件 B 原组件定义业务语义下单职责，业务需求变更最度内聚低耦合，API 清晰简洁，搭配质量知识库 D2C 模块任意组合嵌套组件 A UI 原 UI 原组件组件 UI 原组件 UI 原组件状态管理状态管理 TokenToken 数据数据交互交互组件通信组件通信性能优化性能优化

12. D2C 模块码实现—数据标准化视图驱动接契约 VO 与 DTO 分离，视图和功能驱动数据结构和字段的声明，作为前后端统契约 VO-DTO 显式映射通过配置来做显式绑定，将前台实现和后端实现解耦

13. Spec 驱动采 SDD 范式，将码拆解为标准化的多阶段作流，每个阶段有明确的输、输出和规范约束智能任务规划&执通过全局规划做智能拆分任务逐个执并搭配多步验证持各阶段产物预览和预，搭动化修复，完成质量保障闭环质量保障闭环产品流程设计配多维评测和 D2C 模块码实现— 程交付

14. 平均还原度：95%，UI 还原度 95%，功能还原度 92%，数据还原度 98% 设计稿码结果 D2C 模块设计稿码结果设计稿码结果

15. 2 X2C 码能

16. X2C 设计背景电商场景下，张质量的需要满哪些特质？ 1. 业务标可达：标群定位精准、场景适配、转化率 2. 设计观感佳：符合品牌调性、视觉层次分明 3. 操作体验好：加载速度快、响应迅捷、动线设计清晰 4. 内容质量：推荐精准、符合本地偏好 5. 运营策略灵活：千千个性化、定投

17. 传统模式的三重瓶颈X2C：从” X2C 设计思路量消耗协同”向"意图驱动"的升级

18. X2C 实现案

19. X2C 实现案

20. X2C 实现案

21. X2C 实现案

22. X2C 应成 5000+

23. 3 Native -> H5 转码能

24. Native -> H5 转码设计背景多端迭代困境：移动端要维护 iOS、Android、Msite 三套代码通过确定性的 Native 代码转换，完成 Msite 端内（iOS、Android） Msite 成

25. 转码任务的三重瓶颈转码：从“ 发散失控，转换质量不稳定 AI 对业务逻辑理解不准确、多端差异处理不当代码格不致上下缺失，难以精准定位改动 Native 代码量庞，超出 AI 上下功能定位不精准码”向“规范映射”的升级 Spec 驱动采 SDD 范式，将转码任务拆解为标准化的多阶段作流，每个阶段有明确的输、输出和规范约束，避免 AI 码发散。窗由基于代码 Di 做功能点映射基于 Native 代码 Commit Di 中检索知识碎化，缺失知识撑传统开发模式档更新滞后，转码缺失知识库 Native -> H5 转码设计思路撑 → 功能点映射，避免在下构建多维知识体系离线成Code wiki、架构图、功能点注释等产物，构建多维知识体系，提供转码需要的专业知识

26. Native -> H5 转码实现案

27. Native -> H5 转码实现案

28. Native -> H5 转码效果需求1 转码成代码占需求2 ：99% 转码成代码占需求3 ：95 % 转码成代码占：98%

29. 4 产品架构设计

30. Plan | Execute | Human in Loop D2C Agent 需求分析 Agent 设计稿解析 Agent 转码 Agent X2C Agent 数据处理 Agent 模块码 Agent 规划 Agent 成 Agent 代码解析 Agent 技术案 Agent 转码 Agent ReAct 模块评测 Agent LangGraph 智能评测 Agent Claude Agent SDK 转码评测 Agent Aone SandBox … 物料/ 知识库业务规则需求扩写数据规范设计规范物料规范规则架构知识库转码知识库底层原能代码框架代码依赖功能点多端差异性向量化知识图谱百炼

31. Agent 进化基于成结果、评测效果和反馈，建数据闭环，强化学习能，让 Agent 越越聪明未来展望赋能业务从研发效能提升到创造业务增量价值

32. THANKS & QA