从需求生成代码?D2 最具争议的分享,你值得来瞄一眼

简介: 专访狼叔和卓风,聊聊他们这个最受争议也备受期待的话题背后的故事。

作者 | D2 前端技术论坛

狼叔和卓风即将在第十五届 D2 前端技术论坛上(12月19日)做《前端智能化实践:P2C 从需求文档生成代码》主题分享。这个 Topic 是 D2 多样化专场中最具有争议的,也是所有评委最想听的。据说在预审阶段,10 位评委中有 9 位给这个分享投了票。在试讲阶段,也得到了现场评委的认可,表示这个主题非常前沿,具有一定的前瞻性。

那么,为什么这个 Topic 具有如此大的吸引力呢?小编以为有以下几点。

  • 有 2 位嘉宾共同一起演讲,他们的分工是怎样的?
  • P2C (PRD to Code)是什么?这个事儿好像业界第一次听说,真的有用吗?
  • P2C 有什么可提前爆料的黑科技没?
  • P2C 和之前的 Imgcook 主张的 D2C(Design to Code)有啥差别?同一个团队,这 2 个概念之间是颠覆还是继承关系?
  • 狼叔之前一直活跃于 Node/Serverless 社区,现在转战智能化领域,是什么原因?有怎样的思考?

下面我们提前采访一下狼叔和卓风,先介绍一下这两位分享嘉宾。

image.png
(左:狼叔 右:卓风)

狼叔,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 体系建设,推动服务端智能出码的落地,目前相关体系具备一定雏形,在团队内业务范围进行闭环试验。

专访内容

Q1:双嘉宾的分工

有 2 位嘉宾共同演讲,你们的分工是怎样的?

2 个人一起演讲是因为在 P2C 过程中,需要由多个部分组成,而这些组成部分分别由狼叔和卓风负责,二人以交互式的演进方式,一是希望降低理解成本,二是 D2 大会也希望能有一些新的创新形式。二位嘉宾都是爱说爱笑的,应该会大家呈现一场不一样感受的分享,非常值得期待。

Q2:P2C 的定位:需求即代码

P2C 是什么?这个事儿好像业界第一次听说,真的有用吗?

在前端智能化的探索过程中,甄子提出了 P2C,即 PRD to Code。站在整个研发链路上,集合现有优势,做到需求即代码的这个最终目标。通过我们近一年的探索,证实这套方案在频道业务上是可以落地的。

  • 我们需要了解 PD 的痛点。
  • PD 的目标是什么?
  • PD 要做什么?是频道,页面,模块,会场,还是啥?
  • PD 要将做的东西投放到哪里,典型的业务场景有哪些?

OKR 的核心目标分解和关键结果。围绕目标进行拆解,并及时反馈,所以 OKR 才被认为是一种高效的协作方式。那么 PD 围绕的业务目标是什么?PD 出的需求方案是否有传承或复用?PD 是否能够更简单的工作,降低沟通成本,省出时间,做更多商业模式上的创新?
image.png
这是一张核心的 P2C 大图。P2C 的最终目标是需求即代码,其中 2 个拆解目标分别如下。

  • 1)让 PD 能够做 0 标注,找到标注过程中样本。
  • 2)让开发做到 0 投入,在 AI 和逻辑点提高出码准确率。

这 2 个核心目标论证是可行的,P2C 背后设计的技术体系也非常庞大的,从业务能力接入到研发能力到商业化、 Pipcook 基建等分层上,其复杂度也是可想而知的。
image.png
这里面还有很大的探索空间。未来针对于流量场,是否有定式?能否成为商业 OS,也是非常值得期待的。里面有D2C、S2C、P2C、C2C 等这些概念,先不细讲,留在分享中。

Q3:爆料“以图搜图”黑科技

P2C 有什么可提前爆料的黑科技没?

这里先放一个以图搜图,一个极小但非常实用的功能。从图片或设计稿出码,大家见得多了,那么能不能通过相似性来快速生成呢?

