Advances in Front‑end Intelligent Layout Algorithms and D2C Technology

The past decade has seen rapid growth in AI, and the next decade will see AI deeply integrated into all domains. The Front‑end Intelligent Group at Alibaba, after four years of practice, focuses on optimizing core business tools and delivering services in 2022.

The D2C (Design to Code) service on imgcook.com concentrates on improving generated code quality. Recent usage shows active "tap‑water" users, with strategies of business empowerment and code‑quality enhancement.

Layout Algorithm Background : Design drafts from tools like Sketch provide element coordinates (x, y, z, width, height). These 2‑D drafts are transformed into a 3‑D distribution, then projected onto a DOM tree. The generated DOM nodes correspond one‑to‑one with design elements, but many visual nodes are omitted or mis‑aligned, requiring preprocessing and grouping.

Preprocessing & Text‑Merge Strategy : To merge multi‑line text expressed by several single‑line nodes, a search rule (Manhattan distance ≤ 2) identifies clusters, then merges them while preserving style attributes (font‑size, color, weight). Additional adjustments use text‑indent , line‑height , spaces, and text‑align to align the merged text.

Badge Recognition : Absolute‑positioned badges are classified as geometric or semantic. Semantic badges (e.g., tooltips) are identified by border‑radius, alignment with parent nodes, and top alignment, enabling correct placement without intersecting other elements.

Optimization Progress includes:

Preprocessing to filter overlapping elements.

Excluding nodes with differing style attributes before merging.

Using text‑indent , line‑height , and text‑align for fine‑grained adjustments.

Defining 52 possible layout cases through sliding window analysis.

Skeleton Grouping leverages node‑type clustering and positional vectors to detect repetitive structures, improving grouping beyond simple row/column detection.

Engineering Quality : The layout pipeline is modeled as a series of Transformation steps applied to nodes, each producing a transformedNode . A full pass is called an Epoch . Snapshots of each epoch are persisted using jest for unit testing.

Example request for category‑based UI injection:

[{ "scene":"122_4411", "items":"618764511532,641571898810" }]

Example response:

{ "result":[ { "scene":"122_4411", "algoName":"RANDOM", "abType":"random", "items":[ { "id":"1", "key":"A^331|B^997|C^5124|D^5110|E^5125|F^988|G^980|H^2518", "trackInfo":"...", "content":{} }, { "id":"2", "key":"A^331|B^997|C^5124|D^5110|E^5125|F^988|G^980|H^2518", "trackInfo":"...", "content":{} } ] } ] }

No‑Code Mode for Operations : By registering design tokens (e.g., --dt-font-size , --dt-color ) in components, operators can adjust UI styles on the page level without code changes. Example CSS:

.like-count-text { font-size: var(--dt-font-size, 20rpx); color: var(--dt-color, #333); }

This token‑driven approach reduces operational overhead and accelerates module development.

Intelligent UI Core Progress includes finer‑grained UI control via DesignToken, modular style separation, and support for A/B, crowd, category, and algorithmic UI experiments. The system enables rapid, data‑driven UI personalization for marketing scenarios.

Overall, the front‑end intelligent platform integrates layout algorithms, D2C code generation, engineering quality practices, and no‑code operability to deliver high‑quality, customizable UI at scale.