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

Design draft (UI view) to code conversion is a repetitive, low‑complexity yet time‑consuming task for front‑end engineers. Improving its efficiency has long been a key goal.

Traditional approaches include (1) neural‑network‑based image‑to‑code generators such as Microsoft Sketch2JSON, and (2) Sketch‑source‑file parsers like imgCook that extract layer information and translate it into a DSL. The first method suffers from low accuracy on complex layouts and poor interpretability, while the second offers richer layer data and higher customisation potential.

This article proposes a complete pipeline that automatically generates code from design drafts, consisting of three main stages: UI2DSL (design draft → DSL view tree), DSL2Code (DSL → static code), and business‑information binding.

1. UI2DSL – Converting Design Drafts to a DSL View Tree

1.1 Design Import – Sketch files provide layer data (coordinates, size, type, etc.) in JSON format. Example layer JSON:

[
    {
        "class_name": "MSTextLayer",
        "font_face": "PingFangSC-Medium",
        "font_size": 13.44,
        "height": 36.5,
        "index": 8,
        "line_height": 18.24,
        "name": "恒都民生精选猪小排带骨400g±25g",
        "object_id": "EF55F482-A690-4EC2-8A6E-6E7D2C6A9D91",
        "opacity": 0.9000000357627869,
        "text": "恒都民生精选猪小排带骨400g±25g",
        "text_align": "left",
        "text_color": "#FF000000",
        "type": "text",
        "width": 171.8,
        "x": 164.2,
        "y": 726.7
    },
    //......
]

1.2 Component Recognition – Raw layers are mapped to development components (text, image, progress bar, rating, price tag, badge, etc.). Currently only text and image are recognised; future work will integrate Alibaba’s Pipcook for richer component classification.

1.3 Visual Intervention – Designers often create redundant or overlapping layers that hinder DSL generation. A visual tool allows manual merging, deletion, and correction of such layers before algorithmic processing.

1.4 View‑Tree Generation – The flat layer data is recursively partitioned into a hierarchical DSL tree using three core techniques:

Horizontal/Vertical Cutting – Repeatedly split a region at cut points derived from layer positions, generating column or row layouts accordingly.

Layout Structure Classification – Based on rectangle relationships (intersection, containment, separation) the algorithm distinguishes five layout types: row, column, contain, group, and float.

Model Evaluation – For regions with multiple possible cut points, each candidate DSL is scored by (a) number of layout nodes (fewer is better) and (b) inverse‑layout index (measures alignment inconsistency). The DSL with the lowest combined score is selected.

1.5 List Layout Detection – Row/column layouts are examined to identify repeated item structures. Single‑state lists are detected by exact subtree equality, while multi‑state lists are identified by low variance in item dimensions combined with manual verification.

2. DSL2Code – Translating the DSL Tree into Static Code

2.1 Property Inference – Styles (font, color, radius) are directly taken from layer data. Structural properties (size, margins, main‑axis/flex‑axis alignment) are inferred through a two‑pass recursive traversal: an “enqueue” pass records size and desired alignment, and a “dequeue” pass finalises parent node dimensions and alignment, also handling stretch intent for flexible nodes.

2.2 Property Adjustment – Because design drafts lack business semantics, a visual adjustment UI lets developers edit any inferred property before final code emission. The adjusted DSL is then mapped to Meituan’s MTFlexBox static code.

3. Results and Future Work

Generated code reproduces the original design with high fidelity on mobile screens. Ongoing efforts aim to incorporate machine‑learning and neural‑network models to further improve component recognition, layout cutting, and overall accuracy.

The authors (Tian Bei, Shao Kuan, Teng Fei) are engineers in Meituan’s Platform Terminal R&D team.