Can AI Turn Design Mockups into Perfect Front‑End Code with One Click?

Introduction

Design‑to‑Code (D2C) aims to generate HTML/CSS directly from design files (PSD, Sketch, etc.) so front‑end engineers can focus on business logic. Existing D2C tools in the group (Dara, OneDay, imgCo, etc.) struggle with layout dependencies, unit inconsistencies, and cumbersome workflows.

Problems with Current D2C Tools

Heavy reliance on position , z‑index , and align‑self makes generated code hard to maintain.

Inability to output Alibaba’s rpx unit.

Strong dependence on design‑layer structure; invalid layers cause duplicate or missing nodes.

Proposed Solution

We combine D2C with MCP (Model Context Protocol) and introduce three key innovations:

WeaveFox visual layout engine – generates an intermediate IR that does not depend on layer hierarchy.

Design‑system specifications & DSL recall – provide color, font‑weight, size, and corner‑radius standards to correct AI‑generated inaccuracies.

Design‑plugin for exact 750 px assets – extracts the exact‑size image from the design tool, eliminating manual screenshot errors.

Workflow Overview

1. User selects a layer in the design tool. 2. The plugin generates an IR and a compact DSL. 3. The IR + DSL are sent to the MCP tool. 4. The AI model refines styles using the design spec and DSL recall. 5. The final component code is copied into Aone IDE with a single paste.

IR Generation

The IR describes component hierarchy, properties, and styles in a minimal, layout‑agnostic format. Example IR snippets show node IDs, type, children, and basic style attributes (width, height, position).

Design‑System Integration

Design tokens (e.g., --token-color-9) are injected into the DSL. The compressor extracts only the necessary fields, removes redundant nesting, and resolves token values, reducing a 174 KB DSL to under 10 KB (≈94% compression).

DSL Compression

{"id":"227:23720","name":"Group 2099","type":"VIEW","styles":{"width":"164px","height":"60px"},"isContainer":true,"children":["227:23721","227:23722"]}

This flat structure eliminates deep layout, style, and relatedLayout nesting, making it easier for the LLM to understand.

Image Layout Handling

We replace CALC expressions with concrete pixel values derived from the parent container, avoiding runtime size calculations and reducing AI hallucination.

Results

After applying the workflow, the generated components match the original designs in layout, colors, typography, and dimensions across multiple transaction scenarios (SKU, NewBuy, payment success, order list, cart, reverse‑engineered pages). The process requires only two user actions: select layer and click “Generate IR”.

Advantages

Simplified user flow – only two clicks.

Accurate 750 px image extraction avoids manual screenshot errors.

Design‑system token preservation aids maintainability.

DSL compression bypasses LLM token limits.

Extensible MCP pipeline can integrate tracing, JS‑tracker, and real‑device verification.

Limitations

Margin precision still depends on WeaveFox visual detection.

WeaveFox occasionally misses images, leading to missing nodes.

LLM hallucinations can affect complex DSL processing.

Conclusion

The combined approach of visual layout, design‑spec correction, DSL recall, and a custom plugin delivers a fast, reliable end‑to‑end pipeline from design mockup to production‑ready front‑end code. Future work will focus on improving margin accuracy, stabilising AI output, and expanding custom component support.

Team Introduction

The authors belong to Alibaba Group’s Transaction Terminal Technology Team, responsible for native, cross‑platform, and web front‑end infrastructure serving billions of daily active users. The team builds stable, high‑performance foundations, develops JSTracker for observability, and explores AI‑native applications to accelerate development cycles. Recruitment for front‑end, client, backend, and data‑science roles is ongoing (email: [email protected]).

Further Reading

3DXR Technology

Terminal Technology

Audio‑Video Technology

Backend Technology

Tech Quality

Data & Algorithms