/ 目錄 / 演練場 / Magic UI MCP
● 官方 magicuidesign ⚡ 即開即用

Magic UI MCP

作者 magicuidesign · magicuidesign/mcp

Magic UI的動畫組件—模糊淡入淡出、選取框、極光、閃耀—可從聊天中發現,並可安裝到您的React/Next應用程式中。

magic-ui-mcp是Magic UI的官方MCP , Magic UI是現代登陸頁面上使用的動畫元件庫。三種工具— listRegistryItems、searchRegistryItems、getRegistryItem —讓代理程式瀏覽即時的Magic UI登錄、透過自然語言比對元件,以及擷取安裝指令+使用範例。「新增模糊淡入淡出文字動畫」變成:尋找元件、顯示程式碼片段,然後將其複製到應用程式中。 適用於Cursor、Claude Desktop、Windsurf、Cline和Roo-Cline。

為什麼要用

核心特性

即時演示

實際使用效果

magic-ui-mcp.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "magic-ui-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "magic-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@magicuidesign/mcp@latest"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add magic-ui-mcp -- npx -y @magicuidesign/mcp@latest

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: Magic UI MCP

將動畫英雄部分新增到Next.js登陸頁面

👤 前端開發人員和設計人員建立行銷頁面 ⏱ ~15 min beginner

何時使用: 您需要精美的英雄動畫,不想自己瀏覽文件。

前置條件
  • Next.js或React專案 — npx create-next-app @ latest
  • Tailwind + shadcn/ui — Magic UI建立在這些之上;如果遺失,請安裝
步驟
  1. 自然而然地要求它
    在我的英雄部分為H1和CTA添加模糊淡入動畫。✓ 已複製
    → 客服人員呼叫searchRegistryItems以尋找「模糊淡入淡出」並傳回元件
  2. 安裝+電線
    安裝組件並將其粘貼到app/page.tsx中,以替換當前的英雄。✓ 已複製
    → 安裝命令執行;已新增匯入;英雄已更新
  3. 調整時間
    入口較慢— H1和CTA之間延遲600毫秒。✓ 已複製
    → 道具已內聯更新

結果: 無需離開編輯,即可製作適合造船的英雄動畫。

注意事項
  • 將Magic UI與非Tailwind設定混合 — 大多數元件採用Tailwind類別;只有當您準備好進行該工作時,才移植到CSS模組
搭配使用: mcp-echarts

按類別瀏覽所有Magic UI元件

👤 探索圖書館的設計師 ⏱ ~10 min beginner

何時使用: 你還在設計階段,想掃描可供預訂的房源。

步驟
  1. 按類別列出
    列出「動畫」類型的所有魔術UI元件—限制30。✓ 已複製
    → listRegistryItems傳回名稱+標題
  2. 擴展有趣的內容
    向我展示選取框、極光文字、閃亮邊框的詳細資訊。✓ 已複製
    → 完整詳細資訊,包括安裝+每個元件的使用情況

結果: 值得在下一頁嘗試的組件短清單。

將靜態標誌列替換為標誌選取框

👤 行銷/登陸頁面擁有者 ⏱ ~10 min beginner

何時使用: 您的「信任對象」列看起來已過時—捲動選取框會增加動作。

步驟
  1. 尋找選取框
    將「信任對象」列設為標誌的選取框。✓ 已複製
    → 客服人員挑選選框組件並進行調整
  2. 懸停時暫停
    暫停滑鼠懸停選取框,以確保無障礙設施。✓ 已複製
    → 道具/類別調整;保留減少運動的使用者

結果: 看起來很現代並且尊重運動偏好的選取列。

注意事項
  • 忽略prefers-reduced-motion — Magic UI元件通常會尊重它;除非您認識使用者,否則請勿覆寫

組合

與其他 MCP 搭配,撬動十倍槓桿

適用於預先建置元件的魔術UI ,適用於自訂動畫的motion.dev

對英雄使用Magic UI的模糊淡入淡出,然後對下面的自定義滾動鏈接視差使用motion.dev。✓ 已複製
magic-ui-mcp + figma

採用Figma設計,並觸及最近的Magic UI元件

這個Figma卡片部分看起來像Magic UI的便當網格。安裝並填寫文字。✓ 已複製

Figma-to-code流程+ Magic UI增強功能

將Figma轉換為React ;在合理的地方,使用Magic UI元件而不是刮刮元件。✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
listRegistryItems kind?, query?, limit?, offset? 瀏覽或分頁可用的元件 1 registry fetch
searchRegistryItems query + pagination 自然語言元件查詢 1 registry fetch
getRegistryItem id/name 安裝前,請先確認 1 registry fetch

成本與限制

運行它的成本

API 配額
註冊表是公開擷取—正常使用時沒有費率問題
每次呼叫 Token 數
每次通話的小型中繼資料
費用
免費
提示
使用帶有類型過濾器的listRegistryItems ;不要僅僅為了瀏覽而擷取每個項目。

安全

權限、密鑰、影響範圍

憑證儲存: 沒有憑證
資料出站: 唯讀擷取到Magic UI登錄。任何地方都不可寫入。

故障排查

常見錯誤與修復

工具返回空陣列

登錄可能在您的網路中被阻擋;請重試,並確認DNS以magicui.design解析。

驗證: curl -I https://magicui.design/r/index.json
元件已安裝,但看起來沒有樣式

缺少順風配置或CSS變量—遵循Magic UI的一次性設置( globals.css + tailwind.config.ts )。

驗證: Check tailwind.config.ts for magicui plugin
動畫口吃

可能是重新渲染級聯。記憶上層元件;確認沒有佈局劃線。

驗證: Chrome DevTools Performance → Frames

替代方案

Magic UI MCP 對比其他方案

替代方案何時用它替代權衡
motion-dev-animations-skill您想要自訂運動邏輯,而不是元件庫更多工作,更多掌控
figma您在Figma中有要移植的現有設計不同的方向:設計→代碼,而不是圖書館優先
claude-code-design-skills您正在執行Figma-to-code ,而不是函式庫採用涵蓋管道的不同部分

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills