解决方案:前端智能化实践— P2C 从需求文档生成代码 | D2 分享视频+文章

　　解决方案:前端智能化实践— P2C 从需求文档生成代码 | D2 分享视频+文章

　　大家好，我们是阿里巴巴淘系技术部的郎叔和卓锋。感谢D2组委会给我们机会在这里分享《前端智能实践——从需求文档生成P2C代码》。

　　狼叔（上图左），Node.js技术布道师，Node全栈公众号运营，曾就职于去哪儿、新浪、网秦，做过前端、后端、数据分析，是全栈技术从业者。出版《狼书（上）更神奇的Node.js》和《狼书（下）Node.js Web应用开发》。加入阿里的三年，主要在优酷PC/H5端实现Node.js从0到1的全栈，使用SSR优化重构网页，构建容灾、发布、灰度等。 SSR 应用程序。是集团内QPS最大的SSR应用。在支持业务的同时，他和群里的同学一起孵化了开源框架egg-react-ssr。2020年，我去了淘宝技术部，开始了前端智能化之旅。我目前负责P2C，是卓峰的合伙人。

　　加入阿里八年的卓锋（上图右），主要负责淘宝天猫、聚划算推广及日常营销业务产品落地，负责天猫、淘宝、聚划算等商家的产品搭建而淘智能UI系统建设和业务落地，相关产品和系统也陆续落地到集团。在过去的一年里，他投身于前端智能领域，致力于Service to Code体系的建设，推动服务端智能代码输出的落地。目前相关系统已有一定雏形，在团队业务范围内进行闭环测试。

　　今天的话题将从四个维度展开，详细介绍P2C产品概念的来龙去脉和我们解决问题的思路。欢迎上车。

　　因为今天的话题是去年甄延坤（甄子）在D2的前端智能实践分享的延续，所以在说我们的话题之前，先介绍一下阿里前端智能实践的整体布局。下面这张大图可以分三部分来理解：

　　说到D2C，我们先来回顾一下应用D2C能力的Imgcook产品目前的发展状况。从下图可以看出，Imgcook的开发数字相当可观，应用覆盖了2020年双十一会场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的产品设计理念做了以下三点约束：

　　以设计稿为准，无需过多介绍。应用D2C能力的Imgcook已经是一个很好的例子。那么如何设计“标记”和“代码输出”呢？下面依次介绍。

　　首先介绍一下P2C的标签。要想知道标签怎么设计，就必须提前知道PD是个什么样的人，他们是如何工作的。

　　从PD的日常工作调研中发现，PD是一个聪明有趣但不规范的工作组。他们没有很多具体的可以标准化的工作内容，通常会在产研环节上消耗大量的沟通。产品经验的传承也是错的，写的PRD文档没有具体的标准，五花八门，所以写的PRD的下游作用不是很好。写这样的PRD对于PD来说已经是一种负担和痛苦了。

　　PD非常擅长产品业务定义（比如，什么是“买贵了，必须付钱”，什么是“冰点价”）。这是除PD以外的其他角色所不具备的能力。例如，设计师在设计稿中能够表达的商业信息是非常有限的。

　　所以P2C标注的工作就是根据PD的痛点和角色特点来设计。我们希望通过以下四点帮助PD完成产品需求的定义。

　　所以，通过以上步骤对P2C产品进行了探索之后，我们对P2C产品的定位也更加清晰了。总结一下，如下图，P2C在D2C的基础上，要兼顾业务意义的定义和代码输出的绝对提升。这就是P2C的产品使命。

　　因此，整个P2C标签系统是如下结构设计。基于设计稿的Canvas画布为PD提供了基于逻辑点的标注操作面板，非常直观方便，辅助PD定义产品需求。

　　那么这里可能有人会问，为什么不给PD一个PRD文档编辑器来输入需求呢？

