Skip to content
Airframe

Why Airframe

Airframe is a structural UI design system for humans and AI.
Machine-readable by design.

Your framework provides the engine. Airframe provides the structure. Making docs AI-readable is not enough. The system itself has to give agents something they can compose with:
Structure → Patterns → Blocks → Blueprints.

Airframe treats AI agents as first-class consumers alongside developers and designers.

The full ladder: Introduction.

Same language for humans and AI

Section titled “Same language for humans and AI”

Keeping intent intact is hard. AI can generate markup quickly if patterns are predictable. Humans can keep shipping it if the DOM is readable.

Utility-first markup is cheap for models to emit and hard for people to own:

<div class="flex flex-col gap-4 p-6 bg-white rounded-lg border border-gray-200 shadow-sm">
  <h2 class="text-xl font-semibold mb-2">Title</h2>
  <p class="text-gray-600">Content</p>
</div>

Airframe stays readable:

Title

Content

<div class="af-card">
  <h2 class="af-card__title">Title</h2>
  <p class="af-card__body">Content</p>
</div>

AI can generate either. Humans can maintain the second. Markup rules: AI Rules. Agent contract: Airframe for AI agents.

Look and layout, not widget behaviour

Section titled “Look and layout, not widget behaviour”

“Framework-agnostic” usually means one of two products.

Component kitCSS contract (Airframe)
SharesOne widget implementation + bindingsTokens, layout grammar, pattern look
Wins atKeyboard maps, typeahead, focus trapsPage structure, brand, agent contract
Costs youTheir DOM, props, theming APIYou bring JS for rich widgets

Airframe owns look and layout. Native HTML is the default behaviour layer: <button>, <dialog>, <details>, form controls. Menus, comboboxes, and focus traps need JS. Keep that in your kit or a primitive library (React Aria, Base UI, Angular CDK, Headless UI, and so on). Do not wait for a CSS system to invent a keyboard map.

A kit that solves widget portability can still leave you with five design systems. Sit the kit on Airframe. Do not replace the grammar with it. Use as much as you need.

CSS is authored. Rules, class reference, MCP, ESLint, and IntelliSense are generated from it. Look them up. Do not dump them into a prompt.

Principles

Section titled “Principles”
  1. Structure over styling — Prefer af-stack over flex flex-col gap-4. Names that say what the UI is.
  2. Human-readable in the DOM — If you can read the markup, you can understand the UI. Semantic HTML is the baseline.
  3. Built for humans and AI — Predictable patterns. Same classes in a template a person wrote and in markup an agent generated.
  4. Accessible by default — Not a plugin. A system constraint, with room for you to get the details right.
  5. Framework-agnostic — Engines change. Structure stays.
Section titled “Related”