Vibe Coding 實戰課 — Stage 1 · 用 AI
AI 幫你寫程式,你只需要說需求
按 → 或空白鍵開始
M1-1 你學會了跟 AI 聊天做作品
M1-2 你學會了讓 AI 讀圖、讀文件
今天要把這些能力串起來 — 讓程式在背景自動跑
每一輪的節奏
操作 → 觀察 → 分析 → 升級 → 驗證
今天的終極目標:做出一個在背景自動跑的系統
ROUND 1 · 0:00–0:15
先看效果,再拆原理
這套系統就是你現在報名 Vibe Coding 用的那一套
這堂課結束時
你也會做出一套類似的自動化系統
跟記事本一樣
把程式碼貼進去就好
AI 寫,你貼
這就是 M1-3 的核心流程
左側「觸發器」選單
不需要寫程式設定
有 Google 帳號就能用
不用裝任何軟體、不用租伺服器、不用學寫程式
讀寫試算表
自動統計
自動建立表單
收回覆觸發動作
自動寄信
讀取信件
建立行程
時間到提醒
管理檔案
自動整理
會貼 — 把 AI 給的程式碼貼進編輯器
會跑 — 按下執行按鈕
會把錯誤丟給 AI — 截圖貼回去讓 AI 修
不用安裝、不用花錢、不用會寫程式
AI 寫 → 你貼 → 設觸發器 → 自動跑
ROUND 2 · 0:15–0:35
一張照片 + 兩步 AI = 可用的系統
用手機拍一張你身邊的實體素材,AI 幫你變成數位表單
團購訂飲料表單
品項+冰塊+甜度+數量
最實用
午餐訂便當表單
主菜+配菜+白飯/糙米
每天都用得到
部門聚餐投票表單
口味+大小+數量
選擇困難救星
下午茶統計表單
手寫字考驗辨識力
AI OCR 挑戰
數位簽到表單
姓名+部門+時間
無紙化第一步
活動報名表單
姓名+人數+場次
路邊撿的也能用
這是一張飲料店菜單 辨識所有品項、價格、可選規格 整理成結構化清單
AI 回傳乾淨的結構化資料
品名、價格、冰塊選項、甜度選項 — 全部辨識完成
根據這份清單 寫一個 GAS,自動建立 Google Form 標題「XX 飲料團購單」 每個品項是一個區塊 包含數量和規格選項
AI 會回傳一整段程式碼
你不需要讀懂,只需要貼進 Apps Script Editor
script.google.com → 新專案
取代預設的空白函式
第一次執行需要允許程式操作你的 Google 服務
表單已經自動建好了
「這個應用程式未經驗證」
「可能不安全」
紅色警告文字
這是你帳號裡的腳本
但程式碼來源是 AI
授權前要先看權限範圍
先用測試表單 / 測試 Sheet
不要放敏感資料
看到 Gmail / Drive 全域權限先停下來問老師
全程不到 10 分鐘
你做的第一個自動化工具,馬上有人用
OCR + 結構化
讓 AI 讀懂實體世界
GAS 建表單
讓程式代替人工
兩步 AI → 一個成果 →「用 AI 串起流程」的雛形
有些字讀錯 → AI OCR 不是 100%,要人工檢查
不急 — Round 4 專門教除錯
AI 辨識結果要人工核對
紙本和數位世界的橋樑
數位化的第一步
程式操作你的 Google 服務
需要你的許可
AI 讀圖(M1-2)+ AI 寫碼(M1-3)
兩步串接,從紙本到數位表單不到 10 分鐘
ROUND 3 · 0:35–0:55
no-code 精神:你說 → AI 寫 → 你驗證
每加一個需求,就回 GAS 看 AI 怎麼套用
不是教你怎麼點 GAS 的選單
是教你怎麼讓 AI 一步一步長出完整系統
幫我寫一個 GAS 讀取我這個 Google Form 的回覆 統計每個品項的訂購數量
AI 給你的程式碼貼進 Apps Script
觀察它怎麼用 SpreadsheetApp 讀 Sheet 的欄位
不用看懂每一行,看「它讀了哪一欄、寫到哪一欄」
很好 現在我希望表單一收到新回覆 就自動執行這段統計 不用我手動點
AI 會教你到「觸發器」頁面新增一個 onFormSubmit
你照做,看到觸發器列表多了一筆
這就是「鬧鐘」被裝上了
每次統計時,順便加上時間戳 讓我知道是什麼時候更新的
AI 在統計程式裡多加了一行 new Date()
填到 Sheet 的某一欄
你重新貼程式碼,再執行一次
你沒寫一行程式碼
但透過三次「加需求 → 看 AI 寫 → 驗證套用」
長出了一套有觸發器、有統計、有時間戳的完整系統
什麼事件啟動程式
表單提交 / 時間到 / 新資料
程式要做什麼
統計、寄信、搬資料
怎麼知道它有跑
執行記錄、結果驗證
三要素齊全 = 一個完整的自動化系統
「它真的有跑嗎?」
設了之後不知道怎麼確認
Apps Script → 左側「執行項目」
每次觸發都有紀錄
成功/失敗一目了然
Sheet 的欄位叫「您想喝什麼?」 但 AI 寫的程式碼找的是「品項」 → 找不到欄位 → 報錯
AI 不知道你的 Sheet 長什麼樣
把 Sheet 的欄位名稱截圖或列出來告訴 AI
所有執行紀錄都在這裡
點開可以看到詳細的錯誤訊息
每次表單提交都應該有一筆紀錄
四個 Step 拼起來才算完整
少一個都跑不起來,這就是「系統」的概念
ROUND 4 · 0:55–1:15
R3 過程中你一定遇過紅字錯誤
這 20 分鐘把處理錯誤的肌肉練起來
AI 寫的欄位名
跟你 Sheet 不一樣
第一次執行
沒同意授權
AI 用了不存在的
API 名稱(幻覺)
這些錯誤不需要避免 — 遇到才有機會學會處理
下一頁學三步除錯法,把它變成你的反射動作
看錯誤訊息
截圖保留完整畫面
把截圖丟給 AI
「這是我跑出來的錯誤
請幫我修」
AI 給修正版
貼回去再跑一次
這是執行記錄,幫我修 [把整段執行記錄貼這裡]
執行記錄裡已經有 AI 需要的全部資訊
錯誤類型、出錯位置、相關程式碼
你不需要當翻譯,AI 自己看得懂
請在程式裡加上 Logger.log 記錄每個關鍵步驟的執行狀態 方便我看執行記錄追蹤問題
執行記錄會自動印出每一步做了什麼
出錯時你不只看到錯誤,還看到「錯之前發生了什麼」
下次貼給 AI,它修得更準
寫程式 → 跑 → 報錯 → 修 → 再跑
差別只在描述錯誤和修復的速度
知道紅字是訊號,不是失敗
不再說「程式壞了,幫我修」
親手跑過一次「看 → 丟 → 貼」的循環
從現在開始,遇到任何 Error
都不會卡住你 — 進入 Round 5
ROUND 5 · 1:15–1:35
同一個任務問三個 AI
看哪一個的回答方式最適合你的習慣
Sheet 有新資料時 自動統計各品項的數量 把結果寫到統計表
分別把同一段需求貼到三個 AI
比較回傳的 GAS 程式碼
跟 Google 生態整合
但也常搞錯指令
實測才知道
附詳細中文註解
程式結構清晰
適合學習理解
給完整可跑版本
包含錯誤處理
直接貼就能用
這只是常見傾向,不是絕對
同一題你問三次可能拿到三種答案
| 你比較在意 | 可能適合的方向 |
|---|---|
| 看懂程式碼在做什麼 | 找註解詳細的那個 |
| 貼了就能跑,不想改 | 找完整度高的那個 |
| 來回問細節都耐心回 | 找對話順暢的那個 |
「最適合」沒有標準答案 — 親自跑過才知道哪個對你的胃口
Claude 偶爾用到不存在的 GAS API
函式名稱看起來很像,但 Google 根本沒有這個功能
AI 會「一本正經地胡說八道」
這就是 M1-1 提過的 AI 風險 — 幻覺
程式碼也會有幻覺,不只是文字
能跑 ≠ 正確,但不能跑 = 一定有問題
Sheet 裡的統計數字對不對
把程式碼給另一個 AI 看 —「這段有沒有問題」
M1-1 學了指令技巧 → M1-3 加上工具選擇
指令品質 + 工具選擇 = 更好的產出
三個平台都會有幻覺、都會搞錯指令
差別在「誰的回答方式適合你的工作習慣」
選對工具不靠別人推薦,靠自己實測
ROUND 6 · 1:35–1:45
盤點收穫,看見下一步
OCR + GAS,紙本到數位不到 10 分鐘
表單提交 → 自動統計 → Sheet 更新
看 → 丟 → 貼,Error 不再可怕
GAS 場景選 Gemini,想看懂選 Claude
建表單
統計資料
觸發自動化
在 Google 生態內運作
做對外的網頁
串接 AI API
發 Telegram 通知
讓外部使用者互動
function doGet() {
return HtmlService.createHtmlOutput("Hello!");
}
→ 部署後你會拿到一個公開網址
→ 任何人都能打開
下一堂會用 doGet() 做一個真正的網頁
有網址、有介面、任何人都能用
GAS + AI API + Telegram = 你的第一個對外服務
有網頁、有 AI、有通知
每一堂都在同一個專案上疊加新能力
飲料團購系統會越來越完整
不只學了什麼,是想法怎麼變了
從「我補流程的洞」→ 流程開始替我分工
| # | 常見問題 | 學到什麼 |
|---|---|---|
| 1 | 手寫菜單 AI 辨識率低 | OCR 要人工核對 |
| 2 | 授權畫面嚇人 | 授權 = 允許程式操作帳號 |
| 3 | 觸發器設了不知道有沒有跑 | 確認機制(執行記錄) |
| 4 | AI 程式碼貼進去報 error | 三步除錯法 |
| 5 | Claude 用到不存在的 GAS API | 幻覺 + 工具選場景 |
NEXT UP
你的第一個對外服務 — 有網頁、有 AI、有通知
一張菜單 → 團購表單 → 自動統計 → 下一堂加通知
M1-3 完成