uoaui.ai / five systems, one canvas
A visual web builder for designers who think in systems.
UI Kit plus private-preview Builder across Salt, Material 3, Fluent 2, Carbon, and the uoaui system. The canvas renders real components, and the export is code you can run.
Renders real components from
showcase / reskinned live
One dashboard. Five skins, no rebuild.
The same analytics dashboard, composed once on the canvas, then reskinned across all five systems. These are captures of the real Present mode, not redrawn mockups. Switch a system and the layout holds, only the skin changes.
Real builder output, not a mockup. Each frame is a Present mode capture of the live canvas, reskinned in place.
canvas / overview
A working canvas for design-system decisions.
Compare, audit, and hand off across systems without leaving the canvas. Four moves cover the day to day.
01
Five systems, side by side
- Drop a Salt card. See it as Material 3, Fluent, Carbon, uoaui.
- Demo the same brief to five stakeholders at once.
- Decide which system fits before you commit a codebase to it.
- No swap penalty: the comp carries across renderers.
02
Tokens travel with the block
- Swap a block, tokens follow it.
- Spacing, radius, color, density resolve through the right layer.
- No hardcoded hex, no inline overrides leaking in.
- Token diff surfaced inline whenever you change a system.
03
Sketch in real components
- Compose at the speed of a presentation tool.
- Drop production components, not lorem rectangles.
- LayoutGroups and row primitives keep the diff readable.
- Every drag is keyboard-reachable too.
04
Brief it, get variants back
- Hand the canvas a brief, get three layouts back.
- Audit contrast and density without leaving the page.
- Pressure-test against the scenarios you care about.
- Your canvas stays the source of truth, not the screenshot.
systems / side-by-side
The same card. Five renderings.
Pick a system to compose with. Swap later without rewriting the comp. Tokens carry the intent, the renderer is a choice you can unmake.
tokens / primitives
Tokens you can read.
The unit of portability across five systems. Same primitives, different rendering. This is a slice of the actual canvas, not a style guide.
color
type
- Display 800Bricolage Grotesque · 80px · −0.028em
- Section 800Bricolage Grotesque · 40px · −0.025em
- BodyInter · 16.5px · 1.55
- TOKEN / 01IBM Plex Mono · 12px · uppercase
space
- 014px
- 028px
- 0312px
- 0416px
- 0624px
- 0832px
- 1248px
builder / private preview
Stop choosing. Start composing.
Open the workbench, drop a block, and watch five systems render it. The export is real code, ready to run.