Orvain UI
Learn

What is an MCP design system?

An MCP design system is a design system that exposes its components, props, variants and tokens through a Model Context Protocol (MCP) server, so any MCP-compatible AI tool, such as Cursor or Claude Code, can query the real API while it generates code instead of guessing.

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 is the Model Context Protocol?#

MCP is an open standard for connecting AI assistants to external tools and data. A server declares its operations and the shape of their inputs and outputs. A client, such as an editor or an agent, discovers those operations when it connects and calls them during a task. Because it is an open protocol and not a vendor plugin format, one server works with every compatible client.

What does an MCP design system expose?#

  • Components and their props, with types, so an invented prop is rejected.
  • Variants, as a finite set, so a value outside it fails immediately.
  • Design tokens, so generated screens use brand values.
  • Accessibility requirements, such as labels and keyboard behaviour.
  • The version, so answers match what is installed.

How does an MCP design system work?#

The editor connects to the server and discovers what it can do. When you ask for a screen, the assistant calls the server to look up the components it needs, receives their real props and tokens as structured data, writes the code against them, and checks the result against the same schema. The loop runs inside the editor; you do not write a special prompt.

How is it different from documentation or llms.txt?#

What the assistant getsLimit
Documentation site
Prose written for people, as scraped.
May be stale or partial in the model's data.
llms.txt
A curated summary and links.
A summary, not the full API.
MCP server
The API as structured data, on request, for a version.
Needs a connection from a compatible client.

Is Orvain UI an MCP design system?#

That is the design. Orvain's hosted MCP server is being built alongside the code library, and it is not live yet, so there is no endpoint to connect to today. The Figma library, which shares the same component contract, is available now.

Questions#

Which tools support MCP?

Cursor, Claude Code and Windsurf support it directly, and the list keeps growing. Because MCP is an open protocol, one server works with every compatible client.

Does an MCP server make an assistant good at design?

No. It tells the assistant what exists, such as a size prop with three values. It cannot tell the assistant which value suits the page.

Related#