P2C 站在 PD 的视角,已经解决了很多问题。我举个例子,以图搜图是 P2C 的一个工具功能。大家只要有图就能搜索到对应模块。搜到模块,就能找到对应的开发者,对应业务来说是很方便的。
image.png
这还只是工具。假设你去截任意活动的一张页面图片,假定你的模块库里有相似模块,通过以图搜图可以直接生成具体页面,是不是很酷?PD 如果想仿制,贴一个竞品页面地址就搞定了,它可以让前端打开无数想象。放这个目的是为了让大家能够有点体感,即使是很小的一个功能也能解决很多问题。

但是,挖掘 PD 脑子中的业务逻辑,做需求即代码,需求即生成,这才是更高级的做法,具体 P2C 方案会在第十五届 D2 前端技术论坛(12月19日)上做分享《前端智能化实践:P2C 从需求文档生成代码》。

Q4:P2C vs D2C,为什么做 P2C ?

P2C 和之前的 Imgcook 主张的 D2C(Design to Code)有啥差别?同一个团队,这 2 个概念之间是颠覆还是继承关系?

Imgcook 是目前业内最好的利用 D2C(Design to Code,即设计稿出码)能力智能出码的工具,它使用计算机视觉、深度学习等智能化手段,可以一键根据设计稿进行代码生成。

2019 年 Imgcook 借助核心的 D2C(Design to Code,即设计稿出码) 能力,将模块智能出码水平提升到 79%,而分析发现未能智能出码的部分均是从视觉稿中获取不到代码信息的,比如多态逻辑、交互逻辑、数据服务逻辑,需要借助分析 PD(产品经理) 的原始 PRD(产品需求文档)才能获取到这部分代码信息,于是提出了 P2C(PRD to Code) 概念,希望通过 PRD、视觉稿(Design)结合的方式,来进一步提升出码水平。本次分享通过详细讲解 P2C 的整个探索和产研过程,希望为大家在前端智能化领域的开拓创新起到一个参考。

今年双十一会场承接了 90.4% 的新模块代码智能生成,代码可用率达到 79.26%(对比去年升级设计稿智能检查能力,视觉稿无需人工辅助调整)。得益于 D2C 的研发提效,今年并没有出现往年借调资源投入会场开发的情况。相比传统模块开发模式,使用设计稿生成代码技术后编码效率(模块复杂度和研发耗时比值)提升 68%,固定人力单位时间模块需求吞吐量增加约 1.5 倍。
image.png
最新文档请查收:

使用 Imgcook 开发天马模块:https://www.imgcook.com/docs?slug=tianmAImgcook.private

使用 Imgcook 开发天马组件:https://www.imgcook.com/docs?slug=tianma-component.private

使用 Imgcook 生成无障碍属性:https://www.imgcook.com/docs?slug=accessible.private

使用 Imgcook 支持自定义组件:https://www.imgcook.com/docs?slug=comp-to-code

更多请查看官方文档:https://www.imgcook.com/tutorial

从研发效率上看,Imgcook 已经做得非常好了。它是提效,不是无开发。这点是需要注意的。AI 是要用机器替代人工,否则 AI 是做得不够的。

本身 D2C 解决的是设计师和开发者之间的提效。能够让 AI 通过设计稿生成代码,这是减少了开发者的工作量。但有很多业务逻辑其实是在 PD 脑子里的,如果想让需求快速交付,就需要站到整个研发链路上看,从需求到生成代码,能否缩短交付时间,甚至是需求即代码?

image.png
从纯前端的角度讲,单一角色确实很难解决这个问题。我们可以看到前端智能化是 AI 和前端的融合,在全链路的思考里,是融合多个职能角色的。在做 D2C 的时候,甄子团队整合了 AI 和前端,在做智能 UI 的时候,甄子团队整合了算法,在做设计系统的时候,甄子招了设计,在做 AI 基建时,甄子招了知名大佬 Yorkie。目前整个团队横跨多个角色,是最适合做这种创新型探索项目的。

Q5:狼叔因何“出圈”?

狼叔之前一直活跃于 Node/Serverless 社区,现在转战前端智能化领域,是什么原因?有怎样的思考?能行么?

