How P2C Turns PRD into Code: Alibaba’s Front‑End Intelligent Automation

Hello everyone, we are Wolf Uncle and Zhuofeng from Alibaba Taobao Technology, sharing our practice of "Frontend Intelligentization – P2C from Requirement Document to Code".

Wolf Uncle is a Node.js evangelist, former employee of Qunar, Sina, and NetEase, author of two "Wolf Books" on Node.js, and a key contributor to Alibaba's large‑scale SSR applications.

Zhuofeng has eight years at Alibaba, focusing on Taobao marketing products and the Service‑to‑Code (S2C) ecosystem, now dedicated to frontend intelligentization.

We will discuss P2C from four dimensions, introducing its product concept, problem‑solving ideas, and inviting you to join the journey.

Alibaba’s frontend intelligentization consists of three layers:

The bottom layer is the algorithm framework represented by Pipcook, which lowers the barrier for frontend engineers to become algorithm engineers.

The middle "R&D capability" layer offers tools such as D2C (Design‑to‑Code), P2C (PRD‑to‑Code), S2C, and C2C.

The top layer provides these capabilities to over 70% of frontend work across 17+ business units.

D2C (Imgcook) has achieved a code‑generation rate of 79.26% and a 1.5‑2× increase in requirement throughput, but the remaining 21% indicates a bottleneck: design‑only information cannot cover all code‑generation needs.

We discovered that the missing 21% must be extracted from upstream PRDs written by product designers (PDs), prompting us to extend the input upstream to PRDs and the output downstream to backend services.

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

The product design of P2C follows three constraints:

Retain design‑based code generation (already 79% coverage).

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

Ensure annotations can be turned into code; otherwise the upgrade from D2C to P2C loses its purpose.

Annotation workflow (four steps):

PD uploads a Sketch design; P2C instantly parses it into a structured online canvas.

PD adds business‑logic annotations on the canvas.

P2C provides a lightweight annotation tool for complex logic entry.

P2C offers a preview‑as‑you‑type experience that links to backend data‑interface design.

Finally, each annotation maps to a "logic point" that drives code generation.

PDs are creative but lack standardized documentation; they need a concise way to express business rules without heavy coding.

Three sources of logic points:

Visual recognition from design drafts (e.g., "N items N discount").

Product background information supplied by PDs.

Direct annotations made by PDs on the canvas.

Combining these sources enables full‑coverage logic‑point extraction, which then drives automatic code generation.

P2C development roadmap:

Stage 1: Manual entry of annotations and logic points to collect training data.

Stage 2: Use accumulated data to improve models, reducing manual effort.

Stage 3: Achieve AI‑driven automatic annotation and zero‑code generation.

The upgraded code‑generation pipeline separates "recognition" (multi‑modal semantic understanding) from "expression" (generating front‑end, BFF, or backend code).

Example: multi‑modal input around the text "￥4999" allows the model to label it as a "618 promotion price".

Future plans include AI‑assisted annotation, large‑scale NL2Code research, and public beta releases in April and October next year.

References:

Imgcook Product: https://imgcook.com

Imgcook Github: https://github.com/imgcook

Pipcook Github: https://github.com/alibaba/pipcook

IUI 2021 Paper – Auto‑Icon: https://www.yuque.com/docs/share/ec67f566-60c6-4cb4-967f-118829b7e63b?#

Alibaba Front‑End Intelligent Community: https://juejin.cn/user/1626932942211464