Integrate Figma MCP and Shadcn MCP to build UI

透過 Figma MCP 與 Shadcn MCP 透過與 AI 聊天打造前端介面

#unsorted

前言

UI 通常仰賴設計者與前端耗費大量時間精力進行組織與維護，近期工作上進行前端翻新也遇到大量陳舊代碼需要翻皮的作業，問題是誰有時間一個一個重新替換？

身為開發者就是要又懶又聰明，嘗試串上 Figma MCP 與 Shadcn MCP Server 讓我們透過與 AI 聊天就能精準打造前端介面。

Figma MCP

目前本地 Figma 軟體🔗 提供 beta MCP Server🔗 功能，且設置起來十分簡單，不到三步驟！

  "mcpServers": {
    "Figma Dev Mode MCP": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }

開始 Prompt！舉例：

Take the selected frame in Figma and convert it to a website layout using HTML and tailwind CSS

以上就能透過和 AI 對話直接從 Figma 生成可用的介面代碼，最好可以留意 Figma MCP 最佳實踐🔗：

對任何需要重複使用的元素使用元件（例如按鈕、卡片、輸入框等）。
透過 Code Connect🔗 將元件連結到程式碼庫。這是確保程式碼中一致性重用元件的最佳方式。若沒有這麼做，模型只能依靠猜測。
使用變數來設定間距、顏色、圓角和字體。
語義化命名圖層（例如用 CardContainer，而不是 Group 5）。
使用 Auto layout🔗 來表達響應式設計的意圖。

如果對於重複提醒 AI 如何更好的使用 Figma MCP，官方也有提供通用的範例規則🔗：

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

很多時候從頭打造一個可用的設計系統不太實際，於是最成熟最快速且免費開源的方案接下來我選擇 Shadcn。

Shadcn MCP

Shadcn 是目前前端最熱門的開源元件集，各種主流框架皆有支援（React、Vue、Svelte），透過 Shadcn MCP🔗 安裝提供 AI 適當的工具快速搭建對應框架的元件集。最好能附上 GitHub Token🔗，原因是因為 Shadcn MCP 背後是透過 GitHub API 來取得 Shadcn 元件集相關資料，為了避免頻繁查詢被限速阻擋才需要提供。

  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "ghp_your_token_here"
      ]
    }
  }

官方也有提供範例 Prompts🔗 與其互動，例如：

"Show me the shadcn/ui button component"
"Show me how to use the card component"
"Get the dashboard-01 block implementation"
"Help me build a login form using shadcn/ui components"

Figma & Shadcn & AI 的組合互動

當開發環境設置好 Figma MCP 與 Shadcn MCP 後，透過適當的指令和操作就能從 AI 調用 MCP 的工具與上下文達成更好且更一致的 UI 創建：

Take the selected frame in Figma and covert it to a website layout using Shadcn vue as much as possable, modify content in baz.vue

舉例透過引入現成的 Figma 元件與變數實踐：@shadcn/ui components with variables & Tailwind classes - Updated July 2025🔗 能夠快速的打造產品的視覺並與前端切齊所有使用到的 UI 變數與常見元件。透過 Figma MCP + Shadcn MCP，在 Vibe Coding 同時也能使用現成的元件集或畫面變數，鼓勵元件邏輯的重複使用與採納現有輪子。

總結

發現對於小團隊來說維護一套設計系統與前端元件是不太實際的事，如果前端能把時間著重在進行產品商業層面與使用體驗的規劃，且交由 AI 學會引用已經定義好的最佳實踐，我們將能解放生產力做更多有意義的事。

在這基礎之上還有許多細節可以更好的地方，像是如果 Figma 稿件實踐起來模糊不清，產出的代碼也會相同的爛，還有自動測試案例的撰寫。

上面看起來一連套串接好像很厲害，能做出不錯的東西，但實際嘗試 AI 還是有不少很蠢的時候，這項技術嘗試很好，但距離實際應用還待實驗與觀望⋯⋯

全站搜尋

透過 Figma MCP 與 Shadcn MCP 透過與 AI 聊天打造前端介面

前言

Figma MCP

Shadcn MCP

Figma & Shadcn & AI 的組合互動

總結

延伸閱讀