Invisible Design System: Ant Design’s Engineering Approach to Design Asset Management
This article introduces Ant Design’s Invisible Design System, explaining how design asset management and engineering rules (ETCG) are explored to create unified, hidden guidelines that improve component consistency, workflow efficiency, and collaboration, and outlines the open‑source plan, Kitchen tool, and community initiatives for frontend development.
Design and development asset management is a critical issue for large‑scale frontend projects, and Ant Design has been exploring design engineering to increase determinism across design, development, acceptance, and consumption, ensuring seamless hand‑off between design and frontend.
The concept of an "Invisible Design System" is presented, focusing on the hidden rules behind visible design assets and how engineering can make complex rules usable yet invisible.
Ant Design’s design system evolution is outlined: from its 2015 launch to the 4.0 release with values of naturalness, determinism, meaning, and growth, encompassing design language, assets, workflow‑centric strategy (JCD), design tools (Kitchen), and cloud platforms.
The article identifies two main dimensions of design engineering: rule exploration from a designer’s perspective and practical engineering from an engineer’s perspective.
Rule exploration follows the ETCG model (Elements, Themes, Components, Guides). It aggregates assets, defines concepts, provides qualitative descriptions for designers, and quantitative specifications for machines, covering global styles, components, templates, and interaction guides.
Examples include the "main button edge" principle for button placement and the use of universally accepted principles (e.g., right‑hand traffic) to derive consistent UI rules.
These rules are encapsulated into template components (e.g., tables, forms, lists, icons, layouts) that can be configured via the Kitchen plugin, allowing designers and product teams to maintain consistency from design to code.
The Kitchen 3 beta is in internal testing, with a public release planned, and the template components are open‑source, encouraging community contribution.
Finally, Ant Design announces its open‑source design plan, inviting designers and developers to participate through open collaboration, discovery, and communication channels such as Zhihu, ZCOOL, and UI China.
AntTech
Technology is the core driver of Ant's future creation.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.