Essential MCP Bundle Plugin
一個包含三個核心 MCP servers 的 Claude Code plugin，用於快速轉移到新工作區。
📦 包含的 MCP Servers
1. Zen MCP - AI 工作流程專家工具
- 15 個專業 AI 角色（debug, codereview, analyze, refactor 等）
- 支援 SuperClaude v3 指令整合
- 多模型推理與共識系統
2. Figma Dev Mode - Figma 桌面應用整合
- 通過本地 Figma desktop app 取得設計數據
- 無需 API key，只需開啟 Figma Dev Mode
- 即時讀取元件、樣式、變數定義
3. Chrome DevTools - 瀏覽器自動化與除錯
- 完整的 Chrome DevTools Protocol 支援
- 網頁快照、截圖、控制台監控
- 性能分析、網路請求追蹤
🚀 安裝指南
前置需求
- Zen MCP Server
- 確保已安裝 Python 3.x - 克隆或下載 zen-mcp-server 到本地
- Figma Desktop App
- 安裝最新版本的 Figma 桌面應用 - 確保能正常開啟設計檔案並啟用 Dev Mode
- Node.js & npm
- 用於執行 chrome-devtools-mcp
安裝步驟
方法 1：直接複製到 plugins 目錄
# 複製整個 plugin 目錄到 Claude Code plugins 資料夾
cp -r essential-mcp-bundle ~/.config/claude-code/plugins/方法 2：使用符號連結（推薦）
# 建立符號連結（方便更新）
ln -s /path/to/essential-mcp-bundle ~/.config/claude-code/plugins/essential-mcp-bundle環境變數設定
在 ~/.bashrc 或 ~/.zshrc 中設定：
# Zen MCP Server 路徑（若不在預設位置）
export ZEN_MCP_SERVER_PATH="/your/custom/path/to/zen-mcp-server/server.py"⚙️ 配置說明
Zen MCP 自訂路徑
預設路徑：/home/han/zen-mcp-server/server.py
若您的 zen-mcp-server 安裝在其他位置，請設定環境變數：
export ZEN_MCP_SERVER_PATH="/your/path/to/server.py"Figma Desktop 連接
- 開啟 Figma 桌面應用
- 打開任意設計檔案
- 啟用 Dev Mode（快捷鍵：
Shift + D） - MCP server 會自動連接到
http://127.0.0.1:3845/mcp
注意： Figma desktop app 必須保持運行，MCP 才能正常工作。
Chrome DevTools
首次使用時會自動通過 npx 下載最新版本，無需手動配置。
🔧 使用範例
Zen MCP 專家協作
# 程式碼審查
zen codereview(/sc:analyze 檢查 AuthService.tsx 的安全性)
# 系統性除錯
zen debug(/sc:troubleshoot 分析為什麼滑動功能失效)
# 架構規劃
zen planner(/sc:design 設計用戶認證系統架構)
# 重構建議
zen refactor(/sc:improve 優化 CardList 元件的性能)Figma Dev Mode 整合
// 獲取 Figma 設計元數據
mcp__figma-dev-mode-mcp-server__get_metadata(nodeId: "123:456")
// 獲取設計程式碼
mcp__figma-dev-mode-mcp-server__get_code(nodeId: "123:456")
// 獲取變數定義
mcp__figma-dev-mode-mcp-server__get_variable_defs(nodeId: "123:456")
// 獲取截圖
mcp__figma-dev-mode-mcp-server__get_screenshot(nodeId: "123:456")Chrome DevTools 自動化
// 導航到頁面
mcp__chrome-devtools__navigate_page(url: "http://localhost:3000")
// 獲取頁面快照
mcp__chrome-devtools__take_snapshot()
// 截圖比對
mcp__chrome-devtools__take_screenshot()
// 監控控制台
mcp__chrome-devtools__list_console_messages()📝 故障排除
Zen MCP 無法啟動
問題： Python 路徑錯誤或環境變數未設定
解決方案：
# 檢查 Python 路徑
which python
which python3
# 測試 server 是否能執行
python /home/han/zen-mcp-server/server.py
# 設定正確的環境變數
export ZEN_MCP_SERVER_PATH="/correct/path/to/server.py"Figma Dev Mode 連接失敗
問題： Figma desktop app 未運行或 Dev Mode 未啟用
解決方案：
- 確認 Figma desktop app 正在運行
- 打開任意設計檔案
- 按
Shift + D啟用 Dev Mode - 檢查本地端口 3845 是否開放：
curl http://127.0.0.1:3845/mcpChrome DevTools 下載失敗
問題： npm 網路問題或權限不足
解決方案：
# 手動預先安裝
npm install -g chrome-devtools-mcp@latest
# 或使用國內鏡像
npm install -g chrome-devtools-mcp@latest --registry=https://registry.npmmirror.com🔄 更新與維護
更新 Plugin
# 如果使用符號連結，只需更新源目錄
cd /path/to/essential-mcp-bundle
git pull origin main # 如果是 git repo
# 重啟 Claude Code 以載入更新更新 Chrome DevTools MCP
# 由於使用 @latest 標籤，會自動使用最新版本
# 若需手動更新快取：
npm cache clean --force📄 License
MIT License
🤝 貢獻
歡迎提交 issues 和 pull requests！
Version: 1.0.0 Last Updated: 2025-10-23