DESIGN.md

~39 KB markdown

One document that describes the whole system: how to install it, which rules to follow, every token, all 201 components with their real prop signatures, and a few starting points. Paste it at the top of a prompt and the agent stops guessing.

Open DESIGN.md Or connect the MCP server

How to use it

Copy it into the chat, save it next to your code, or let the agent fetch it. In a repository that uses WunderUI, keeping a copy at the root works well — most agents read it on their own.

bash

# put it in your project
curl -o DESIGN.md https://wunderui.com/DESIGN.md

# or straight to the clipboard
curl -s https://wunderui.com/DESIGN.md | pbcopy

Already using an AGENTS.md or CLAUDE.md? One line is enough:

markdown

## UI

This project uses @wunderui/react. Read ./DESIGN.md before writing any interface code
and build from its components instead of raw markup.

What's inside

Section	Contents
Install	The npm command, the Tailwind entry point, the import line.
Rules for agents	Eight instructions that stop the most common mistakes.
Tokens	Every color and radius token, light and dark, in one table.
Component inventory	All 201 components by category, with related exports.
Props	The TypeScript signature for each component, taken from the build.
Templates	The full-page templates and what each is assembled from.
Starting points	App shell, dashboard row and the theming pattern as TSX.

The rules

The part that changes the output most. These eight lines are what keep an agent from inventing colors or rebuilding a table that already exists.

1Never hardcode colors — use the utility that maps to the token.
2Theme by overriding tokens, not by restyling components.
3Dark mode is a .dark class on <html>.
4The package is client code with a “use client” banner.
5Import from the package root, never from dist/ or src/.
6cn is not re-exported — import it from the cn package.
7Prefer a composite over rebuilding one by hand.
8Charts take a loading prop; do not build your own skeleton.

Pull one section

The full document is long. Through the MCP server an agent can ask for just the part it needs, which keeps the context window free for your actual code.

text

get_design_md(section: "rules")       → the eight rules
get_design_md(section: "tokens")      → the token tables
get_design_md(section: "inventory")   → the component list
get_design_md(section: "props")       → every prop signature
get_design_md(section: "templates")   → the page templates