Claude 產品體驗(4)丨一個案例淺析 MCP 和 Skill

作者：設計大偵探
日期：2026年5月29日 上午10:34
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

Claude MCP 同 Skill 實戰案例：將標準工作流程固化，令 AI 真正代替你操作

整理版摘要

呢篇文章係作者分享佢用 Claude 嘅實際經驗。作者本身係產品設計師，想用 Claude 分析 Figma 設計稿，但發現即使裝咗 Figma 插件，Claude 都話要佢手動導出 PDF。佢直接質問 Claude，先發現原來可以透過 MCP 直接連接 Figma。呢個經歷令佢重新理解 MCP 嘅價值——佢係 AI 同工具之間嘅數據線，令 Claude 可以直接操作軟件。

之後作者進行咗一系列測試：叫 Claude 喺 Figma 畫一個英語學習 App 首頁，再載入設計系統調整字體顏色，全部成功無誤。呢個測試證明咗 MCP 嘅可靠性，但作者同時意識到，如果每次都要重新溝通流程，效率反而低。於是佢諗到將呢套標準化流程製作成 Skill。

最後佢將每日寫產品體驗筆記嘅流程都整成 Skill，配合 MCP 直接輸出到 Notion，實現咗真正嘅自動化。作者總結：MCP 係開放協議，用標準化介面連接 AI 同工具；Skill 係將工作流程固化嘅提示詞集合。兩者結合，令 AI 從對話框變成真正幫你「幹活」嘅工具。呢個案例對任何想將 AI 融入實際工作嘅人都好有參考價值。

  • 結論：MCP 同 Skill 結合可以將標準化工作流程固化，令 AI 穩定執行重複任務。
  • 方法：先用 MCP 連接工具（如 Figma），再將操作步驟整理成 Skill，新對話直接調用。
  • 差異：MCP 解決 AI 與工具之間嘅通訊問題；Skill 解決流程標準化同重複性問題。
  • 啟發：唔好淨係關注提示詞，背後嘅工作流程同設計思維先係真正有價值嘅資產。
  • 可行動點：檢視自己日常工作有冇可標準化嘅環節，嘗試用 Skill 固定，並用 MCP 連接常用工具。
整理重點

從一次 Figma 連接失敗講起

作者想用 Claude 分析 Figma 設計稿，直接貼連結後 Claude 話讀唔到，叫佢導出 PDF 或圖片。作者明明已喺 Connectors 加咗 Figma 插件，覺得好奇怪。

直接質問 Claude：我唔係已經安裝咗 Figma 嘅 MCP 咩，你能唔能夠直接讀取？

Claude 先意識到可以直接連接 Figma，然後自動開始瀏覽整個文件。

整理重點

親眼睇住 Claude 操作 Figma

作者叫 Claude 喺 Figma 畫一個英語學習 App 首頁，佢等咗大約兩分鐘，睇住對話框一行一行滾動。

打開 Figma 文件，發現佢真係創建咗新文件，裏面有首頁設計。

再叫佢載入設計系統調整字體顏色，結果全部對上，無偏差。

整理重點

將標準流程固化為 Skill

作者發現呢套流程係標準化嘅：連接 Figma MCP → 新建文件 → 載入設計系統 → 按規範繪製。如果每次都要重新溝通，效率反而低。

佢問 Claude：呢套標準流程，能唔能夠製作成一個 Skill，以後直接調用？

Claude 自己寫咗一份 Skill 規範，作者保存後新開對話調用，結果顏色字體全部對上，設計系統自動載入。

作者進一步將每日寫產品體驗筆記嘅流程都製作成 Skill，輸出穩定性明顯提升。

整理重點

MCP 係數據線，Skill 係標準化

作者用 MCP 將生成嘅內容直接輸出到 Notion，無縫銜接，唔需要手動複製粘貼。

MCP 係開放協議，用標準化方式連接 LLM 同外部工具，係 AI 時代好重要嘅設計。

Skill 係將工作流程固化，過去我哋關注提示詞，但提示詞背後真正有價值嘅係工作流程同設計思維。

