Building A Design System for AIGUI

Key Words

UI Generation, Design System Wiki, Multi-Agents Workflow

Summary

VersionAI Tmall - A Design System Specification for AI Models. Tmall Design is a design system developed specifically for the Tmall shopping app, one of the largest B2C e-commerce platforms in China.

Unlike previous iterations, the version presented on this site is intended not only for human designers and developers, but more importantly for AI models. Its content structure, textual format, and communication logic have been translated to enable AI models to read and apply the specification. With AI assistance, users can reference this knowledge base to generate user interfaces that comply with Tmall's design specification (1), as well as conduct design evaluation and Q&A (2).

By enabling a more efficient and advanced mode of human-AI collaborative design, the system supports scenarios such as recomposing existing designs, making incremental adjustments, and creating new interfaces step by step.

Purpose

In the daily workflow of design teams, deliverables generally fall into three categories: modules, single pages, and multi-page flows. When mapped to five major demand scenarios—core user journeys, content discovery channels, gamified engagement campaigns, marketing events, and B-end experiences—a year-round analysis reveals a consistent pattern

Within core user journeys, discovery channels, and B-end experiences, design tasks that involve assembling or modifying existing components at the module or single-page level account for nearly 48% of all requests. This large volume of repetitive and structurally similar work highlights a strong need for automated, AI-driven interface generation to improve both efficiency and output quality.

For enterprise design teams, the primary objective remains the same: generating product interfaces that strictly adhere to internal design standards. To achieve this, teams must clarify and construct an AI-readable design knowledge system that can be reliably connected to design tools or large language models.

Design Solution

VersionAI Tmall interface generation is essentially a domain-specific intelligent system composed of multiple task-oriented agents. It operates within an enterprise-aligned design workflow and is driven by contextual reasoning and retrieval over Design System Specification Knowledge.

Within this system, the workflow serves as the engineering foundation, connecting all stages from requirement input to interface output and ensuring both process determinism and outcome reliability. The multi-agent system functions as the cognitive core: guided by predefined system prompts, each agent interprets the output of the previous step, performs autonomous step-by-step reasoning, and passes structured results to the next stage. The agents are organized into four primary task roles: intent recognition, knowledge retrieval, design synthesis, and code generation.

Design System Specification Knowledge serves as externally retrieved factual knowledge. Through a Design-to-Code (D2C) transformation, designs are converted into rule-based semantic facts, code-level symbolic facts, and structured mappings between them. Together, these form a structured design knowledge base that AI models can read, retrieve, and apply.

The entire interface generation process is traceable, reproducible, and evolvable, with outcomes remaining controllable within the continuously evolving enterprise design system and codebase. The design effort focuses on two core areas: the construction of Design System Specification Knowledge and the design of the multi-agent workflow.

1. Design System Specification Knowledge

Design System Specification Knowledge consists of two categories of knowledge objects and three corresponding file types. The two categories of knowledge objects are styles and pages. Styles are further subdivided into four types: elements, layouts, components, and assets. Each knowledge object is associated with three file types: semantic rules, mapping schemas, and code implementations.

Semantic rules are textual descriptions covering definitions, styles, variables, usage, and constraints. They represent the core intellectual property of the design system and are authored in Markdown format.

Code implementations translate design objects into executable and deployable symbolic facts, using appropriate programming languages as representation formats.

Mapping schemas act as the central connective layer between semantic rules and code implementations. Rather than duplicating either, they provide object ID anchoring, constraint definitions, and precise code references. Within the workflow, they guide knowledge retrieval, solution construction, and code generation, enabling large language models to avoid traversing the entire knowledge corpus and reducing computational overhead. Mapping schemas are represented in JSON format.

The design team redesigned and reinterpreted the Tmall design specification, covering four types of elements, four types of layouts, two types of assets, thirteen types of components, and one page type.

2. Multi-Agents Workflow

The complete generation pipeline proceeds as follows:

1. The user inputs a natural-language requirement.
2. The request is processed by the intent recognition agent, which expands ambiguous input into a system-interpretable design intent and outputs a structured requirement description with explicit boundary conditions.
3. The knowledge retrieval agent then uses Retrieval-Augmented Generation (RAG) to selectively retrieve highly relevant context from the Design System Specification Knowledge.
4. The design synthesis agent evaluates and composes the retrieved specifications within the defined constraints, producing an intermediate structured data representation (Schema). This Schema explicitly describes page structure, components, styles, and content.
5. Finally, the code generation agent re-queries the Design System Specification Knowledge based on the Schema, using targeted retrieval to locate corresponding code artifacts and generate production-ready UI output.

Together, the Design System Specification Knowledge Base and the interface generation workflow form an integrated, AI-friendly enterprise design system. The system can be flexibly applied in IDE-based environments and agent-mode design tools via MCP or context injection.

Outcomes & Impact

VersionAI Tmall is an AI-oriented design specification website that consolidates all of the knowledge described above. It supports interface generation compliant with the Tmall design specification, design review, and design-related Q&A.

The site's information architecture mirrors the structure of the design system specification, organized as a tree-based navigation of styles, cases, and granular knowledge modules. Each module supports switching between human-readable rules and AI-readable prompts, as well as copying or downloading structured knowledge snippets. A dedicated deployment page provides guidance on invoking the specification through “tmall-design” MCP Server for interface generation.

This comprehensive set of theory and practice offers broad applicability and can be adopted and reused by enterprise teams across industries. VersionAI Tmall has already been implemented in real-world projects, resulting in significant improvements in interface design efficiency.