Design‑to‑Code Platform Overview and Its Impact on Frontend Development Efficiency

This article introduces JD's design‑to‑code (D2C) platform, which uses AI to automatically convert design drafts into front‑end code, aiming to significantly boost development efficiency.

In the context of financial app development, frequent UI updates and new feature releases create heavy pressure on developers; the UI reconstruction stage alone can consume 30‑50% of the overall effort, making automation highly desirable.

The typical frontend development process is divided into two phases: UI reconstruction, which requires pixel‑perfect implementation of design elements, and business‑logic implementation, which handles data binding, interactions, and other logic.

D2C parses design files such as Sketch, Figma, and XD to extract element positions, styles, and hierarchy, then applies algorithms and lightweight AI to generate corresponding front‑end code, effectively belonging to the UI‑2‑Code category.

The platform can generate code for JD's native language (Jue), Vue, React, and Taro, and also automates tasks like image slicing and CDN upload, making it especially effective for incremental UI work.

However, D2C cannot handle interactions, animations, or complex business logic that are not represented in design files; for large legacy pages with extensive logic, manual development may still be required.

The platform offers a comprehensive set of advanced features, including editable CSS class names, automatic list detection (including scrollable and multi‑state lists), and a "mark" function that lets users manually label containers as lists or images to guide code generation.

After extensive optimization, the platform has been deployed across dozens of pages in JD Finance's native and H5 applications, and plans are underway for broader internal rollout and eventual external release.