呢個係最近用 Claude 最大嘅一個收穫。
之前對 Skill 嘅理解只係停留喺概念層面，知道佢係咩，但冇真實感受過佢嘅價值。直到真係將 Claude 接入工作流程之後，我先發現自己徹底鍾意咗呢兩樣嘢。
先講嚇呢個案例嘅背景。
當我想叫 Claude 幫我分析一份完整嘅 Figma 設計稿時，我直接將文件連結貼落對話框。Claude 話佢讀唔到 Figma 文件，叫我匯出 PDF 或圖片再 send 畀佢。
我當時有啲困惑——我明明已經喺 Claude 嘅 Connectors 入面加咗 Figma 插件，點解仲要手動匯出？呢個唔係多此一舉咩？
於是我直接質問佢：我唔係已經裝咗 Figma 嘅 MCP 咩，你可唔可以直接讀取？
圖片
Claude 呢個先意識到可以直接連接 Figma。跟住，我喺對話框入面睇住佢一步一步啟動連接、瀏覽成個 Figma 文件，最後話畀我聽：已經全部讀完，隨時可以開始。
我想驗證嚇佢係咪真係入咗嚟，於是發出第一個指令：幫我直接喺 Figma 入面畫一個英文學習 App 嘅首頁。
然後我就靜靜咁等咗大概兩分鐘，睇住佢嘅工作流程喺對話框入面一行一行咁滾動。
等佢話完成咗，我打開佢返嚟嘅 Figma 文件連結，發現佢真係創建咗一個新文件，首頁設計就喺入面。
老實講，嗰一刻有啲不可思議。
我又再進一步測試：將設計系統載入呢個文件，叫佢按照設計系統嘅字體同顏色規範重新調整界面。佢話冇問題，我再打開文件，發現佢真係完成咗——字體、顏色，全部對返。
嗰一刻我意識到：Claude 將來完全可以成為我嘅設計拍檔，原型、互動流程，都可以直接指揮佢完成一部分工作。
圖片
但行到呢一步，我又發現咗一個新問題。
呢套流程係標準化嘅：連接 Figma MCP → 新建文件 → 載入設計系統 → 按規範繪製。如果每次對話都要重新行一次，效率反而好低。
呢個時候我諗到咗 Skill。
圖片
我問 Claude：呢套係標準流程，可唔可以將佢整成一個 Skill，以後我直接調用，唔使每次重新溝通？
佢話可以，然後自己寫咗一份 Skill 規範，叫我保存落 Skill 庫入面。
我急不及待咁開咗個新對話，調用呢個 Skill，叫佢幫我創建一個新頁面。打開之後，顏色、字體，全部對返曬，冇任何偏差，而且設計系統係自動載入嘅，唔需要我再講一次。
呢個時候我先真正理解 Skill 嘅本質係咩。
圖片
Skill 就係標準化嘅提示詞流程。只要你嘅工作入面有任何可以標準化嘅環節，就可以將佢固化做一個 Skill。你嘅每一條指令、每一個規範，Skill 都會記錄低並嚴格執行。最後叫 Claude 幫你完善同優化，就可以形成屬於你自己嘅工作方式。
理解咗呢一點之後，我即刻將每日寫產品體驗筆記嘅流程都整成咗 Skill。以前用 ChatGPT 嘅時候，每次都要重新講格式，輸出仲經常有偏差，效率好低。有咗 Skill 之後，輸出嘅穩定性明顯提升咗，呢個對我嚟講係實質性嘅改變。
然後我又諗到咗 MCP。
我所有嘅內容最終都要歸落 Notion，於是我叫 Claude 將生成嘅內容直接輸出到 Notion，放入產品體驗筆記嘅文檔，並按照格式打上標籤。佢真係做到咗——無縫銜接，唔需要我手動複製貼上。
MCP 真係 AI 時代一個好犀利嘅設計。冇佢嘅話，我哋仲要喺軟件之間來回搬運數據；有咗佢，AI 先真正變成可以幫你「做嘢」嘅工具，而唔係淨係一個會講嘢嘅對話框。
最後簡單總結一下。
MCP，官方定義係一個開放協議，用嚟俾大語言模型應用（LLM apps）以標準化嘅方式連接外部數據源同工具（tools），從而在模型同呢啲能力之間建立統一嘅通信接口。你可以將佢理解成唔同軟件之間嘅數據線——佢令 AI 可以進入你嘅工具，代替你操作。
Skill，本質係標準化。只要工作流程可以固化，就值得整成一個 Skill。以前我哋關注人哋用咩提示詞，但提示詞背後真正有價值嘅，係嗰個人嘅工作流程同設計思維。
多謝閲讀，希望對你有幫助。

