Automatic Front‑End Code Generation from Visual Designs: Architecture, Implementation, and Practice

Background

Automatic generation of skeleton screens proved the feasibility of converting visual drafts into code, motivating the exploration of broader component generation and business‑specific code creation.

Problem Analysis

Platform side: How to make the generator highly customizable?

Generator author side: How to lower the learning curve for writing generators?

End‑user side: How to enable zero‑cost usage of existing generators?

Solution Overview

The solution addresses the three problems from three angles:

Intermediate code pluginization

Generator authoring templating

D2C platform optimization

3.1 Intermediate Code Pluginization

We expose the generator logic as a plugin by leveraging UIDL (Universal Interface Definition Language), a DSL‑like, platform‑agnostic description of UI structures.

1) UIDL Introduction

UIDL is a universal interface definition language that describes web, mobile, and desktop UI in a machine‑readable format. It is a subset of a DSL and can be used across any platform.

{
  "name": "Badge",
  "propDefinitions": {
    "count": { "type": "number" }
  },
  "node": {
    "type": "element",
    "content": {
      "elementType": "container",
      "attrs": { "class": "badge" },
      "children": [
        {
          "type": "element",
          "content": {
            "elementType": "text",
            "attrs": { "class": "badge-text" },
            "children": [
              {
                "type": "dynamic",
                "content": { "referenceType": "prop", "id": "count" }
              }
            ]
          }
        }
      ]
    }
  }
}

Using Teleport’s React generator, the above UIDL yields:

import React from 'react'
import PropTypes from 'prop-types'
const Badge = (props) => {
  return (
{props.count}
)
}

Badge.propTypes = {
  count: PropTypes.number,
}
export default Badge

2) Generator Parsing

Existing generators can be used directly; when they do not meet requirements, developers edit the template to create a new generator, which is then reviewed and published on the platform.

3) Generator Slots

The platform provides a selector for different generators, enabling real‑time code generation for the chosen target framework.

3.2 Generator Authoring Templatization

To reduce the learning cost, we supply local preview templates and package common front‑end framework generators.

1) Development Process

Developers clone the template repository and can either:

Write a generic component by converting visual‑draft DSL to UIDL and invoking the appropriate framework generator.

Write a custom data structure by extracting node data from the DSL.

After local preview, the generator is published as an npm package and inserted into the platform.

custom-generator-template
  |----package.json         // npm package info
  |----README.md
  |----src
  |      |----index.ts      // custom DSL implementation
  |----test
  |      |----files        // output file structure
  |      |----dsl.json     // input DSL
  |      |----index.ts
  |----tsconfig.json       // TypeScript config
  |----dist               // compiled output

2) Common API Wrappers

We provide pre‑ and post‑processing hooks:

Pre‑processing: Convert raw visual‑draft DSL to UIDL.

Post‑processing: Call framework‑specific APIs (generateHtmlFiles, generateVueFiles, generateReactFiles, generateReactNativeFiles).

export type GenerateCustomFiles = (dsl: DSL) => Promise<CompiledComponent>
// For page‑level DSL with design tokens and layout options
export type GenerateCustomFiles = (rootDSL: RootDSL, options: GenerateCustomOptions) => Promise<CompiledComponent>

3.3 D2C Platform Optimizations

Three key features improve zero‑cost usage:

Node tagging – manually add semantic tags to DSL nodes.

Partial auto‑generation – select a DSL node to preview generated code for that region.

Sandbox preview – render generated React/Vue code in‑browser; React Native via react-native-web for live editing.

Landing Results

Four practical scenarios demonstrate the approach:

Automatic generation of framework‑specific code (e.g., React Native).

Automatic generation of custom component code (e.g., a Badge component).

Automatic generation of test‑case code using Ctrip’s Flybirds BDD UI testing framework.

Future directions: AI‑assisted code generation (Copilot integration) and deep customization with Design Tokens + custom DSL.

Future Planning

We will continue to enrich the D2C ecosystem with more language frameworks, support for mini‑programs, and AI‑driven code synthesis, while enhancing design‑token‑based theming and one‑click skinning.