How Low‑Code and AI Are Redefining Frontend Development – Inside Marvel’s Engine

Background and Motivation

Front‑end development has become increasingly complex, with growing business scenarios, rapid iteration, and repetitive delivery demanding more manpower and higher costs. Low‑code emerges as a response, offering visual, modular, and micro‑application solutions, though opinions on its effectiveness vary.

Low‑Code Solution Design

Low‑code is examined through two aspects: Presentation Forms and Decision Making . The presentation form is characterized by three dimensions: interaction mode changes, component mode differences, and data configuration abstraction. Low‑code platforms pre‑define common components and scenarios to shorten delivery, making them suitable for highly repetitive, generic tasks.

Presentation Forms

Low‑code platforms provide pre‑built components, visual libraries, and block‑based modules, but this can reduce flexibility and extensibility, limiting use to repeatable scenarios.

Low‑Code Modes and Roles

Four modes are identified: ProCode, LowCode, NoCode, AutoCode, each matching different developer skill levels. Roles include developers, non‑coding staff, and workflow‑driven users, influencing platform architecture choices.

Decision‑Making for Platform Adoption

When adopting low‑code, focus on the implementation approach rather than features. Identify target users, business forms, and platform closure. Choose appropriate solutions such as Alibaba’s LowCodeEngine, Tencent’s TmagicEditor, or Baidu’s Amis, or develop a custom solution when needed.

Marvel Engine Overview

The Marvel low‑code engine, named "惊奇引擎‑Marvel," consists of four modules: visual system construction, core library (Dlibrary), out‑of‑the‑box low‑code capabilities, and material protocol/template management.

Dlibrary Components

component‑loader: material loading and conversion

canvas‑loader: multi‑canvas, ruler, adaptive container, sandbox isolation

draggable‑lib: drag‑and‑drop containers and elements, free and sortable modes

render: component, custom setter, and page rendering

animation‑timeline: timeline‑based animation configuration

factorys: data source, API, variable factories

hotkeys: keyboard shortcut integration

tools: common utility functions

DPro Components

DPro provides the visual system specifications and a set of fine‑grained modular components, enabling developers to assemble low‑code platforms like building blocks.

Core Capabilities

Canvas Core : Implements transform matrix control for moving, scaling, rotating, and skewing the canvas area.

Drag Core : Supports free‑drag and sortable‑drag modes for various scenarios such as large‑screen visualization, poster creation, and H5 marketing pages.

Render Core : Generates component‑to‑schema mappings, cleans duplicate components, calculates rendering order based on device viewport, pre‑loads scripts, and renders pages via high‑order components.

Material Integration

Materials can be imported via npm packages or CDN resources. The component‑loader parses packages, creates sandbox environments, extracts component metadata, and generates material description data. A visual material management UI allows versioned updates without platform redeployment.

Intelligent UI and Smart Inspection

MarvelDesign integrates AI to automate design‑to‑code workflows. It collects Figma design data, cleans and processes layers, performs component and icon recognition using deep‑learning models, and generates annotations, style conversions, and code.

Smart UI inspection compares rendered DOM nodes with design specifications using image fingerprint extraction (e.g., average hashing) and similarity matching, producing a diff map for color, font, spacing, and size discrepancies.

Conclusion

Both intelligent and low‑code approaches have been successfully applied within the team, delivering valuable products despite inevitable challenges. Ongoing development will continue to enhance these directions, offering enterprises powerful capabilities and inspiring others facing similar problems.