AIDesigner MCP 伺服器

概覽

AIDesigner MCP 伺服器是一款輕量級的 Model Context Protocol (MCP) 伺服器，它彌合了強大的 AI 程式碼輔助工具與專業 UI/UX 設計之間的差距。它解決了像 Claude Code 這類工具最大的弱點之一 —— 原生 UI 設計能力不足 —— 讓它們能夠直接在編輯器內部存取智能設計工具。

該伺服器讀取你的專案框架、元件庫、CSS/Tailwind 樣式權杖與設計系統，然後生成可直接投入生產的 UI 程式碼，無縫整合到你現有的技術堆疊中。不再需要在 Figma 和程式碼編輯器之間切換，也無需手動修復 AI 生成的設計。

主要功能

1. 基於程式碼庫的設計生成：在建立 UI 之前，先分析你的專案以理解框架、元件和樣式權杖。
2. generate_design 工具：將自然語言提示轉化為可直接投入生產的 UI 元件和頁面。
3. refine_design 工具：使用對話式指令，迭代式地改進佈局、顏色、間距和樣式。
4. 直接程式碼整合：輸出可直接放入你的程式碼庫而無需手動調整的程式碼。
5. OAuth 身分驗證：安全的登入流程，由 MCP 主機自動處理權杖刷新。
6. 廣泛相容性：可與 Claude Code、Codex、Cursor、VS Code (Copilot Agent 模式) 及 Windsurf 協作。
7. 零摩擦設定：透過單一 npx 命令即可安裝和配置。

支援的 AI 程式碼工具

1. Claude Code：完整的引導式工作流程，支援 /mcp 命令和專用代理。
2. Cursor：為 AI 驅動的編輯提供無縫整合。
3. Codex：支援專案層級的配置。
4. VS Code / GitHub Copilot：相容 Agent 模式。
5. Windsurf：支援使用者範圍的配置。

安裝與設定

1. 在你的專案中執行初始化命令：

   npx -y @aidesigner/agent-skills init <host> --trust-project
   

   (將 <host> 替換為 codex、cursor 等)

2. CLI 會註冊 MCP 伺服器並開啟瀏覽器視窗進行 OAuth 登入。

3. 透過你的 AI 輔助工具的 MCP 面板進行連接 (例如，在 Claude Code 中執行 /mcp 並選擇 "aidesigner")。

4. 開始提示："生成一個支援暗色模式的現代化定價頁面" 或 "精煉這個儀表板以使用我們的品牌顏色。"

詳細的設定指南、工具參考和疑難排解可在 官方文件 中找到。

使用案例

1. 快速前端原型設計：在幾分鐘內從想法到精緻的 UI，無需離開你的編輯器。
2. 設計系統合規性：確保所有生成的元件都尊重你現有的樣式權杖和元件。
3. 迭代式 UI 精煉：使用自然語言調整佈局、無障礙性或響應性。
4. 全端開發：與程式碼代理結合，構建包含美觀介面的完整功能。
5. 團隊協作：在 AI 輔助開發和手動開發中保持一致的設計品質。

技術細節

• 協定: 模型上下文協定 (MCP) — 標準化的工具與上下文暴露機制。
• 發布方式: 可透過 npm 取得（@aidesigner/agent-skills 及相關套件）。
• 認證機制: 基於 OAuth 並帶有自動令牌管理功能。
• 現況: 持續積極開發中；v0.1.0 版本已發布，並於 Product Hunt 獲得初期強勁的採用率。

AIDesigner MCP 將 AI 編碼助手從單純的程式碼生成器，轉變為完整的設計與編碼協作夥伴，讓每位開發者都能輕鬆打造美觀且具備產品級品質的使用者介面。

請造訪 aidesigner.ai 以獲取更多資訊、觀看線上演示，並取得最新動態。