Inovance | DemoKit Training and Exchange
Fan Mihua
Cross-domain Designer
DemoKit is an attempt to make design systems more usable for AI. It packages components, rules, examples, tokens, registries, showcases, and starters into a runnable engineering environment, so AI can select and combine real building blocks instead of inventing UI from scratch.
Full introduction video: http://xhslink.com/o/3feeXfAHzgH
Recently, I was invited to share DemoKit with a leading company in the domestic industrial automation field. Around 90 people joined the internal training and discussion, including designers, engineers, and colleagues from other roles.
Why Enterprises Are Interested
The team already has its own web component library, design standards, and engineering resources. Their current exploration focuses on turning components, usage notes, code snippets, and design rules into Markdown files that AI can read before generating UI.
This path is useful because many companies already have component libraries, design documents, and scattered page experience. Organizing those materials into AI-readable knowledge can lower the starting cost and make team experience easier to reuse.
The Core Question
Once AI understands the rules, how can it call real components reliably? If the component only exists as documentation, AI still needs to regenerate code, which can introduce differences in size, spacing, radius, state, styling, and interaction details.
This is why the conversation kept returning to stability and fidelity.
Two Complementary Paths
Markdown is strong for documenting rules, boundaries, page structures, and usage notes. Engineering components are stronger for carrying real style and behavior, such as button height, input spacing, table structure, modal shadows, and interaction states.
The more stable path is to let documentation explain the rules while engineering components provide the actual implementation.
Questions from the Session
- Can an existing enterprise component library become the foundation? Yes, if it is already coded, callable, and has enough coverage. Then the team can add component descriptions, token mapping, usage rules, composite components, page templates, and validation examples.
- Should components live in Markdown or as engineering components? Use Markdown for rules and engineering components for real style and behavior.
- Why are composite components important? Real admin pages rely on headers, filters, metric cards, data tables, organization trees, approval flows, complex forms, and detail sections. Preparing these blocks makes AI output more controllable.
- How should tokens map to enterprise standards? Colors, typography, spacing, radius, density, and shadows need to connect to engineering variables and component behavior.
- How can multiple designers use AI and still get consistent results? Give everyone the same component library, tokens, templates, rule documents, registry, showcase, and output standards.