MCP 是什麼?讓 Claude 不只給建議、還能直接動手改你的 Figma 和 n8n
前言
你問 AI 該怎麼改 n8n 流程,它給你一串清楚步驟——然後呢?你還是得自己打開後台照著點。AI 想得到、卻碰不到你的工具,中間那段手動搬運才是最吃時間的地方。MCP(Model Context Protocol)就是來補這個斷層:讓 Claude 不只給建議,而是直接伸手進你的 Figma、n8n 把事做掉。這篇用白話講清楚 MCP 是什麼、怎麼運作、怎麼接,最後才聊我接案下來的真實心得。
想看官方定義可參考 MCP 官方文件,想找有哪些工具能接,可逛我整理的 AI 工具排行榜。
MCP 是什麼?讓 AI 接上工具的標準介面
MCP(全名 Model Context Protocol,模型上下文協定)是 Anthropic 在 2024 年底開出的一套開放標準,用一種統一的方式讓 AI 連到外部的工具、檔案和資料。在它出現之前,AI 想接一個工具,工程師就得為那個工具單獨寫一套對接程式;MCP 把這件事標準化了,工具只要照規格做好一次,任何支援 MCP 的 AI 都能直接用,不必每家各做一套。
一句話定義:AI 工具界的共通插座
把它想成 AI 工具界的共通插座。以前每接一種工具,就像每種電器配一種插頭,雜亂又得各做各的;統一規格之後,同一個接口什麼都能插。對 AI 來說,這個共通規格省掉的,就是過去每接一個工具都要重寫一次對接程式的功夫——這也是為什麼 MCP 一出來,能接的工具會像滾雪球一樣愈長愈多。
拆成兩半:MCP client 與 MCP server 怎麼分工
MCP 運作時分成兩個角色。一邊是 MCP server(工具端):Figma、n8n、Google Drive 各有一個對應的 server,負責把這個工具會做的事,翻成 AI 看得懂的指令清單。另一邊是 MCP client(AI 端),像 Claude Desktop 或 Claude Code,負責去呼叫這些 server。你把一個 server 接上 client,Claude 就多學會一項技能。
為什麼 OpenAI、Google 後來都跟進
MCP 雖然是 Anthropic 帶頭做的,但一開始就走開放標準路線,任何人都能照規格做自己的 server。生態因此長得很快,OpenAI、Google 等後來也宣布支援同一套協定。對你的實際好處是:今天為 Claude 接好的工具,日後換別的 AI 大多能共用,這份功夫不會白費。這也是我會建議現在就花點時間搞懂它的原因。
📖 延伸閱讀:n8n + Claude Code 自動產生社群貼文:AI 小編生成器製作教學
MCP 的運作架構:大腦、接線、工具三層
把整套東西攤開,其實只有三層:Claude 是大腦負責想、MCP server 是接線負責傳、底層工具負責真的去做。先把這三層的分工看懂,後面設定就不會手忙腳亂。
Claude:聽懂你要什麼、決定派哪個工具
不管是桌面版的 Claude Desktop,還是終端機裡的 Claude Code,扮演的都是「大腦」。你用白話說需求,例如「看一下我這個 n8n 流程哪裡會出錯」,Claude 會自己判斷該動用哪個工具、要查什麼,再透過 MCP 把指令送出去。你不必交代技術細節,只要把想做的事講清楚,剩下交給它接手。
MCP server:一個工具配一個,當 Claude 和工具的翻譯
每一個你想接的工具,都對應一個 MCP server——Figma 一個、n8n 一個。它就像一位翻譯,把「Claude 想做的事」轉成「這個工具實際能執行的動作」,再把結果翻回去給 Claude。你接的 server 越多,Claude 能伸的手就越多。
一次請求實際怎麼跑
把三層串起來看一次完整流程:你打一句「幫我把 n8n 裡那條詢價分類流程加一個通知節點」→ Claude(大腦)判斷這要動 n8n,挑出對應的動作 → 指令透過 MCP 傳給 n8n 的 server(接線) → server 翻成 n8n 聽得懂的 API 呼叫,實際去改流程(工具動手)→ 結果再原路翻回來,Claude 回報你「加好了」。整段你只出一句話,中間的翻譯和執行都被這三層接力包掉了。
直接問 AI vs 透過 MCP,差在哪
同一件事,有沒有接 MCP,體感差很多。把最常見的三個面向擺在一起就很清楚:
| 面向 | 直接問 AI | 接上 MCP |
|---|---|---|
| 拿到的東西 | 一段文字建議,要自己照做 | 直接幫你在工具裡把事做掉 |
| 出錯機率 | 你手動搬運,容易漏步驟或貼錯 | AI 照真實資料操作,少了人工轉手 |
| 能不能落地 | 停在「它說該怎麼做」 | 走到「它已經幫你做好」 |
一句話總結:沒接 MCP 的 AI 是顧問,只能出主意;接上 MCP 的 AI 是助理,能實際動手。
怎麼幫 Claude 裝上第一個 MCP server
接一個 server 比想像中簡單,核心只有一件事:告訴 Claude「去哪裡找這個工具、用什麼身分用它」。
兩種接法:Claude Desktop 設定檔 vs Claude Code 指令
第一種走 Claude Desktop(桌面 App):把要接的 server 資訊寫進它的設定檔、重開就生效,適合喜歡圖形介面的人。第二種走 Claude Code(終端機版):一行指令就把 server 加進來,適合習慣打指令的人。兩種底層是同一套 MCP 協定,能接的工具完全一樣,挑順手的就好。
設定要填的就那幾格
不管哪一種接法,要你提供的資訊其實就那幾項。與其貼一堆看不懂的設定碼,不如直接看這張表,知道每一格是幹嘛的:
| 欄位 | 填什麼 | 白話說明 |
|---|---|---|
| 名稱 | 自己取,例如 figma、n8n | 給這個 server 取個代號,方便之後辨認 |
| 啟動指令 | 該 server 的執行指令(官方文件會給) | 告訴 Claude 怎麼把這個工具叫起來 |
| 金鑰/網址 | 該工具的 API key 或服務網址 | 證明「你有權限用這個工具」的通行證 |
以接 n8n 為例,要填的「金鑰」和「網址」就藏在後台。打開 n8n 的設定 → n8n API,按「Create an API Key」產一把金鑰,再配上你的 n8n 部署網址,這兩樣就是讓 Claude 能操控你 n8n 的鑰匙:
Figma 的接法不一樣:開內建的 Dev Mode MCP Server
Figma 不用像 n8n 那樣自己產金鑰,因為官方在桌面版 App 裡內建了一個 Dev Mode MCP Server。打開 Figma 桌面版,到偏好設定(Preferences)勾選「Enable Dev Mode MCP Server」,它就會在你本機跑起一個 server,給你一個本機網址(localhost)。回到 Claude,把這個本機網址當成要接的 server 加進去就好——不用填金鑰,因為 server 跑在你自己電腦上,本來就只有你能碰。
一點要先講清楚:這個官方 Dev Mode MCP Server 需要 Figma 的 Dev 或完整付費席次才能開啟。確切的開啟位置與要貼進 Claude 的網址,Figma 官方說明頁會直接給你,照著貼即可:Figma Dev Mode MCP Server 官方指南。多數官方或社群做好的 server,說明頁都附了可直接複製的設定範例,你通常只要把金鑰那一格換成自己的,不用從零寫起。
怎麼確認接成功了
接好、重開之後,最簡單的驗證就是直接問 Claude:「你現在可以用哪些工具?」如果它列出你剛接的那個(例如 n8n),就代表接通了。再進一步丟個小任務測試,例如請它「列出我 n8n 裡的工作流程」,看它有沒有真的回報出資料。有資料回來,就代表 Claude 的手真的伸進你的工具裡了。
不想自己一個個試著接、也不確定先從哪個工具串起?我可以從你最花時間的那段流程開始,幫你把 AI 接進工作流。
看 n8n 自動化與 AI 應用開發服務 →我實際串 Figma 和 n8n 的過程與心得
我平常這套 Claude Code 同時掛著好幾個 server,各司其職:n8n 那個讓它查我有哪些自動化流程、節點怎麼設,甚至直接幫我搭新流程;Figma 那個讓它讀得到設計稿;Google Drive 負責找檔案。一行指令就能列出接了哪些、連線正不正常:
重點不在接了幾個,而是這些工具我本來就在用,差別只是現在 Claude 能直接伸手進去動。
n8n MCP:寫這篇時我就在用它查節點
n8n MCP 是我自己最常用的一個。接上之後,Claude 能幫我查 n8n 有哪些節點、每個怎麼設定,甚至直接幫我建立一整條工作流程、跑測試、抓出設定錯的地方。以前我得自己翻文件、一個個試節點;現在我用白話描述「我想做一條每天抓競品貼文、分類後寫進表格的流程」,它就把骨架搭出來給我調整。這等於把搭流程的雜活外包給 AI,我只留下做判斷的部分。
📖 延伸閱讀:n8n + Apify 社群監控:一次追蹤 5 個平台的競品動態
Figma MCP:看懂設計稿、直接轉程式碼,但挑團隊
Figma MCP 接上之後,Claude 能直接讀你的設計稿——畫面上的元件、顏色、間距、文字都看得到。最實用的場景是把設計稿直接轉成程式碼:你給它一個 Figma 連結,請它照著做出對應的網頁畫面,它能參考真實的設計細節,而不是憑你的口頭描述瞎猜。
不過試了幾輪之後,我得誠實講一個心得:Figma MCP 現階段比較吃大型、而且已有成熟設計系統的團隊。適合與不適合的分界大概是這樣:
- 用得上的團隊:已經建好 Code Connect、Design Token,設計稿和程式碼的對齊度高,設計師、工程師合作緊密——這種團隊接上之後,AI 才能照著既有規範精準產出。
- 暫時用不上的:小團隊、設計系統還不完整,或習慣傳統工作流程的話,現階段的學習成本,很可能大於實際收益。
說白一點,MCP 的甜蜜點落在「設計與工程的交界」,但這正是它的限制——設計師通常不熟工程那套流程,工程師的設計美感又常差一點。除非你是兩者兼具的設計工程師,或在分工夠成熟的大型團隊,否則現階段它能幫上的忙有限。(也歡迎工程師朋友跟我分享你們實際使用的心得。)
📖 延伸閱讀:Claude 產出的網頁太 AI 味?Claude Design 協同設計讓 UI/UX 質感飛躍
其他能接的工具:幾乎你在用的都有
Figma 和 n8n 只是開頭。MCP 生態成長得很快,從檔案、文件、開發到資料庫、瀏覽器,幾乎都有對應的 server。這張表幫你快速看懂各類可以接什麼:
| 類別 | 常見可接的工具 | 接上之後 Claude 能幫你做什麼 |
|---|---|---|
| 設計 | Figma | 讀設計稿、轉成網頁程式碼 |
| 自動化 | n8n、Zapier | 查節點、搭工作流程、跑測試 |
| 文件/檔案 | Google Drive、Notion | 找文件、讀內容、整理筆記 |
| 開發協作 | GitHub、Slack | 看程式碼、查 issue、發訊息 |
| 資料庫 | PostgreSQL 等 | 用白話查資料、整理報表 |
| 瀏覽器 | Playwright 等 | 自動開網頁、抓資料、截圖 |
看到這張表,大概就懂我前面說的「共通插座」是什麼意思了——重點不是某一個工具特別強,而是你可以把它們全部接到同一個 Claude 上,讓它變成一個橫跨各種工具的助手。
用下來最大的感受:AI 真正值錢的是「能動手」
把這些工具接上 Claude、實際拿去接了幾輪案子之後,我最深的感受其實很簡單:AI 真正幫我省時間的,不是它「懂很多」,而是它「能動手」。最有感的一次是幫客戶搭一條有點雜的 n8n 流程——把每天進來的詢價自動分類、再分派給對應的窗口。我沒有自己埋頭拉節點,而是把整段需求用白話講給 Claude 聽,請它透過 MCP 直接把骨架搭出來,我再順著它的成果調細節、補上客戶要的條件。那種「我在出題、它在動手」的分工,跟一個人埋頭做苦工完全是兩回事。
也是從這裡開始,我的角色變了:從一個埋頭執行的人,變成出題的人——把需求講清楚、確認它搭的方向對不對、最後為品質把關。對我來說,這才是 MCP 帶來的真正改變:它沒有讓我變得更輕鬆,而是讓我能把力氣花在判斷和把關上,把那些雜活放心交出去。
常見問題 FAQ
Q1:我沒有工程師背景,也能用 Claude 串接 MCP 嗎?
可以。串接 MCP 最難的部分其實不是寫程式,而是「照著官方說明把設定填對」。大部分做好的 MCP server 都會附上可以直接複製的設定範例,你通常只要把自己的金鑰換進去就行。真正需要的不是寫程式能力,而是願意照步驟試一次的耐心。卡住的時候,你甚至可以直接把錯誤訊息貼給 Claude,請它幫你看哪裡填錯。
Q2:MCP 跟一般直接問 AI 有什麼不同?
差別在於「AI 能不能碰到你的東西」。一般問 AI,它只能根據你貼進去的文字回答;接上 MCP 之後,它能直接讀你的 Figma、操作你的 n8n、查你的檔案。簡單說,沒有 MCP 的 AI 是「顧問」,只能出主意;接上 MCP 的 AI 是「助理」,能實際幫你動手做。
Q3:Claude Desktop 和 Claude Code 哪個比較適合接 MCP?
看你習慣。喜歡圖形介面、想點選操作的人,用 Claude Desktop 把設定寫進設定檔即可;已經習慣在終端機打指令的人,Claude Code 用一行指令就能加好 server,更快。兩者背後是同一套 MCP 協定,能接的工具一模一樣,沒有誰功能比較少的問題。
Q4:n8n 要先學到什麼程度,才能用 MCP 跟 Claude 一起搭流程?
你只要知道 n8n 的基本概念——節點、觸發、工作流程大概是什麼——就可以開始了。你不需要記得每個節點怎麼設定,因為那正是 Claude 接上 MCP 後能幫你的事。實務上很多人是「邊用邊學」:請 Claude 搭出流程,再回頭看它怎麼接,反而學得比看教學還快。
Q5:接 MCP 安全嗎?會不會讓 AI 亂改我的東西?
MCP server 能做多少事,取決於你給它的金鑰權限,所以建議一開始先用唯讀或測試用的帳號接,確認 Claude 的行為符合預期再放寬。重要操作(例如刪除、發布)大多會需要你按確認,不會無聲無息地動手。只接你信任來源的 server,不要隨便接來路不明的,就能避開大部分風險。
總結
回頭看,MCP 真正改變的不是 AI 有多聰明,而是它從「只能給建議」變成「能伸手幫你做事」。搞懂這套協定,等於幫你的 AI 助理裝上一雙手,讓它能直接讀 Figma、搭 n8n、查資料、開網頁——而你要做的,只是把想做的事說清楚,再把工具接上去。
如果你只想先跨出第一步,我會建議從你最常用、最常複製貼上的那個工具開始接起,先體會一次「AI 真的幫我動手」的感覺。真正的關鍵不是學會所有設定,而是想清楚你要它幫你做什麼——這正是 AI 不取代判斷、只精準執行想法的精神所在。
如果你也想把 AI 接進自己的工作流程、卻不知道該從哪個工具開始串,歡迎看看我提供的 n8n 自動化與 AI 應用開發服務,從需求訪談開始幫你把流程接起來。
同主題文章
AI Agent
AI 為什麼不用人下指令,也會自己開始工作?拆解 AI Agent 的排程與事件觸發機制
為什麼有些 AI 不用你開口,就會自己定時整理報表、收到訂單自動處理?這篇拆解 AI Agent 的排程(Schedule)與事件觸發(Trigger)機制,看懂主動式 AI 怎麼自己開始工作,以及 Trigger 和 Workflow 差在哪。

AI 為什麼只需要一句指令,它就知道怎麼做?看懂 AI Agent 的推理與規劃能力
為什麼你只講一句話,AI 就自己拆解、一步步把任務做完?看懂 AI Agent 的推理(Reasoning)與規劃(Planning):它怎麼先想清楚問題、再排出步驟,以及先想好全部和邊做邊調整兩種風格差在哪。

AI 為什麼總是忘記你說過的話?AI Agent 的記憶(Memory)運作原理一次看懂
AI 為什麼老是忘記你說過的話?這篇拆解 AI Agent 的記憶(Memory)機制:LLM 為何「無狀態」、短期記憶與長期記憶差在哪、情節/語意/程序三種記憶,以及 AI 如何建立長期記憶。