Can AI Replace Frontend Developers? Exploring Generative UI for Automated, Custom Interfaces

Introduction

In the era of intelligent products, users demand more accurate, rich, and customized interactions. To meet this need, the Alipay Experience Technology team proposes a generative UI solution that automatically generates UI screens according to design standards, delivering personalized content without heavy manual effort.

Challenges

AI‑generated outputs still require extensive manual intervention before deployment.

The current production chain is tailored to specific scenarios and lacks true data‑driven, per‑user customization.

Goals

Free producers' hands by making AI the executor of UI production while humans supervise, ensuring product quality and achieving automated UI generation and deployment.

Automated Production Pipeline

Automated production chain : design and implement an end‑to‑end automated UI pipeline.

Custom UI generation : allow the pipeline to incorporate product‑specific design styles and business logic.

Runtime UI generation : address latency and resource consumption when generating UI on‑the‑fly.

Prompt Design

The core of the pipeline is a well‑structured prompt that defines the workflow, rules, and output format (e.g., DSL, Markdown, XML). The prompt guides the model to produce UI components, layout, and data bindings.

Multi‑Agent Collaboration

Complex UI generation is decomposed into sub‑tasks—data splitting, layout planning, and code generation—handled by multiple agents. Each agent focuses on a specific aspect, improving scalability and reliability.

Model Selection

Depending on task complexity, the system flexibly selects appropriate models: small 7B models for simple data splitting, larger models for intricate design and rendering tasks.

Data Reference

AI receives a JSON description of data features (structure, field names, types, statistics). This enables the model to bind UI components to the correct data fields without needing full data details.

Design Reference

If the LLM supports multimodal input, design images can be directly included in the prompt. Otherwise, a visual AI module trained on 8,000 annotated UI samples extracts component hierarchy, positions, sizes, types, content, and styles, outputting a JSON that feeds back into the generation pipeline.

Customization

Users can define layout via natural language or JSON, select from built‑in templates, and customize design tokens (font sizes, colors) to match brand guidelines. Custom components can be registered with their properties and logic, allowing AI to assemble them without understanding internal implementation.

Runtime UI Generation

To avoid long waiting times, the system pre‑generates UI templates for user groups with similar data features and stores them in a UI repository. A three‑level cache retrieves exact matches, similar matches, or defaults, falling back to on‑demand generation when needed.

Key Capabilities

Dynamic component loading on demand.

Component block reuse by saving generated UI sections as reusable components.

Standardized output format for cross‑platform consumption.

Summary

The generative UI framework achieves both universality (maintaining baseline generation ability) and business precision (accurately reflecting product features and logic). It decouples UI production from consumption, improves response speed, reduces compute waste, and provides extensible development experience.

Future Work

Build an intelligent evaluation system to automatically score and improve low‑quality UI.

Establish a UI generation center that offers rapid business integration and end‑to‑end UI production and management.