How Automatic Design‑to‑Page Generation Boosts Build Efficiency by 40%

The article explains how the Tongtian Tower platform’s automatic design‑to‑floor generation, leveraging Sketch parsing and RELAAAY asset management, reduces page‑building steps, cuts construction time by 40%, and enhances flexibility for designers, operators, and merchants.

JD.com Experience Design Center
JD.com Experience Design Center
JD.com Experience Design Center
How Automatic Design‑to‑Page Generation Boosts Build Efficiency by 40%

1. Project Background

The Tongtian Tower building platform is used for large‑scale promotions, channel pages, and daily activity pages, serving internal operations, procurement, merchants, and designers. To reduce cost and increase efficiency, the platform seeks to break traditional development barriers, allowing anyone to become a floor‑style producer. By linking design and construction, the system automatically recognizes design drafts and generates floor layouts, further improving production efficiency on top of the existing flexible canvas.

Figure 1: Flexible floor building example
Figure 1: Flexible floor building example

2. What Is Automatic Design Draft Generation

The automatic design‑draft‑to‑floor project focuses on one‑click generation of floor styles from Sketch and other design files. Designers and operators no longer need to manually match annotations and rebuild floors from scratch, dramatically lowering construction costs and delivering a smarter, more diverse floor‑building experience.

After the first phase, the solution was applied to the 618 promotion venue, achieving a 40% efficiency increase by automatically generating Tongtian Tower floors from design drafts.

Figure 2: Automatic design‑draft recognition case
Figure 2: Automatic design‑draft recognition case

3. Solution Overview

Starting Point

From the design draft, the goal is to improve page‑building efficiency by addressing core issues:

How to connect various platforms and reduce pre‑construction steps?

How to optimize the building workflow, upgrade interaction experience, and lower learning cost and time?

To solve these, we devised an overall scheme for automatic design‑draft‑to‑floor generation.

Core Design Philosophy

By fully utilizing existing resources and preserving user habits, we combine RELAAAY’s online asset management, the Tongtian Tower flexible floor building system, and design standards. This creates a platform that balances efficiency and flexibility.

Figure 3: Comparison of old and new building paths
Figure 3: Comparison of old and new building paths

Core Functional Flow

Create and upload design drafts in design software.

RELAAAY platform captures design‑draft metadata and syncs it to Tongtian Tower.

Tongtian Tower automatically recognizes the design draft and supports on‑demand adjustments.

Long‑term, the generated styles and pages can be stored for reuse.

Figure 4: Full‑link flow diagram
Figure 4: Full‑link flow diagram

4. Conclusion

Automatic design‑draft recognition and floor generation significantly improve building efficiency and create greater business value. Ongoing optimizations will further enhance canvas usability and enrich the material pool, enabling rapid, flexible, and accurate drag‑and‑drop assembly of personalized styles for diverse business scenarios.

We sincerely thank the RELAAAY team, Tongtian Tower design, product, development, and testing teams for their strong support and contributions. More content can be explored on Tongtian Tower.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

frontendefficiencyworkflowdesign automationpage building
JD.com Experience Design Center
Written by

JD.com Experience Design Center

Professional, creative, passionate about design. The JD.com User Experience Design Department is committed to creating better e-commerce shopping experiences.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.