Section 5 | 三層架構：探索 → 固化 → 記憶（1hr）
目標：理解何時用 AI、何時寫死；掌握三層自動化架構的具體場景與成本差異
核心概念（20min）
用具體場景逐層帶入，每一層都要讓學員「看見」差異。
第一層：探索（Computer Use / 截圖分析）
比喻引入：
「想像你第一次去一個陌生城市。
你每走幾步就要掏出 Google Maps，看看自己在哪、下一步往哪走。
走走停停，很慢，但你沒去過，只能這樣。」
你每走幾步就要掏出 Google Maps，看看自己在哪、下一步往哪走。
走走停停，很慢，但你沒去過，只能這樣。」
技術對應：
- AI 用 Computer Use 截圖 → 分析畫面 → 決定下一步 → 再截圖
- 零門檻：任何有 GUI 的東西都能操作，不需要知道 API 長什麼樣
- 但很慢：每一步都要截圖、分析、等回應
- 很貴：每張截圖都吃 Token
- 不穩定：畫面一改版、版面一動，就壞了
適用時機：
- 第一次操作一個新系統
- 不知道 API 長什麼樣
- 先讓 AI「看看」這個系統怎麼運作
「探索階段的重點不是效率，是理解。
你花錢讓 AI 幫你搞懂這個系統怎麼運作——這筆錢花得值得。」
你花錢讓 AI 幫你搞懂這個系統怎麼運作——這筆錢花得值得。」
第二層：固化（DevTools → 腳本 / 模板）
比喻延續：
「你已經去過那個城市十次了。
路都記熟了，不用地圖，直接走。
你甚至知道哪條巷子是捷徑。」
路都記熟了，不用地圖，直接走。
你甚至知道哪條巷子是捷徑。」
技術對應：
- 用 Chrome DevTools（F12）看 DOM 結構 → 找到 API endpoint → 寫成腳本
- 快 50 倍：直接打 API，不用截圖
- 省 Token 10 倍：不需要圖片分析
- 穩定：API 不變就能一直跑
講師 demo（現場操作）：
打開一個網站 → F12 → Network tab → 指出每次點按鈕背後都在發 API request
「看到了嗎？你點『查詢訂單』這個按鈕，
背後其實是送了一個 GET request 到 /api/orders。
你不需要用滑鼠點——你直接發這個 request 就好了。
這就是為什麼昨天要教你 API 是什麼。
因為你知道了之後，就可以跳過 GUI，直接走捷徑。」
背後其實是送了一個 GET request 到 /api/orders。
你不需要用滑鼠點——你直接發這個 request 就好了。
這就是為什麼昨天要教你 API 是什麼。
因為你知道了之後，就可以跳過 GUI，直接走捷徑。」
第三層：記憶（DB + Obsidian + 排程）
比喻延續：
「你不只會走了，你還畫了一張自己的地圖。
以後不管誰要去那個城市，拿你的地圖就行。
你甚至設了一個鬧鐘，每個月自動提醒要去一趟。」
以後不管誰要去那個城市，拿你的地圖就行。
你甚至設了一個鬧鐘，每個月自動提醒要去一趟。」
技術對應：
- 腳本存在 Git repo → 以後隨時能重跑
- 結果存在 DB → 可以追蹤歷史、做分析
- 排程觸發 → 每天/每週/每月自動執行
「到了第三層，你連人都不用出現了。
系統自己跑、自己記、自己存。
你只在出問題的時候去看一眼就好。」
系統自己跑、自己記、自己存。
你只在出問題的時候去看一眼就好。」
案例對比（20min）
用 LINE OA 客戶通知案例，具體展示兩種做法的差距。
場景設定：你有 200 個客戶，每個月要通知他們繳費到期。
探索做法（不懂原理）：
- AI 用 Computer Use 打開 LINE OA 管理後台
- 截圖分析畫面 → 找到「發訊息」按鈕 → 點擊
- 截圖看到輸入框 → 打字 → 送出
- 下一個客戶 → 重複
- 200 個客戶 = 大約 1000 次截圖分析
- 耗時約 1.5-2 小時
- 畫面一改版就壞
固化做法（懂 API）：
- F12 看 LINE OA 後台的 DOM
- 找到它內部用的 API endpoint
- 寫一個腳本，帶著 Cookie/Token 直接打 API
- 200 個客戶 = 一個 for loop
- 30 秒完成
- API 不變就能一直用
對比表格（白板整理）：
| 探索做法 | 固化做法 | |
|---|---|---|
| 方式 | Computer Use 截圖操作 | 腳本直接打 API |
| 200 客戶耗時 | 1.5-2 小時 | 30 秒 |
| Token 消耗 | ~2,000,000 tokens | 0 tokens |
| 穩定性 | 畫面一改就壞 | API 不變就能跑 |
| 擴展性 | 2000 人 = 不可能 | 2000 人 = 還是 30 秒 |
「差距不是 2 倍，是兩個量級。
而且差距會隨著資料量放大——
10 個客戶可能還好，200 個就是天壤之別，2000 個就是不可能 vs 30 秒。」
而且差距會隨著資料量放大——
10 個客戶可能還好，200 個就是天壤之別，2000 個就是不可能 vs 30 秒。」
省 Token 哲學（20min）
核心原則：
「寫死的寫死，用腦的才叫 AI。」
具體成本計算（講師現場算給學員看）：
「我算給你看。
Computer Use 每次截圖分析大約吃 1000-3000 tokens。
200 個客戶，每個操作 5 次截圖 = 1000 次。
1000 次 x 2000 tokens = 2,000,000 tokens。
用 Claude Sonnet 大約 $6 美金。
固化之後？寫好的腳本跑一次，零 Token。
你花 $6 做了第一次探索，搞懂怎麼做，寫成腳本。
之後每個月自動跑，永遠免費。
這就是『探索 → 固化 → 記憶』的威力。」
Computer Use 每次截圖分析大約吃 1000-3000 tokens。
200 個客戶，每個操作 5 次截圖 = 1000 次。
1000 次 x 2000 tokens = 2,000,000 tokens。
用 Claude Sonnet 大約 $6 美金。
固化之後？寫好的腳本跑一次，零 Token。
你花 $6 做了第一次探索，搞懂怎麼做，寫成腳本。
之後每個月自動跑，永遠免費。
這就是『探索 → 固化 → 記憶』的威力。」
白板畫分類：
| 寫死（不花 Token） | 叫 AI（花 Token） |
|---|---|
| 固定格式文件產出 | 判斷客戶意圖 |
| 固定欄位搬運 | 理解非結構化文字 |
| 排程觸發 | 生成客製化回覆 |
| 庫存數字同步 | 分析異常情況 |
| PDF/報表模板填欄位 | 建議下一步行動 |
「左邊那些事，你寫一個 Python 模板或設一個排程就搞定了。
不需要每次都叫 AI 來幫你做。
右邊那些事，才是 AI 真正值錢的地方——需要理解、判斷、創造的事。」
不需要每次都叫 AI 來幫你做。
右邊那些事，才是 AI 真正值錢的地方——需要理解、判斷、創造的事。」
回扣五感：
「探索 = 用 AI 的眼睛去看。固化 = 把看到的變成 AI 的手腳動作。記憶 = 存進 AI 的腦。
三層加起來，就是一個完整的自動化系統。」
三層加起來，就是一個完整的自動化系統。」
Section 6 | CLAUDE.md + 怎麼下指令（1hr）
目標：學會跟 AI 溝通的正確方式
你不是在聊天，是在發工作單（20min）
三個等級的 prompt 對比：
Level 1 — 聊天模式（AI 會問你一堆問題，來回五六輪才開始做）：
「幫我做一個管理系統」
Level 2 — 有情境但不精確（AI 大概知道方向，但細節靠猜）：
「我開蝦皮店，同時用 LINE OA 接客。 幫我做一個系統，可以自動處理客戶訊息。」
Level 3 — 工作單模式（AI 直接動手，幾乎不需要追問）：
「你是一個熟悉 LINE Messaging API 的後端工程師。 我經營一家蝦皮店，同時用 LINE OA 接客。 幫我寫一個 Cloud Function，功能是： 1. 接收 LINE Webhook 的客戶訊息 2. 判斷是詢價、投訴、還是預約 3. 分類結果存進 Supabase 的 messages table 限制：用 Python，部署在 Cloudflare Workers」
「Level 1 到 Level 3 的差距在哪？
Level 1：你不知道自己要什麼，AI 也不知道。
Level 2：你知道要什麼，但你不知道怎麼描述技術細節。
Level 3：你知道要什麼，而且你會用正確的詞描述。
昨天的你只能寫 Level 1。
但你昨天學了 CLI、DB、Webhook、API 這些詞。
今天你可以寫 Level 3 了。
這就是為什麼 Day 1 要先教你電腦世界的概念——
不是要你當工程師，是讓你會說工程師的語言。
你會說了，AI 就聽得懂。」
Level 1：你不知道自己要什麼，AI 也不知道。
Level 2：你知道要什麼，但你不知道怎麼描述技術細節。
Level 3：你知道要什麼，而且你會用正確的詞描述。
昨天的你只能寫 Level 1。
但你昨天學了 CLI、DB、Webhook、API 這些詞。
今天你可以寫 Level 3 了。
這就是為什麼 Day 1 要先教你電腦世界的概念——
不是要你當工程師，是讓你會說工程師的語言。
你會說了，AI 就聽得懂。」
一問一答也能到 Level 3：
「如果你現在還是寫不出 Level 3 的指令，沒關係。
用一問一答的方式——
先跟 AI 說你的大概想法（Level 1 或 2），
讓 AI 反問你問題，你回答。
來回幾輪之後，AI 自己會把你的想法整理成 Level 3。
重點是：你要能聽懂 AI 問你的問題。
它問你『要用什麼 DB？』你現在知道什麼是 DB 了。
它問你『要接 Webhook 還是定時輪詢？』你也知道 Webhook 是什麼了。
這就是 Day 1 的價值。」
用一問一答的方式——
先跟 AI 說你的大概想法（Level 1 或 2），
讓 AI 反問你問題，你回答。
來回幾輪之後，AI 自己會把你的想法整理成 Level 3。
重點是：你要能聽懂 AI 問你的問題。
它問你『要用什麼 DB？』你現在知道什麼是 DB 了。
它問你『要接 Webhook 還是定時輪詢？』你也知道 Webhook 是什麼了。
這就是 Day 1 的價值。」
CLAUDE.md = AI 的員工手冊（20min）
打開 Obsidian Vault 模板裡的 CLAUDE.md：
# 公司基本資訊 - 公司名稱： - 行業： - 主要產品/服務： - 使用的平台：蝦皮 / LINE OA / 官網（填你用的） # 公司規則 - 報價邏輯： - 客服回覆語氣： - 不能說的話： # 技術環境 - 主要語言：Python - 部署平台：Cloudflare / GCP - 資料庫：Supabase - 通訊：LINE OA # 已經固化的工具 （這裡列出已經寫好的腳本/模板）
「這個檔案就是你跟 AI 的工作交接文件。
你寫得越完整，AI 就越不需要問你問題。
就像你請新員工，第一天你花 2 小時交接，
之後他就能自己跑了。」
你寫得越完整，AI 就越不需要問你問題。
就像你請新員工，第一天你花 2 小時交接，
之後他就能自己跑了。」
課堂練習（20min）
學員打開自己的 Obsidian Vault → CLAUDE.md → 開始填寫前兩段：
- 公司基本資訊
- 公司規則
「不用填完，先填你最確定的部分。
這個檔案會跟著你一直迭代。」
這個檔案會跟著你一直迭代。」
Section 7 | Claude Desktop Code tab 講師 Demo + 全班開機（1hr）
目標：講師先 demo 完整流程，然後確保全班的 Code tab 都能動
講師 Demo（30min）
打開 Claude Desktop → 切到 Code tab：
「這就是你們等下要用的畫面。
它看起來像 Chat，但底下有完整的工程能力——
AI 可以直接在你電腦上建檔案、跑程式、開瀏覽器看成果。
你不用碰終端機，它自己會跑。」
它看起來像 Chat，但底下有完整的工程能力——
AI 可以直接在你電腦上建檔案、跑程式、開瀏覽器看成果。
你不用碰終端機，它自己會跑。」
Live demo：用 Code tab 從零建一個簡單的公司介紹網站
- 新建 session → 選一個空資料夾（5min）
- 下指令（用 Section 6 教的格式）：
「幫我做一個公司介紹網站。
公司名稱：小明水果行。賣當季水果，LINE OA 接單。
包含：首頁、產品列表、聯絡我們。
用 HTML + CSS，響應式設計，手機可以看。」
公司名稱：小明水果行。賣當季水果，LINE OA 接單。
包含：首頁、產品列表、聯絡我們。
用 HTML + CSS，響應式設計，手機可以看。」
- 看 AI 工作（10min）
- AI 自動建檔案、寫 HTML/CSS/JS
- 學員注意看左邊的檔案列表在長出來
- 「我沒打任何一行程式碼。」
- Chrome 預覽（5min）
- Code tab 內建瀏覽器直接開啟網站
- 「做完了。從指令到成品，5 分鐘。」
- 迭代修改（5min）
- 「把配色改成藍色系」→ AI 直接改，Preview 即時更新
- 「加一個 LINE 加好友的 QR Code 區塊」→ AI 加上去
- 「這就是你跟 AI 協作的節奏：指揮方向，它執行。」
- 順帶提 Skills 和 MCP（5min）
- 打開 Connectors 設定畫面：「這些是 MCP——讓 AI 接上外部服務的插頭。比如接 GitHub、接 Slack。」
- 打開 Skills 選單：「這些是 Skills——AI 的技能包。你可以裝新的，也可以自己做。」
- 不深入教，點到為止：「回去之後慢慢摸，有問題來找我。」
全班開機（30min）
「現在換你們。打開 Claude Desktop，切到 Code tab。」
（帳號和 Quick Start 安裝包已經在 Day 1 前一小時處理完）
步驟（投影一步一步帶）：
- 打開 Claude Desktop
- 點左上角切到 Code tab
- 選 Environment: Local
- 選 Project folder: 桌面上新建一個「我的網站」資料夾
- 確認 Model 是 Sonnet（省額度）
- 輸入一句話試試看：「在這個資料夾建一個 hello.html，內容寫我的名字」
「看到你桌面上的資料夾多了一個 hello.html 嗎？
用 Chrome 打開它——恭喜，你剛剛讓 AI 在你電腦上建了一個檔案。
它有手腳了。」
用 Chrome 打開它——恭喜，你剛剛讓 AI 在你電腦上建了一個檔案。
它有手腳了。」
順帶示範 Chrome DevTools：
- 對著網頁按右鍵 → 檢查
- 「還記得昨天講的 DOM 嗎？這就是你的網頁的原始碼。AI 看到的就是這個東西。」
預留 debug 時間：
- 沒裝 Claude Desktop → 現場 QR Code 下載（已提前放在投影片）
- 沒有 Pro 訂閱 → 現場沒辦法處理，只能看旁邊同學操作
- Code tab 找不到 → 帶他們找到切換按鈕
- Quick Start 沒裝好 → 現場補裝（應已在 Day 1 前處理完）
Section 8 | 學員做自己的網站（1.5hr）
目標：每個人用 Code tab 做出一個屬於自己公司的網站
工具：Claude Desktop Code tab（已在 Section 7 確認能動）
任務說明（10min）
「接下來你要做一件很酷的事——
用 AI 幫你從零做出一個你公司的網站。
不用會寫程式。你只要告訴 AI：
1. 你的公司叫什麼、做什麼
2. 你希望網站上有什麼內容
3. 你喜歡什麼風格
剩下的，AI 會處理。」
用 AI 幫你從零做出一個你公司的網站。
不用會寫程式。你只要告訴 AI：
1. 你的公司叫什麼、做什麼
2. 你希望網站上有什麼內容
3. 你喜歡什麼風格
剩下的，AI 會處理。」
投影提示範本（學員可以照抄改）：
幫我做一個公司網站。 公司名稱：___ 業務：___ 網站需要的頁面： - 首頁（公司簡介 + 主要服務） - 產品/服務列表 - 聯絡我們（電話、LINE、地址） 風格：簡潔現代 / 溫暖親切 / 專業商務（選一個） 配色：___（不確定的話讓 AI 推薦） 手機要能看（響應式設計）
學員操作 + 講師巡場（60min）
每個人在自己的 Code tab 裡做。
預期進展：
- 前 10 分鐘：大部分人會照著範本貼，AI 生出基本網站
- 10-20 分鐘：開始改配色、改文字、加內容
- 20-40 分鐘：比較快的人會開始問進階的，例如加地圖、加 LINE QR Code、加產品圖片
- 40-60 分鐘：有人會想加互動功能（表單、預約系統等）
講師巡場重點：
- 幫卡住的人看錯誤訊息 → 教他們「把錯誤訊息直接貼給 AI」
- 看到有人做得好 → 請他分享螢幕給全班看
- 提醒：「做到這裡記得存檔。你桌面那個資料夾裡的東西就是你的網站。」
- 看到有人開始想做複雜功能 → 引導：「這部分可能需要後端，回去慢慢做。」
成果展示（20min）
每組派 1-2 人投影自己的 Chrome 畫面。
「兩個小時前你們連 CLI 是什麼都不知道。
現在你電腦上有一個 AI 幫你做的網站。
這個網站目前在你的電腦上跑。
如果你想讓全世界都能看到，就要放到線上——
這個部分回去可以繼續用 Code tab 處理，
或是來找我幫你部署。」
現在你電腦上有一個 AI 幫你做的網站。
這個網站目前在你的電腦上跑。
如果你想讓全世界都能看到，就要放到線上——
這個部分回去可以繼續用 Code tab 處理，
或是來找我幫你部署。」
Section 9 | 進階概念 + 費用試算 + 企業導入（1hr）
目標：從剛才的實作經驗延伸到進階概念，順勢帶出後續服務
從「做出來」到「做到自動化」（15min）
「你們剛才做出了自己的網站，恭喜。
但這只是第一步——你的網站現在是『靜態的』。
如果要讓它自動接 LINE 訊息、自動回覆、自動更新庫存，
就需要昨天教的那些東西：Webhook、DB、API。」
但這只是第一步——你的網站現在是『靜態的』。
如果要讓它自動接 LINE 訊息、自動回覆、自動更新庫存，
就需要昨天教的那些東西：Webhook、DB、API。」
快速回顧三層架構，用學員剛才的網站當例子：
你剛才做的 = 前端（門面） 下一步要加 = 後端（接 Webhook、存 DB） 最後要加的 = AI 判斷層（意圖分類、自動回覆）
Skills 和 MCP 概念（15min）
「你們剛才做網站的時候，是不是覺得每次都要跟 AI 重新解釋一遍你的公司？
CLAUDE.md 解決了一部分，但還有更進階的：」
CLAUDE.md 解決了一部分，但還有更進階的：」
Skills：
「Skill 就像 AI 的標準作業程序（SOP）。
你可以教它：每次做報價單，按照這個格式、這個價格邏輯。
下次你只要說『做報價單』，它就知道怎麼做了。」
你可以教它：每次做報價單，按照這個格式、這個價格邏輯。
下次你只要說『做報價單』，它就知道怎麼做了。」
MCP（Connectors）：
打開 Claude Desktop 的 Connectors 設定畫面給大家看。
「MCP 就是 AI 的插頭——讓它接上外部服務。
比如接上 Google Calendar，AI 就能幫你排行程。
接上 GitHub，AI 就能幫你管程式碼。
接上 Slack，AI 就能幫你發訊息。
你不用寫程式來接，它有 GUI 設定。
但選擇哪些要接、怎麼設計工作流——這就是需要經驗的地方。」
比如接上 Google Calendar，AI 就能幫你排行程。
接上 GitHub，AI 就能幫你管程式碼。
接上 Slack，AI 就能幫你發訊息。
你不用寫程式來接，它有 GUI 設定。
但選擇哪些要接、怎麼設計工作流——這就是需要經驗的地方。」
費用試算（15min）
白板算給他們看：
方案：Google AI Pro + Claude Pro 月費：$20 + $20 = $40 美金 ≈ NT$1,200 Google 送的 $10 GCP credits： → Gemini Flash-Lite 做意圖路由 → 每次 $0.00005 → $10 / $0.00005 = 200,000 次/月 → 判斷完轉發給 Claude 處理 vs 請工讀生： → 時薪 $185 x 4hr x 22天 = NT$16,280/月 → 而且會請假、會出錯、會離職 NT$1,200 vs NT$16,280 你覺得哪個划算？
企業導入（15min）
「你們今天做出了自己的網站，也體驗了 Code tab 的能力。
回去之後你可以繼續用它慢慢做更多東西。
但如果你想快一點，或是你想做到完整的自動化——
LINE 自動回覆、庫存同步、客戶分類——
這些涉及多個系統的串接，自己摸需要時間。」
回去之後你可以繼續用它慢慢做更多東西。
但如果你想快一點，或是你想做到完整的自動化——
LINE 自動回覆、庫存同步、客戶分類——
這些涉及多個系統的串接，自己摸需要時間。」
三個方案（投影片簡述，不推銷）：
- 知識庫建置：把公司知識 Obsidian 化 + 接 AI 搜尋（RAG）
- 多平台同步：蝦皮等不開 API 的平台，用 browser automation 串庫存
- 完整 AI 流程：LINE OA 自動分類 + Gemini router + 知識庫 + 自動回覆
「有興趣的可以課後聊。」（留卡片，不多說）
Section 10 | 回顧問題白板 + 總結（0.5hr）
回到 Section 1 的白板（15min）
「還記得今天早上你們提的那些問題嗎？
我們現在回來看這張白板。」
我們現在回來看這張白板。」
把白板上學員提出的問題一個一個過：
「這個問題——『每天手動對蝦皮庫存』——
你現在知道怎麼解了嗎？
蝦皮的 GUI 背後有 API（Day 1 教的郵差比喻）。
你登入後拿到 Cookie（Day 1 教的身分證明）。
用 AI 的 Computer Use 先探索怎麼操作（Day 2 教的三層架構第一層）。
搞懂之後寫成腳本固化（第二層）。
結果存進 DB 追蹤（第三層）。
兩天前你覺得這不可能。現在你知道每一步是什麼了。」
你現在知道怎麼解了嗎？
蝦皮的 GUI 背後有 API（Day 1 教的郵差比喻）。
你登入後拿到 Cookie（Day 1 教的身分證明）。
用 AI 的 Computer Use 先探索怎麼操作（Day 2 教的三層架構第一層）。
搞懂之後寫成腳本固化（第二層）。
結果存進 DB 追蹤（第三層）。
兩天前你覺得這不可能。現在你知道每一步是什麼了。」
逐一過 3-5 個最有代表性的問題，每個都回扣到這兩天學的概念。
「你們提了這麼多問題，大部分都回到同一個邏輯：
Web UI 背後都是 API。登入後拿到 Cookie + Token 就能操作。
固定的事寫死它，需要判斷的才叫 AI。
這就是這兩天教的所有東西。」
Web UI 背後都是 API。登入後拿到 Cookie + Token 就能操作。
固定的事寫死它，需要判斷的才叫 AI。
這就是這兩天教的所有東西。」
五感確認 + 成就感（10min）
白板五感圖最終版：
- 嘴巴（Chat + Level 3 指令）
- 手腳（Code tab — AI 自動跑 CLI）
- 眼睛（Chrome + Computer Use + DevTools）
- 耳朵（Webhook）
- 記憶（DB + Obsidian + CLAUDE.md）
「AI 的五感，齊了。
而且你不只是聽我講——
你自己做出了一個網站，就在你電腦的資料夾裡。
你的 CLAUDE.md 已經開始寫了。
你知道 API 是什麼、Webhook 是什麼、DB 是什麼。
兩天前你只會開 ChatGPT 跟它聊天。
現在你能指揮 AI 在你電腦上做事。」
而且你不只是聽我講——
你自己做出了一個網站，就在你電腦的資料夾裡。
你的 CLAUDE.md 已經開始寫了。
你知道 API 是什麼、Webhook 是什麼、DB 是什麼。
兩天前你只會開 ChatGPT 跟它聊天。
現在你能指揮 AI 在你電腦上做事。」
帶回家的東西 + 後續行動（5min）
帶走的東西：
- 自己的網站（桌面資料夾，可繼續用 Code tab 迭代）
- Obsidian Vault（已裝好、已開始填內容）
- CLAUDE.md（已填基本資訊和公司規則）
- 課程分身助手 Skill（忘記內容或卡關可以問它）
「回去之後的第一週，做三件事：
1. 打開 Code tab，繼續改你的網站
2. 把 CLAUDE.md 填完整
3. 卡住了，安裝課程分身助手 Skill，或是來找我」
1. 打開 Code tab，繼續改你的網站
2. 把 CLAUDE.md 填完整
3. 卡住了，安裝課程分身助手 Skill，或是來找我」