24hr 獨授版（4天 x 6hr）

• 課程名稱：AI 數位素養與自動化應用
• 時數：24hr（4天 x 6hr）
• 人數：30 人/班
• 講師：戴豪廷（獨授）
• 補助管道：勞動部產業人才投資方案
• 學員背景：混合（中小企業主、創業者、一般上班族）

P (Plan) — 課程計畫

訓練需求分析

產業現況

• 中小企業普遍面臨「人力成本高、數位工具多但串不起來」的困境
• 多數企業主/員工只會用 ChatGPT「聊天」，無法讓 AI 實際操作電腦完成工作
• 蝦皮、LINE OA、ERP 等平台各自獨立，資料搬運全靠人工
• AI 工具日新月異，企業缺乏系統性的認知框架來評估與導入

目標族群痛點

課程目標

讓非技術背景的中小企業主和工作者，在四天內從「只會跟 AI 聊天」進化到「能指揮 AI 建網站、接後端、串 API、部署上線」，並建立持續迭代的自動化工作流。

學習成果（KPI）

教學哲學

核心理念：「寫死的寫死，用腦的才叫 AI。」

駕訓班比喻：先學開車到目的地，不是學賽車調校。先讓學員用 AI 做出東西，再談架構優化。Skills、MCP、slash command 等進階功能只帶過，不深入。

底層邏輯

任何有 Web UI 的工具（LINE OA、ERP、電商平台、LLM 工具），只要登入後拿到 Cookie + Token，都能做成全自動化。這是整個課程的核心概念基礎。

AI 五感框架（貫穿全課的主線比喻）

每教一個概念，就回白板打勾：「我們剛剛幫 AI 裝上了什麼？」

教學資源

• 教學網站（Tutorial）：https://claude-code-tutorial-one.vercel.app/
• Demo 網站：https://demo-site-roan.vercel.app/
• Quick Start 安裝包：https://github.com/lgscvb/claude-code-quickstart
• 教案網頁版：https://course.yourspce.org（待部署）

D (Design) — 課程設計

四天課程定位

貫穿案例

多平台電商小老闆（蝦皮 + LINE OA + 官網），每天的人肉 API：

• 蝦皮有新訂單 → 手動抄到 Excel
• 客戶 LINE 問「還有貨嗎」→ 去蝦皮後台查庫存再回覆
• 每月底對帳 → 三個平台的數字手動加總
• 做行銷圖 → 自己用 Canva 慢慢拉

20 Sections 課程結構表

Day 1：看懂電腦的世界（6hr）

Day 2：當 AI 的好老闆（6hr）

Day 3：從網站到系統（6hr）

Day 4：實戰問題解決 + 部署上線（6hr）

教學方法

1. 落差 Demo：Section 1 開場，手動 2hr vs 腳本 30s，製造「我要學」的動機
2. 比喻教學：AI 五感框架貫穿全課，每教一個概念就回白板打勾；用「郵差/信封/警衛/收發小弟」比喻系統貫穿網路概念
3. 分組練習：Day 1 畫架構圖、畫人肉 API 地圖；Day 4 分組解真實問題
4. 實作產出：Day 2 做靜態網站、Day 3 接後端變動態網站、Day 4 部署上線
5. 貫穿案例：多平台電商小老闆的日常痛點，四天持續延伸同一個場景

貫穿設計

五感白板

Day 1 開始在白板畫出五感框架，每教一個概念就打勾。Day 4 結束時五感齊全。

問題白板

Section 1 蒐集學員真實痛點，記錄在白板上。Day 2 Section 10 回顧一次，Day 4 Section 20 最終回顧，對照哪些問題已經能解決。

學員的「我的系統」持續迭代

• Day 2：靜態網站（HTML/CSS）
• Day 3：加上後端 + DB（表單能存資料、能讀資料）
• Day 4：部署上線 + 加 LINE 串接

環境統一

全班統一使用 Claude Desktop Code tab（原生安裝檔，不需要 NPM / Node.js / Python / Git / Docker）。成品用 Chrome + DevTools 預覽。

招生對象

D (Do) — 實施方式

課前準備

課前一週通知學員

1. 下載 Claude Desktop（原生安裝檔）
2. 訂閱 Claude Pro（$20/月）
3. 安裝 Obsidian
4. 安裝 Chrome 瀏覽器

Day 1 前一小時（不計入課程時數）

• 帶全班辦帳號：GitHub、Supabase、Cloudflare
• 安裝 Quick Start 安裝包（github.com/lgscvb/claude-code-quickstart）
• 確認 Code tab 能開、Chrome 能用

設備需求

