How Deco Boosts Frontend Efficiency by 48% with AI‑Powered Design‑to‑Code

Background and Motivation

Improving development efficiency has long been a focus for engineering teams, evolving from tool‑based to engineering‑based solutions. With the rise of multi‑platform mini‑programs, developers sought unified cross‑platform code, yet personalized business pages continued to explode in volume, prompting a search for smarter, AI‑driven methods.

Deco: AI‑Driven Design‑to‑Code Project

Deco targets the "Design to Code" workflow, extracting a structured D2C Schema from visual drafts and converting it into maintainable front‑end code. The system was first validated during the 618 promotion and later deployed widely for the Double‑11 personalized venues, covering about 90% of modules and delivering roughly a 48% efficiency boost.

Step 1 – Generating a Structured D2C Schema

The first stage creates a static code foundation by converting design files into a structured data description called D2C Schema. This involves two processing layers:

Design‑file processing: decouples symbols into real layers, filters invisible layers, merges necessary layers, and handles masks.

Layer‑information processing: extracts useful attributes, flattens hierarchy, and removes irrelevant data.

Optimisation rules are applied to reduce layout complexity, such as merging vector groups into a single bitmap when appropriate.

Step 2 – Layout Algorithm Reconstruction

After schema extraction, a layout algorithm transforms absolute‑positioned elements into a logical hierarchy. The algorithm performs three major phases:

Data‑structure conversion: turns the JSON schema into a DOM‑like tree.

Layout inference: applies spatial, projection, background, feature‑detection, and coordinate‑derivation algorithms to establish parent‑child relationships.

Style calculation: derives Flexbox axes, margins, and other CSS properties from the inferred hierarchy.

The result is a well‑structured Schema JSON ready for further processing.

Step 3 – Semantic Code Generation

Semantic naming adds meaningful class names to nodes, improving readability and maintainability. The process uses rule‑based inference combined with AI techniques (NLP for text, image classification for graphics) to deduce element semantics from position, style, size, and sibling relationships. A forward‑chaining inference engine propagates facts from leaf nodes up to the root, producing class names such as goods, goods_pic, price, etc.

Step 4 – DSL Generation

The semantically enriched schema is abstracted into a Virtual DOM representation, then emitted into various domain‑specific languages (DSLs). The architecture is extensible, allowing new DSLs to be added via a plug‑in interface.

Componentisation, Data Binding, and Interaction

Deco supports component marking, enabling developers to define component state, props, and lifecycle hooks. Global or component‑level data can be defined, optionally using React context. A visual form builder generates asynchronous request code, and a rich set of event bindings (click, lifecycle, etc.) allows custom logic insertion. Property editors and data‑binding tools link UI elements to dynamic data sources.

AI Open Platform for Reuse

To share the AI capabilities across teams, Deco provides an AI Open Platform offering zero‑touch image classification and object detection services. Teams can create custom datasets, select pretrained models, train, and evaluate them without deep AI expertise, facilitating component‑recognition pipelines for new business scenarios.

Future Outlook

The authors view intelligent code generation as a nascent yet promising direction, aiming for a future where design files can be directly delivered as production‑ready code, further reducing manual effort and accelerating front‑end development.

Key Visuals