From PRD to Code: Alibaba’s P2C Front‑End Intelligence in Action

Hello everyone, we are Wolf Uncle and Zhuofeng from Alibaba Taobao Tech, grateful to D2 organizers for the chance to share "Frontend Intelligence Practice – P2C: From Requirement Document to Code".

Wolf Uncle (left) is a Node.js evangelist, author of two "Wolf Books", and a veteran of full‑stack development, now leading P2C at Alibaba.

Zhuofeng (right) has eight years at Alibaba, focusing on Taobao marketing products and recently driving Service‑to‑Code initiatives within the front‑end intelligence domain.

We will explore four dimensions: the origin of the P2C concept, the problems it solves, and our solution approach.

Alibaba’s front‑end intelligence layout consists of three layers:

The bottom layer is the algorithm framework represented by Pipcook, enabling front‑end engineers to approach algorithmic tasks.

The middle "R&D capability" layer abstracts efficiency tools into D2C (Design‑to‑Code), P2C (PRD‑to‑Code), S2C, and C2C, with this talk focusing on the first two.

The top layer delivers these capabilities to over 70% of front‑end work across 17+ business units.

Reviewing D2C’s Imgcook product shows a code‑generation rate of 79.26% and a 1.5‑2× increase in requirement throughput, yet 21% of code still requires manual effort, indicating a bottleneck.

To overcome this, we shift the input upstream to the PRD created by product designers (PD), expanding both input and output to cover backend code as well.

Thus, P2C transforms the workflow from "Design‑to‑Code" to "Requirement‑to‑Code", involving multiple product roles in an online collaborative workbench.

We define three constraints for P2C product design:

Continue leveraging design‑based code generation (already at 79% success).

Shift PD’s work from writing PRDs to annotating business information on design drafts.

Ensure annotations can be turned into code; otherwise, they do not improve the code‑generation rate.

Annotation design starts by understanding PDs: they are smart, idea‑driven, but lack standardized documentation, making PRD creation burdensome.

Our annotation workflow includes four steps:

PD uploads a Sketch design; P2C parses it using D2C to create a structured annotation canvas.

PD adds business information on the canvas.

P2C provides a lightweight annotation tool for complex logic entry.

P2C offers a WYSIWYG preview linking annotations to backend data interfaces.

From these steps, we derive the P2C product mission: improve code‑generation rates by integrating design‑based and requirement‑based inputs.

We then discuss the code‑generation pipeline, comparing D2C’s logic‑point based generation with P2C’s upgraded approach, which adds multi‑modal semantic recognition and abstracts data/event binding for PDs.

Logical points are sourced from three channels: visual recognition, PD’s product background, and PD’s direct annotations on the canvas.

Visual extraction (e.g., “N items N discount”).

Product background (e.g., “Taobao flash sale”).

Direct annotation (e.g., “Zero‑threshold definition”).

Future roadmap consists of three steps:

Step 1: Manual annotation and logical‑point entry to collect training data.

Step 2: Use accumulated data to train models, reducing manual effort.

Step 3: Achieve AI‑driven zero‑annotation and zero‑development.

Demo cases show NL2Code attempts where Chinese logical‑point inputs are transformed into code, highlighting the research challenges across machine learning, software engineering, and linguistics.

We plan to release a more PD‑friendly platform by next April and open beta by October.

For more information, see Imgcook (https://imgcook.com), Pipcook (https://github.com/alibaba/pipcook), and related research papers.