Design2Code (D2C) Tool: Core Algorithm Design and Implementation for Frontend Code Generation

Background: In software development, improving team collaboration efficiency is a common focus, and many teams adopt intelligent tools such as Design2Code (D2C) to automate the conversion of design drafts into code.

Pre‑knowledge: D2C leverages AI‑trained models to transform design files (e.g., PSD, Sketch, Figma) into front‑end code for platforms like React, Vue, and mini‑programs, generating a DSL that represents both structure and style.

Industry status: A survey of leading D2C products (Alibaba imgcook, JD Deco, CodeFun, Microsoft AI Lab, Locofy) reveals features like efficient collaboration, high fidelity, multi‑platform compatibility, and rapid code generation, while also noting limitations such as proprietary servers and paid advanced functions.

Effect demonstration: The D2C conversion flow includes uploading Sketch files, processing data, and displaying results, achieving up to 80% visual fidelity across APP, H5, Online, and mini‑program outputs.

Solution analysis: The main challenges are (1) extracting layer information, (2) preprocessing the extracted data, and (3) constructing layout relationships.

Solution thinking: For layer extraction, the open‑source sketch2json tool converts Sketch/Figma layers into JSON where "layers" map to HTML structure and "style" to CSS. Preprocessing involves filtering useless layers, mapping Sketch style fields to CSS, flattening hierarchical structures, calculating order depth, and handling Symbol components.

Architecture design: The system is split into three core services—View Rendering, Layout Algorithm, and Slice Algorithm—each responsible for rendering results, computing precise element positions, and cutting images respectively.

Core algorithm design: Layer hierarchy rules based on parent‑child and sibling relationships. Projection algorithm using X/Y axis shadow mapping to infer sibling relations. Crossing algorithm determining parent‑child relations via coordinate intersection and containment. Flex layout inference by analyzing size similarity and axis differences to deduce row or column direction.

Visual constraints: Recommendations for Sketch files include keeping components on separate artboards, removing empty layers, limiting nesting depth, grouping logically, avoiding interleaved sibling placement, consolidating repeated text layers, and using images for special effects.

Future planning: Improve layout rationality (more accurate flex inference, DOM tree segmentation, reduced depth), enhance UI fidelity (list detection, long‑page reconstruction), and reduce manual intervention while supporting diverse team design standards.

Conclusion: D2C technology boosts R&D efficiency by automating design‑to‑code conversion, enabling front‑end intelligence, streamlining product development, reducing costs, and accelerating time‑to‑market.