Documentation
Why AIUI exists
AIUI is the design control layer for AI coding assistants. It ensures every AI-generated component matches your brand, every time.
The Problem
AI coding assistants are transforming how software gets built. Tools like Claude Code, Cursor, and Copilot can generate entire UI components in seconds. But there is a fundamental problem: they have no awareness of your design system.
Every time an AI generates a component, it makes its own decisions about colors, typography, spacing, and structure. The result is a patchwork of inconsistent styles that look nothing like your brand.
Inconsistent output
AI tools pick different colors, fonts, and spacing every time they generate a component. A button in one prompt looks completely different from a button in the next.
No design system enforcement
Designers create design systems with specific tokens and rules, but AI tools have no way to access or follow them during code generation.
Manual cleanup wastes time
Teams spend hours adjusting AI-generated code to match their brand guidelines. The speed advantage of AI disappears in rework.
Brand drift at scale
As more developers use AI to ship faster, the UI drifts further from the original design system. Consistency becomes impossible to maintain.
How AIUI Works
AIUI sits between your design system and your AI coding tools. It uses the Model Context Protocol (MCP) to feed your design tokens, component patterns, and brand rules directly into the AI assistant's context window, so every generated component is on-brand from the start.
Define your design tokens
Set your colors, typography scale, spacing units, shadows, and border radii in the AIUI dashboard. Import from Figma, Tailwind configs, or start with a pre-built style pack.
Create component recipes
Define approved component patterns with specific token usage. A 'primary button' recipe specifies exactly which background color, text size, padding, and border radius to use.
Connect via MCP
Add one configuration block to your AI tool. AIUI serves your design system over the Model Context Protocol, so the AI reads your tokens before generating any code.
Generate consistent UI
When your AI assistant builds a component, it pulls your tokens and recipes from AIUI automatically. The output matches your design system without any manual correction.
Key Features
Design Token Management
Centralize all your design primitives in one place. Define colors, typography, spacing, shadows, and border tokens with precise values. Changes propagate instantly to every connected AI tool.
Component Recipes
Go beyond tokens with full component patterns. Define how a card, modal, or navigation bar should be structured, including which tokens to apply to each element. AI assistants follow these recipes exactly.
Style Packs
Start fast with pre-built design systems. Style packs like 'SaaS Clean' and 'Dashboard Pro' provide a complete set of tokens and recipes you can activate instantly or customize to fit your brand.
Design Validation
AIUI validates AI-generated code against your design rules. Catch token mismatches, unapproved colors, or spacing violations before they ship to production.
Multi-IDE Support
Works with every major AI coding environment through MCP. One design system definition powers consistent output across Claude Code, Cursor, Windsurf, and VS Code with Copilot.
Visual Studio
A visual editor for designing and previewing your tokens in real time. See how your color palette, typography, and spacing look together before connecting them to your AI tools.
Supported Tools
AIUI connects to AI coding assistants through the Model Context Protocol. Any tool that supports MCP can use AIUI as a design context source.
Claude Code
Terminal commandAnthropic's CLI for Claude. Connect with a single terminal command. Full MCP support with streaming.
Cursor
.cursor/mcp.jsonAI-first code editor. Add AIUI to your .cursor/mcp.json configuration file for project-level design enforcement.
Windsurf
MCP settingsCodeium's AI IDE. Configure via the MCP settings panel. Design tokens load automatically in every Cascade session.
VS Code + Copilot
settings.jsonGitHub Copilot in VS Code. Add AIUI to your VS Code settings.json under mcp.servers for Copilot Chat integration.
Getting Started
You can connect AIUI to your AI coding assistant in under a minute. The quick setup flow creates an account, generates an API key, and gives you the exact configuration to paste into your tool.
Ready to get started?
Create an account and connect your first AI tool. The setup takes less than 60 seconds.