大家好，我们是来自阿里巴巴淘系技术部的狼叔、卓风。感谢 D2 组委会，让我们有机会在这里分享，关于《前端智能化实践—— P2C 从需求文档生成代码》。
狼叔（上图左），Node.js 技术布道者，Node 全栈公众号运营者，曾就职于去哪儿、新浪、网秦，做过前端、后端、数据分析，是一名全栈技术的实践者。已出版《狼书(卷1) 更了不起的 Node.js》《狼书(卷2) Node.js Web 应用开发》。入职阿里的三年时间，主要是在优酷 PC/H5 端从 0 到 1 的落地 Node.js 全栈，使用 SSR 对 Web 页面进行优化和重构，建设 SSR 应用的容灾、发布、灰度等能力，是集团内第一大 QPS 的 SSR 应用。在支撑好业务的同时，与组内同学一起孵化出开源框架 egg-react-ssr。2020 年到淘宝技术部，开启前端智能化的旅程，目前负责 P2C，和卓风是搭档。
卓风（上图右），入职阿里的八年时间，主要是在淘宝负责天猫、聚划算大促及日常营销业务产品的落地，曾负责面向天猫、淘宝、聚划算等商家的搭建产品建设和淘系智能 UI 体系建设和业务落地，相关产品和体系已陆续在向集团落地。近 1 年投身到前端智能化领域，致力于 Service to Code 体系建设，推动服务端智能出码的落地，目前相关体系具备一定雏形，在团队内业务范围进行闭环试验。
今天的主题我们会以 4 个维度进行展开，会详细介绍 P2C 这个产品概念的来龙去脉以及我们解决问题的思路，欢迎各位上车。
因为今天的话题是延续去年甄焱鲲（甄子）在 D2 的前端智能化实践的分享，所以在讲我们的话题之前，还是先介绍阿里前端智能化实践的整体布局情况是怎样的。如下这张大图，可以按三部分进行理解：
-
底层是以 Pipcook 为代表的“前端算法框架层”，其目的是通过它让前端工程师具备了踏入算法工程师门槛的可能，这点非常类似于 Node.js 对于前端工程师的作用，目前 Pipcook 已经发布到 v1.3 版本，开源社区也非常活跃，欢迎自取使用；
-
中层“研发能力层”是面向前端提升研发效率的产品工具，并且对这边提效的能力我们进行了抽象，分为 D2C（Design to Code）、P2C（PRD to Code）、S2C、和 C2C 等，今天我们要重点讲的就是前两者；
-
而顶层是应用底层、中层前端智能化能力服务的上层业务产品，在过去三年里我们前端智能化的产品能力已经覆盖集团 17+ 个 BU（Business Unit） 70%+ 的前端，当然这个数字不算太新，新的数字在不断上升。
提到 D2C，我们先回顾下应用 D2C 能力的 Imgcook 产品今日的发展现状，从下图可以看到 Imgcook 的发展数字比较可观，且应用覆盖了 2020 年双 11 会场 90%+ 的模块开发，出码可用率达到 79.26%，且需求吞吐量提升 1.5~2 倍，给前端研发带来实质性的提效。
然而，提效并不等于完全替代前端人工开发，从 79% 的数字上我们看到还有 21% 的出码率没有达到，且 79% 这个数字在 2019 到 2020 年一直上浮不大，所以仿佛 D2C 走到了上升瓶颈阶段。
但经过我们的调研发现，事实并不是 D2C 的能力达到极限，而是从 Design 视觉稿中挖掘的出码信息达到了极限，剩余的 21% 的出码信息，我们发现要从产研链路的上游 产品经理（PD，Product Designer）的 PRD （Product Requirement Document）中才能拿到。
所以我们将输入向上游链路扩展到 PRD 这一环，而 PD 生产的 PRD 又兼顾到前端下游链路后端的出码；同时前后端的出码界限一直以来并没有那么清晰（很多前端的代码其实也可以放置在后端 BFF（Backend for Frontend） 层，比如初始数据的字段加工），所以我们将输出也扩展到下游链路后端这里。
因为我们将输入输出在产研链路上向上下游链路进行了扩展，所以理论上我们所做的工作也发生了本质的变化，由原来的 设计即代码（D2C）转变为 需求即代码（P2C）、需求即生产，将多种产研角色纳入到我们的产研工作台当中，形成多角色的在线协同，通过这次跨界，理论上会带来的出码率的进一步提升。
所以这就是 P2C（PRD to Code）的由来。我们期望借助 P2C 能进一步的提升产研的交付速度，期望能给 PD 提供端到端的产品交付能力，期望间接提升 PD 的业务 KPI 辅助业务增长。所以，可以看到相对 D2C，P2C 的目标用户发生了本质性的变化（由设计师、开发者转变成了 PD），基于这个点，我们对 P2C 的产品设计理念做了如下三方面的约束：
-
首先，要继续基于设计稿，这部分的出码率已达到 79%，这边的出码信息对 P2C 依然有用，所以这部分不能舍弃，同时，PD 基于设计稿来完成 PRD 会更佳方便直接。
-
其次，将 PD 原来书写 PRD 的工作转变成基于设计稿来标注业务信息的工作，一方面这样操作对 PD 来说更直接，另一方面这样的操作对 PD 的工作负担也相对较少。
-
最后，我们要确保 PD 的标注信息能够出码，要做到“需求即代码”，不能出码的输入信息，意味着不会进一步提升出码率，这就失去了 D2C → P2C 升级的意义。
基于设计稿已不用再过多介绍，应用 D2C 能力的 Imgcook 已经是一个很好的例子。那么“标注”和“出码”要具体怎么设计？接下来就会依次进行介绍。
首先介绍 P2C 的标注，想要知道标注怎样设计，必须预先知道 PD 是怎样一类人，他们的工作方式是怎样的。
下一篇讲继续讲述剩下的四个内容哦~~ 欢迎大家关注我们~ D2 大会原版视频欢迎戳下方链接~
D2 大会原版视频地址
---
