MIXXIN Vibe Coder 入門課
← 第 07 堂 第 8a 堂 · 60 分鐘 第 8B 堂 →
LESSON 08A · 午餐揪團頁主線 · 原第 8 堂拆分（上）

跟 AI 一起做：MCP × Skill

現代開發協作的最後一塊拼圖：MCP 讓 AI 接上工具、Skill 讓 AI 照公司的規矩做事。今天你會看到 AI 自己打開瀏覽器、自己讀 console、自己修好一個 bug。

MCP = 萬用轉接頭 Skill = 給 AI 的 SOP AI 自主除錯 產出：AI 修好一個 bug
✓
完成定義 · Definition of Done
學員理解 MCP / Skill 是什麼，並在自己電腦上讓 AI 用 MCP 自主除錯過一次。
0:00–0:10回顧全課程 + MCP 概念，展示公司連接器畫面
0:10–0:20Skill 概念，展示真實 Skill 檔案片段
0:20–0:45動手：掛上 chrome-devtools-mcp，讓 AI 自主診斷並修好預埋的 bug
0:45–0:55討論：MCP 和 Skill 在 Mixxin 的實際應用
0:55–1:00收尾 + 預告：下一節（8b）全覽 Dashboard 結業
01MCP：AI 的萬用轉接頭

還記得 5b 堂「跟外部要資料」的概念嗎？MCP（Model Context Protocol）可以想成給 AI 用的萬用轉接頭——AI 助手插上 MCP，就能操作瀏覽器、讀寫資料庫、寫 Notion、串 n8n，不用為每個工具重新學一套規矩。

AI 助手 插上 MCP 轉接頭 MCP 瀏覽器 DevTools Notion n8n 工作流 資料庫 / Sheet 你每天在公司 Claude 裡用的「連接器」，全部都是 MCP 的實例
圖 1.1MCP＝AI 的萬用轉接頭：插上就能操作瀏覽器、Notion、n8n、資料庫，不用為每個工具重學規矩。
揭曉時刻：你們每天在公司 Claude 裡用的那些「連接器」（Notion、Google Drive、n8n）——全部都是 MCP 的實例。你早就在用了，今天只是知道它的名字。
02Skill：把「公司怎麼做事」寫給 AI 看

MCP 給 AI「能用的工具」，Skill 給 AI「該怎麼用、照公司的規矩用」——一份可重複使用的 SOP：寫一次，全公司的 AI 都照著做。

MCP 給 AI「能用的工具」 瀏覽器 · 資料庫 · Notion ＝ 給它一把電鑽 Skill 給 AI「照公司規矩用」的 SOP Shopify 開發規範 · 通知系統規範 ＝ 教它我們家怎麼鑽
圖 2.1MCP 給工具、Skill 給規矩：寫一次 SOP，全公司的 AI 都照同一套標準做事。
公司透過 GitHub repo 部署到 Claude 的那些技能——Shopify 開發規範、通知系統規範——就是 Skill。這也是為什麼每個人的 AI 產出會遵守同一套標準。
03動手：AI 自主除錯

第 3 堂你自己動手用過 Elements 面板、看過 console。今天要讓你看到：有了 MCP，AI 可以自己打開瀏覽器、自己讀 console、自己點按鈕重現問題——你不用再一步步檢查。

  • 在 AI 助手中掛上 chrome-devtools-mcp（照講師提供的安裝指引）
  • 頁面上有一個講師預埋的 bug：按鈕點了沒反應
  • 用 Prompt A 讓 AI 自己開瀏覽器診斷並修正
  • 觀察 AI 的診斷過程——它做的事，就是你第 3 堂手動做過的事
螢幕分割畫面：一邊是 AI 對話、一邊是瀏覽器自動操作的氛圍照
圖 3.1AI 自己開瀏覽器、讀 console、修好 bug——而你看得懂它在做什麼，所以能判斷它修得對不對。
收尾金句：這不代表第 3 堂白學了——正因為你懂 DevTools 在顯示什麼，你才能判斷 AI 的診斷對不對。這就是這門課從頭到尾的邏輯：懂底層，才能放心把操作交出去。
·AI Prompt speed dial起手式 · 用自己的話改
A讓 AI 用 chrome-devtools-mcp 自主除錯 
我的頁面上有一個按鈕點擊沒有反應，
請你打開瀏覽器實際操作這個頁面，
檢查 console 和網路請求，找出問題原因並修正。
B想像一個公司 Skill（課後選配） 
請幫我用最簡單的格式（不用太正式），
把「怎麼做一張 Mixxin 風格的揪團卡」這件事寫成一份給 AI 看的 SOP，
包含：用什麼顏色、什麼字體、卡片要有哪些元素。
·講師課前準備事項
  • 準備安裝好 chrome-devtools-mcp 的示範環境或安裝指引文件
  • 預先在範例頁面埋一個容易被 AI 自主診斷出來的 bug（建議：事件綁定寫錯目標元素，console 會產生明確錯誤）
  • 準備 1–2 個公司內部真實 MCP 連接器與 Skill 檔案的展示素材（注意不要外洩敏感內容）
·作業與檢核

作業：無正式 PR 作業（8b 有結業 PR）。課後選配：用 Prompt B 練習寫一份迷你 Skill。

講師 / 助教檢核重點

  • 每人成功讓 AI 透過 chrome-devtools-mcp 自主診斷並修復一個 bug
  • 每人能口頭解釋 MCP 與 Skill 的差異