　　我们尝试过这样的解决方案，甚至尝试过不止一种解决方案，但过去的失败告诉我们，我们使用 100% 纯自然语言来描述需求。虽然对于PD是可行的，但是对于代码输出是不可行的，至少目前学术界的NL2Code 业界的问题还没有很好的攻克，所以这对P2C不好，纯自然语言描述不如像这种基于设计稿的标注一样直接简洁。所以，目前这套标签的产品设计，也是我们在经历了各种失败之后，非常适合PD并且可行的一条路径。

　　

" />

　　那么PD到底是怎么标注的呢？运作模式是什么？

　　下面两张图是在P2C中标注该产品能力的具体设计思路，供大家参考。

　　其背后是一套上下滚动钻取的交互设计理念。同时，如果PD在P2C推荐的标注点（逻辑点）列表中找不到自己需要的标注点，P2C也会为其提供自定义工单链接，方便定义需求。工单背后是通过人工和机器学习来定义和训练PD定义的需求，后面会介绍。

　　因此，从PD的角度来看，需求的完整迭代流程如下图所示（图中S2C赋能可以理解为P2C背后的智能编码能力，后面会提到），创建需求从创建到标注 从制作一个完整的PRD文档和可以预览上报的预览demo，到视觉稿的更新升级，如何用图搜图（即搜图） stock label information by image)以库存为基础进行迭代，完整展示了需求迭代的全过程。

　　第二张图是以真实的产品需求为例，完成整个产品迭代过程背后的一些具体技术过程，比如“布局识别”、“各种逻辑点的识别”等。

　　从上图我们基本可以看出获取逻辑点的方式有3种，如下图所示：

　　总的来说，有了这三部分信息，就可以确定全量的逻辑点，同时利用这些丰富的逻辑点来一步步指导标注，通过标注自动更新逻辑点，最后通过选择的逻辑点和标注信息生成代码。

　　说了这么多，可以看出逻辑点和标签之间是有关系的（上面说的逻辑点是用来拟合标签的），标签信息的粒度也直接决定了逻辑点被编码的可能性。效果，简单来说，粗略的标注，比如用自然语言来标注，对于逻辑点的输出并不理想（当然这部分的能力我们也在研究）；更细化的标签，比如KV形式，对于逻辑点的输出肯定是最好的，但是对于PD来说挑战太大了。要求PD做完形填空题时，工作方法死板、不灵活。PD不喜欢这种工作方式。

　　所以PD喜欢的理想标注状态是0标注（即在产品需求的迭代过程中，不对存货中已经标注的信息进行重复标注，甚至跨产品重复标注），这标签未来的发展方向是通过P2C智能化手段来实现这一目标；同时借助逻辑点与标签的映射关系，可以实现0标签化，即必须先实现库存逻辑点迭代的0研发（即在产品迭代过程中）其中，借助智能能力，可以对存量逻辑点进行细微修改，形成迭代所需的新逻辑点，甚至可以复用生成跨产品、跨技术的逻辑点），

　　因此，从0标注、0研发的角度来看，P2C产品从现在到未来的发展路径基本符合以下发展规律（如下图所示）：

　　说完上面“标签化”的产品设计流程，下面我们来关注一下“代码外”的产品设计流程。

　　在说代码之前，我们还需要关注一下在当前版本的D2C中使用逻辑点生成代码的实现过程。

　　如下图所示（图中的视频可以从文章顶部的实况视频中查看），我们借助视觉稿插件对视觉稿进行了一些额外的标注，然后导出到Imgcook workbench，然后开发者需要在Imgcook中编辑可视化草稿，将可视化草稿中的逻辑点信息输入到逻辑库中，逻辑点信息包括两部分：逻辑点的标识和表达，使得当设计稿导入到Imgcook工作台后，视觉稿中可能存在的逻辑点可以立即被识别出来。

　　以上过程就是D2C使用逻辑点实现代码输出的完整过程。可见，用户角色就是开发者，这是与P2C的本质区别。P2C是面向PD的，所以PD不可能进行逻辑点。预定义和应用。

　　但无论D2C还是P2C，在代码输出的实现环节设计上，都可以抽象为“逻辑意图的识别”和“逻辑意图的表达”两部分，即从识别到“逻辑意图”（逻辑点）），然后根据“逻辑意图”表示为真正的逻辑代码。