• 學員自備筆電（Mac / Windows）
• 投影設備 + 白板（五感圖 + 問題白板各佔一半）
• Wi-Fi（備案：4G 熱點）
• 教材 QR Code → Google Drive 下載
• 講師備用設備：行動電源、轉接頭、USB 隨身碟（Quick Start 安裝包離線版）

時數配置

Day 1：看懂電腦的世界（6hr）

Day 2：當 AI 的好老闆（6hr）

Day 3：從網站到系統（6hr）

Day 4：實戰問題解決 + 部署上線（6hr）

各 Section 教案細節

Section 1-10（Day 1-2）

Day 1-2 的 10 個 Section 內容與 12hr 版完全一致，詳見教案細節頁面。

摘要：

• Section 1：學員自介 + 提出三個痛點 → 白板記錄 → 打臉 Demo（LINE OA 30s vs 2hr）→ 五感框架導入 → 學員開始用 Chat 拆解自己的問題
• Section 2：GUI（蝦皮後台 + F12 拆穿）/ CLI（mkdir 對比 demo）/ DB（Google Sheet vs Supabase）→ 白板打勾：手腳 + 記憶
• Section 3：Markdown 五語法（# - ** > ``）+ Obsidian Vault 模板 + wikilink + AI 讀取驗證 + Git 三概念（commit/branch/push）
• Section 4：URL 拆解 + API 郵差比喻系統（信封/警衛/收發小弟/回信）+ Webhook Push vs Pull + LINE OA Webhook 拆解 + Web UI 萬能解法 + 分組畫架構圖
• Section 5：三層架構（探索→固化→記憶）+ 200 客戶 LINE 通知成本對比 + 省 Token 哲學
• Section 6：Level 1/2/3 指令品質對比 + CLAUDE.md 員工手冊 + 課堂填寫
• Section 7：講師 live demo Code tab 建網站（5min 完成）+ 迭代修改 + 全班開機確認
• Section 8：每人用 Code tab 做自己公司的靜態網站 + 講師巡場 + 成果展示
• Section 9：Skills/MCP 概念帶過 + 費用試算（NT$1,200 vs NT$16,280）+ 企業導入三方案
• Section 10：回顧 Day 1 白板問題 + 五感最終確認 + 帶走清單

Section 11 | Day 1-2 回顧 + 後端概念（1hr）

目標：複習前兩天核心概念，引入「後端」讓學員理解靜態 vs 動態網站的差異

Day 1-2 快速回顧（15min）

互動方式：投影空白的五感圖，讓學員自己填（搶答）：

• 嘴巴 = ?（Chat + Level 3 指令）
• 手腳 = ?（CLI / Code tab）
• 眼睛 = ?（Browser / DevTools / Computer Use）
• 耳朵 = ?（Webhook）
• 記憶 = ?（DB + Obsidian + CLAUDE.md）

你的網站缺了什麼？（15min）

打開一個學員 Day 2 做的靜態網站：

餐廳比喻：前台 / 廚房 / 倉庫（20min）

白板畫餐廳三層結構：

靜態 vs 動態（10min）

Section 12 | 用 Code tab 接 Supabase（1.5hr）

目標：讓學員的網站能存資料、讀資料——從靜態變動態的第一步

什麼是 Supabase？（10min）

打開 Supabase 儀表板：

講師 Demo（20min）

投影講師電腦，用 Code tab 操作：

Step 1：建 Supabase 表格

在 Supabase 儀表板新建表格 contact_form：

• id（自動）
• name（text）
• email（text）
• message（text）
• created_at（自動）

Step 2：在 Code tab 讓 AI 接上去

下指令：

Step 3：看結果

• 前往「聯絡我們」→ 填表單 → 送出
• 去 Supabase 儀表板看 → 資料出現了
• 前往管理頁面 → 看到剛才填的資料

學員跟做（45min）

投影步驟清單，學員一步一步跟：

1. 打開 Supabase → 建 contact_form 表格
2. 複製 Supabase URL 和 anon key
3. 在 Code tab 下指令（講師提供範本，學員改成自己的）
4. 測試：填表單 → 送出 → 去 Supabase 看資料
5. 加碼：做一個管理頁面，顯示所有提交的資料

小結（5min）

Section 13 | API 實作：Cloudflare Worker 當後端（1.5hr）

目標：讓學員理解「自己寫一個 API」是什麼概念，用 Cloudflare Worker 建一個簡單的後端

你也可以當「收信方」（15min）

Cloudflare Worker 是什麼？（10min）

白板對比：

講師 Demo（25min）

用 Code tab 建一個 Cloudflare Worker：

Demo 流程：

1. AI 生成 Worker 程式碼
2. 用 wrangler dev 在本地測試
3. 用 Chrome DevTools 的 Console 發一個 POST 請求測試
4. 看 Supabase 裡出現新資料
5. 部署到 Cloudflare：wrangler deploy

