MIXXIN Vibe Coder 入門課
LESSON 07 · 午餐揪團頁主線

接上手腳,教它方法

到上一堂為止,你的 AI 碰得到的東西其實很有限——寫不進 Notion、打不開瀏覽器、更碰不到公司的系統。今天你要親手把手腳接上去。接上去的那一刻你會發現第二件事——同一句話,用不同方法交代,出來的東西差很多。所以下半堂要把幾個被試出來有效的工作方法,也一起教給它。

兩種接法:CLI × MCP 直接問公司的系統 想好再動手 產出:一份你自己的 Skill
完成定義 · Definition of Done
你的電腦上:① 至少掛上兩台 MCP server(Notion、公司假勤)並各自走過一次授權;② 有一份你自己寫的 Skill,而且你實測過它會被觸發;③ 你動手改過一次 AI 的預設指令;④ 你講得出「CLI 跟 MCP 差在哪」,以及「為什麼要先規劃再動手」。

開始之前 · 30 秒

  • 今天大部分動作在 Claude Code終端機裡,不是在你的網頁上——但最後會拿你自己的揪團頁當實驗品
  • 有幾個指令要在終端機裡跑(Mac 內建的「終端機」App,用 Spotlight 搜 Terminal),教材會標清楚哪幾個是
  • 今天會跳出兩次授權畫面——第 6 堂那三個問題,今天要再問兩次
  • 卡住不要硬撐:安裝這種事沒有「想通」這回事,舉手比自己查快
01接上手腳只有兩條路

你的 AI 已經會幫你開 PR 了。但你叫它去看一眼 Notion,它就沒轍——同樣是一句話交代,一件做得到、一件做不到,差別在哪?

差別在它手上有沒有那個服務的工具。而要把工具交到它手上,只有兩條路。搞清楚這兩條,以後你遇到任何「AI 怎麼碰不到 X」都知道該問什麼。

AI 要碰到一個服務,只有兩條路 ① CLI ── 裝一個指令 gh pr create 你登入一次,AI 直接下指令 適合本來就有指令列的服務 GitHub · Google Workspace ② MCP ── 掛一個連接器 claude mcp add … 你授權一次,AI 照結構呼叫 適合沒有指令列、或要細緻權限的 Notion · 瀏覽器 · 公司內部系統 兩條路都得你先出面授權一次——AI 不會自己長出權限
圖 1.1接上手腳只有兩條路:裝一個它會用的指令(CLI),或掛一個連接器(MCP)。差別在服務那端有沒有指令列,不在誰比較高級。
🧭怎麼判斷該走哪一條

先問一句:「這個服務有沒有指令列工具?」
有 → 裝那個 CLI,登入一次就好(GitHub、Google Workspace 都有)。
沒有,或是需要「只給它看這幾頁」這種細緻權限 → 找它的 MCP server(Notion、瀏覽器、公司內部系統)。

AI 助手 插上 MCP 轉接頭 MCP 瀏覽器 DevTools Notion n8n 工作流 共用資料庫 你每天在公司 Claude 裡用的「連接器」,全部都是 MCP 的實例
圖 1.2MCP=AI 的萬用轉接頭:插上就能操作瀏覽器、Notion、n8n、資料庫,不用為每個工具重學一套接法。
揭曉時刻:你在 claude.ai 裡點過的那些「連接器」——Notion、Google Drive、n8n——全部都是 MCP。你早就在用了,只是不知道它的名字,也沒發現它可以裝在你自己的電腦上
📅旁註 · Google 那邊也有一條路(講師示範,今天不動手)

Google Workspace 也有指令列工具 gws,講師會現場示範它把行事曆讀出來(gws calendar +agenda)、把雲端硬碟的檔案列出來(gws drive files list)。
誠實提醒:這個工具不是 Google 官方產品(作者自己在專案頁寫明了),還沒到 1.0、之後會有破壞性改動,而且安裝要自己開一個 Google Cloud 專案。今天只示範不動手,想裝的人課後找講師拿步驟。
但概念要帶走:Google 這邊走的也是 CLI 那條路

02動手一:掛上 Notion第 6 堂那個畫面,這次的對象是你自己的 AI

