前端智能化实践—P2C 从需求文档生成代码

2021-09-04 70浏览

  • 1. 桑世龙(狼叔) 阿里巴巴前端技术专家 李帅(卓风) 阿里巴巴前端技术专家 前端智能化实践—P2C 从需求文档生 成代码
  • 2.
  • 3. 目录(Contents) 1. P2C 简介 前端智能化大背景 为什么会有 P2C 2. P2C 标注 产品定位 产品设计 标注目标 3. P2C 出码 升级思路 升级实现 4. P2C 展望 产品大图 后续展望
  • 4. 1.1 前端智能化大背景
  • 5.
  • 6.
  • 7. 1.2 站在产研链路上做探索 需求即代码 需求即生产 协同在线化 需求端 跨界 需求 评审 设计 评审 在原有设计稿识别和理解的基础上,融入 PD 对设计稿上数据、功能、交互的描述,要不要细讲一下? 代码 生成 代码端
  • 8. 1.2 P2C = PRD 2 Code 不写PRD,在设计稿上标注 出码 标注 需求即代码 业务含义 C端频道解决方案 交付提速,KPI也提高 基于 设计稿 基于PRD的抽象 提高交付速度 提高PD业务KPI
  • 9. 1.2 以图搜图 能干啥? 相似性玩法
  • 10. 1.2 以图搜图 - 原理 总体采用 placeholder 方案,抽象出模块中的文字和图片,分别用不同的矩形框代替,进而生成模块的布局结构 最后提取 kaze 特征子,完成离线的特征计算,便于快速线上调用。
  • 11. 跑偏了 “ 如何生成页面呢? ” —— 核心还是需求如何快速交付:标注 + 出码 一生二 二生三 三生万物
  • 12. 目录(Contents) 1. P2C 简介 前端智能化大背景 为什么会有 P2C 2. P2C 标注 产品定位 产品设计 标注目标 3. P2C 出码 升级思路 升级实现 4. P2C 展望 产品大图 后续展望
  • 13. 2.1 PD 是一个聪明且有意思的人群 沟通太多 写文档很痛苦 经验断层
  • 14. 2.1 PD 擅长什么? 设计 PD
  • 15. 2.1 P2C 产品探索
  • 16. 2.1 P2C 产品定位
  • 17. 2.2 标注到底应该有啥? Sketch设计稿 PD业务 多态 展示 Canvas画布 逻辑点 无逻辑点推荐,100%采用标注式的自然语言描述?——不可行! 标注面板
  • 18. 2.2 标注 - 示例
  • 19. 2.2 PD 标注操作方式 Why自定义? 标注 + 出码
  • 20. 2.2 需求迭代过程 以图搜图还有啥妙用?
  • 21. 出码 P2C schema 需求即代码
  • 22.
  • 23.
  • 24. 2.2 产品实现路径
  • 25. 目录(Contents) 1. P2C 简介 前端智能化大背景 为什么会有 P2C 2. P2C 标注 产品定位 产品设计 标注目标 3. P2C 出码 升级思路 升级实现 4. P2C 展望 产品大图 后续展望
  • 26. 3.1 D2C 版逻辑点出码实现
  • 27.
  • 28. 3.1 逻辑点标注与数据的交互过程 D2C + P2C schema 可能的前端逻辑点 前端代码 可能的数据逻辑点 后端代码 和Imgcook的数据源绑定有何不同? 运营配置 数据
  • 29.
  • 30. 3.2 逻辑点识别实现方式 • UI + NL + KV 约束:多模信息输入,综合型语义理解,提升原 D2C、P2C 中字段、布局结构语义理解准确率 FE-IMG FE-TEXT
  • 31.
  • 32. 3.2 逻辑点出码升级示例 • NL2Code 算法 Demo
  • 33. • NL2Code IFTTT • …… Paper IUI 2021 Auto-Icon:AnAutomatedCodeGenerationToolforIconDesignsAssistingIn UIDevelopment
  • 34. 目录(Contents) 1. P2C 简介 前端智能化大背景 为什么会有 P2C 2. P2C 标注 产品定位 产品设计 标注目标 3. P2C 出码 升级思路 升级实现 4. P2C 展望 产品大图 后续展望
  • 35. C B … P2C D2C … Pipcook ——
  • 36.
  • 37. Thank! Q&A Pipcook Imgcook 2 imgcook Pipcook