學員跟做（30min）

投影步驟清單：

1. 在 Code tab 下指令建 Worker（用講師的範本）
2. 本地測試（wrangler dev + 用瀏覽器 Console 發 POST）
3. 確認 Supabase 收到資料
4. （進階）部署到 Cloudflare

把前端和後端串起來（10min）

在 Code tab 下指令：

測試完整流程：填表單 → 送出 → Worker 處理 → 存進 Supabase。

Section 14 | LINE OA Webhook 串接（1hr）

目標：讓學員理解 Webhook 不只是概念，而是可以實際串接的東西

回顧 Webhook 概念（5min）

講師 Demo（25min）

Step 1：建 LINE Messaging API Channel

投影 LINE Developers Console：

• 建立 Provider → 建立 Messaging API Channel
• 取得 Channel Secret 和 Channel Access Token

Step 2：修改 Worker 接收 LINE Webhook

在 Code tab 下指令：

Step 3：設定 Webhook URL

回到 LINE Developers Console → 設定 Webhook URL → 填入 Worker 的 URL。

Step 4：測試

• 用手機加自己的 LINE OA 好友
• 發一則訊息「你好」
• 看 Supabase 裡出現訊息紀錄
• 看手機收到自動回覆「收到了，稍後回覆您」

講師帶看完整流程（10min）

白板畫最終架構圖：

帶過 LINE OA Webhook 的坑（10min）

回顧 Day 1 教過的：

• Webhook 只推客戶發的訊息，你自己回覆的不會觸發
• 如果要完整對話紀錄，回覆時自己存一份到 DB
• LINE 的 Reply Token 有時效限制（約 1 分鐘）
• 免費帳號每月只有 200 則主動推播（Push Message），回覆不限

Q&A 時間（10min）

開放提問，回答學員在操作過程中遇到的問題。

Section 15 | Day 3 成果展示 + Q&A（1hr）

目標：讓學員展示今天做出的動態網站，鞏固信心

各組展示（30min）

每組派 1-2 人投影 Chrome 畫面，展示：

1. 網站前端（Day 2 做的 + Day 3 改進的）
2. 表單功能（填寫 → 存到 Supabase → 管理頁面看到）
3. （有做到的話）LINE Webhook 接收訊息

概念串接回顧（15min）

投影完整技術棧對照表：

自由 Q&A（15min）

開放提問，回答任何問題。

Section 16 | 三層架構實戰 live demo（1hr）

目標：講師完整走一遍「探索→固化→記憶」，讓學員看到真實場景的全流程

場景設定（5min）

挑一個學員 Day 1 提出的真實問題。例如：

第一層：探索（15min）

Live demo：用 Computer Use 操作該平台

• 展示截圖分析過程
• 強調 Token 消耗
• 「這一步很貴，但只需要做一次。」

第二層：固化（20min）

Live demo：從探索結果提取 API

• F12 → Network tab → 找到關鍵 API endpoint
• 寫成腳本
• 跑一次：同樣的操作，0.5 秒完成

第三層：記憶（15min）

• Git commit（自動存檔）
• 結果寫進 Supabase（有紀錄可追蹤）
• 設定排程（每天早上 8 點自動跑）

回扣成本（5min）

白板計算：

Section 17 | 學員分組解真實問題（2hr）

目標：學員用四天學到的所有概念，分組解決一個真實業務問題

分組 + 選題（15min）

4-5 人一組，共 6-7 組。

從 Day 1 的問題白板上挑 6-7 個可行的問題，每組選一個。

題目範例（依學員提出的問題調整）：

• 「LINE 客戶訊息自動分類 + 提醒」
• 「每日庫存報表自動產出」
• 「客戶預約系統（表單 + DB + 通知）」
• 「報價單自動生成」
• 「客服 FAQ 自動回覆」
• 「多平台訂單匯整」

工作流程引導（10min）

投影工作步驟：

分組實作（80min）

講師在各組之間巡場。

成果展示（15min）

每組 2-3 分鐘報告：

1. 問題是什麼（人肉版怎麼做）
2. 解法是什麼（架構圖 + AI 做了什麼）
3. 省了多少（時間/錢的估算）

Section 18 | 部署上線（1.5hr）

目標：讓學員的網站從「只有自己電腦看得到」變成「全世界都能看到」

為什麼要部署？（10min）

方案一：Cloudflare Pages（主推，40min）

為什麼選 Cloudflare Pages：

• 免費
• 全球 CDN，速度快
• GitHub 整合，push 自動部署
• 送免費子域名 xxx.pages.dev

講師 Demo（15min）：

在 Code tab 下指令：

