How We Boosted 11.11 Event Page Development 48% Faster with AI‑Powered Low‑Code

After the 11.11 shopping festival, the JD development team faced a surge in demand for customized event pages. Traditional manual coding and the internal low‑code platform "Tongtian Tower" could not keep up with the growing number of personalized modules, prompting the search for a more efficient solution.

Adopting Deco for Rapid UI Generation

Deco, an AI‑driven smart‑code tool, can transform design mockups directly into front‑end code. The team first tested Deco on a few modules during the 618 promotion and, impressed by the results, deployed it at scale for the 11.11 event.

Using Deco is straightforward: after obtaining the design draft, the designer uploads the layout to Deco via a plugin. Deco then produces the corresponding HTML/CSS/JS structure, which closely matches hand‑written code, especially for flex layouts. Minor adjustments are sometimes needed before the page can be previewed.

Integrating Component Libraries

Normally, developers manually import component libraries and reference them in the code. With Deco, the component library is first registered inside the tool. Selecting a region of the design and choosing a component automatically replaces the markup, eliminating the need for explicit imports and style definitions. If no mapping exists, Deco falls back to basic HTML tags such as div, text, and image.

Training the component library enables Deco’s AI to automatically recognize and replace components, further reducing manual effort.

Developing Data Logic Inside Deco

Deco mirrors many front‑end concepts such as props, state, lifecycle methods, and global variables, allowing developers to write logic directly in the visual editor.

Asynchronous Requests

Event pages require numerous data fetches. Traditionally, the team used a variety of wrapped request functions, leading to repetitive code. Deco can generate request snippets automatically based on selected parameters.

fetch(url)
  .then(...)
  .catch(...)

Code Hints and Scope Inspection

Deco provides intelligent code hints and can display the current node’s scope, showing variable structures and sample values. This visual assistance reduces the risk of binding errors.

Data Reporting

Deco also integrates data‑reporting capabilities, allowing developers to configure click and exposure tracking with minimal setup.

Exporting Source Code and Templates

After development, the generated source code can be downloaded for verification testing. The team created a custom code template in Deco to output project‑ready code, minimizing post‑generation adjustments.

Deco also supports exporting low‑code components that can be directly integrated into JD’s internal "Tongtian Tower" iHub platform, creating a seamless hand‑off between design and production.

Component Consolidation

Each completed business requirement is added to the shared component library. By uploading standardized component styles to Deco and defining internal logic, the team can generate reusable components, completing the development loop within the tool.

Observed Limitations

Despite its convenience, Deco requires developers to download the generated code, set up a local environment, and manually compile the project to view the final component. Repeating this process for many components becomes cumbersome, highlighting an area for future improvement.

Practical Takeaways

In the 11.11 promotion, dozens of floors built with Deco were successfully launched, delivering a 48% increase in development efficiency. The team refined an integration workflow that adapts to different business scenarios, and the experience demonstrates how AI‑assisted low‑code tools can significantly empower large‑scale e‑commerce events.