How Ant Design’s MetaGuide Transforms Design System Creation

Preface

Before the sharing, the author raises several questions about component classification, functionality scope, and component types that often arise when building design systems.

What Is ADM MetaGuide?

ADM (Ant Design MetaGuide) is a set of construction specifications for design systems aimed at system builders, helping them decide what components to create and how to assess component quality.

ADM defines two main goals: 1) determine which components to build; 2) evaluate component quality.

Part 1: How to Determine What Components to Build?

ADM shifts the perspective from inductive (listing existing components) to deductive reasoning, focusing on the underlying user behavior each component serves. By treating component design as solving a user’s behavior purpose, designers can classify components, create variants, and define clear system boundaries.

Using a "Component Behavior Pattern Map," the author demonstrates how to map a DatePicker component to its core behavior (inputting time data) and its derived behaviors (quickly selecting specific dates), then decide which variants are needed.

Applying this method to a heavy table component shows how a unified, maintainable architecture can be built, avoiding redundant or overly abstract component definitions.

Part 2: How to Evaluate Component Quality?

Component quality is evaluated by analyzing the interaction behavior sequence using human‑computer interaction models such as GOMS. For example, a button’s interaction can be broken down into perception (M), pointing (P), and clicking (K) – the MPK sequence.

By measuring the typical time of each elementary action, the overall interaction efficiency of a component can be predicted. The author compares two multi‑select component designs, showing that the one with fewer cognitive steps (lower total time) is superior.

Case studies also show how applying ADM to Ant Design Mobile 5.0 reduced average interaction time per component from 3.42 s to 3.17 s, saving considerable user time at scale.

Conclusion

ADM provides a behavior‑driven framework that makes design systems more deterministic, scalable, and efficient, helping enterprises of any size build and evolve their design systems with clear decision criteria.

Official website: https://ant-design.antgroup.com

GitHub: https://github.com/ant-design/ant-design

Yuque column: https://www.yuque.com/ant-design/ant-design

ZhiHu column: https://www.zhihu.com/column/c_1564262000561106944