Pick your design system from a visual console. Add one JSON config block to your project. Claude follows your tokens, components, and rules in every conversation. Zero install required.
{
"mcpServers": {
"aiui": {
"type": "streamable-http",
"url": "https://mcp.aiui.dev/mcp",
"headers": { "Authorization": "Bearer aiui_k_..." }
}
}
}Features
From design tokens to full component recipes, AIUI gives Claude the context it needs to build UI your way.
6 curated design systems with 190+ tokens covering colors, typography, spacing, shadows, and radii.
57 code templates with props, variants, and AI usage rules that Claude follows precisely.
Persistent .aiui/ files Claude reads every conversation, so your design decisions stick across sessions.
Validates generated code against your approved tokens. Catches style drift before it reaches production.
Pick your style pack and components in one guided flow. Preview tokens and export your config instantly.
Get your API key, paste one config block, and start building. CLI-free onboarding in under 60 seconds.
How It Works
No packages to install. No build plugins to configure. Just your design decisions, delivered to Claude.
Visit /quick-setup, enter your email, and receive an API key instantly. No credit card required.
Keys are scoped to your workspace and can be rotated any time from the dashboard.
Paste a single JSON block into your .mcp.json file. Works with Claude Code, Cursor, Windsurf, and more.
Connects your AI tool to your design tokens, components, and rules via MCP.
// .mcp.json
{
"mcpServers": {
"aiui": { "url": "..." }
}
}Ask Claude to sync your design system. It writes .aiui/ files into your project so every conversation follows your rules.
Design tokens, component recipes, and style rules persist across all sessions.
The Difference
Without AIUI, Claude invents styles on the fly. With AIUI, every component follows your exact design system.
Inconsistent styles, inline CSS, arbitrary colors, no design tokens.
// Prompt: "Build me a settings page"
<div style={{ padding: 20 }}>
<h1 style={{ fontSize: 24, color: "navy" }}>
Settings
</h1>
<button style={{
background: "cornflowerblue",
padding: "8px 16px",
borderRadius: 4,
}}>
Save Changes
</button>
</div>Your exact tokens, approved components, consistent output every time.
// Prompt: "Build me a settings page"
<div className="p-6 space-y-6">
<h1 className="text-heading-lg font-semibold
text-gray-900">
Settings
</h1>
<Button
variant="primary"
size="md"
className="bg-primary-600 rounded-radius-lg
shadow-shadow-sm"
>
Save Changes
</Button>
</div>Add one config block. Claude follows your design system in every conversation. Free to start, no credit card required.
{
"mcpServers": {
"aiui": {
"type": "streamable-http",
"url": "https://mcp.aiui.dev/mcp",
"headers": {
"Authorization": "Bearer aiui_k_..."
}
}
}
}