由 2022 年創辦到而家，設計大偵探已經拆解咗以下產品：

AI 產品

Stitch 產品體驗筆記 丨 6 個鐘生成 100 幾個頁面，講嚇我嘅驚喜、焦慮同思考！

Stitch 產品體驗筆記（2） 丨 秒殺曬所有原型工具，Stitch 最強大嘅功能被我發現咗！

Stitch 產品體驗筆記（3）丨 變體嘅功能詳解、應用場景同核心價值

Stitch 產品體驗筆記04丨 Stitch 係設計師，我哋先係客戶！

Stitch 產品體驗筆記 ⑤丨 Figma 處理 Stitch 頁面嘅 2 個原則同 4 個技巧

1.2 萬字拆解 NotebookLM丨點樣用 AI 打造你嘅知識樹？

醫療 Medical

【2022原創醫療產品設計分析】之丁香醫生APP圖文版

螞蟻阿福APP拆解丨 對話式交互點樣重構就醫全流程？

1.2萬字拆解京東健康丨市值1776億嘅醫療產品點樣設計？

醫療大偵探丨8500字產品拆解醫鹿（一）

互聯網醫院產品大偵探（1）丨7000字拆解北京協和醫院APP

在線教育 Online Education

產品拆解丨月營收3個億嘅斑馬APP原來係咁樣設計

偵探日記Vol.01丨5000字拆解小猿AI嘅12種練習題設計

多鄰國丨人人可以用嘅全球最受歡迎語言學習工具

Babbel丨專注成人實用會話嘅語言學習平台

Busuu博樹丨令1.2億學習者大膽開口學英文嘅全球最大語言學習社區

HelloTalk丨好似微信聊天咁樣學習一門語言

Vocabulary產品拆解 丨好似刷短視頻咁樣學習好型嘅英文單詞

萬字拆解Class 官網體驗旅程丨 點樣用講故仔嘅方式嚟介紹自己嘅產品

知識付費

向閲讀致敬！微信讀書產品設計策略推導——你要一架跑得快啲嘅馬車，但佢俾咗你一架法拉利！

1.1萬字深度拆解丨樊登讀書點樣揾到書中嘅黃金屋？

ClassIn官網拆解丨一款世界級嘅知識付費產品

社交媒體

8384字深度拆解站酷丨7年之癢，係固步自封定係放手一搏？

1.3萬字丨Notion AI同我一齊拆解咗小紅書

1.4萬字拆解丨3.15億Z時代用戶點解咁鍾意嗶哩嗶哩

SaaS

4萬字B端產品拆解丨由0到1拆解小鵝通後台設計（一）

4萬字B端產品拆解丨由0到1拆解小鵝通後台設計（二）

4萬字B端產品拆解丨由0到1拆解小鵝通後台設計（三）

4萬字B端產品拆解丨由0到1拆解小鵝通後台設計（完）

萬字拆解釘釘AI助理（釘釘AI助理眾測大賽一等獎作品）

SAAS產品體驗日記（一）丨8000字深度拆解微盟店鋪裝修功能設計

音樂

QQ音樂產品設計拆解丨睇最靚嘅音樂，聽最偉大嘅作品

物流

順豐速運產品拆解丨14500字，76個核心功能為你揭秘順豐嘅快遞世界

招聘

智聯招聘產品拆解丨呢款28年嘅新能源老爺車，開啟咗直播招聘新時代

脈脈產品拆解丨1.1億職場人士點解用脈脈？

體育

世界盃專題丨8500字拆解懂球帝

6000字拆解丨使咗10個億，抖音點樣設計世界盃專題？

工具

3600字拆解微信鍵盤丨地主家嘅細仔真係又靚仔又有才華

出行

萬字拆解鐵路12306丨最勁同最垃圾，你揀邊個？

愛彼迎 Airbnb 產品拆解丨一款累計超過 20 億人次入住嘅 APP 有咩設計亮點？

金融

產品體驗日記①丨中歐財富APP開户設計拆解