展示結果：https://my-company.pages.dev → 全世界都能看到了。

學員跟做（25min）：

投影步驟清單：

1. 確認 GitHub 帳號已登入
2. 在 Code tab 下指令（用講師範本）
3. AI 自動處理 → 等待部署完成
4. 打開手機瀏覽器 → 輸入你的網址 → 看到自己的網站

方案二：Vercel（備案，15min）

如果 Cloudflare 有問題，備案方案：

簡單帶過 Vercel 的部署流程，不深入。

自訂域名（帶過，10min）

學員確認 + Debug（15min）

確認全班至少有一個可存取的 URL。

Section 19 | 持續迭代工作流 + Skills/MCP 帶過 + 費用試算（1hr）

目標：讓學員知道課後如何持續用 AI 工作，以及完整的費用效益分析

持續迭代工作流（20min）

日常工作流程：

Skills 和 MCP 深入一點（20min）

Day 2 Section 9 只帶過概念，這裡多說一些。

Skills — AI 的標準作業程序：

投影 Skill 範例結構（看一眼就好，不用寫）。

MCP — AI 的外接插頭：

打開 Claude Desktop Connectors 設定畫面：

列出幾個對中小企業最實用的 MCP：

• Google Calendar（排程）
• GitHub（程式碼管理）
• Supabase（資料庫）
• Brave Search（搜尋）

完整費用試算（20min）

白板算給全班看：

基本方案：Claude Pro

vs 人工成本

對比表

省 Token 策略（小結）

Section 20 | 總結 + 課程分身 + 企業導入（0.5hr）

目標：最終收尾，確保學員帶走所有東西，知道下一步做什麼

最終白板回顧（10min）

回到 Day 1 Section 1 的問題白板：

逐一快速過 5-6 個代表性問題，每個用一句話回扣：

• 「這個 = Webhook + DB + 排程」
• 「這個 = Code tab 做個表單 + Supabase」
• 「這個 = Cloudflare Worker 接 LINE API」

五感最終確認：

• 嘴巴（Chat + Level 3 指令 + CLAUDE.md）-- 完成
• 手腳（Code tab + CLI + Cloudflare Worker）-- 完成
• 眼睛（Chrome + DevTools + Computer Use）-- 完成
• 耳朵（Webhook + LINE OA 串接）-- 完成
• 記憶（DB + Obsidian + Git + Supabase）-- 完成

課程分身助手 Skill（5min）

投影 QR Code → 安裝指引。

帶回家的產出物（5min）

1. 自己的網站（已部署上線，全世界可存取）
2. Obsidian Vault（已安裝、已填內容、AI 可讀寫）
3. CLAUDE.md（已填公司資訊和規則）
4. Supabase 資料庫（已建表格、已存資料）
5. Cloudflare Worker（已部署、24 小時運行的後端 API）
6. 人肉 API 地圖（紙本，三色標記：寫死 / 叫 AI / 手動）
7. Quick Start 安裝包（回家繼續用的基礎套件）
8. 課程分身助手 Skill（忘記內容或卡關可以問它）
9. 分組專案成品（可繼續迭代的真實問題解法）

後續行動建議（5min）

企業導入（5min）

三個方案（簡述，不推銷）：

• 方案 A：知識庫建置（Obsidian + RAG）→ 公司知識 AI 化
• 方案 B：多平台同步（browser automation）→ 蝦皮等不開 API 的平台串接
• 方案 C：完整 AI 流程（LINE OA + Gemini + 知識庫 + 自動回覆）→ 全自動化

R (Review) — 評量方式

過程評量

成果評量

柯氏四層級評估

O (Outcome) — 預期成果

學員帶回家的產出物

1. 自己公司的網站（已部署上線，可公開存取的 URL）
2. Obsidian Vault 模板（已安裝、已開始填寫公司知識）
3. CLAUDE.md（已填公司基本資訊和規則）
4. Supabase 資料庫（已建表格、已存資料）
5. Cloudflare Worker（已部署、24 小時運行的後端 API）
6. 人肉 API 地圖（紙本，三色標記）
7. Quick Start 安裝包（回家繼續用的基礎套件）
8. 課程分身助手 Skill（課後安裝，忘記內容可以問它）
9. 分組專案成品（可繼續迭代的真實問題解法）

費用效益

後續追蹤機制

• 課程分身助手 Skill：安裝後可隨時問課堂教的內容
• LINE 學員群組：持續答疑，分享學員成果
• 兩週後追蹤問卷：確認 Level 3（行為改變）
• 一個月後訪談：確認 Level 4（成果展現）
• 企業 AI 導入諮詢服務：upsell 管道

企業導入產品線

24hr vs 12hr 版差異對照