AI导哈

MCP插件包

一个包含Zen MCP、Figma Dev Mode和Chrome DevTools三个核心MCP服务器的Claude Code插件，用于快速转移到新工作区。

  • by chuanhan1013
  • Shell
  • 本地部署
  • 更新于
在 GitHub 查看 Stanley-1013/claude_plugin-zen-figma-chrome-

使用说明

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 支援
  • 網頁快照、截圖、控制台監控
  • 性能分析、網路請求追蹤

🚀 安裝指南

前置需求

  1. Zen MCP Server

    • 確保已安裝 Python 3.x
    • 克隆或下載 zen-mcp-server 到本地

  2. Figma Desktop App

    • 安裝最新版本的 Figma 桌面應用
    • 確保能正常開啟設計檔案並啟用 Dev Mode

  3. 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 連接

  1. 開啟 Figma 桌面應用
  2. 打開任意設計檔案
  3. 啟用 Dev Mode（快捷鍵：Shift + D）
  4. 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 未啟用

解決方案：

  1. 確認 Figma desktop app 正在運行
  2. 打開任意設計檔案
  3. 按 Shift + D 啟用 Dev Mode
  4. 檢查本地端口 3845 是否開放：
    curl http://127.0.0.1:3845/mcp

Chrome 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

相关 MCP