Skip to content

Get started

Pick a path. Same language, for developers, designers, or AI.

Start fresh or bring your existing system. Airframe gives humans and AI one UI contract.

Developers

Start developing

Install one CSS file. No build step. No JavaScript runtime.

Installation →

Designers

Start designing

Tokens in CSS. Theme Studio. Same values in Figma.

Figma →

Compose

Start composing

Structure, then patterns, then blocks and blueprints.

Structure →

Coming from Tailwind or Bootstrap

See the difference

Intent classes instead of utilities or a JS component kit.

Comparison →

The class is the intent

A button is af-btn, not a stack of utilities. That is the contract.

Button pattern · Comparison · Tailwind cheat sheet · Bootstrap cheat sheet 

<button type="button" class="af-btn">Save</button>
<button type="button" class="af-btn af-is-secondary">Cancel</button>
<button type="button" class="af-btn af-is-ghost">Skip</button>

Agents: AI Rules · Airframe MCP · IntelliSense for Airframe · ESLint plugin · Introduction