Introducing WunderUI - the agentic design system

Design systems were built for humans who read docs. Now a lot of the UI gets written by AI coding agents, and they need something different: explicit rules, real components, and a design language they can't improvise around.

That's why I built WunderUI.

The problem: agents guess

Ask an agent for a billing dashboard and you usually get something that looks almost right:

• colors that are not in your palette, written as hex values
• a table built from divs although your library has a data grid
• transition-all duration-300 ease-in-out on everything
• props that don't exist
• dark mode that is a second set of hand-picked colors

None of this is the agent's fault. It was never told what your system is. Docs written for people are too loose, and a component library without rules has too many ways to go wrong.

What WunderUI is

WunderUI is a design system with two halves that stay in sync:

• a Figma design system with tokens, variants and layouts
• a React component library styled with Tailwind CSS v4 on top of Base UI

The same source of truth drives the design file and the code, and the rules are written so that an agent can follow them.

Right now that means:

• 205 components in 12 categories, from buttons and inputs to a data grid, kanban, charts and a full AI chat set
• design tokens for color, radius, density and motion, in light and dark
• 5 templates and a large set of ready-made screens
• a DESIGN.md and a design.json that any agent can fetch from the website, plus an MCP server for clients that speak it

Rules an agent can actually follow

The DESIGN.md is not a style guide for humans. It is a set of short, testable rules. A few of them:

1. Never hardcode colors. Every value is a CSS variable, used through a Tailwind utility that maps to it: bg-card, text-text-secondary, border-border. Never a hex.
2. Theme by overriding tokens, not by restyling components. Setting --primary on a wrapper re-themes everything inside it.
3. Dark mode is a class on <html>. Never write your own dark colors.
4. Prefer a composite over rebuilding one. Before writing a table, a board or a chat bubble by hand, check the task table. It probably exists.
5. Motion comes from tokens too. duration-fast, ease-entrance. Never a raw duration-300 and never ease-in-out.

There is a "do and don't" section with the mistakes that cost the most time, each as a pair, and a task table that maps "I need a data table with filters" to the right component. An agent reads it once and stops guessing.

Components for agent interfaces

If you build products with agents, you also build interfaces for them: a run with steps, an approval gate, a cost meter, a failure state. WunderUI has components for exactly that, so you don't assemble them from badges and divs:

• AgentStatus for the state of a run
• RunTimeline for its steps and tool calls
• ApprovalCard for the human-in-the-loop moment
• CostMeter for spend
• RunError for when it goes wrong

These agent components are part of the Pro plan.

Skills that build and check

On top of the rules there are agent skills. A skill is a small, versioned instruction set that a coding agent can load. Examples:

• wunderui-screen builds a complete React screen from one sentence, using only the components your plan includes
• wunderui-theme generates a brand theme from one hex color
• wunderui-token-check finds hard-coded colors, spacing and radii that bypass the tokens and maps each one to the nearest token
• wunderui-motion-audit checks animations against the motion rules and proposes a patch

There are 12 skills in total, four of them free.

What is free

I wanted the core to be usable without a purchase:

• 77 components are free and MIT-licensed (source on GitHub: wunder-ui/wunderui). Add one with npx wunderui-cli add button.
• The free skills are MIT as well: npx skills add wunder-ui/wunderui.
• Core and Pro add the remaining 128 components (charts, KPI cards, data grid, app layout, AI and agent components), blocks, templates and all skills. They are yearly plans, and you can find the details on wunderui.com.

The package is not on the public npm registry, so npm install @wunderui/react will not work. The free components come as source through the CLI, and Core and Pro through a private repository.

Try it

The fastest way to see what it does:

1. Add a free component: npx wunderui-cli add button
2. Point your agent at https://wunderui.com/DESIGN.md
3. Ask it for a screen and check the result against the rules

What's next

I'm working on more templates, more agent components and better Figma-to-code sync. If you try it, I'd like to hear where your agent still gets it wrong. That's exactly the feedback that turns a rule from "nice to have" into something written down.

What's the one rule you wish your coding agent followed every single time? Tell me in the comments.

Links: wunderui.com · GitHub · DESIGN.md