AI-Native Design Systems

GAAD Week 2026

Red Hat Design System

AI-native design systems

AI model illustration

AI-native design systems have component APIs, design tokens, & metadata that are easily digestible by AI agents.

This helps you generate correct, accessible UI while reducing hallucinations.

Not a new design system, a new way to describe one.

AI-native design systems

ASDL horrors: hallucinations

HTML

Agents hallucinate component APIs, leading to incorrect and inaccessible UIs:

  • Invented attributes.

  • Nonexistent slot names.

  • Ignored a11y patterns.

CSS

Models need context to use design tokens, and might not expend the effort to fetch docs from the web.

  • Hallucinated token names

  • Incorrect color values

  • No semantic awareness

Semantic awareness: the difference between "red-30" and "brand-red", or "blue-20" and "interactive text".

AI-native design systems

<rh-card variant="primary" color="#ee0000" size="large">
  <rh-heading slot="top"
              size="3"
              weight="bold">Sign Up Today</rh-heading>
  <rh-text color="#333333">
    Join our community of open source enthusiasts.
  </rh-text>
  <rh-button slot="actions"
             type="cta"
             theme="dark">Get Started</rh-button>
</rh-card>

Hardcoded colors. Invented slot names. Nonexistent tags. Wrong attributes.

AI-native design systems

Accessibility practices make UIs machine-readable for assistive technology.

We're doing the same thing for AI.

→

AI-native tooling for RHDS

Tools that solve these problems

We built open-source tools that make RHDS machine-readable for AI agents -- so they stop guessing and start generating correct, accessible UI.

Available today in Cursor, Claude Code, and VS Code.

AI-native tooling for RHDS

cem: components for AI

Remember rh-heading and rh-text? cem mcp tells AI which elements actually exist, what attributes they accept, and what slots they expose.

No more invented tags. No more wrong attributes.

Install in Claude Code:

claude mcp add cem -- cem mcp

AI-native tooling for RHDS

User
What is the brand red?
Bot AI
--rh-color-brand-red-on-light: #ee0000
Send a message...
ChatBot uses AI. Check for mistakes.

asimonim: tokens for AI

Remember color="#ee0000"? asimonim lets AI query --rh-color-brand-red-on-light directly. No more hardcoded hex values.

Install in Claude Code:

claude mcp add asimonim -- asimonim mcp

AI-native tooling for RHDS

Beyond AI: developer experience

Same tools power human developer experience.

Language server

cem lsp gives you autocomplete, hover docs, and validation in Twig, Jinja2, Blade, Nunjucks, and more.

Fast page loads

Mappa generates import maps so browsers load RHDS components without a build step.

RHDS documentation epic

Case study: cem health in action

RHDS team embarked on a cross-functional documentation epic. Designers and developers collaborated to clearly describe not just the "what" and "how" of the design system, but also the "why".

RHDS documentation epic

Design thinking applied to documentation.

Identify gaps

Score docs with cem health. File issues for low-scoring elements.

Collaborate

Designers and developers rewrite component descriptions together.

Measure and ship

Review improvements. Ship updated manifest.

RHDS documentation epic

- An alert with a status icon.
+ A prominent banner that displays a
+ concise, important message,
+ and optionally, related actions.
+ Use an alert to attract the user's
+ attention without interrupting workflow.

cem health score

10
→
80

RHDS documentation epic

Same input, two audiences

Good copy is cognitive a11y for humans.

Accessible docs are critical context for AI.

Design thinking produces good docs.

Two audiences, One quality bar.

Demo: full stack

User
Build a card section using RHDS components with brand colors and proper spacing.
Bot AI
Querying tokens…
Generating HTML…
Validating markup…
Send a message...
ChatBot uses AI. Check for mistakes.

Hallucinations caught. Token values verified. Markup evaluated according to designer specifications.

This works today

AI model illustration 
$ go install bennypowers.dev/cem
$ go install bennypowers.dev/asimonim
$ go install bennypowers.dev/mappa

Install it. Break it. File issues.

We built these tools for you. Your feedback makes them better.

The universal language

Accessibility practices make UIs machine-readable for assistive technology.

AI-native design systems unlock developer potential in
agentic software development lifecycles.

Same principle. Same beneficiary: everyone.

Thank You

Red Hat is the world's leading provider of enterprise open source software solutions. Award-winning support, training, and consulting services make Red Hat a trusted adviser to the Fortune 500.