　　但是，与D2C相比，P2C需要升级的恰恰是“识别”和“表达”这两个过程：

　　以上就是在“code out”环节对原有D2C逻辑点的标识和表达进行升级的来龙去脉。

　　那么新版逻辑点是如何在上游注解和下游数据/代码之间进行交互的呢？

　　具体过程可以如下图所示。简单来说，就是借助上述标注信息，寻找可能的逻辑点。逻辑点背后分为前端逻辑点和后端数据逻辑点，有了PD信息标注的逻辑点约束，就可以真正的码字了。

　　

" />

　　所以，总结一下，从D2C到P2C，升级的主要内容就是下图中橙色到紫色和深紫色的部分：橙色部分是原来的D2C出站链接；紫色和深紫色是当前P2C代码输出链接，在深紫色部分可以看到服务端代码部署的功能节点，比如FaaS代码部署。这里顺便也提一下，P2C在服务器上的部署是冗余部署的，因为算法提供给PD的逻辑点推荐信息很大程度上是有近似解的，所以只采用多套方案进行冗余部署。预览效果以确定最终需要的效果。

　　识别的升级上面说了，下面简单介绍一下逻辑点识别的算法设计方案，让大家进一步了解这次升级的意义。

　　具体如下图所示，通过多模态信息的输入，可以进行综合的语义理解，提高语义识别的准确率。

　　例如，以右边的“￥4999”图片为例，当文字和文字周围的信息，以及文字的大小、颜色、长度、粗细等信息作为输入时算法模型，通过信息的嵌入，经过降维、尺度归一化等操作，得到部分语义特征的标签信息，最终确定“￥4999”的语义为“618促销商品活动价” .

　　上面提到了出码环节逻辑点升级的设计和实现过程，接下来我将介绍逻辑点在P2C产品领域的未来阶段规划，让大家进一步了解，原来的逻辑点 点的设计是为未来0研发打下基础的起点。

　　具体如下图所示：

　　理想是美好的，我给你举个现实的具体例子。以下是我们生产中的一些演示案例。分钟）；左边是逻辑点的中文输入，输出是逻辑点的代码，这也是我们正在攻关的研究课题——NL2Code。

　　然而，我们对NL2Code的学术研究还处于起步阶段，涉及数理逻辑、机器学习、软件工程、语言学、信息论等学科的大量知识。门槛很高，学术界在这方面的研究也很有限。在工程中使用的解决方案很少见。目前，我们正在与*敏*感*词*各大高校进行产学研深度合作，希望能在NL2Code领域产生一些根本性的进展，能够服务于工程化生产，为P2C带来更深层次的效率收益。

　　当然，我们的学术产出是通过学术论文阶段性的传递给大家，希望能带动整个前端行业的智能化。

　　最后说一下P2C的产品展望。

　　在谈前景之前，我们先来回顾一下今天所谈的内容。

　　今天我们先介绍一下P2C是怎么来的，然后介绍一下P2C中两个非常重要的产品环节的产品设计，一个是“标记”，一个是“逻辑点”。借助“标记”，我们采集

了一份完整的需求信息，借助“逻辑点”，我们可以找到需求编码的中间桥梁，借助“标记”和“数据采集

” logic points”，我们可以找到训练“需求意图-服务代码”模型的基础数据，借助这个模型我们走完了整个需求即代码交付过程。

　　同时我们也介绍了P2C是生长在D2C肩膀上的产物，所以D2C原有的产品能力并没有浪费，而是作为P2C的基础设施。当然，让前端应用P2C中的算法，也非常依赖底层Pipcook提供给前端的算法框架能力。所以P2C的建设也非常感谢D2C和Pipcook能力的布局和建设。

　　最后，展望P2C。P2C的能力在这一年正在业务中打磨。计划于明年4月提供更加PD友好的体验式交付平台，并计划于明年10月开放公测。

　　最后，大家有什么问题可以在下面的群里交流。同时也欢迎大家使用我们的产品，参与我们产品社区的建设。此外，我们持续保持对外招聘，欢迎小伙伴加入我们，共同打造未来的前端产品。