Notion 沒有給你用的指令列工具,但它有官方的 MCP server。這是第二條路。

終端機 · 一行

A掛上 Notion 的 MCP server
claude mcp add --transport http notion https://mcp.notion.com/mcp
  • 終端機貼上那一行、按 Enter
  • 回到 Claude Code,輸入 /mcp,在清單裡選 notion,走授權
  • 瀏覽器跳出來的,就是上一堂那個勾選畫面——停住,先不要按允許
三個問題,再問一次。而且今天的答案跟上一堂不一樣——上一堂你授權的是課程網站,只勾一頁就夠;今天你授權的是你自己每天在用的 AI,它會需要多一點。但「多一點」不等於「全部」。
它要什麼範圍?Notion 一樣讓你一頁一頁勾。勾你真的要它幫你處理的那幾頁——記得包含跟團紀錄,等一下要用
它要讀,還是也要寫?這台是讀寫都要。你要它幫你整理 Notion,它就得能寫——這是你自己決定接受的,不是被偷走的
我怎麼收回?Notion → 設定 → 我的連線,隨時撤銷。現在就去看一眼那個頁面長怎樣,別等到要用的時候才找

授權完成後 · 試一句

B讓 AI 直接讀 Notion
幫我在 Notion 找到「跟團紀錄」那張表,
看看今天有幾筆、分別是誰跟了哪一家。
你剛剛做了一件第 5 堂做不到的事。第 5 堂要讀 Notion,你得在 .env.local 放一把金鑰、寫一段 fetch、還要處理回來的資料。今天你只是講了一句話
但中間那一層沒有消失——MCP 幫你收掉了,金鑰跟權限換成「你本人授權」這個形狀而已。看得懂這件事,跟只覺得「哇好方便」,是兩種人。
03動手二:讓 AI 自己開瀏覽器除錯

第三雙手腳:瀏覽器。掛上之後,AI 可以自己打開你的頁面、自己點按鈕、自己讀 console——就是第 3 堂你用右鍵檢查在做的那些事。

Claude Code 裡 · 一行

C掛上瀏覽器
/plugin install chrome-devtools-mcp@claude-plugins-official

兩人一組 · 互相弄壞對方的頁面

  • ① 跟旁邊的人交換座位(或交換電腦,看教室怎麼坐比較順)
  • ② 在對方的 Claude Code 裡下一句:「在這個頁面上弄壞一個東西,不要告訴我是什麼,也不要留註解
  • ③ 換回自己的位子,開一個新的對話(重點:新對話才不知道剛剛發生什麼事)
  • ④ 貼上下面的 Prompt D,然後看著它做
D讓 AI 自己找出被弄壞的地方
我的頁面有東西壞了,但我不知道是什麼。
請你打開瀏覽器實際操作這個頁面,把每個按鈕都點一次,
檢查 console 和網路請求,找出問題在哪。
修好之前,先告訴我你發現了什麼。

看這三件事

  • 自己開了一個瀏覽器視窗,而且那個視窗在被它操作
  • 自己點按鈕、自己看 console,不是猜的
  • 它做的每一步,都是你第 3 堂手動做過的事
螢幕分割畫面:一邊是 AI 對話、一邊是被自動操作的瀏覽器視窗,學員在旁邊看著
圖 3.1AI 自己開瀏覽器、讀 console、找出問題——而你看得懂它在做什麼,所以能判斷它找得對不對。
收尾金句:正因為你知道 console 是什麼、知道「點了沒反應」該去哪裡看,你才有辦法判斷它的診斷對不對。懂底層,才能放心把操作交出去——這門課從第 1 堂講到現在,就這一句。
04手腳接上之後,換個方法跟它工作下半堂的轉折

停下來看一下現在的狀況:倒回一小時前,你的 AI 一樣都做不到。現在它能改你的檔案、開你的 PR、寫你的 Notion、控制你的瀏覽器。能力變大是好事,但你大概也發現了:它動得越多,你越常要說「不是這個意思」

🎯同一句話,用不同方法交代,出來的東西差很多

