How JD’s Huamei Platform Turns Design Mockups into Front‑End Code Automatically

Introduction

JD has launched the Huamei platform, a design‑to‑code solution that uses intelligent tools to automatically transform design mockups into front‑end code, dramatically improving development efficiency.

01. Front‑End Development Process Overview

The platform follows a typical front‑end workflow: MCube checks template cache, fetches the latest template if needed, loads it, converts the product into a view‑tree structure, resolves expressions and events, binds them, and finally renders the view on the screen.

Front‑end development can be divided into two stages: UI reconstruction , which requires pixel‑perfect code to replicate the design, and business‑logic implementation , which handles data binding, interactions, authentication, animations, and analytics.

UI reconstruction often consumes about 30% of the development effort and can reach over 50% in low‑interaction scenarios, highlighting the need for a more efficient approach.

02. What Is Design‑to‑Code (D2C)?

D2C solves this problem by parsing design files (Sketch, Figma, XD, etc.) to extract element positions, styles, and layer relationships, then applying algorithms and low‑cost AI to generate front‑end code.

D2C belongs to the UI2Code category and can be implemented via two main approaches:

Image to Code : Converts bitmap images (jpg, png) to code using computer‑vision and AI, which is costly and less mature.

Design to Code : Parses rich design files to obtain precise fonts, colors, spacing, and hierarchy, enabling more accurate and efficient code generation with minimal AI assistance.

What D2C Can Do

D2C can automatically generate front‑end code for any UI, handle automatic slicing, upload images to CDN, and support incremental UI development where new pages are built from scratch.

What D2C Cannot Do

Complex business logic, interactions, and animations that are not expressed in the design file still require manual implementation by developers. For large‑scale legacy pages with extensive logic, D2C may not provide enough benefit.

03. Platform Overview

Huamei offers a one‑stop development environment. It currently supports one‑click generation of code for JD’s native language Jue , as well as Vue, React, and Taro. The platform is already used across multiple financial‑app teams, covering both native and H5 business lines.

The core workflow is: Upload design → Open design → Select area → Review generated code → Download code . Currently only Sketch files are supported, and designers can use a Sketch plugin to upload accurate slices and auto‑detect missing fonts.

04. Advanced Features

CSS Class Name Editing

Generated CSS class names are not always semantic. Developers can double‑click a class name in the DOM tree to edit it directly, pressing Enter to apply the change.

List Recognition

The platform can automatically detect standard, scrolling, and multi‑line lists, calculating widths and spacing for each item. For scrolling lists, it generates language‑specific code (e.g., scroll tag in Jue, overflow in HTML).

List Multi‑State

Developers can create different visual states for list items (selected vs. unselected) using the “Create State” feature, and the platform will generate the corresponding styles.

Marking Function

If the generated code does not meet expectations, users can manually “mark” elements. For example, a container not recognized as a list can be marked as a list, prompting the platform to generate loop‑based list code. Similarly, containers can be marked as images, resulting in an <img> tag wrapped in a <div> for easier post‑processing.

05. Conclusion

After continuous optimization, Huamei has been deployed on dozens of pages and dozens of floors within JD Financial’s native and H5 apps. It is now in internal production use, with plans to improve code quality, add UI component support, and eventually open the platform to external users by 2024.