《达芬奇绘制的 AI 多端生码世界-喜橙.pdf》由会员分享,可在线阅读,更多相关《达芬奇绘制的 AI 多端生码世界-喜橙.pdf(32页珍藏版)》请在三个皮匠报告上搜索。
1、2026.03.21阿 巴巴 全球总部_访客中 中国杭州 HANGZHOU CHINA达芬奇绘制的 AI 多端码世界演讲嘉宾喜橙(段凯)前端技术专家国际化场景的效能挑战 多端 Android iOS Msite 多国别营销会场国家本地化达芬奇智能成平台D2C 模块成能X2C 成能Native/H5 代码转换能MultiAgent&知识库&AI 云原基座能产场景业务提效 D2C 模块码能1D2C 设计背景D2C 要成“可直接投产的质量代码”可覆盖全量业务需求:缩短设计到上线周期。完整实现:UI 还原、功能、数据实现完整。符合程规范:可维护、可迭代、可测试。D2C 设计思路四解法:从 Demo级
2、UI”到“产级代码 的升级 设计稿精准解析 不增加设计负担的情况下,通过技术段产出结构化视图 物料架构 向 AI 成,精度还原、体验致性、延续性 数据标准化 建前后端契约 Spec 驱动 隐式功能显性化、复杂功能精准描述 D2C 的三重瓶颈:度依赖设计稿质量 使AutoLayout布局、按照模块化来组织设计节点、图打标,避免冗余元素等 码与物料脱节 多次成代码不致,难以复 代码健壮性、性能、户体验法持续优化 数据与功能逻辑难成 数据流转与功能逻辑很难从静态设计中推断 业务领域模型复杂,数据字段和结构没有统规范 D2C 模块码实现设计稿解析共建组件库 设计/开发达成套组件共识,结合FIgma S
3、lot,可降低画图成本和码组件识别成本 设计稿动优化 原始稿存在“噪”,通过规则程+AI 处理,将设计稿规范化 视图解析算法 研视图解析算法,导出模块化视图产物 Flex布局/滚动区块/组件/图/交互热区 插件调优/质检 提供 Figma 插件,作为设计侧的调优和质检具D2C 模块码实现物料架构主图组件品牌标加购营销氛围价格原价销量评星组件容器商品状态管理商卡 Token加购 SDK数据 Hooks事件联动性能优化 SDKD2C 模块码实现物料架构UI 原组件UI 原组件组件 A状态管理Token交互数据组件通信性能优化UI 原组件UI 原组件统物料架构规范 UI 和逻辑分离,组件原化,逻辑层
4、能标准化 组件间可持任意组合嵌套 原组件定义 业务语义下单职责,业务需求变更最度 内聚低耦合,API 清晰简洁,搭配质量知识库 领域能抽象 领域能分类定义 常功能统封装为SDK、HOC 和 Hooks等形式状态管理Token交互数据组件通信性能优化组件 B组件间可进 任意组合嵌套业务模块容器视图驱动接契约 VO 与 DTO 分离,视图和功能驱动数据结构和字段的声明,作为前后端统契约 VO-DTO 显式映射 通过配置来做显式绑定,将前台实现和后端实现解耦 D2C 模块码实现数据标准化Spec 驱动 采 SDD 范式,将码拆解为标准化的多阶段作流,每个阶段有明确的输、输出和规范约束 智能任务规划&
5、执 通过全局规划做智能拆分 任务逐个执并搭配多步验证 质量保障闭环 产品流程设计持各阶段产物预览和预,搭配多维评测和动化修复,完成质量保障闭环D2C 模块码实现程交付D2C 模块码效果平均还原度:95%,UI 还原度 95%,功能还原度 92%,数据还原度 98%设计稿码结果设计稿码结果设计稿码结果 X2C 码能2X2C 设计背景电商场景下,张质量的需要满哪些特质?1.业务标可达:标群定位精准、场景适配、转化率 2.设计观感佳:符合品牌调性、视觉层次分明 3.操作体验好:加载速度快、响应迅捷、动线设计清晰 4.内容质量:推荐精准、符合本地偏好 5.运营策略灵活:千千个性化、定投X2C 设计思路
6、X2C:从”协同”向意图驱动的升级 多维知识融合,Spec 驱动标准化流程规划 Spec+知识图谱 质量可执规划 突破物料边界,数据驱动进化 D2C+数据闭环 成效果持续进化 多 Agent 协同,全链路动化 Multi-Agent+ReAct 迭代 规模化投产快速响应 传统模式的三重瓶颈 质量不稳定 协同 10+环节 效果波动 转化率难稳定 创新受限 依赖存量物料库 增量突发需求 难快速响应 效率低下 搭建 规模化投产 量消耗X2C 实现案X2C 实现案X2C 实现案X2C 实现案X2C 应效果效撑 AE 促会场