Seal D2C: Design‑to‑Code Solution for Efficient UI Development at NetEase Cloud Music

This article examines the efficiency challenges of UI development at NetEase Cloud Music and presents the design‑to‑code product "Seal D2C" (Design to Code) as a comprehensive solution.

In the traditional UI hand‑off workflow, designers create mockups in tools such as Figma, MasterGo, Photoshop or Sketch, then developers manually translate the designs into code, followed by iterative reviews. This process incurs high communication cost, low productivity, and requires developers to master multiple UI technology stacks (H5, React Native, DSL, dynamic images, etc.).

Seal D2C aims to replace manual UI reconstruction with a one‑stop intelligent system that can generate code from design files with 99.9% fidelity and automatically analyse design intent, thereby reducing both design‑review time and developer‑designer communication.

For designers, the tool delivers design‑efficiency gains (no need for detailed annotations) and communication cost reduction. For developers, it enables UI generation in under ten minutes per page and eliminates repeated clarification cycles.

The product is designed for broad applicability: it accepts design files from common tools (Figma, MasterGo, Photoshop, Sketch) without imposing strict file conventions, performs UI‑only reconstruction (no logic binding), and outputs code for multiple technology stacks (React, React Native, DSL, etc.) with open integration capabilities.

Seal D2C leverages Open APIs of design tools to extract lossless layer information (layout constraints, grouping, component metadata, tokens) rather than relying on image‑recognition, ensuring sub‑pixel precision and richer semantic data.

Multi‑software adaptation is achieved by implementing plugins for the Figma Plugin API and the MasterGo Plugin API. Support for Photoshop is provided indirectly by converting PSD files to Adobe XD, which can then be imported into MasterGo.

An intermediate representation called Uniform UI Schema standardises the data extracted from various design formats, allowing different code generators (React, Vue, etc.) to produce target code. The schema also enables micro‑plugins to extend code generation for frameworks not natively supported.

The plugin offers a "what‑you‑see‑is‑what‑you‑get" preview by rendering the generated HTML directly in the browser, giving immediate visual feedback on code quality.

Design‑file optimisation rules are applied automatically: removal of unused layers, suggestion of export formats, detection of responsive layout needs, and logical grouping of layers to improve code readability.

Intelligent recognition combines automatic analysis with optional manual review, and a fast‑generation mode bypasses the review step when needed.

Technical challenges addressed include component recognition via a C2D2C (Code‑to‑Design) pipeline that embeds component metadata into design libraries, and layout optimisation using a patented row‑column splitting algorithm (CN116861853A) that converts flat layer structures into nested Flex layouts. Automatic layout detection identifies list‑like structures and appropriate constraints (Fixed, Fill, Hug). Class‑name semanticisation and duplicate‑style merging are explored using large language models.

In production, Seal D2C achieves ~99% design‑to‑code fidelity, improves generation speed and usability compared with other D2C products, and provides over 30% efficiency gains for developers. It has been deployed across most NetEase Cloud Music business scenarios, generating thousands of pages, and is the first (and only) D2C plugin in the MasterGo community.

Future work focuses on better adaptive‑layout recognition, deeper AI‑assisted component and intent detection, and extending the workflow to an AI2D‑D2C pipeline that unifies design and production.