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

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