# AIDesigner MCP 伺服器

一個輕量級的 MCP 伺服器，讓 AI 編碼助手（如 Claude Code、Cursor、Codex、VS Code/Copilot 和 Windsurf）能夠直接在您的程式碼庫中生成、優化和整合生產就緒的 UI 設計。

Canonical URL: https://a2a-mcp.org/entry/aidesigner-mcp-zh-TW

Language: zh-TW

Category: MCP Servers

Updated: 2026-04-08

## 概覽

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.  在你的專案中執行初始化命令：
    ```bash
    npx -y @aidesigner/agent-skills init <host> --trust-project
    ```
    (將 `<host>` 替換為 `codex`、`cursor` 等)

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

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

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

詳細的設定指南、工具參考和疑難排解可在 [官方文件](https://www.aidesigner.ai/docs/mcp) 中找到。

## 使用案例

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

## 技術細節

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

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

請造訪 [aidesigner.ai](https://www.aidesigner.ai/) 以獲取更多資訊、觀看線上演示，並取得最新動態。

## Tags

- mcp
- mcp-server
- ui-design
- 前端
- claude-code
- cursor
- ai-編碼
- 設計系統
- tailwind
- 元件庫

## Sources

- [Project website](https://www.aidesigner.ai/docs/mcp)