AI and Human Engineering
Airframe
The structural UI system designed for humans and AI.
Like an aircraft airframe, Airframe defines the form and integrity of the system. You bring the engine: React, Vue, Angular, AI-generated code, or whatever comes next.
Modern teams don’t struggle to build UI. They struggle to carry intent across the gap. From AI-generated code to human-maintained systems, from prototype to production.
Frameworks are engines. Airframe is the structure.
Airframe provides the stable structure that UI is built on, teams collaborate through, products grow on, and systems survive over time. You can swap engines without rebuilding the aircraft.
The Problem
Section titled “The Problem”AI can generate code fast, but:
- It needs predictable patterns
- It needs clear constraints
- It needs structural rules to follow
Humans maintain code, but:
- They need readable markup
- They need consistent semantics
- They need safe evolution paths
The Solution: A Structural Contract
Section titled “The Solution: A Structural Contract”Airframe is that contract. The structural foundation that connects AI generation to human maintenance. It provides:
- Structural Primitives -
af-stack,af-inline,af-gridgive AI a language for layout. Not styling hacks. Layout concepts. - Readable Output - Semantic markup that humans can review, modify, and maintain without breaking things.
- Safe Constraints - Tokens and cascade layers prevent breaking changes. Systems evolve safely over time.
- Clear Rules -
@airframeui/coreships the rules. Frameworks change. The structure remains stable.
How It Works
Section titled “How It Works”For AI
Section titled “For AI”- Follow
@airframeui/corerules (AIRFRAME_RULES.md) - Generate semantic HTML with
af-*classes - Use structural primitives (
af-stack,af-inline,af-grid) - Apply tokens via CSS variables
For Humans
Section titled “For Humans”- Review readable DOM
- Override tokens in CSS (no build step)
- Extend with cascade layers
- Maintain predictable patterns
The Result
Section titled “The Result”Code that:
- AI can generate confidently
- Humans can maintain easily
- Evolves safely over time
- Scales across teams and projects
Real-World Example
Section titled “Real-World Example”AI generates:
<div class="af-card af-stack">
<h2 class="af-card__title">
Dashboard
</h2>
<div class="af-card__body">
<p>
Welcome back!
</p>
<div class="af-inline af-gap-sm">
<button class="af-btn">
Get Started
</button>
<button class="af-btn">
Learn More
</button>
</div>
</div>
</div>Humans review:
- Clear component structure (
af-card) - Obvious layout intent (
af-stack,af-inline) - Predictable spacing (
af-gap-sm) - Semantic parts (
af-card__title,af-card__body)
Both win:
- AI has structural rules to follow: predictable patterns, explicit structure
- Humans can read and maintain the code: semantic markup, intention-revealing classes
- The structure enforces consistency: stable architecture that survives framework changes
Why This Matters
Section titled “Why This Matters”Traditional utility-first approaches create markup that’s hard for humans to read:
<!-- Hard to read -->
<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 keeps it structural and readable:
<!-- Easy to read -->
<div class="af-card af-stack">
<h2 class="af-card__title">
Title
</h2>
<p class="af-card__body">
Content
</p>
</div>The difference: AI can generate both, but humans can only effectively maintain the second. Airframe gives AI a structural language for UI, so AI-generated code is human-maintainable by design.