Built for AI agents to ship real UI, framingui is the MCP UI system your agent actually uses.

npx @framingui/mcp-server init

See It in Action

Real UI screens generated with framingui — fully interactive, scroll to explore.

prompt
1
2
3

Choose Your UI System

Pick a theme, copy the prompt, and let your AI agent build the UI.

Color Palette
Primary
1oklch(0.15 0 0)
Background
2oklch(1 0 0)
Card
3oklch(1 0 0)
Foreground
4oklch(0.15 0 0)
Secondary
5oklch(0.96 0 0)
Muted
6oklch(0.98 0 0)
Typography
AaHeadlineBody text sampleLABEL TEXT

Square Minimalism

Minimalist theme with sharp corners, neutral palette, and tight spacing. Best for dashboards and admin tools.

Color Palette
Primary
1oklch(0.1 0 0)
Background
2oklch(1 0 0)
Card
3oklch(1 0 0)
Foreground
4oklch(0.1 0 0)
Secondary
5oklch(0.99 0 0)
Muted
6oklch(0.99 0 0)
Typography
AaHeadlineBody text sampleLABEL TEXT

Editorial Tech

Typography-first theme with generous white space and bold headings. Built for blogs, docs, and long-form content.

Color Palette
Primary
1oklch(1 0 0)
Background
2oklch(0 0 0)
Card
3oklch(0.1 0.01 0)
Foreground
4oklch(1 0 0)
Secondary
5oklch(0.2 0.01 0)
Muted
6oklch(0.05 0.01 0)
Typography
AaHeadlineBody text sampleLABEL TEXT

Dark Boldness

Always-dark theme with sharp components and high-contrast accents. Made for data dashboards and monitoring tools.

Color Palette
Primary
1oklch(0.5 0.25 220)
Background
2oklch(0.96 0.01 210)
Card
3oklch(1 0 210)
Foreground
4oklch(0.1 0.05 210)
Secondary
5oklch(0.88 0.03 210)
Muted
6oklch(0.93 0.02 210)
Typography
AaHeadlineBody text sampleLABEL TEXT

Pebble

Soft-corner components with warm pastel colors. Good for consumer apps, social platforms, and lifestyle services.

Color Palette
Primary
1oklch(0 0 0)
Background
2oklch(1 0 0)
Card
3oklch(1 0 0)
Foreground
4oklch(0 0 0)
Secondary
5oklch(0.95 0 0)
Muted
6oklch(0.98 0 0)
Typography
AaHeadlineBody text sampleLABEL TEXT

Classic Magazine

Print-editorial layout with serif typography and a multi-column grid. For article sites, newsletters, and media publications.

Color Palette
Primary
1oklch(0.55 0.18 32)
Background
2oklch(0.97 0.02 55)
Card
3oklch(0.99 0.01 55)
Foreground
4oklch(0.12 0.01 55)
Secondary
5oklch(0.91 0.03 55)
Muted
6oklch(0.95 0.03 55)
Typography
AaHeadlineBody text sampleLABEL TEXT

Neutral Workspace

Accessibility-first design system built to WCAG AAA standards. Anyone can use it clearly, regardless of age or ability.

Color Palette
Primary
1oklch(0.09 0.04 240)
Background
2oklch(1 0 0)
Card
3oklch(1 0 0)
Foreground
4oklch(0.05 0.04 240)
Secondary
5oklch(0.98 0.005 240
Muted
6oklch(0.98 0.005 240
Typography
AaHeadlineBody text sampleLABEL TEXT

Minimal Workspace

No decoration, pure utility. Built for editors, project managers, and developer dashboards where focus is everything.

Color Palette
Primary
1oklch(0 0 0)
Background
2oklch(1 0 0)
Card
3oklch(1 0 0)
Foreground
4oklch(0 0 0)
Secondary
5oklch(0.95 0 0)
Muted
6oklch(0.98 0 0)
Typography
AaHeadlineBody text sampleLABEL TEXT

Bold Line

Black-and-white theme using 2px borders instead of filled surfaces. Blueprint-style grid for data-heavy professional dashboards.

Ship UI in 3 Steps

From install to production-ready screens in minutes.

1

Install

Run one command to add the MCP server to your agent.

npx @framingui/mcp-server init
2

Choose a UI System

Browse themes and pick the one that fits your product.

3

Generate

Tell your AI agent what to build — it handles the rest.

Frequently Asked Questions

Everything you need to know about framingui.

Install the MCP server, authenticate once, inspect `whoami` for theme entitlements and your 100-unit free quota snapshot, then use the screen workflow to generate and validate production UI.