下半堂不是再多裝三個工具,也不是要給它綁上手銬——是把幾個已經被試出來有效的工作方法交到你手上。
這些方法不是誰規定的,是一群人踩過坑之後留下的結論:早一步看到它打算做什麼、讓它先問清楚你要什麼、把你自己的好做法存起來讓它每次都記得。

MCP 給 AI「能用的工具」 瀏覽器 · 資料庫 · Notion = 給它一把電鑽 Skill 給 AI「怎麼用比較好」的方法 Shopify 開發規範 · 通知系統規範 = 教它我們家怎麼鑽
圖 4.1MCP 給工具、Skill 給方法:一份有效的做法寫一次,全公司的 AI 都用得上。
📐方法有三種尺度,下半堂三種各做一次

這一次:先給我計畫,我點頭你再動手 → 規劃模式(第 05 節)
這一輪:我自己也還沒想清楚,你先訪問我 → brainstorming(第 05 節 · 課後選配)
以後每次:這種事一律照這樣做 → Skill 與全域指示(第 06 節)

05動手三:想好再動手

Claude Code 裡按 Shift + Tab 可以循環切換模式,其中一個叫 規劃模式(plan mode)。切進去之後它只讀不寫——先給你一份計畫,你點頭它才動手。

直接動手 你說一句 → AI 改了 12 個檔案 → 你說「不是這個意思」 → 全部重來 重來發生在動手之後 規劃模式(Shift+Tab) 你說一句 → AI 只讀不寫,先給一份計畫 → 你改計畫 → 你放行 → 才動手 改一段話,比改 12 個檔案便宜 重來搬到動手之前
圖 5.1規劃模式把「重來」搬到動手之前:同樣會改錯,但改錯的是一段可以直接編輯的文字,不是你資料夾裡的十二個檔案。

動手 · 故意挑一個大一點的改動

  • ① 在 Claude Code 按 Shift + Tab,切到規劃模式(輸入框上方會顯示你現在在哪個模式)
  • ② 貼上下面的 Prompt E,看它給你的計畫——它不會動任何檔案
  • 故意改它一件事:例如跟它說「不要新開一頁,就放在原本頁面下面」,叫它重新規劃
  • ④ 看到滿意的計畫再放行,讓它動手
E在規劃模式下丟一個大需求
幫我在揪團頁加一個「我跟過的團」區塊,
顯示我以前跟過哪幾攤、哪一天跟的,
資料從第 6 堂那個以本人身分送出的紀錄來。
重點不是它第一次規劃得多好,是你在第 ③ 步發現的那件事:改一段話,比改十二個檔案便宜太多。這個習慣今天你可能還沒感覺,第一次它把你的頁面改爛的時候你就會知道

課後選配 · 課堂上不做

💬再往前一步:讓它反過來訪問你

規劃模式的前提是你已經想清楚了,只是要它照做。但有更多時候你自己也還沒想清楚——這時候它給你的計畫,只會是你那個模糊想法的模糊版本。
補這一段的工具叫 brainstorming:裝上 /plugin install superpowers@claude-plugins-official,輸入 /superpowers:brainstorming,然後故意講一個很模糊的需求它不會開始寫程式,它會開始問你問題。

F故意講不清楚,讓它訪問你(課後選配)
我想做一個東西,可以讓部門的人比較容易約到彼此的時間。
我還沒想清楚它長什麼樣。
這個技能真正的用途不是寫程式。你下次要跟工程師提需求、要寫一份 wish、要跟老闆講一個還沒成形的想法——先讓 AI 訪問你一輪,你會發現自己原本漏掉一半。被問倒的地方,就是你原本會在會議上被問倒的地方,差別只在現在沒有別人在看。
06動手四:改造這台電腦的預設指令

前面兩個都是「這一次」。第三種是「以後每次」

📄你電腦上有一個檔案,決定了 AI 的預設行為

路徑是 ~/.claude/CLAUDE.md。Claude Code 每次開始工作之前都會先讀它
寫在那裡的東西,等於它的預設指令——你不用每次重講,它每次都記得。

公司已經有一份現成的:harness-engineering——一群人帶著 AI 做事、踩過坑之後,把有效的做法收斂成六條。現在把它裝進你的電腦。

Claude Code 裡 · 三行,依序

