Features

Everything you need to ship UI, nothing you don't.

UIX Protocol replaces the broken design-code pipeline with a single schema that syncs design, code, testing, and AI across every platform.

Living Schema

<1ms parse · 21 blueprints

A UI schema that thinks.

UIXDocument is more than JSON — it's a living schema with 7 architectural layers: Genome, Cells, Organism, Nervous System, Skin, Evolution, and Consciousness.

  • UIXNode, UIXToken, UIXComponent core types
  • Body Architecture — 7-layer living schema
  • Soul layer — semantic purpose, user goals, emotional register
  • Mind layer — pre-computed AI reasoning surface
  • Canonical Registry — 21 built-in blueprints with embedded renderers
  • Zod validation schema for every type
import { createDocument, buildMind, annotateSoul }
  from '@uix/protocol';

const doc = createDocument({ name: 'Login' });

// Add semantic meaning
const withSoul = annotateSoul(doc, {
  purpose: 'Authenticates existing users',
  userGoal: 'Get back to work quickly',
  emotion: 'trust',
});

// Build AI reasoning surface
const mind = buildMind(withSoul);
// mind.screenType → 'authentication'
// mind.intents → ['auth.login', 'auth.setEmail']

Code Generation

7 renderers · ~50ms

Seven renderers. One command.

Generate production-ready code for React, Vue, Angular, Flutter, SwiftUI, React Native, and HTML from a single UIXDocument.

  • 7 platform renderers (React, Vue, Angular, Flutter, SwiftUI, RN, HTML)
  • 4 token writers (Tailwind, CSS Variables, Dart, Swift)
  • 2 test generators (Playwright, Accessibility)
  • Animation codegen (CSS @keyframes, Animated.timing, AnimationController)
  • Manifest with checksums for CI verification
import { UIXCodegen } from '@uix/codegen';

const codegen = new UIXCodegen();
const result = codegen.generate(doc, {
  targets: ['react', 'flutter', 'swiftui'],
  style: 'tailwind',
});

// result.files → [
//   { path: 'Login.tsx', content: '...' },
//   { path: 'login.dart', content: '...' },
//   { path: 'LoginView.swift', content: '...' },
// ]

Design Sync

bidirectional sync

Canvas-first. Bidirectional.

UIX Canvas is the primary design surface — a visual editor that speaks the protocol natively. The Figma plugin provides an additional bridge for teams already using Figma.

  • UIX Canvas — schema-driven visual editor with live protocol sync
  • Figma plugin — converts between Figma nodes and UIXDocuments
  • Bidirectional: design to code and code to design
  • Token resolution — {color.primary} → literal color values
  • Real-time sync via WebSocket push/pull
// From UIX Canvas — native protocol editing
// Or from Figma via plugin bridge
import { figmaToUIX } from '@uix/figma-plugin';

const selection = figma.currentPage.selection[0];
const doc = figmaToUIX(selection, {
  extractTokens: true,
  resolveComponents: true,
});

// Push to server for code generation
await client.push(doc);

QA & Regression

8 categories · semantic

Semantic testing. Not pixel diffing.

UIX understands UI semantically. Regression detection compares property values, not screenshots. The Immune System embeds test metadata directly in the schema.

  • 8 regression categories (layout, color, typography, visibility, semantic, a11y, spacing, interaction)
  • 4-tier selector strategy (data-testid → ARIA → CSS → XPath)
  • Playwright test generation from document comparisons
  • Immune System — test hints embedded in canonical blueprints
  • Coverage tracking per node, regression risk scoring
import { RegressionDetector }
  from '@uix/qa-engine';

const detector = new RegressionDetector();
const regressions = detector.detect(
  oldDocument,
  newDocument,
);

// regressions → [
//   { category: 'layout', severity: 'high',
//     path: 'submit.layout.width',
//     oldValue: 200, newValue: 100 },
// ]

AI Agent Integration

58 MCP tools

AI that reads, writes, and validates UI.

The MCP server exposes the entire UIX platform as tools that AI agents can use — from document CRUD to mind building to code generation.

  • 58 MCP tools across 10 categories
  • Document, Query, Mutation, Analysis, Validation tool groups
  • Version control — init, commit, branch, merge, diff
  • Image-to-App — analyze screenshots and generate apps
  • stdio JSON-RPC 2.0 transport (no SDK dependency)
// In your AI agent configuration
{
  "mcpServers": {
    "uix": {
      "command": "npx",
      "args": ["@uix/mcp"]
    }
  }
}

// The agent can now:
// → uix_document_create
// → uix_mind_build
// → uix_node_insert
// → uix_validate

DevTools CLI

7 commands

Git for UI.

The DevTools CLI brings version control semantics to UI schemas. Push, pull, diff, and watch — just like you do with code.

  • uix init — scaffold .uix config + schema directory
  • uix push — sync local .uix.json files to server
  • uix diff — compare local vs server using the diff engine
  • uix status — quick sync overview
  • uix watch — file watcher with auto-push
  • uix hooks install — git post-commit hook for .uix.json changes
# Initialize a UIX project
$ uix init
✓ Created .uix/config.json
✓ Created schemas/

# Check sync status
$ uix status
Synced:      3 documents
Modified:    1 document (login.uix.json)
Local only:  1 document (settings.uix.json)

# See what changed
$ uix diff login.uix.json
Modified: submit.style.background
  - "{color.primary}"
  + "{color.accent}"

UIX Canvas

21 blueprints · meta-approach

A design tool that speaks protocol.

UIX Canvas is a visual editor built entirely with UIX schemas. The tool that edits UIX documents is itself rendered by UIX — full dogfooding.

  • Schema-driven rendering via UIXRenderer
  • Toolbar, panels, and inspectors are UIX schema factories
  • Light/dark mode with design system tokens
  • UIXFlowGraph — interactive DAG visualization with auto-layout
  • Drag-and-drop node insertion
  • Cursor-centric zoom, pan, selection
// The Canvas toolbar IS a UIX schema
import { buildToolbarSchema }
  from '@uix/canvas/uix-schemas';

const toolbar = buildToolbarSchema(state);
// Returns Record<string, UIXNode>
// Rendered by UIXRenderer — no hardcoded JSX

// This is the UIX meta-approach:
// Zustand State
//   → Schema Factory
//   → UIXNode tree
//   → UIXRenderer
//   → React DOM

Runtime Engine

9-step pipeline · <5ms

Deterministic interpretation pipeline.

The runtime takes a UIXDocument and an environment and produces a fully resolved rendering tree through a 9-step deterministic pipeline.

  • 9 pipeline steps (validate → tokens → variants → physics → chemistry → layout → interactions → bindings → animations)
  • Platform-aware interpretation (screen size, theme, motion preferences)
  • Strict mode for CI (any error throws)
  • Event system (step:start, step:complete, pipeline:complete)
  • Animation resolution with accessibility adaptations
import { UIXRuntime } from '@uix/runtime';

const runtime = new UIXRuntime();
const tree = runtime.interpret(doc, {
  platform: 'web',
  screenSize: { width: 1440, height: 900 },
  theme: 'dark',
  motionPreference: 'no-preference',
});

// tree.nodes['submit'].resolvedStyle
// tree.nodes['submit'].resolvedLayout
// tree.nodes['submit'].resolvedAnimations