前端智能化实践—P2C 从需求文档生成代码
2021-09-04 71浏览
- 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