在今天,Node/Serverless 已经不能不放到一起谈了。Node.js 在十一年的稳定增长后,已经变成了主流选择。所有云计算厂商都爱 Node.js,也就导致在 Serverless 大潮中,Node.js 依然是宠儿。我们能看到的是语言慢慢的被基建取代,已不再有往日的重要地位,并且 Serverless 端渲染等新生物,解决实际问题,但这部分其实已经划归了基础架构组来做。它能够拿到成绩,未来几年也会持续落地和增长。

对狼叔而言,开源 ykfe/egg-react-ssr 和 ykfe/ssr,已经完成了 Serverless 端渲染相关的探索,他需要更多的探索空间,这时候选择前端智能化也是必然的。AI 目前能够解决的问题确实是有限的,广义问题确实不适合 AI 来接,但针对特定场景,具备特征和 Pattern 的是可以替代人工的。从目前的实践来看,确实也是做到了的。

到前端智能化团队,狼叔最大的挑战有 2 个,1)掌握 AI 能做什么,2)站在产研链路上去看待 P2C。这其实是很有挑战的,之前做的事儿无非是提效,搞来搞去还是前端的某一个领域,做深或做广。今天要跨角色去思考提效,这个事儿对格局要求明显是很高的,这其实才是最吸引狼叔的点。

狼叔表示,虽然一把年纪,但还是能够坚持学习,在一个多样化的团队里,跟不同职位的小伙伴们一起成长,一起创造、探索,是非常快乐的事儿。不确定一定能够颠覆什么,但折腾的过程一定是值得享受的,对每个人的成长都是极为有利的。预告一下,《狼书(卷3):Node.js 高级技术》预计年前可以出版,今年5 月份已交付,已经在走出版流程。

专访小结

关于前端智能化,狼叔曾说过:”面对未知我们太弱了,是思维方式的束缚,是事推事的磨砺,是无比强大的内心。能看出趋势很难,能找对方法很难,能带着一群人去疯狂更难。方向对了,还怕路远吗?“

最后,狼说和卓风说要致敬前端智能化的领路人,前端世界摸爬滚打 20 年,最早的腾讯 3-3,创过业当过CEO/CTO,到今天成为行业(前端智能化)领导者和开拓者。他就是了不起的甄焱鲲(花名:甄子)。

欢迎大家来观看第十五届D2前端技术论坛,来听狼叔和卓风的分享,一起来领略前端智能化的无限可能。
image.png


image.png
关注「Alibaba F2E」
把握阿里巴巴前端新动向