G裝上一份現成的工作方法
/plugin marketplace add MIXXINtw/harness-engineering
/plugin install harness-engineering@harness-skills
/harness-init
  • /harness-init 之後它會問你是第一次裝還是體檢現有安裝——選第一次
  • 它會把核心六守則寫進你的 ~/.claude/CLAUDE.md
  • 請它把那個檔案印出來給你看——你剛剛改了你 AI 的預設行為,總得看一眼改了什麼
① 指揮官不下場要讀一堆檔案、掃整個專案時,派一個分身去做,主對話只收結論——不然它讀著讀著就忘了你要什麼
② 驗證不自驗它說「已完成並測試通過」不算數,要有證據:跑出來的結果,或另一個沒看過過程的分身去驗
③ 破壞性操作先停刪檔案、覆寫、推上正式環境、對外發訊息——先問你
④ 完成的定義改動存了 + 證據在手 + 說清楚做了什麼、怎麼驗的。缺一項就不能說完成
⑤ 嘗試有預算同一件事最多試 3 次,第 2 次失敗就要換路——不准同一招換句話再試五次
⑥ 通道壞了修通道你指定的工具壞掉了,是去把它修通,不是自作主張改用別的方法

第 ① 條講的「分身」,行話叫 subagent。現在叫它用一次,你就懂為什麼會有這一條:

H派一個分身去做事
請派一個 subagent 去把這個專案看過一遍,
只回報兩件事:這個專案是做什麼的、主要檔案有哪些。
不要把檔案原文貼給我。
差別在哪:那些檔案的原文沒有進到你們的對話裡,只有結論進來了。所以它後面還記得住你原本要什麼——而不是被幾十個檔案洗掉。你以後叫它做大範圍的事,這一句「派個 subagent 去」值很多。
誠實話:這六條是寫給工程師用的,裡面有些條目(模型升降級、除錯流程)你短期用不到,看不懂很正常。
今天裝它的重點不是每條都要懂,是要你知道這件事可以做:你的 AI 有一份預設指令,而那份指令是你可以改的。哪天你發現它老是犯同一個錯,答案通常在那個檔案裡,不在你每次的提示詞裡。
07公司的一整套:一個 plugin 同時給你手腳跟方法

數一下你今天手上多了什麼:CLI(gh)、MCP(Notion、瀏覽器)、Skill(harness 那六條做法)。這三樣,公司可以幫你打包好。

公司 marketplace mixxintw/template 一個 plugin Skill 方法:我們家怎麼做事 MCP server 手腳:碰得到公司系統 你的電腦 /plugin install 一句安裝指令,方法跟手腳同時到位——而且全公司裝的是同一份
圖 7.1公司的 plugin 是「方法+手腳」的包裝紙:一次安裝,Skill 和 MCP server 同時進來,全公司拿到的是同一份。

Claude Code 裡 · 接上公司的 marketplace

I接上公司自建的 marketplace
/plugin marketplace add mixxintw/template
  • 接上之後輸入 /plugin,看得到公司這五個:mixxin-design(品牌設計規範)、mixxin-engineering(前後端開發規範)、mixxin-tools(需求收集、通知、PDF)、mixxin-knowledge(Wiki 發佈)、hhg-engineering
  • mixxin-knowledge 裝起來
  • 裝完問它一句:「你剛剛多了什麼能力?」
揭曉:這個 plugin 除了 skill,還自帶一台 MCP server。裝完的那一刻,你的 AI 同時拿到了兩樣東西——「MIXXIN 的知識該怎麼寫」這套做法,和「把它發到 Wiki 懶人包」這雙手
這就是第 04 節那張圖的實體:方法跟手腳,一次安裝同時到位,而且全公司拿到的是同一份
現實提醒:這些 plugin 放在公司內部的 repo要你的 GitHub 帳號在組織裡才裝得起來。裝不起來的話,多半是帳號還沒被加進組織,舉手——這個你自己解不了。
08動手五:直接問公司的系統

公司各個系統正在陸續長出自己的 MCP server。今天先接已經活著的第一台:假勤

終端機 · 一行

J掛上公司的假勤系統
claude mcp add --transport http mixxin-hr https://tools.mixxin.tw/mcp
  • 終端機貼上那一行
  • 回 Claude Code 輸入 /mcp,選 mixxin-hr,用公司帳號授權
  • 這是今天第二次授權畫面——同樣那三個問題,這次應該很快

