io.github.Kl-webmedia由 GitHub 账号 Kl-webmedia 发布v1.2.1更新于 Nov 3, 2026
The WunderUI design system for coding agents: components, props, tokens, rules and skills.
为编码助手提供 WunderUI React 设计系统：组件清单、真实 props 签名、设计令牌、页面模板、起始代码与技能。
Desktop only，通过 STDIO。 STDIO 服务会启动本地进程，因此需要 SourceWeft 桌面宿主。
参照 仓库 中的启动说明。
An MCP server that gives an AI coding agent the WunderUI design system: design tokens, the component inventory with real prop signatures, page templates and starter snippets. The agent builds with the library instead of reinventing a data grid out of raw divs.
Works with Claude Code, Cursor, Windsurf, Cline, Codex, VS Code and any other client that speaks MCP over stdio. No key and no account needed.
Every component carries its plan. On the Free plan, an agent should only use components marked free; the others need WunderUI Core or Pro.
Clients that support MCP resources can attach the design context without a tool call. Read-only, and the same data as the tools above:
The tools stay for clients without resource support.
Claude Code
Cursor: .cursor/mcp.json
Windsurf, Cline, Codex, VS Code: the same shape, in that editor's MCP config.
The server describes the library; it does not ship it. @wunderui/react on npm is WunderUI Free (the free components only). Core and Pro licence holders install the full library from the wunderui-core download (the wunderui-setup agent skill does it for you), and the server tells agents exactly that.
data/design.json and data/DESIGN.md are generated from the WunderUI source with every release: tokens from the stylesheet, props from the built type definitions, names and descriptions from the docs.
The server starts with the bundled copy and answers immediately. In the background it fetches the current design.json and DESIGN.md from wunderui.com and switches to them when they are at least as new, so agents see new components without a package update. get_library_info reports which source is in use.
The same data is served as static files for agents and editors that don't speak MCP:
https://wunderui.com/DESIGN.md: paste at the top of a prompthttps://wunderui.com/llms.txt: the llms.txt conventionhttps://wunderui.com/design.json: the same structured indexStarts the server with a real MCP client and calls every tool once.
package.json and in server.json (top-level version and packages[0].version — the workflow refuses to publish when they differ).vX.Y.Z and push the tag. The Publish to npm workflow publishes to npm (Trusted Publishing) and then publishes server.json to the MCP Registry with GitHub OIDC — no tokens.server.json for a version that already exists on npm.The server code is MIT. The WunderUI components it describes are licensed per plan, see wunderui.com/pricing.
来源：README.md，提交 17381f2
List WunderUI components
The WunderUI component inventory: name, category, plan (free or pro) and one-line description. Filter by category, plan or a free-text query. Call this first to find out whether a component already exists before building one by hand. On the Free plan use only components with plan "free".
planquerycategoryGet a WunderUI component
Everything needed to use one component correctly: its exported names, the TypeScript prop signature straight from the build, a props table per export (type, allowed values, default, required, description), its anatomy (parts and data-slot names), best practices, the CSS variables it reads with their defaults, the import line and a link to its documentation page. Also answers for hooks (signature, parameters, return value, notes), providers and utilities (useToast, ThemeProvider …).
name必填Get WunderUI design tokens
The design tokens for light and dark, in the format you need. Use these instead of hardcoding colours; overriding them is how WunderUI is themed.
themeformatGet the WunderUI DESIGN.md
The complete design context as one markdown document: install steps, the rules an agent should follow, every token, the component inventory with props, and starter snippets. Pull this once at the start of a build.
sectionList WunderUI page templates
Full pages assembled only from WunderUI components — a dashboard, a settings page, an AI inbox and a sign-in screen. Start from one of these instead of an empty file.
无需输入参数。
Get a WunderUI starter snippet
Copy-paste TSX for a common composition, wired with the correct props: an application shell, a dashboard row, a data grid, an AI chat, or the theming pattern.
kind必填Get WunderUI package info
Package name and version, install commands, the stack it is built on, and how many components, categories and templates exist.
无需输入参数。
Get the short WunderUI rules
The short, always-on rules for building with WunderUI (components, tokens, motion, copy) — the text to keep in CLAUDE.md / AGENTS.md. Read this first; use get_design_md for the full context.
无需输入参数。
List WunderUI agent skills
The agent skills that build and check with WunderUI (set up a project, build screens, theme from a brand colour, migrate from shadcn/MUI/Chakra, token check, motion and accessibility audits, Figma). Free skills work for everyone; Pro skills need WUNDERUI_LICENSE_KEY.
无需输入参数。
Get a WunderUI agent skill
Returns one skill's instructions (its SKILL.md) from wunderui.com, so the agent can follow the workflow without installing the skill. Pro skills are sent only with a valid Pro key in WUNDERUI_LICENSE_KEY. Scripts the skill mentions come with the installed skill (wunderui.com/skills).
name必填Get a WunderUI block's source (Pro)
The React source of a UI block (e.g. category 'app', block 'billing'), optionally one screen, plus the shared helpers it imports. Needs a WunderUI Pro key in WUNDERUI_LICENSE_KEY. Use https://wunderui.com/api/registry/index to see every block.
block必填screencategory必填已满足适用检查项的 90%
该评分衡量此收录条目的完整程度，依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价，也不表示服务器安全或当前可用：可连通性是带日期的检查结果，评分也不包含安装量或用户评价。
请在注册中心条目中声明凭据请求头，或保持端点能够响应探测，以便判定其认证方式。
claude mcp add wunderui -- npx -y wunderui-mcpclaude mcp add wunderui -- npx -y wunderui-mcp{ "mcpServers": { "wunderui": { "command": "npx", "args": ["-y", "wunderui-mcp"] } }}npm installnpm run smoke