Claude 三大目錄怎麼裝？Skills、Connectors、Plugins 設計師必裝清單
2026年5月21日 上午 4:38
AI 設計AI TOOLS · 2026
QUICK ANSWER
Claude 的擴充生態現在分三類，2026/03/31 起統一收在 claude.ai/directory：Skills 教 Claude 怎麼做事（SOP 包）、Connectors 給 Claude 連到外部 app（375+ 個 MCP 整合）、Plugins 把前兩者打包成整套職能套件。設計師的最小可行組合是七個：Skills 兩個（frontend-design、skill-creator）、Connectors 三個（Adobe for creativity、Notion、Google Drive）、Plugins 兩個（Design、Figma），裝完大約十分鐘。
CHAPTER 01 · A FIGMA WITHOUT EXTENSIONS
先想像一個沒有擴充的 Figma
你開檔案、畫框、拉幾條向量。要找一個 icon？打開瀏覽器、搜尋、下載 SVG、拖回 Figma。要對齊網格？手動。要批次重命名 layer？開個 Plugin 跑一輪。要把 component 交給工程師？截圖貼到 Notion，標註尺寸，等他來問。
Figma 的擴充其實一直是三種混在一起。教軟體做新動作的功能（像 Auto Layout、Variables）、把外部資料抓進來的插件（像 Unsplash、Iconify）、整合多步驟工作流的工具包（像 Figma to Code）。設計師早習慣這三層共存，分得清也用得順。
Claude 在 2026 年也走到這一步。三類擴充，三個 tab。
三月底 Anthropic 把所有擴充統一收進 claude.ai/directory，三個 tab 各管一件事：Skills 教 Claude 動作、Connectors 連 Claude 到資料、Plugins 把前兩者打包成完整工具箱。
這篇要把三類拆乾淨，整理設計師 2026 年該裝的最小可行組合。
CHAPTER 02 · THE THREE TABS
Directory 的三個 tab，三種擴充
三類各自的定位：
Skills · 教 Claude 怎麼做事
一個 Skill 就是一個 SKILL.md 檔——告訴 Claude 遇到特定任務時要怎麼處理。寫 Word 文件用 docx skill、做投影片用 pptx skill、生 PDF 用 pdf skill。Anthropic 自家的 frontend-design skill 就是教 Claude 怎麼寫出有設計感的前端，而不是吐預設模板。
Connectors · 給 Claude 連到外面
基於 MCP（Model Context Protocol）的雙向通道。讓 Claude 可以讀寫你的 Google Drive、Notion、Adobe Creative Cloud、Figma 檔案。一鍵 OAuth 授權，沒有命令列。
Plugins · 整套打包好的職能套件
一個 Plugin 把多個 Skills、Connectors、slash commands、甚至 sub-agents 包成一個 install。Anthropic 在 2026/01/30 隨 Claude Cowork 上線這個概念，後續推了 Design、Figma、Legal 等多個職能套件。
生態系的成長速度比 Figma Plugin 當年還凶。看數字就懂：
375+
CONNECTORS
官方 directory 上 2026/05 已驗證的數量
1000+
SKILLS
官方加社群累計可安裝的 SKILL.md 數
16 個月
0 TO THREE TABS
從 MCP 首發到三類目錄統一
Figma 的 Plugin 生態從 0 到上萬個花了五年，Claude 16 個月就把擴充分成三層。這個速度差，背後是整個 AI 生態在押注 Claude 的開放標準會變成新世代的「工具接口」。
CHAPTER 03 · SKILLS
Skills — 教 Claude 怎麼做事
Skills 是三類裡面最容易被低估的。表面看就是個 Markdown 文件，實際上是教 Claude 在遇到特定任務時走特定 SOP——這跟 Figma 的 Auto Layout 是同一種思維。Auto Layout 不是新功能，是教 Figma 「frame 裡的元素該怎麼排」的規則包。Skill 就是教 Claude「遇到 X 任務該怎麼做」的規則包。
Skills 在 Claude.ai 介面的 Customize → Skills 裡可以瀏覽跟啟用。安裝後 Claude 會自動判斷什麼時候用得上，不用每次都 prompt 它。需要 Pro 以上方案，且要開啟 code execution。
SKILL · 01
frontend-design
類比：Figma 的 Variables ＋ 設計系統規範包
Anthropic 官方出的 skill。用一句話形容它的存在：讓 Claude 寫出來的前端，看起來不像 AI 寫的。沒裝這個的 Claude 會吐千篇一律的 Inter 字體 + 紫色漸層 + 圓角卡片。裝了之後它會根據品牌調性挑字體、配色、版式，產出有個性的介面。
對寫 HTML、做 landing page、或要 Claude 幫忙產出 prototype 的設計師來說，這是 Day 1 必裝。
SKILL · 02
skill-creator
類比：Figma 的 Component Builder
這個有點 meta：它是「教 Claude 寫新 Skill」的 Skill。當你發現自己重複跟 Claude 解釋同一套流程（「先檢查媒體、再驗證連結、再做 self-check」），就是該寫 Skill 的時候。
裝了 skill-creator 之後，你只要描述工作流，它會幫你產出標準 SKILL.md。我的部落格寫稿 SOP、社群發文 checklist、IG 輪播視覺模板，全都靠這個方式封裝起來。寫過一次，永遠不用再講第二次。
CHAPTER 04 · CONNECTORS
Connectors — 給 Claude 連到你的工具
Connectors 是 MCP 在 Claude.ai 介面上的官方名字。MCP（Model Context Protocol）是 2024 年底 Anthropic 釋出的開放協議，產業類比是「AI 世界的 USB-C」。對應到 Figma 的話，就是 Unsplash、Iconify 這類「把外部資料抓進來」的 plugin——只是 MCP 是雙向的，Claude 可以讀也可以寫。
我精選三個。不是最熱門的，是 fit 設計師日常的：
CONNECTOR · 01 · DAILY DRIVER
Adobe for creativity
類比：Figma 的 Iconify ＋ Unsplash ＋ 跨檔案搜尋三合一
2026/04/28 隨「Claude for Creative Work」一起發。一個 connector 打通 50+ Adobe 工具：Photoshop、Illustrator、Lightroom、Firefly、Premiere、InDesign、Adobe Stock。
Anthropic 官方範例是「幫我從 Adobe 設計庫做一張 boutique sale 的 IG story，背景換掉再加動畫」，Claude 會自己跨 Adobe Express、Photoshop、動畫工具串完。免費版 Claude 就能用，這是 Anthropic 給創作者的入場禮。
CONNECTOR · 02 · SECOND BRAIN
Notion
類比：Figma 的 Content Reel（外部資料庫雙向通）
Notion connector 是 directory 最早期的標配，讀寫 page、查資料庫、新增記錄樣樣行。實用工作流：寫文章草稿在 Notion，修圖 reference 整理在 Notion，最後叫 Claude 從 Notion 抓內容組裝成正式稿。
類似 Figma 用 Content Reel 從 Google Sheet 抓真實資料填到 mockup 的概念——但因為是雙向，Claude 還會幫你把產出回寫進 Notion 資料庫。
CONNECTOR · 03 · ASSET LIBRARY
Google Drive
類比：Figma 的 Unsplash（但抓的是你自己的素材）
讓 Claude 可以掃你 Drive 裡的素材庫、設計檔案、客戶資料夾。實用情境：寫完文章，叫 Claude 從 Drive 找上週做的 IG carousel 截圖，自動配對到合適段落。
每個設計師的 Drive 都是一座沒整理過的金山，MCP 把它接上 Claude，整理這件事就被外包出去了。
關於 Connectors / MCP 的完整背景，我寫過一篇MCP 完整指南，技術細節可以從那裡進；另一篇Adobe for creativity 深入拆解講 Adobe 那條線在做什麼。
CHAPTER 05 · PLUGINS
Plugins — 整套打包好的職能套件
Plugins 是三類裡最年輕的。2026/01/30 隨 Claude Cowork 上線，定位是「把 Skills + Connectors + slash commands + sub-agents 打包成單一可安裝套件」。對照 Figma，就是 Figma to Code 那種把多步驟工作流整合的整合型 Plugin。
Plugin 解的問題是「我每次都要組合一堆 skill 跟 connector 才能完成這類工作」。Anthropic 推的 Design Plugin 內含設計批評、UX 文案、無障礙審核、研究綜合、開發交接，全是設計師重複會做的事，但每件單獨拆出來都不夠。打包之後，一個 slash command 就到位。
PLUGIN · 01
Design
Anthropic 官方推出，給設計工作流的整套職能套件
官方頁面：claude.com/plugins/design。內容含 design critique（設計批評）、design system management（設計系統管理）、UX writing（介面文案）、accessibility audits（無障礙審核）、research synthesis（研究綜合）、dev handoff（開發交接）。
用 slash command 觸發。例如做完一份 mockup 後打「/design-critique」，Claude 會走 critique skill 流程；要交付前端時打「/dev-handoff」，會跑 component 結構分析 + 設計 token 整理 + 標註生成。每一條都是一個 mini-agent 在背後跑。
PLUGIN · 02
Figma
Figma 官方包：MCP connector ＋ Code to Canvas ＋ Dev Mode 整合
Figma 自家做的 Claude Plugin。讓 Claude 可以讀你 Figma 檔案的 component 結構、design token、變數，再把設計轉成 production-ready 的 React／Vue／Tailwind 程式碼。
反向也通：Claude Code 寫出來的 UI 可以一鍵變回 Figma frame——不是截圖，是真的可編輯 layer。對「設計交付」場景殺傷力最大。如果你的工作流主軸是 Figma，這個 Plugin 取代了你過去裝五六個 Figma plugin 才能搞定的事。
Plugins 還有不少值得試的——Anthropic 官方的 skill-creator、Superpowers、frontend-design 都是 Plugin 形式，社群也累積了幾百個。但對設計師主流工作流來說，Design 跟 Figma 兩個能涵蓋八成日常。
Anthropic 4 月底由 MCP 共同創造者 David Soria Parra 在 AI Engineer 大會的演講，標題就是「The Future of MCP」——這個演講雖然講的是 MCP（也就是 Connectors 那一層），但點到的方向其實貫穿三類：讓 AI 在你整套工具鏈裡走來走去，而不是停在某一個 app 內：
▲ The Future of MCP — David Soria Parra, Anthropic（2026/04）
CHAPTER 06 · HOW TO CHOOSE
三類怎麼選：一張決策圖
三類目錄聽起來複雜，實際上判斷只要三句話：
DECISION TREE · 三句話判斷
SKILL
你發現自己重複教 Claude 同一套流程
寫 Skill。或裝現成的（frontend-design、docx、pptx）。重複教三次以上就值得封裝。
CONNECTOR
你在 copy-paste 外部 app 的內容給 Claude
裝 Connector。Notion、Drive、Adobe 是設計師的 80% 場景。剪貼板用滿三次就該裝。
PLUGIN
你需要整套職能套件、跨多個 skill ＋ connector
裝 Plugin。Design 跟 Figma 兩個給設計師日常用，其他職能套件（Legal、Finance、HR）對應不同身份。
我自己的「設計師最小可行套組」就是文章開頭那七個：Skills 兩個（frontend-design、skill-creator）、Connectors 三個（Adobe、Notion、Drive）、Plugins 兩個（Design、Figma）。裝完十分鐘，覆蓋八成日常設計工作。
其他像 Slack、Linear、Gmail Connector，看你工作型態加。如果你不確定先裝什麼，我先前的 Claude 日常 Connectors 清單有更廣的工作型態建議。
最後一個提醒：MCP 不是「裝越多越好」。每多裝一個，Claude 的工具選項就變多一點，回應速度也會掉一點。建議從 3-5 個日常用的開始，不熟悉的工具想用再裝。
CHAPTER 07 · TAKEAWAYS
早裝早享受
Figma 的擴充生態從 0 到三層分明，花了五年。Claude 16 個月就走完同樣的路。
這個速度差有意義。意思是設計師現在跳上車，是 2019 年「Figma Plugin 還只有 100 個」那種早期紅利。你現在熟悉的工作流會變成兩年後業界的標配。
擴充剛開始流行時，沒裝的人會說「我手動處理也很快」。MCP 跟 Skills 現在也一樣。但工具不會等你準備好。設計師圈幾個月後就會有人開始講「我寫一個 prompt 它跨四個 app 處理完，還會自動把成品丟回 Notion 排版」，到那時候才開始裝就晚了。
裝吧。七個。十分鐘搞定。
FAQ · 常見問題
關於 Claude 三大目錄，設計師最常問的五個問題
Q1：Skills、Connectors、Plugins 到底差在哪？
Skills 是教 Claude 怎麼做事的 SOP 包；Connectors 是讓 Claude 連到外部 app（MCP 協議）；Plugins 是把前兩者打包成單一可安裝的職能套件。三類各管一件事，但功能會疊加——一個 Plugin 內含多個 Skills 跟 Connectors 是正常狀況。
Q2：免費 Claude 用戶能不能裝這三類？
Connectors 的 4/28 那批 9 個 creative connectors（含 Adobe）官方確認 free plan 也能用。Skills 需要 Pro 以上，且要開 code execution。Plugins 大部分需要 Pro，企業版 Plugin 需要 Team / Enterprise。預算有限的話，先從免費的 Adobe Connector 開始試手感。
Q3：MCP 安全嗎？我給 Claude 我的 Google Drive 不會被偷看吧？
Connector 走 OAuth，跟你授權任何第三方 app 連 Google Drive 是同樣機制。每個 connector 有自己的權限範圍（read-only 還是 read-write），裝的時候 Anthropic 會列出來。Claude 不會把你的資料拿去訓練模型，這是 Anthropic 的官方政策。但你還是要看清楚每個 connector 要的權限，跟看 App Store 權限請求一樣的態度。
Q4：Skill 跟 Figma 的 Auto Layout 真的可以這樣類比嗎？
類比抓的是「規則包」這層意思——兩者都是教軟體「遇到 X 情境該怎麼處理」。但實際機制不同：Auto Layout 是 Figma 內建的版面引擎；Skill 是動態載入的 Markdown 指令，會被 Claude 模型「讀進去」當作 prompt 的一部分。類比方便理解，但不要當技術等價。
Q5：Plugin 跟 Cowork 是什麼關係？我沒用 Cowork 還是能裝 Plugin 嗎？
Plugin 概念是隨 Cowork 一起發的，但現在三個 Claude 介面（網頁、Desktop、Cowork）都支援。Claude.ai 網頁版用戶直接從 Customize → Plugins 安裝即可。Cowork 比較強的地方是 Plugin 可以調用本機檔案、跑長時間 agent，網頁版受限於沙盒環境。