試兩句 · 今天只問,不申請

K問公司的假勤系統
今天有誰是遠端工作?
還有,我今年的假還剩幾天?
今天只做「讀」。申請假、撤回申請這些是寫入操作,會真的送出去。課堂上不要按,回家自己用。
🪪為什麼假勤是 MCP,不是 CLI

兩個原因。第一,假勤系統沒有指令列工具——照第 01 節那個判準,只剩 MCP 這條路。
第二,也是更重要的:它必須知道問的人是誰。你的假期餘額不能給別人看。MCP 的授權剛好處理這件事——你授權的是「你自己這個身分」,它回給你的就是你的資料
這正是第 6 堂那件事,只是換成了公司系統。

同一台 MCP server,你在 claude.ai 上也可以把它掛成「連接器」,這樣手機上就能問「我假還剩幾天」。server 只有一台,端看誰來連
誠實話:不是每台公司系統的 MCP 都長成今天這樣。報帳、訂單那幾台目前是把一組長期權杖寫死在設定檔裡——能用,但形狀比較舊,是第 5 堂那把「可寫金鑰」的親戚。之後會陸續換成今天這種本人授權的形式。
你現在看得懂差別在哪,這就是重點。
·講師課前準備事項
  • 確認每位學員的 GitHub 帳號都已加入 MIXXINtw 組織——沒加的人第 07 節整段做不了
  • 課前實測 https://tools.mixxin.tw/mcp 可用,並確認學員帳號都通得過授權
  • 準備 gws 示範環境(先跑完 gws auth login),備妥兩個不含個資的安全示範指令;示範時避開會露出私人行事曆/信件的畫面
  • 課前自己把第 01~08 節每一步完整跑一遍——這些工具版本會變,教材上寫的選項文字可能跟當天不同
  • 第 03 節是兩人一組,先想好落單學員怎麼配(助教當搭檔最省事)
  • 準備一張「常見安裝卡關」小抄給助教:command not found、終端機沒重開、授權中途跑掉、組織權限
給講師:這堂的敵人跟第 1 堂一樣,是安裝摩擦——幾乎每一節都有東西要裝、或有畫面要授權,每一次都可能有人掉隊。建議每一節動手結束都喊一次「做完的舉手」,不要讓人默默卡在第 01 節卻聽到第 08 節。
·作業與檢核

作業:寫一份你自己的 Skill,交一個 PR 上來。

題目自己挑:一件你工作上重複做、而且每次都有點眉角的事——寫社群貼文、整理會議紀錄、發給廠商的報價信、交一張圖的規格給設計。把那些眉角寫下來,以後 AI 每次都照做。

起手式 · 讓它先訪問你

L把你的重複工作寫成 Skill
我要寫一份 skill,讓你以後遇到「[你挑的那件事]」的時候,自動照我的做法做。
先訪問我:這件事我平常怎麼做、有哪些一定要遵守的規則、哪些是常見的錯。
問完再幫我寫成 SKILL.md,放到 ~/.claude/skills/ 底下。

交付清單

  • ~/.claude/skills/<你的技能名>/SKILL.md 存在
  • 你實測過它會被觸發:開一個新對話,講一句相關的話,看它有沒有自動照你的做法做(沒被觸發?多半是描述寫得不夠具體,改一改再試)
  • 把同一份 SKILL.md 複製到 submissions/<你的帳號>/lesson-07/
  • 照你平常的方式開 PR,描述裡寫兩件事:這份 skill 解決你什麼重複工作、你實測時它有沒有被觸發

講師 / 助教檢核重點

  • 每人交出一個 PR,裡面有他自己寫的 SKILL.md
  • 每人至少掛上兩台 MCP server 並各自走過授權
  • 每人的 skill 實測會被觸發——不是寫完就算
  • 每人能說出:CLI 跟 MCP 差在哪為什麼要先規劃再動手
下一堂:八堂課的最後一堂,把全班的揪團資料第一次同框顯示在同一個頁面上。你最早學會的技能,跑在你最晚拿到的能力上。