BestHub
Sign in
Tagged articles
9 articles
Page 1 of 1
Ctrip Technology
Ctrip Technology
Mar 2, 2023 · Frontend Development

Design2Code (D2C) Tool: Core Algorithm Design and Implementation for Frontend Code Generation

This article presents the Design2Code (D2C) tool, detailing its background, core algorithmic concepts, industry landscape, implementation architecture, layout reconstruction techniques, visual constraints, and future plans, aiming to improve front‑end development efficiency by automatically converting design drafts into production‑ready code.

code-generationdesign2codefrontend automation
0 likes · 13 min read
Design2Code (D2C) Tool: Core Algorithm Design and Implementation for Frontend Code Generation
DaTaobao Tech
DaTaobao Tech
Feb 17, 2023 · Frontend Development

Advances in Front‑end Intelligent Layout Algorithms and D2C Technology

Alibaba’s Front‑end Intelligent Group has built a D2C‑driven platform that converts 2‑D design drafts into high‑quality, token‑driven HTML/CSS through advanced preprocessing, text‑merge, badge recognition, skeleton grouping, and epoch‑based transformation pipelines, enabling rapid, no‑code UI personalization and scalable engineering quality.

EngineeringNo-codedesign-to-code
0 likes · 23 min read
Advances in Front‑end Intelligent Layout Algorithms and D2C Technology
Aotu Lab
Aotu Lab
Feb 17, 2022 · Artificial Intelligence

How DBSCAN Clustering Powers Automatic Layout Generation in Front‑End Design

This article explains the DBSCAN density‑based clustering algorithm, its core concepts, parameters, and step‑by‑step implementation, then shows how dynamically derived eps values enable the algorithm to group design‑draft modules for automatic front‑end code generation, improving development efficiency.

DBSCANclusteringdensity-based clustering
0 likes · 11 min read
How DBSCAN Clustering Powers Automatic Layout Generation in Front‑End Design
Aotu Lab
Aotu Lab
Nov 5, 2021 · Frontend Development

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

This article explains how the Deco platform uses AI and layout algorithms to automatically convert design drafts into reusable, semantic front‑end code, achieving around a 48% productivity gain during large‑scale e‑commerce events by streamlining UI reconstruction, component reuse, and data binding.

DSLaidesign-to-code
0 likes · 16 min read
How Deco Boosts Frontend Efficiency by 48% with AI‑Powered Design‑to‑Code
JD Tech
JD Tech
Nov 5, 2021 · Frontend Development

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

This article details the Deco intelligent code project, which leverages AI and layout algorithms to transform design drafts into semantic, reusable frontend code, achieving around 48% efficiency gains during large‑scale e‑commerce events and outlining the full pipeline from design processing to DSL generation and future AI platform integration.

DSLaidesign-to-code
0 likes · 14 min read
Deco Intelligent Code Project: Design‑to‑Code Solution for Frontend Development
Meituan Technology Team
Meituan Technology Team
Mar 25, 2021 · Frontend Development

Automated Generation of Front-End Code from Design Drafts: Architecture and Algorithms

The article presents a three‑stage pipeline that automatically transforms Sketch design drafts into a DSL view tree, infers layout and style properties, and generates Meituan‑compatible static front‑end code, while offering visual tools for layer cleanup, component recognition, and property adjustment to ensure high‑fidelity mobile UI reproduction.

DSLautomationcode-generation
0 likes · 19 min read
Automated Generation of Front-End Code from Design Drafts: Architecture and Algorithms
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 8, 2021 · Frontend Development

How to Solve Subgraph Nesting in Mind‑Map Layouts: From Black‑Room Analogy to Quadrant Reduction

This article explores the technical challenges of implementing subgraph nesting in a mind‑map product, using analogies of small streams and black rooms, analyzes XMind's limitations, defines layout concepts such as type, direction and quadrant, proposes design principles to avoid conflicts, and presents a quadrant‑reduction algorithm with code to ensure consistent, conflict‑free nesting.

Product Designconflict resolutionfrontend engineering
0 likes · 14 min read
How to Solve Subgraph Nesting in Mind‑Map Layouts: From Black‑Room Analogy to Quadrant Reduction
Alibaba Terminal Technology
Alibaba Terminal Technology
Nov 28, 2019 · Frontend Development

How Frontend Code Is Auto‑Generated: Inside Alibaba’s Design‑to‑Code System

This article details Alibaba’s front‑end intelligent project that automatically transforms Sketch design files into production‑ready HTML/CSS/JS code, covering the design‑to‑code workflow, layer processing, mask handling, text calibration, layer merging, unused‑layer detection, testing, visual‑restoration metrics, and future enhancements.

Sketch Pluginautomationdesign-to-code
0 likes · 15 min read
How Frontend Code Is Auto‑Generated: Inside Alibaba’s Design‑to‑Code System