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