　　谢谢你们！谢谢D2！

　　更多内容请参考

　　阿里巴巴前端智能掘金社区：

　　第十五届D2前端技术论坛PPT合集出炉，立即获取

　　关注“阿里巴巴F2E”

　　回复“PPT”一键获取会议完整PPT

　　解决方案:关键词一键生成文章 关键词提取工具手机

　　发送语言

　　昨天说到JOJO，小山推荐了一个叫“*敏*感*词*人”的看*敏*感*词*的APP。JOJO的和声速度比较快，浦泽直树的*敏*感*词*比较全，喜欢的朋友可以下载。

　　人工智能已经进入我们的生活。同时，它还渗透到媒体行业，如变脸、变声、变背景。今天小山说的是人工智能文章，俗称AI伪原创工具。

　　它是新媒体行业（如互联网垂直领域搜索引擎优化、新媒体和文案）的软文生成工具。AI伪原创颠覆行业传统写作模式。它首先利用爬虫技术采集同行业数据，然后通过深度学习：自然语言处理（NLP）进行分析和语义分析，并利用指纹索引技术精准推荐用户需求。相关内容、智能伪原创和相似度检测分析，让软件编写和工具简单、高效、智能。伪原创，一个AI伪原创，采集

的文章结合原创测试，写一篇伪原创文章，写出从互联网到互联网的生态链。

　　如今，网络小说依托这一工具，繁衍到各种自媒体和小说网站。别奇怪，闲鱼上兜售的文章你应该看看去写和润色。你在哪个领域，比如情绪的作者？他有几千篇情感文章，他会随便拿出几段，一传假文章就卖给你。当然这里也有人写的很好，但是输出速度没法比。

　　下面小山分享几个网站，都是从网上复制粘贴的假文章工具网站。

　　1、极知AI-CRP人工智能内容改写平台

　　

" />

　　AI-CRP 是一种一键式文章改写工具，可让任何文章立即改写以生成独特的内容。这款 AI 改写工具通过数据学习自动更改内容。您只需输入您要处理的内容，点击“智能改写”，稍后您将获得新的改写内容。

　　2. 优采云

AI智能写作

　　优采云

猫中文语义开放平台提供简单、强大、可靠的中文自然语言分析云服务。猫猫团队致力于打造最好的中文语义分析技术。通过自主研发的中文分词、句法分析、语义联想和实体识别技术，结合积累的海量行业语料库，为企业和开发者提供简单、强大、可靠的中文语义分析云API。

　　3.勺子捏AI智能伪原创工具

　　" />

　　大作家写作利器：分析伪原创文章中的词义，利用人工智能找出可替换的词，用户可以选择合适的词进行替换，快速写出原创文章

　　伪原创工具：根据用户个性化写作目的，通过智能语义和大数据分析技术，快速自动生成文章，提高文章写作效率

　　自动摘要：根据用户的个性化写作目的，通过智能语义和大数据分析技术，帮助用户快速提取文章摘要

　　关键词提取：根据输入的文本内容，智能提供文本关键词提取等工作，大大提高文本处理效率

　　/wzwyc.jhtml

　　

" />

　　4.爱写SEO伪原创

　　在线伪原创工具是SEOER非常有用的工具。它是一个生成原创和伪原创文章的工具。借助伪原创工具，可以将网上复制的文章瞬间变成自己的原创文章。本平台专为谷歌、百度、搜狗、360等大型搜索引擎收录而设计，通过在线伪原创工具生成的文章将更好地被搜索引擎收录和收录。在线伪原创工具是网站编辑、站长、SEOER的必备工具，也是网站优化工具中不可多得的利器。

　　5.在最后说

　　看完这些网站，你是不是也想打造属于自己的智能AI伪原创生成工具呢？

　　测试页面：

　　开源地址：

　　搭建很简单，需要PHP7+，支持curl，然后下载源码上传到自己网站的根目录下。

　　如果喜欢小山的文章，请关注并转发。您的支持是我前进的动力。