金融產品體驗日記（二）丨中歐財富APP首頁設計拆解

金融產品體驗日記（三）丨中歐財富基金詳情頁設計拆解

房產

房源詳情頁嘅設計可以有幾型，睇完鏈家APP你就明喇！


這是最近使用 Claude 最大的一個收穫。
之前對 Skill 的理解停留在概念層面，知道它是什麼，但沒有真實感受過它的價值。直到把 Claude 真正接入工作流之後，我才發現自己徹底喜歡上了這兩樣東西。
先說說這個案例的背景。
當我想讓 Claude 幫我分析一份完整的 Figma 設計稿時，我直接把文件連結粘貼到對話框。Claude 告訴我它無法讀取 Figma 文件，讓我導出 PDF 或圖片再發給它。
我當時有點困惑——我明明已經在 Claude 的 Connectors 裏添加了 Figma 插件，為什麼還要手動導出？這不是多此一舉嗎？
於是我直接質問它：我不是已經安裝了 Figma 的 MCP 嗎，你能不能直接讀取？
圖片
Claude 這才意識到可以直接連接 Figma。接下來，我在對話框裏看着它一步一步啓動連接、瀏覽整個 Figma 文件，最後告訴我：已經全部讀完，隨時可以開始。
我想驗證一下它是不是真的進來了，於是發出第一個指令：幫我直接在 Figma 裏畫一個英語學習 App 的首頁。
然後我就靜靜地等了大概兩分鐘，看着它的工作流程在對話框裏一行一行滾動。
等它說完成了，我打開它返回的 Figma 文件連結，發現它真的創建了一個新文件，首頁設計就在裏面。
說實話，那一刻有點不可思議。
我又進一步測試：把設計系統載入進這個文件，讓它按照設計系統的字體和顏色規範重新調整界面。它說沒問題，我再次打開文件，發現它真的完成了——字體、顏色，全都對上了。
那一刻我意識到：Claude 未來完全可以成為我的設計搭檔，原型、交互流程，都可以直接指揮它來完成一部分工作。
圖片
但走到這一步，我又發現了一個新問題。
這套流程是標準化的：連接 Figma MCP → 新建文件 → 載入設計系統 → 按規範繪製。如果每次對話都要重新走一遍，效率反而很低。
這時候我想到了 Skill。
圖片
我問 Claude：這是一套標準流程，能不能把它製作成一個 Skill，以後我直接調用，不用每次重新溝通？
它說可以，然後自己寫了一份 Skill 規範，讓我保存到 Skill 庫裏。
我迫不及待地新開了一個對話，調用這個 Skill，讓它幫我創建一個新頁面。打開之後，顏色、字體，全部對上，沒有任何偏差，而且設計系統是自動載入的，不需要我再說一遍。
這個時候我才真正理解 Skill 的本質是什麼。
圖片
Skill 就是標準化的提示詞流程。只要你的工作裏有任何可以標準化的環節，就可以把它固化成一個 Skill。你的每一條指令、每一個規範，Skill 都會記錄下來並嚴格執行。最後讓 Claude 幫你完善和優化，就能形成屬於你自己的工作方式。
理解了這一點之後，我馬上把每天寫產品體驗筆記的流程也製作成了 Skill。以前用 ChatGPT 時，每次都要重新說格式，輸出還經常有偏差，效率很低。有了 Skill 之後，輸出的穩定性明顯提升了，這對我來說是實質性的改變。
然後我又想到了 MCP。
我所有的內容最終都要歸到 Notion，於是我讓 Claude 把生成的內容直接輸出到 Notion，放進產品體驗筆記的文檔，並按照格式打上標籤。它真的做到了——無縫銜接，不需要我手動複製粘貼。
MCP 真的是 AI 時代一個很了不起的設計。沒有它，我們還是要在軟件之間來回搬運數據；有了它，AI 才真正變成了可以替你「幹活」的工具，而不只是一個會說話的對話框。
最後簡單總結一下。
MCP，官方定義是一個開放協議，用於讓大語言模型應用（LLM apps）以標準化的方式連接外部數據源與工具（tools），從而在模型與這些能力之間建立統一的通信接口。你可以把它理解成不同軟件之間的數據線——它讓 AI 能夠進入你的工具，代替你操作。
Skill，本質是標準化。只要工作流程能夠固化，就值得做成一個 Skill。過去我們關注別人用什麼提示詞，但提示詞背後真正有價值的，是那個人的工作流程和設計思維。
感謝閲讀，希望對你有幫助。

