Deco Intelligent Code Project: Design‑to‑Code Solution for Frontend Development

In the recent Double 11 personalized event, the team extensively used Deco for development, achieving roughly a 48% efficiency improvement, and this article reveals the secrets behind Deco's performance boost.

R&D efficiency has always been a focus, evolving from tooling to engineering solutions and multi‑platform development; however, the explosive growth of personalized business demands further innovation, prompting the exploration of AI‑driven frontend code generation.

Deco’s intelligent code project tackles the design‑to‑code challenge by extracting structured data from design drafts (D2C Schema), converting it into code, and applying AI techniques such as computer vision, layout algorithms, and deep learning to produce maintainable, multi‑platform code.

The pipeline includes:

Processing design drafts: extracting layer information, decoupling symbols, filtering and merging layers, and handling masks.

Applying layout algorithms to transform absolute positioning into flexible, readable layouts using data structure conversion, layout inference, and style calculation.

Semantic enrichment: inferring meaningful class names for elements based on visual cues, NLP analysis, and rule‑based reasoning with a forward‑chaining inference engine.

DSL generation: abstracting the semantic layout tree into a virtual DOM and translating it into various DSLs, with extensibility for new DSLs.

Additional features include component reuse via deep‑learning‑based component detection, an AI open platform for low‑threshold model training, visual editors for post‑generation adjustments, componentization, data definition, asynchronous request handling, event binding, and property editing.

Looking ahead, the team envisions further integration of AI and frontend development to achieve design‑direct‑to‑delivery, driving a new wave of efficiency and innovation in the industry.