framingui Documentation

The agentic design system. A complete token architecture that AI agents can actually follow. 0% hallucination by design.

Quick Start

Get up and running in 5 minutes

Installation

npm, pnpm, or yarn — your choice

MCP Integration

Connect with Claude Code, Cursor, Windsurf

Theme Guides

Token, layout, and component guidance for each theme

Explore Themes

Browse 7 production-ready themes

What is framingui?

framingui is an agentic design system — built not for humans, but for AI agents. Traditional design systems provide guidelines that humans interpret. framingui provides structured constraints that LLMs can parse and follow.

The result: when you ask Claude Code, Cursor, or any MCP-compatible tool to build UI with FramingUI, it generates production-ready code with consistent colors, typography, spacing, and components. No more random hex codes. No more magic numbers.

Key Features

→OKLCH Color System — Perceptually uniform, semantic color tokens
→Typography Scales — Fluid, responsive type system
→Spacing Tokens — Consistent rhythm across all components
→30+ Components — Buttons, cards, forms, navigation, and more
→MCP Protocol — Native integration with AI coding tools