相关实践学习
【玩转ComfyUI】基于函数计算一键部署AI生图平台ComfyUI
本次实验将带大家通过使用阿里云产品函数计算FC,快速使用ComfyUI实现更高质量的图像生成。
从 0 入门函数计算
在函数计算的架构中,开发者只需要编写业务代码,并监控业务运行情况就可以了。这将开发者从繁重的运维工作中解放出来,将精力投入到更有意义的开发任务上。
相关文章
|
网络安全 网络虚拟化 数据安全/隐私保护
教程 - EasyConnect 的使用
下载和安装 自动安装组件失败,请手动 EasyConnectInstaller.exe EasyConnect下载链接 //后面的IP是服务端的IP地址,如果是域名直接在IP处填写域名 M5.0-M7.0版本: https://IP/com/install.exe M7.1之后版本: https://IP/com/EasyConnectInstaller.exe 登录异常,请下载 SSL VPN 诊断修复工具 进行修复 http://download.sangfor.com.cn/download/product/sslvpn/SangforHelperToolInstaller.exe 作
4167 0
|
人工智能 JSON 前端开发
有关D2C工具的思考和分享, 提升前端研发效率
有关D2C工具的思考和分享, 提升前端研发效率
1077 1
|
Android开发
【Android 返回堆栈管理】打印 Android 中当前运行的 Activity 任务栈信息 | Activity 任务栈信息分析 | Activity 在相同 Stack 中的不同 Task(一)
【Android 返回堆栈管理】打印 Android 中当前运行的 Activity 任务栈信息 | Activity 任务栈信息分析 | Activity 在相同 Stack 中的不同 Task(一)
1486 0
【Android 返回堆栈管理】打印 Android 中当前运行的 Activity 任务栈信息 | Activity 任务栈信息分析 | Activity 在相同 Stack 中的不同 Task(一)
|
4月前
|
缓存 监控 算法
吃透 JVM 内存管理与调优:从底层原理到生产级落地实战(JDK17 专属)
本文深入解析JDK17 JVM内存管理与调优。首先剖析JVM内存模型核心架构,包括线程私有区域(程序计数器、虚拟机栈、本地方法栈)和共享区域(堆、元空间等)。通过可复现代码示例演示栈溢出、堆OOM等异常场景,并介绍jstat、jstack等排查工具。详细讲解垃圾回收算法(标记-清除、复制、整理)及JDK17主流收集器(G1、ZGC等)的适用场景。重点阐述生产级调优全流程:从监控定位问题到参数优化,提供常见问题排查方案和参数配置最佳实践。
547 6
|
4月前
|
人工智能 Linux API
OpenClaw Skill开发实战从入门到精通:阿里云/本地部署与免费国产大模型适配实操指南
OpenClaw的Skill插件体系与多Agent协同架构,让AI工具的定制化变得轻量化、平民化,2026年版本对跨平台部署与国产大模型的深度适配,更是降低了个人开发者与中小团队的使用门槛。从简单的RSS抓取Skill开发,到全平台的OpenClaw部署,再到阿里云百炼免费大模型的适配,整个流程无需复杂的底层开发,只需遵循固定的规范与步骤,即可快速搭建专属的AI工具体系。未来,随着OpenClaw社区的不断发展,更多的优质Skill将被开发与共享,AI Agent的应用场景也将进一步延伸至办公、研发、运营等各个领域。
2125 4
|
8月前
|
运维 监控 供应链
Alibaba交易平台TMF2.0介绍
2017双11交易峰值达32.5万笔/秒,面对高并发与复杂业务需求,阿里推出TMF2.0框架,通过业务与平台分离、全链路可视化、配置化发布等创新,实现需求开发周期缩短至12天,支撑多业务快速试错与复用,构建可配置、可监控、可运维的电商技术新体系。
1022 5
Alibaba交易平台TMF2.0介绍
|
人工智能 自然语言处理 关系型数据库
如何构建和调优高可用性的Agent?浅谈阿里云服务领域Agent构建的方法论
本文深入探讨了Agent智能体的概念、技术挑战及实际落地方法,涵盖了从狭义到广义的Agent定义、构建过程中的四大挑战(效果不稳定、规划权衡、领域知识集成、响应速度),并提出了相应的解决方案。文章结合阿里云服务领域的实践经验,总结了Agent构建与调优的完整路径,为推动Agent在To B领域的应用提供了有价值的参考。
3996 22
如何构建和调优高可用性的Agent?浅谈阿里云服务领域Agent构建的方法论
|
数据安全/隐私保护 安全
云大使提现账号更改为淘宝账号(绑定的支付宝)操作攻略
由于业务调整,云大使提现绑定的支付宝账户将换绑为淘宝账户所绑定的支付宝账户,具体操作步骤和常见问题攻略如下,便于大使快速完成换绑工作,避免影响大使的后续提现。关于如何查看自己的淘宝账号名称,通过以下两种方式可快速查看
云大使提现账号更改为淘宝账号(绑定的支付宝)操作攻略
|
机器学习/深度学习 自然语言处理 计算机视觉
【YOLOv11改进 - 注意力机制】 MHSA:多头自注意力(Multi-Head Self-Attention)
【YOLOv11改进 - 注意力机制】 MHSA:多头自注意力(Multi-Head Self-Attention)BoTNet是一种将自注意力机制引入ResNet的创新架构,通过在最后三个瓶颈块中用全局自注意力替换空间卷积,显著提升了图像分类、物体检测和实例分割的性能,同时减少了参数量和计算开销。在COCO实例分割和ImageNet分类任务中,BoTNet分别达到了44.4%的Mask AP和84.7%的Top-1准确率,超越了现有模型。
【YOLOv11改进 - 注意力机制】 MHSA:多头自注意力(Multi-Head Self-Attention)