Orvain UI
Learn

What is an AI-native design system?

An AI-native design system is a design system built to be read by AI coding tools as well as by people: its components, props, variants and tokens are available as structured, queryable data, so an assistant generates code against the real API instead of guessing from training data.

By the Orvain team. Orvain UI is made by Oussema Ajmi, founder. Published October 4, 2026, updated October 4, 2026.

Orvain's Figma library is finished and available. The React and Vue code library and the MCP server are still being built, so anything below about generated code or the MCP server describes what is being shipped, not something you can install today.

What does “AI-native” mean for a design system?#

The phrase is recent and has no formal specification, so this is how Orvain uses it. A design system is AI-native when an assistant can find out what the system contains without reading prose written for humans. In practice that means four properties.

  • Machine-readable API: props, types and variants exist as data, not only as documentation pages.
  • Queryable by version: an assistant can ask about the version you have installed, not the one that was current when it was trained.
  • Token-aware: colour, type and spacing resolve from named tokens, so generated screens use brand values rather than hard-coded hex codes.
  • Verifiable: output can be checked against the schema, so an invented prop is rejected before it reaches a build.

How is it different from a traditional design system?#

TraditionalAI-native
Primary reader
A person, in a docs site or a Figma file.
A person and an AI assistant.
How the API is shared
Prose and examples.
Structured data, served on request.
When mistakes surface
At build time or in review.
Before the code is written.
Versioning
Docs for the latest release.
Answers for the installed version.

Why do AI coding tools need one?#

An assistant predicts plausible code from a fixed snapshot of public repositories. It does not read the library you installed. A prop that is common in similar libraries is a likely prediction whether or not your version has it, and the model cannot tell the difference. The code looks right until it is built.

A better prompt does not fix that. A source of truth the model can query does.

Is an AI-native design system the same as an MCP server?#

No. The Model Context Protocol is the standard way to make a design system queryable by AI tools, and it is the mechanism Orvain uses, but an AI-native design system is the larger idea: the system is designed so that its API is data from the start. An MCP server on top of a library whose API is only prose can only repeat the prose.

How does Orvain UI approach it?#

Orvain describes every component once (props, variants, token names) and shares that description between the Figma library, the code and the MCP server, so all three use the same names. The hosted MCP server answers an assistant from the same source the code is built from.

Questions#

Does an AI-native design system replace documentation?

No. People still need documentation. The difference is that the same facts are also served as structured data, so an assistant is not limited to whatever documentation was scraped into its training data.

Which AI tools can use an AI-native design system?

Any client that supports the Model Context Protocol, including Cursor, Claude Code and Windsurf, plus an adapter for v0.

Related#