new1

color12

radius4

font3

spacing6

shadow3

elevation3

Add to .mcp.json in your target project:

{
  "mcpServers": {
    "aiui": {
      "type": "streamable-http",
      "url": "http://localhost:8080/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

{
  "mcpServers": {
    "aiui": {
      "command": "npx",
      "args": ["tsx", "<path-to-AIUI>/apps/mcp-server/src/index.ts"],
      "env": {
        "DATABASE_URL": "postgresql://aiui:aiui@127.0.0.1:5432/aiui"
      }
    }
  }
}

Ask Claude to sync your design system. This creates persistent memory files that Claude reads automatically:

Claude will call sync_design_memory which generates:

• .aiui/design-memory.md — Full design context: tokens, components, rules
• .aiui/tokens.json — Machine-readable token values

Add this to your project's CLAUDE.md so Claude loads the design memory in every conversation:

# Design System
This project uses AIUI for design management.
See `.aiui/design-memory.md` for the active design system — tokens, components, and rules.
Always follow the design rules defined there before building any UI.

The flow

1. 1You ask Claude to build UI — Claude reads .aiui/design-memory.md automatically
2. 2Claude knows your 31 tokens, 1 components, and design rules from memory
3. 3Claude calls get_component_recipe to get the full code template for each component it needs
4. 4Claude generates on-brand code using your exact tokens and component patterns
5. 5Claude calls validate_ui_output to verify compliance — catches hardcoded colors and wrong fonts

Try it