Vibe Coding 實戰課 — Stage 2 · 上線網頁
讓你的網頁從靜態變成能跟使用者對話的 AI 工具
按 → 或空白鍵開始
M2-4 ・ 3 小時
從串一個 API 到應用場景 到體驗 agent 模式
串一個 API 做小工具
串到既有網站 真實應用場景
體驗 agent 自己跑工作流
你的網頁從靜態變成能回應使用者 從工具變成系統 從系統變成 agent
操作指令 → 補強版參考 → 換你操作 → 分享觀察 → 小結反思
ROUND 1 · 0:00–0:30
免費額度玩到爽 不用綁信用卡
API 是 Application Programming Interface 應用程式介面
不用懂英文 就理解成 你的網頁打電話給 AI 服務 用 API 講話
不用裝 AI 模型在你電腦上 你的網頁把問題丟給雲端 AI 服務 收到答案再顯示給使用者
RPM 是 Request Per Minute 每分鐘最多打幾次 超過會被擋 今天用 Google AI Studio 因為它跟 agy 整合最好
你不用申請 看老師用同一題
問 Groq / Gemini / OpenRouter 比答案差別
A. 同一個問題 例如 用 50 字解釋什麼是 vibe coding
B. 三家平台各跑一次 看回應風格 速度 字數差別
C. 老師解釋為什麼這場景適合用哪家
老師剛示範的那個網站 不用申請 Key
看回應風格 速度 字數的差別
等一下分享用
三家都跑出回應 你說得出最適合你的那家跟一句理由 = 完成
卡住了 — 舉手 或看老師畫面用同一題跟著跑
客服回覆 即時翻譯
聊天機器人
選 Groq
讀 PDF 整理報告
分析論文
選 Google AI Studio
同問題一次試
多家免費模型
選 OpenRouter
原因 跟 agy 同一家 整合好 不用額外設定
之後想用其他兩家 流程一樣 都是申請 Key 貼到網頁
講一句話 為什麼
聽聽不同產業挑的 API 不同
R2 開始實作
API 是什麼的概念 ・ 三大平台額度認知 ・ 場景跟平台對應 ・ 看過老師示範
ROUND 2 · 0:30–1:00
拿 API Key 千萬不要 push 上 GitHub
打開 aistudio.google.com
登入 Gmail 點 Get API Key
1. aistudio.google.com 用 Gmail 登入
2. 左側選單 Get API key
3. Create API key 選 Default project 複製 Key 字串
Key 寫在程式碼裡 一旦 push 上 Public GitHub 全世界都看得到
機器人會掃 GitHub 拿你的 Key 去用 你的免費額度被燒光是小事 用量超過收費才慘
跟 SSH token 一樣 任何鑰匙都要放 .env 別 push
一句話請 AI 幫你建 它會在 .env 寫 GEMINI_API_KEY=你的 Key 在 .gitignore 加 .env 那行
照前面三步驟 Create API key 後 cmd+A 整段複製
一句話 幫我建 .env 跟 .gitignore 把 API Key 安全管理
第一行要是 .env
Key 存在 .env 裡 .gitignore 排除了它 = 完成 R3 直接用
卡住了 — 舉手 或回看 API Key 介面跟 .env 設定那兩頁照著走
沒拿到的舉手 老師或同學幫看
打開檔案 確認第一行是 .env
不要截圖貼 .env 內容到群組
現在你會 .env 機制了 回頭把那段假 Key 清掉
A. 跟 agy 說 幫我掃 my-first-page 有沒有 API Key 或 Token 字串
B. AI 會用 grep 掃整個 repo 找 sk- ghp_ AIza 開頭的字串
C. 它會找到 M2-1 你故意留的那段 提示你清掉
D. 確認後讓 AI commit 訊息寫 移除誤留的假 Key push
掃 API Key 殘留是你以後每個專案都要做的事
每次手寫 prompt 麻煩
把它變 skill 之後一句話就跑
任何新專案 任何時候
跟 agy 說 跑 check-secrets
10 秒掃完整個 repo 告訴你有沒有殘留
這個 skill 是你帶得走的安全資產
幫我把 API Key 安全檢查建成 agy skill skill 名稱 check-secrets 觸發 我說 檢查 secret / 掃 API Key / 安全檢查 做的事 1. grep 整個 repo 找 sk- ghp_ AIza ghs_ xoxb- 2. 找到的位置列出來 3. 問我要不要清 還是真的有用要保留 4. 確認後改檔 + commit + push 5. 最後提醒我 把真實 Key 放到 .env
API 還能聽你說話 看你的圖 開口說英文 吐出程式吃得下的 JSON 一頁玩完四種
講一段話
秒出逐字稿
whisper 語音辨識
拍張發票
抽品項金額
llama-4 圖片理解
逐字稿翻英文
唸給你聽
兩個 API 串接
一段話變 JSON
彩色標籤
結構化輸出
錄一段講稿 → 逐字稿 → 一鍵變成 分類 情緒 緊急度 的 JSON 標籤
看懂站 4 那包 JSON 你就懂了
ChatGPT 的答案是給人看的 API 的答案是給程式吃的
Gemini API Key ・ .env 安全儲存 ・ .gitignore 排除設定 ・ check-secrets skill 可重用
ROUND 3 · 1:00–1:30
逐字稿丟進來 自動產出結論 + email 通知
前端 GitHub Pages 後端 GAS Web App 帶 Key M1 你已會 GAS 直接接上
IDE → GitHub
一次 OAuth 之後 git push 全自動
IDE → GAS
一次 OAuth 之後 clasp push 全自動
便利 vs 安全 你選一個體驗
做會議摘要器 前端 index.html 用 SSH 登入放 GitHub Pages 後端用 clasp 幫我設好 GAS 存 GEMINI_KEY key: AIzaSy你的 Key 整段貼這 保護好 Key 避免上傳洩漏 完成兩個部署 給我兩個網址 完成後告訴我去哪裡確認 Key
agy 一次搞定 Key 自動填 但 Key 會出現在 chat 對話紀錄
做會議摘要器 前端 index.html 用 SSH 登入放 GitHub Pages 後端用 clasp 幫我設好 GAS 存 GEMINI_KEY 保護好 Key 避免上傳洩漏 完成兩個部署 給我兩個網址 完成後告訴我去哪裡放 Key
agy 部署完 引導你去 GAS UI 自己貼 Key 進 Script Properties
用同樣 prompt 跑出來的真實作品 R3 換你自己做一個
點前端網址 → 貼一段會議逐字稿 → 按產出摘要 → 三層架構真實跑起來給你看
等下你自己用 R3 兩變體 prompt 也能做出同款
GAS Web App 第一次跑會要求一次手動授權 Google 安全沙盒要求 這不是 bug 是設計
老師示範時按一次同意 之後你再打開就不會再跳了
你只做兩件事 OAuth 授權 clasp 一次 + 到 GAS UI 貼 Key 一次 其他 agy 全包
逐字稿丟進去 結論 + Action items + email 草稿 以前 30 分鐘整理現在 30 秒
【春陽茶飲 週會逐字稿】出席 店長阿凱 小美 阿哲 小玲 店長阿凱：人到齊了 今天三件事 新品 外送抽成 值班表 小美：芝麻鮮奶茶試賣一週 賣了 120 杯 比預期好 店長阿凱：好 下週一正式上架 海報小美負責 小美：OK 我週五前把海報印好貼出來 阿哲：外送平台上個月抽成漲到 35% 我覺得該去談 店長阿凱：這個我來 下週三約平台業務 目標壓回 30% 小玲：下週六我想跟阿哲換班 家裡有事 阿哲：可以啊 我那天沒排事 店長阿凱：值班表我今晚改好貼群組 小美：對了 樓下新開的咖啡店你們吃過嗎 蛋糕不錯 店長阿凱：改天團購 今天就到這 散會
全班用同一份 分享時才比得出誰的摘要抓得準 想測自己的會議紀錄 當課後加碼
推薦 B Key 不會出現在對話紀錄
各只做一次 其他 agy 全包
測完把網址貼到群組
線上網址貼逐字稿 能產出結論 + Action items = 完成
卡住了 — 舉手 或回看 agy 跑變體 B 完整流程那頁 對照卡在哪一步
過去網頁只能看 不能回應 今天 你的網頁長出了大腦 它能聽 能想 能回答 而且只用了 25 分鐘建出來
用剛才那份週會逐字稿測試 看摘要品質
同一份逐字稿丟進不同人的 看 Action items 抓得準不準
會議摘要是熱身 R4 換到你工作真實會用的
線上能用的會議摘要器 ・ 串 API 完整流程 ・ 摘要器 prompt 架構 ・ LV1 達成
ROUND 4 · 1:30–2:00
客服分流 PDF 摘要器 工作真實會用的
會議摘要器只解決一件事
逐字稿丟進去 重點抓出來
沒有商業邏輯 沒有領域知識
每個人都可以做一樣的
客服分流帶你的領域知識
輸入提問 分類 + 建議回覆
有商業邏輯 有規則
結合你的工作場景
LV2 你不只串 API 你還在 prompt 裡寫了商業規則 例如 客戶問退貨 → 走售後流程 客戶問價格 → 給優惠資訊
這個叫做 把領域知識內化進 prompt
今天全班做同一個場景
手搖飲料店客服分流
模板已填好 複製就能跑 分享時大家測同一套規則 才比得出誰的分流答得準
把模板換成你公司的場景 客服分流 / PDF 摘要 / 市場研究對比表 都是同一套改法
手搖飲場景已填好 整段複製不用改
幫我做客服分流網頁 串 Gemini - 我開手搖飲料店 賣珍珠奶茶 鮮奶茶 水果茶 - 客戶提問分三類 售前 / 售後 / 抱怨 - 售前 問品項或推薦 → 介紹品項 給一個推薦 - 售後 問訂單進度 → 請客人給訂單編號 說明查法 - 抱怨 → 先道歉 說明會升級真人處理
會議摘要器你只是用 AI 客服分流還告訴 AI 這家店怎麼運作 商業規則內化 價值高 10 倍
用同一套規則跑出來的真實作品 三句測試句可以直接按
點前端網址 → 按測試句 1 售前 → 換測試句 3 抱怨 → 同一套規則兩種回法
規則就在前頁 prompt 那五行 — 等下你貼給 agy 就是做出這個
手搖飲場景已填好 不用改
流程跟 R3 一樣 這次你已經會了
售前 售後 抱怨 各一句
我第一次來 想喝不要太甜的 推薦哪一杯 我半小時前訂的兩杯珍奶 到底做好了沒 等了 40 分鐘還拿錯單 你們怎麼搞的
網頁上線 3 句測試句都分對類 = 完成
卡住了 — 舉手 或回前頁把模板重貼一次 做完還有時間 — 把產品跟規則換成你公司的
哪一句分最準 哪一句最不準
同樣的規則 看建議回覆的語氣差在哪
課後把模板的產品跟規則換成你的 真的丟給客戶用
一個上線的客服分流應用 ・ 領域知識內化進 prompt 的方法 ・ 場景 prompt 模板 ・ LV2 主線達成
ROUND 5 · 2:00–2:30
AI 自己列計畫 改檔 測試 回報
你下一個指令
AI 回一個答案
你看結果
你再下一個指令
你決定每一步
你下一個目標
AI 自己列計畫
自己跑每一步
自己驗證結果
你只看最後回報
agent 自己想步驟 自己決定下一步要做什麼
它跟 AI 工具的差別 就像員工跟工具的差別
這一輪先體驗一次 感受這個差別
給 AI 一個有 4-5 步的目標
讓它自己拆解 跑完 回報
幫我把今天做的會議摘要器加 3 個功能 字數限制 歷史紀錄 一鍵複製 email
完成後 push 上 GitHub Pages 給我網址確認
不要每一步都問我 自己判斷 這句話讓 AI 進入 agent 模式
它會自己一步一步跑 你只看最後結果
任務超過 3 步驟而且每步明確
例如 加 3 個功能 / 改版部署上線 / 跑完一輪測試
不適合 模糊需求 你也不清楚要什麼
進 agent 模式 我有一個 4 步任務 目標 升級我的 meeting-summary 1. 加字數限制 輸入超過 500 字提示 2. 加歷史紀錄 localStorage 存最近 10 筆 3. 加一鍵複製 翻譯結果右上角複製按鈕 4. push 到 GitHub 並確認 Pages 部署成功 要求 - 每步做完跟我說做了什麼 - 全部跑完給我網址讓我測 - 過程中遇到問題自己用除錯儀式 - 不要每一步都問我 自己判斷
目標換成你自己的任務也可以
大部分時候你不用做事 只是看它列計畫跑每一步
等一下分享時講
4 步跑完 拿到網址 測到新功能 = 完成
卡住了 — 舉手 或把錯誤訊息整段貼回給 agent 讓它自己修
跟你用 prompt 一步步指揮比 哪裡不一樣
有人可能 agent 跑歪 講你發生什麼 怎麼修
講一個你想丟給它自己跑的任務
agent 模式體驗 ・ 多步任務交給 AI 自跑 ・ agent prompt 模板 ・ 知道什麼任務適合交給 agent
ROUND 6 · 2:30–3:00
回顧四模組 帶走你的作品
註冊 開 repo
部署 commit
Public Private
改 HTML 讀 PDF
產簡報
token 串接
多頁網站
新專案部署
會議摘要器
應用場景
agent 模式
我會用 GitHub 部署網頁 我會用 IDE 跟 AI 改檔 我會接 API 做 AI 應用 我體驗過 agent 模式
Stage 1 是用 AI Stage 2 是讓 AI 改你的檔案
Stage 3 是 跟 agent 一起工作 從工具升級到同事
Claude Code CLI 進階
harness 觀念
CLAUDE.md
Skills Rules
SDD + TDD
跟 agent
一起設計系統
任務拆解 + 人跟 AI 互動模式
GitHub Actions +
Cloudflare Worker
雲端自動化
今天結束你不只能做網頁 你已經有能力用 AI 解決真實工作的問題 Stage 3 把它變成系統