從 2022 年創辦至今，設計大偵探已經拆解以下產品：

AI 產品

Stitch 產品體驗筆記  丨 6 個小時生成 100 多個頁面，聊聊我的驚喜、焦慮和思考！

Stitch 產品體驗筆記（2）  丨 秒殺一切原型工具，Stitch 最強大的功能被我發現了!

Stitch 產品體驗筆記（3）丨 變體的功能詳解、應用場景和核心價值

Stitch 產品體驗筆記04丨 Stitch 是設計師，我們才是客戶！

Stitch 產品體驗筆記 ⑤丨 Figma 處理 Stitch 頁面的 2 個原則和 4 個技巧

1.2 萬字拆解 NotebookLM丨如何用 AI打造你的知識樹？

醫療 Medical

【2022原創醫療產品設計分析】之丁香醫生APP圖文版

螞蟻阿福APP拆解丨 對話式交互如何重構就醫全流程？

1.2萬字拆解京東健康丨市值1776億的醫療產品如何設計？

醫療大偵探丨8500字產品拆解醫鹿（一）

互聯網醫院產品大偵探（1）丨7000字拆解北京協和醫院APP

在線教育 Online Education

產品拆解丨月營收3個億的斑馬APP原來這樣設計

偵探日記Vol.01丨5000字拆解小猿AI的12種練習題設計

多鄰國丨人人皆可使用的全球最受歡迎語言學習工具

Babbel丨專注成人實用會話的語言學習平台

Busuu博樹丨讓1.2億學習者大膽開口學英文的全球最大語言學習社區

HelloTalk丨像微信聊天一樣學習一門語言

Vocabulary產品拆解  丨像刷短視頻一樣學習很酷的英文單詞

萬字拆解Class 官網體驗旅程丨 如何用講故事的方式來介紹自己的產品

知識付費

向閲讀致敬！微信讀書產品設計策略推導——你要一輛跑得更快的馬車，但它給了你一輛法拉利！

1.1萬字深度拆解丨樊登讀書如何找到書中的黃金屋？

ClassIn官網拆解丨一款世界級的知識付費產品

社交媒體

8384字深度拆解站酷丨7年之癢，是固步自封還是放手一搏？

1.3萬字丨Notion AI和我一起拆解了小紅書

1.4萬字拆解丨3.15億Z時代用戶為何熱愛嗶哩嗶哩

SaaS

4萬字B端產品拆解丨從0到1拆解小鵝通後台設計（一）

4萬字B端產品拆解丨從0到1拆解小鵝通後台設計（二）

4萬字B端產品拆解丨從0到1拆解小鵝通後台設計（三）

4萬字B端產品拆解丨從0到1拆解小鵝通後台設計（完）

萬字拆解釘釘AI助理（釘釘AI助理眾測大賽一等獎作品）

SAAS產品體驗日記（一）丨8000字深度拆解微盟店鋪裝修功能設計

音樂

QQ音樂產品設計拆解丨看最美的音樂，聽最偉大的作品

物流

順豐速運產品拆解丨14500字，76個核心功能為你揭秘順豐的快遞世界

招聘

智聯招聘產品拆解丨這款28年的新能源老爺車，開啓了直播招聘新時代

脈脈產品拆解丨1.1億職場人士為什麼使用脈脈?

體育

世界盃專題丨8500字拆解懂球帝

6000字拆解丨花費10個億，抖音如何設計世界盃專題？

工具

3600字拆解微信鍵盤丨地主家的小兒子真是又帥又有才

出行

萬字拆解鐵路12306丨最牛逼和最垃圾，你選哪個？

愛彼迎 Airbnb 產品拆解丨一款累計超過 20 億人次入住的 APP 有哪些設計亮點？

金融

產品體驗日記①丨中歐財富APP開户設計拆解

金融產品體驗日記（二）丨中歐財富APP首頁設計拆解

金融產品體驗日記（三）丨中歐財富基金詳情頁設計拆解

房產

房源詳情頁的設計可以有多酷，看完鏈家APP你就明白了！