Your AI does not have taste.
It never will. But it can read a designer’s judgment if someone bothers to write it down as structured data. That’s what Rafters does.
Every design system on the planet stores token values. Colors, spacing, type scales. Rafters stores the reasoning: why that blue, when to use it, what happens when you pair it with that other blue, and how much cognitive load the resulting component puts on the person staring at it.
pnpx rafters@latest init
pnpx rafters@latest add container grid typography button input editor
Open source. Free. Built because nothing else does this. The Problem is Simple.
Training Data is Bad.
AI builds UIs that look like garbage. Not because the models are bad. Because they have no design intelligence to work with. You hand an LLM a component library and it guesses. It picks the wrong button variant, pairs colors that fight each other, and stacks six high-cognitive-load components on a screen that should have three. It pattern matches what it knows. The top 5000 websites when the learning data was created, good or not, that is what it copies.
Designers know this stuff intuitively. They spent years learning it. But that knowledge lives in their heads, their Figma files, and maybe a Notion doc nobody reads.
Rafters makes it queryable.What Design Intelligence Actually Means.
Not marketing. Structured data that an AI agent or MCP server can query at build time.
Cognitive Load Scoring.
Every component gets a score from 0 to 10 across five dimensions: decision demand, information density, interaction complexity, context disruption, learning curve. A Button scores 3. An AlertDialog scores 7. A screen has a budget. No existing design system measures this.
Color Intelligence.
Pick a color. Get perceptual analysis, harmonic relationships, emotional associations, accessibility scoring, and conflict detection. Every color in the system carries ten or more data structures. Not a picker. A knowledge system. All in OKLCH because color math in sRGB is wrong and everyone knows it.
Do and Never Rules.
Not documentation someone might read. Structured rules an AI agent reads before generating code. Maximum one primary button per section. Never pair a Dialog inside a Sheet. Minimum touch target 44 pixels. The guardrails are the API.
Composition-Level Review.
Components are fine individually. Put six of them together and the page is a mess. Rafters reviews compositions against attention budgets and flags when the total cognitive load exceeds what a human can process.
Get Started.
pnpx rafters@latest init
pnpx rafters@latest add button
You now have a design system with embedded intelligence. Components work immediately with grayscale defaults. Define a Zod schema, get a form that respects your cognitive budget. The MCP server gives your AI agent access to the full intelligence layer: cognitive load, color science, do-and-never rules, composition review.
Run Studio when you are ready to make it yours. Configure spacing progressions, type scales, color relationships, motion philosophy. The mathematical rules that generate your tokens, not a token editor.
How It Compares.
shadcn/ui is a component library. Tailwind is a utility framework. Neither is a design system.
A design system encodes decisions. Why this spacing scale, when to use compact density, what level of cognitive load is acceptable for an onboarding flow versus a power-user dashboard. Rafters encodes all of that as structured data an AI can read.
| What you get | shadcn/ui | Tokens Studio | Knapsack | Rafters |
|---|---|---|---|---|
| Accessible components | Yes | No | Yes | Yes |
| Own your code | Yes | No | No | Yes |
| Cognitive load scores | No | No | No | Per component and per composition |
| Color intelligence | CSS variables | Token values | Token values | OKLCH analysis, harmony, conflicts |
| AI-readable rules | No | No | No | MCP server and JSON registry |
| Composition review | No | No | No | Attention budgets, conflict detection |
| Design decisions tracked | Manual | Token history | Token history | Git-tracked structured data |
| Design reasoning encoded | No | No | No | Yes |
Open Source.
The protocol is free. The CLI, the design tokens, the components, the color utilities, the math utilities, the MCP server, the Studio editor. Everything a solo practitioner or a small team needs to ship interfaces with real design intelligence.