AI-Driven Frontend Code Generation at Qunar: D2C and Large‑Model Solutions

At QCon Global Software Development Conference, Qunar front‑end technology director Yao Jiamei introduced the company’s AI‑enhanced front‑end code generation practice, covering three major business scenarios: main‑flow (flight/hotel) processes, marketing activities, and internal back‑office services.

The D2C solution focuses on code usability, fixing width, precise layout division, and semantic naming, raising the automated code generation rate for C‑end to 36%.

The AI‑driven approach uses prompts composed of requirement documents and API specifications to let GPT generate rendering and business‑logic code, achieving a 55% generation rate for B‑end pages.

Traditional development starts from PRD and UI mockups; rendering and logic code each consume roughly half of the effort. After AI integration, developers first provide UI designs and requirements, receive generated code, verify functionality, and manually handle any gaps.

Key challenges in D2C include unreasonable layout slicing, excessive absolute positioning, fixed‑width components, and non‑semantic class names. Solutions involve projection‑based slicing, K‑means spacing clustering, axis‑aligned cut selection, component‑aware layout generation, and conversion of meaningless class names to semantic ones via GPT.

Fixed‑width issues are mitigated by converting layouts to flexible (Flex) structures, extracting common styles, and removing redundancies.

GPT also assists in semantic renaming and component decomposition, turning raw D2C output into maintainable, reusable code with proper list handling.

A UI‑diff tool was built to quantify pixel‑level UI fidelity, highlighting mismatches for quick correction.

The P2C (PRD‑to‑Code) pipeline parses PRDs, creates structured checklists, matches required SDKs from a vector‑store using RAG techniques, and feeds prompts to GPT to generate full‑stack logic code, including private SDK calls and interaction handling.

For B‑end pages, prompt engineering combines preset roles, framework choices (e.g., Ant Design V4, MobX), and detailed API descriptions, while modular generation and component orchestration ensure high‑quality output.

Future plans involve establishing UI standards, extending logic generation to complex main‑flow scenarios, and exploring C2C (Code‑to‑Code) for legacy migration and multi‑platform code synthesis, as well as multimodal inputs such as voice for even more intelligent generation.