第7章：Vibe Coding 入門

1

什麼是 Vibe Coding？

過去寫程式是「先學語法、學語言、學框架，等到你能搞定 hello world，已經兩個月過去」。Vibe CodingVibe Coding 一詞由 Andrej Karpathy 在 2025 年提出，描述「不寫程式、只用自然語言對話、讓 AI 寫程式」的新型開發方式。重點是「掌握 vibe（感覺、方向）」，而非「掌握語法」。是 2025 年才開始流行的新型開發方式，你只負責用自然語言講想法、看結果、給回饋；AI 負責寫程式、執行、改錯。整個流程像跟一個擅長寫程式的同事對話，不需要打開教科書。

本章主打 Claude Code，由 Anthropic 推出、目前 Vibe Coding 圈業界討論度最高的工具之一。它能讀你的整個專案、跑測試、改 bug、串資料庫、甚至幫你部署到網路上。重點是：零程式背景的人也能上手，因為你只需要會用中文描述需求。

本章學習目標

① 體驗「Vibe Coding」，你負責講想法、AI 負責寫程式；
② 用 Claude Code、Gemini CLI 或 Codex 做出第 1 個屬於自己的小工具或 App 原型；
③ 學會基本除錯流程：把 error 訊息原樣丟回 AI 就對了；
④ 零程式背景也能打造個人網站、工作效率小工具；
⑤ 認識從 Claude Design 設計稿到 Claude Code 可上線網站的銜接流程。

案例觀摩:Vibe Coding 兩種典型成果對比

本章的心法與工具能做出什麼?下面兩個真實案例,正好代表 Vibe Coding 的兩種典型方向。先點進去看一下,再回來讀心法,會更有畫面感。

案 2 · 個人展示型

關東八日旅遊指南

生活、視覺強、純前端互動(資料寫死、不存使用者輸入)。讀者一次性讀完或現場查路線,適合作為旅遊規劃、研究室介紹、活動籌備頁。

看案例 →

案 3 · 工具型

醫療品質專案管理儀表板

嚴肅、有後端邏輯、會記住使用者輸入的資料(IndexedDB 儲存)。讀者每天打開「做事」,記錄並追蹤跨評鑑、JCI、QCC 等多個專案的進度。

看案例 →

兩個案例展現 Vibe Coding 的應用面有多廣:個人展示型用來「呈現資訊」、工具型用來「處理事情」。看完兩個你會更清楚自己想做的是哪一種。

2

Vibe Coding 心法：你是產品經理，AI 是工程師

Vibe Coding 的關鍵不是「學程式」，是學會「怎麼當一個好產品經理」。產品經理的工作是把模糊的需求變清楚、把優先順序排好、把成果驗收。下面四個心法是社群上實踐過、能讓 Vibe Coding 順暢進行的關鍵。

清楚描述需求

「做一個記帳 App」太模糊；「做一個讓我 5 秒鐘輸入金額、自動分類、月底用圖表呈現的記帳網頁」就清楚很多。需求越具體，AI 越不會做歪。

分階段做、分階段驗收

不要一次給 10 個需求；先做最核心的 1 - 2 個功能，跑起來後再加。每階段都跑、都看、都驗收，比一次寫一大坨好除錯。

用「使用者故事」對話

「按下這個按鈕後，我希望畫面跳到下一頁，並顯示『成功』訊息」，用「我作為使用者，希望⋯⋯」的句型，比技術術語清楚。

每改一次都試一次

不要連改 5 次再驗證，改一次就跑一次，發現有問題立刻回頭修。連改多次後出錯，幾乎找不出是哪一改造成的。

跟 AI 協作的底線：先讀得懂它的輸出

跟 AI 協作有個最低門檻：讀得懂它的輸出。判斷得出它寫的對不對、選的合不合用、結構通不通順，你才能接著告訴它哪裡要改、補什麼條件、調哪個方向。沒有這份判讀力，AI 在你手上就走味，你會變成那種把模糊需求、講不清楚的流程、互相矛盾的限制一股腦丟出去，等成果出來再嫌它做不好的主管。

為什麼現在是學 Vibe Coding 的黃金時機？

Claude Code 等工具讓「程式產出速度」進入了過去無法想像的階段。社群上不斷出現驚人的見證：

有設計圈創辦人說：「聖誕假期我完成的編碼專案，比過去十年加起來還多。」
有大型科技公司工程師表示：「過去要花一年的工作，現在壓縮到一小時。」
有頂尖大學教授示範：「1 小時內複製並擴展一篇論文的所有實驗。」

這些都不是行銷話術，是 2025 - 2026 年實際發生的事。背後的趨勢很清楚：軟體開發正從手工匠藝過渡為工業化流程。對「不是工程師、但有想法」的人來說，這是史上最低的「把想法變成軟體」的門檻。

技術上能做到這件事的關鍵之一，是 Claude 等模型現在能一次處理百萬字元的上下文，等於把整個專案、整本書、整篇論文丟給它都不會忘。這對「腦中有想法、但沒寫過程式」的人是決定性的差別：你不必拆解成小任務再分批餵給 AI，可以一次給它全貌、讓它自己組織出整套方案。

3

主打工具：Claude Code 是什麼

動手前：還沒裝過工具的學員先看這裡

本節開始要實際在電腦上操作 Claude Code。如果你還沒裝過 VS Code、終端機、Git等工具，先去看獨立的環境設定速查 →（從零裝起到能跑 Claude Code，30 - 60 分鐘可完成），跟著步驟把工具裝起來再回來這節繼續學。已裝好的學員可直接往下讀。

§2 的心法談完，下面看本章主打的工具。Claude Code 是 Anthropic 推出的代理式編程工具（可以讓 AI 直接動手寫程式、改檔案、跑指令的工具），它能讀你的整個專案、改檔案、執行指令、整合開發工具。和傳統 ChatGPT 寫程式不同，它不是「告訴你怎麼寫」，它是「直接動手寫」。可以在終端機、IDE（Integrated Development Environment，整合開發環境，工程師寫程式的專用編輯器，如 VS Code）、桌面 App、瀏覽器、甚至手機 App 上使用。

Claude Code 的 4 個關鍵特色

終端機原生

主要在「終端機」（Mac 的 Terminal、Windows 的 PowerShell 那種純文字輸入介面）裡運行，直接在你的專案資料夾裡跟 Claude 對話，它能看見你的所有檔案、執行任何指令。

跨平台無縫銜接

同一個任務能在終端機、瀏覽器、手機之間搬，不必重講需求。進階指令（如 --teleport、/desktop）見下方說明。

可調思考力度

Opus 4.7 模型支援多級 effort（思考力度）設定（auto 自動 / high 高 / xhigh 較高 / max 最高），依任務難度切換，簡單任務省成本、複雜任務開最大火力。

進階自動化

支援 Hooks、子代理（Subagents）等進階機制，讓重度使用者打造客製化工作流（下方 E、F 詳述）。

4 大主流 AI 程式助手對照

Claude Code（Anthropic）

本章主打 · 終端機原生

對複雜任務、長流程任務的支援目前最完整；能跑長任務、整合 IDE。需 Pro 以上方案。

Gemini CLI（Google）

免費可用 · 終端機原生

Google 推出的命令列 AI 編程工具，與 Google 服務整合好；免費額度足夠做個人小工具。

Codex（OpenAI）

ChatGPT 內建

整合在 ChatGPT 裡的編程助理，不需切換工具；適合不想另外裝終端工具的初學者。

GitHub Copilot（GitHub · Microsoft）

編輯器原生 · 最早玩家

直接裝在 VS Code 等編輯器裡，邊打字邊自動補完。2025 年起加上 Chat、Agent 模式與多家模型可選，PR（Pull Request，工程師把新寫的程式提交上來請求合併的標準流程）也能讓它線上 code review（程式碼審查，自動挑出潛在 bug 與風格問題）。

Claude Code 進階機制（看完 §5 Demo 後再回來）

下面 8 個是進階使用者最常用的機制，密度較高，新手建議先看完 §5 的 30 分鐘 Demo、做出第一個小工具後，再回來這裡查。第一次只看 A（CLAUDE.md）+ B（斜線指令）+ D（編輯模式）就夠用;其他 E-H 等需要時再讀。

A · CLAUDE.md，給 Claude 的常駐備忘錄

在專案資料夾裡建一個叫 CLAUDE.md 的檔案，Claude Code 每次新對話開始都會自動讀取，不用你提醒。把「該專案該知道的所有事」寫進去（你是誰、研究主題是什麼、命名規則、不可動的檔案、偏好的回答語言），之後每次對話自動套用。

為什麼這是最重要的單一機制

沒有 CLAUDE.md，學員會發現「Claude 每次新對話都忘記我之前的設定」，這不是 Bug，是設計如此（為了省「token / 額度」，token 是 AI 計算費用的基本單位，每次讀檔案都會消耗，所以 Claude 不會自動載入專案所有檔案）。CLAUDE.md 就是給 Claude 的「每次開機都看一次的便條紙」。建議內容：① 你是誰、做什麼研究 ② 專案目的 ③ 不可動的檔案與規則 ④ 偏好的回答風格與語言。進到既有專案 → 輸入 /init，Claude 會自動分析專案後幫你生成第一份 CLAUDE.md。

B · 斜線指令（`/`），操控 Claude Code 的方向盤

對話框裡輸入 /，會跳出指令選單，這是控制 Claude Code 的標準介面。下表是新手必背的 7 個：

指令	用來做什麼
`/model`	切換 AI 模型（Haiku 最輕量、Sonnet 中等、Opus 最強），簡單任務用 Haiku 省錢，複雜推理用 Opus
`/init`	讓 Claude 分析整個專案，自動生成 CLAUDE.md
`/compact`	壓縮過長對話，用量達 70% 時用一次，避免 Claude 變遲鈍
`/Account`	查目前剩餘額度與下次重設時間
`/Agents`	建立 / 管理客製化子代理（Subagent）
`/MCP`	查看已安裝的 MCP 連接器（Notion、Calendar 等）
`/plugins`	瀏覽 / 安裝外掛包（Skills + Hooks + MCP 的整合包）

C · @ 符號 + 反白選取，把檔案或段落帶進對話

跟 Claude 講話時，要它讀某個檔案，不需要把整段內容貼上去：

輸入 @ → 跳出檔案選單，選擇後 Claude 會把整份檔案讀進對話
在編輯器裡反白某段文字 → 自動帶進 Claude 的輸入框，方便你下指令「把這段改成 ___」

沒這兩招，學員只能複製貼上整段文字，不只浪費時間，還會塞爆對話 token。

D · 自動編輯 vs 授權確認，別被授權彈窗煩死

Claude Code 預設「每次要改檔案、執行指令都會跳出授權框」，安全考量正確，但長任務時會被點到手痠。兩種解法：

在彈出時點「允許所有編輯」，該次任務內後續編輯都不再問
輸入框左下角「編輯模式 → 自動編輯」，永久關閉授權彈窗

安全建議：自動編輯只開在「測試專案」「明確隔離資料夾」；正式工作場合保留授權確認，避免 Claude 改到不該動的檔案。

E · Hooks vs Skills，必定執行 vs AI 判斷執行

第 4 章學了 Skills（給 AI 帶工具書）。Hooks 是它的對偶，一旦設定好，百分之百一定執行，不依賴 AI 判斷。兩者用途不同：

Skills · AI 智慧判斷

Claude 看任務性質，決定要不要套用。例：寫論文 → 自動套 LaTeX skill；查資料 → 自動套 PubMed skill。彈性高、但有時會漏觸發。

Hooks · 條件觸發、必定執行

「當 X 發生 → 必做 Y」的硬規則。例：任務完成 → 桌面通知；檔案修改 → 自動 git commit。不依賴 AI 判斷，所以絕對可靠。

簡單原則：「每次都要做、規則明確」用 Hooks；「看情境動態應用」用 Skills。

F · Subagents（子代理），平行任務、可客製化

Subagent 是 Claude 派出去的「分身助理」，主要用來同時處理多個獨立任務，不必排隊等。兩種類型：

① 一次性子代理

Claude 自己派出去，例如「同時查兩篇文獻」「並行測試 3 個 prompt 變體」。任務結束後分身被回收，不留下。

② 持久客製化代理

輸入 /Agents 自己建。可以指定它的專長（例：「文獻摘要助手」「實驗設計審查員」）、能用的工具、模型、顏色。下次想用就 @ 點名。

對 Claude 講話時，它會自動判斷該不該派子代理；想指定就用 @ 點名某個客製化代理（例如 @文獻助手幫我整理近 3 年文獻）。

G · MCP，把 Claude 接到 Notion / Calendar / Email

預設的 Claude Code 只能讀 / 寫本機檔案。想讓它「順便查我的 Email」「把結果寫到 Notion」「在 Google Calendar 排會議」，就要裝 MCP（Model Context Protocol）。

MCP 是什麼：把外部服務「插上」AI 的標準介面，類似 USB 之於電腦。每個服務（Notion、Slack、Linear、Email 等）都有對應的 MCP 連接器。

怎麼安裝（以 Notion 為例）：

到 Notion 官網找「Notion MCP」說明頁
把那一頁的網址複製起來
回 Claude Code 對話框貼上 → 「請幫我安裝這個 MCP」
Claude 自動處理安裝；完成後輸入 /MCP → 點「驗證」 → 瀏覽器授權即可

研究室應用情境：把 Notion MCP 接上後，可以直接說「把今天的實驗結果整理進 Notion 的『2026 春季實驗』資料庫」，Claude 自動寫入，不用切換視窗。

H · Plan Mode + Checkpoint，先規劃、隨時回退

Plan Mode（計畫模式）：對話框左下角切到「Plan Mode」，Claude 會「只規劃、不動手」。把整個需求講完後，Claude 給你一份完整計畫；確認沒問題再點「同意」進入實作。避免 Claude 在需求還模糊時就開始亂蓋。

Checkpoint（檢查點）：對話歷史的每一輪都是一個存檔點，可以把「對話」「檔案」「兩者」回退到該點：

Fork Conversation from here，只回退「對話」，檔案不動
Restore files only，只回退「檔案」，對話保留
Restore both，兩者一起回到該時間點

回退後原本的歷史不會消失，會像「另一個分身」存著。隨時可從上方歷史選單切回主線。學員試新方向時不必擔心毀掉原版。

入門建議：先看你工作時主要在哪裡

在 VS Code 寫程式 → GitHub Copilot 最順，邊打字邊補完零摩擦；
想讓 AI 自主跑長任務 → Claude Code 或 Gemini CLI（終端機原生，能讀整個專案、跑指令、改檔案）；
不想另裝任何工具 → 直接在 ChatGPT 裡用 Codex 起手。
多數人會混搭：日常一個、進階一個，特殊任務再開第三個，不必勉強自己只用一家。

活動 · 觀念 + Demo

講授 Vibe Coding 心法、Claude Code 與 Gemini CLI / Codex 的差異。
現場 Demo：30 分鐘做出「個人行程儀表板」網頁，過程包含描述需求、迭代、部署。
另外 Demo：Claude Design → Claude Code 的 handoff，把原型直接變成可瀏覽的網頁。

4

免費起步：Vibe Coding 2 階梯路徑（不必先付月費）

前一節主打的 Claude Code 需 Pro 方案（每月約 $20 美元），對教師、研究生、預算有限的學員是真實的門檻（Claude Code 沒有免費版，新申請 API 約有 $5 試用額度，只夠跑幾小時）。其實 Google 的工具家族有一條完全免費的階梯，可以從零成本一路走到「能部署完整專案」。建議先用免費路徑確認自己想學再付費。

完全零成本的首選：Antigravity

如果你不想付費、又想直接體驗「對話寫程式」，免費首選是 Google 的 Antigravity，一個內建 AI agent 的免費 AI 編輯器，等於把「裝 VS Code ＋裝 Claude Code」兩件事合成一個免費工具（功能可達成，差別在免費額度有限、長任務深度不如付費的 Claude Code）。下面兩階梯仍可循序體驗，但若只想挑一個免費工具上手，直接從 Antigravity（階梯 2）起步也可以。

時效提醒：Gemini CLI 個人免費版即將停服

Google 宣布 Gemini CLI 與 Gemini Code Assist 的個人免費版，自 2026 年 6 月 18 日起停止服務，免費個人需改用 Antigravity。本章 §8 的 Gemini CLI 附錄仍可參考其觀念，但若你是免費個人帳號，請以 Antigravity 為主要的免費工具。

A · 2 階梯路徑全景

從「瀏覽器即用的輕量入口」走到「免費 AI 編輯器」，兩階都免費。先用階梯 1 花 5 分鐘體驗「對話生成網頁」，需要真正改、測、部署時再爬到階梯 2。

階梯 1 · Gemini Canvas

瀏覽器即用 · 0 安裝 · 輕量入口

到 gemini.google.com 點工具 → Canvas，一段對話就生成可分享的網頁。5 分鐘上手，最低門檻入口。

階梯 2 · Antigravity

免費 AI 編輯器 · Claude Code 替代

Google 推的免費 AI 編輯器，登入 Google 帳號即用。內建 AI Agent，可選 Gemini / Claude / GPT 模型，Win / Mac / Linux 跨平台。等於把「裝 VS Code ＋裝 Claude Code」合成一個免費工具。

B · 階梯 1：Gemini Canvas 操作要點與卡關處

Canvas 的入門體驗最好，一段中文對話就能生成可分享的網頁。但有 3 個學員一定會踩到的雷，先講清楚。

3 個必踩雷區

① 圖片不能直接上傳，你把圖片直接拖進 Canvas、要它放進網頁，沒效果。必須先把圖片傳到「圖床」（免費代管圖片、給你一個網址的服務，例如 Imgur、ImgBB）取得網址，再貼網址給 Gemini。

② 分享頁面有水印，Gemini 預設分享頁的上下會有 Gemini 浮水印，看起來像試做品。解法見下一段「Google Sites 去水印」。

③ 含 AI 功能的網頁需要 API key（API 金鑰，是 AI 服務商發給你的「身分證 + 計費卡」，標明這次的呼叫算到哪個帳號），你做的網頁如果有「按一下讓 AI 回答」的功能，分享給別人時別人會用不了，因為他沒登入你的 Google 帳號。要讓別人能用就得綁 API key，而免費版 API 額度很低，付費版可能刷爆信用卡。

⚠️ 2026 年 6 月新政策：從 2026 年 6 月 19 日起，Google 規定新申請的 Gemini API key 必須先設定「哪個網址才能用這把 key」（在 Google Cloud Console 設定，類似「綁定門號」的概念），沒設定的 key 會被自動鎖住。個人在自己電腦練習不受影響；但要把含 AI 功能的網頁分享給別人用、部署到 GitHub Pages 之前，務必先回 Cloud Console 把要部署的網址加進「允許清單」。

C · 進階小技巧：用 Google Sites 去水印

免費也能拿到乾淨無水印的網頁，把 Gemini Canvas 生的 HTML 程式碼搬到 Google Sites 嵌入發布就好：

在 Gemini Canvas 點「程式碼」分頁

找到生成好的網頁畫面後，切換到程式碼檢視，按 Ctrl+A 全選後 Ctrl+C 複製整段 HTML。

到 Google Sites 開新空白網站

打開 sites.google.com → 點「空白網站」，進入編輯畫面。

用「整頁嵌入」放整頁網頁

點右側的「頁面」分頁，看這一欄最底部的圓形「＋」按鈕（注意：不是頁面名稱旁邊的「⋮」，那個只給單一頁面用）。把滑鼠移到「＋」上，展開後選「整頁嵌入」 → 命名 → 貼上剛才複製的 HTML（或網址）。

這樣做出來的頁面會佔滿整個瀏覽器視窗、沒有左右留白、也沒有頁首標題，最適合像旅遊指南、研究室介紹這種「整頁型」的網頁。

發布

預覽 OK 後，右上角「發布」 → 自訂網址（例如 research-lab），就有一個乾淨無水印的網址了。

只想放一個「小元件」而不是整頁？

如果你只是要把一個小工具（例如一台計算機、一個小表單）放進一般頁面的某一區，改用「插入」分頁 → 「內嵌」（角括號 <> 圖示）→ 「嵌入程式碼」貼上即可。但一般頁面的內嵌兩側一定會留白、拉不到滿版，所以整頁型網頁請用上面的「整頁嵌入」。

Google Sites 完全免費，無水印，可用自己的網域；但發布出去的版本，原本 Gemini 內建的 AI 功能會失效（因為沒帶 API key），純展示型網頁不受影響。

D · 階梯 2：Antigravity（免費 AI 編輯器）

當階梯 1 的 Canvas 靜態網頁不夠用、需要在電腦上「真正打開、改、測、部署」時，Antigravity 是最自然的下一步。它是 Google 推的免費 AI 編輯器，等同 Claude Code 的免費替代方案，也是免費個人帳號目前最推薦的免費工具。

它能做什麼

跨平台（Win / Mac / Linux）、登入 Google 帳號免費用、內建 AI Agent、可選 Gemini / Claude / GPT 模型、有 Planning Mode（先規劃再實作）、有 Customization Rules（類似 Claude Code 的 CLAUDE.md）。

典型工作流

① 在 Antigravity 新建專案，或用「Clone Repository」（把 GitHub 上的專案複製到自己電腦）抓現成專案下來 → ② 用對話讓 AI 寫或改程式、跑起來看效果 → ③ 用 AI 補齊 package.json（Node.js 專案的「身分證 + 依賴清單」檔）、設定 GitHub Actions（GitHub 的自動化工具，能在你 push 程式時自動跑指定動作） → ④ 部署到 GitHub Pages（全免費）。

Antigravity 跟 Claude Code 的差異：Claude Code 在程式工程深度（讀整個專案、跑測試、長任務 SDK）上仍領先；Antigravity 對「研究室小工具、教材網頁、原型」綽綽有餘。免費額度有限（每天約 20 次 agent 請求，每 5 小時刷新），夠用就先用，重度開發再考慮付費升級。

Antigravity 快速上手：安裝 → 變中文 → 第一個專案

從零裝起到跑出第一個專案，照著做約 15 分鐘。事前準備：一個 Chrome 瀏覽器、一個個人 Gmail 帳號。

① 下載與安裝

到官網下載「Antigravity IDE」

打開 antigravity.google/download，認明「Antigravity IDE」（程式編輯器）這一個，選你的作業系統（Windows / Mac / Linux）下載安裝檔。

下載頁上另一個只寫「Antigravity」的，是進階用的「代理管理員」儀表板（沒有編輯器），初學者用不到，不要下載那個。

安裝並開啟

Windows 雙擊安裝檔一路「下一步」；Mac 開 .dmg 後，把 Antigravity 圖示拖進「應用程式」資料夾。裝好後開啟它。

走過第一次設定精靈

會出現幾個設定畫面，依序：① 要不要從現有的 VS Code / Cursor 匯入設定，沒有就選「全新開始」 → ② 選深色或淺色主題 → ③（可略過）安裝命令列工具，之後能用 agy 指令快速開啟 → ④ 用你的個人 Gmail 登入（免費方案就能用）。

② 把介面變成繁體中文

左側工具列進「Extensions（擴充功能）」或「Marketplace 應用市集」 → 搜尋「Chinese (Traditional)」 → 找到地球儀圖示的繁體中文語言包 → 按「Install」 → 重啟編輯器，整個介面就變繁中。

③ 讓 AI 一律用繁體中文回覆（設定一次，永久生效）

在對話（chat）視窗的選單點「Customizations / Rules」 → 在「全域規則」欄寫一句「請一律使用台灣繁體中文回覆」。這跟 §3 介紹的 CLAUDE.md 是同一個概念：給 AI 的常駐備忘錄，之後開任何專案都自動套用。可順手再加「程式碼註解用英文」「回覆不要用表情符號」等個人偏好。

④ 開始你的第一個專案

開一個專案資料夾

在 IDE 裡用「File → Open Folder（開啟資料夾）」開啟一個空資料夾，當作你的專案。

用中文描述你要做的東西

在右側 AI 面板的對話框直接打需求、按送出，AI 會自己規劃步驟、建檔、寫程式、跑起來。例如可以貼這一段：

幫我做一個「個人行程儀表板」單頁網頁： 1. 可輸入待辦事項與預估時數，選優先級（高 / 中 / 低） 2. 高優先用紅色、中黃、低綠 3. 清單右上角顯示總時數 4. 資料存在瀏覽器（重新整理不會不見）技術用純 HTML + CSS + JavaScript，做完讓我能在瀏覽器打開看效果。

不滿意就接著用中文講

例如「把字體放大」「加一個刪除按鈕」「配色換成深藍」，它會即時改。這就是 §2 心法、§6 除錯講的「分階段驗收、把 error 原樣丟回去」的精神，用 Antigravity 完全免費就能練。

E · 重大資安觀念：Vibe Coding 應用是「玻璃屋」

無論是 Gemini Canvas、Antigravity 還是 Claude Code 做出來的網頁應用，多數都是純前端，也就是說所有程式碼會直接送到使用者的瀏覽器。任何人按右鍵「檢查」 → 把 HTML 元素複製 → 整個 app 就被帶走。

絕對不能放進 Vibe Coding 應用的 3 種東西

API key 不能寫死在前端，別人會撿走，刷爆你的額度
付費邏輯不能放前端：例如「付 100 元才解鎖完整內容」。問題是那份被「鎖起來」的內容，其實早就跟著網頁一起下載到使用者的瀏覽器了，只是用畫面蓋住；使用者按右鍵「檢查」就能把蓋子掀開、直接看到，沒付錢照樣拿得到，這道鎖等於沒鎖
敏感資料、密碼、商業邏輯不能放，前端 = 公開，沒有「藏起來」這個選項

一句話：Vibe Coding 的應用是給人類看的網頁，不是給銀行用的金庫。需要真正保護敏感邏輯，得做「後端」，那就跨入第 10 章「串接外部服務」的領域了。

F · 路線決策表：你的情境該選哪個

你的情境	建議起步階梯
完全沒裝過任何工具，只想試試「對話寫網頁」是怎麼回事	階梯 1 · Gemini Canvas
要做「研究室介紹頁」「課程選課輔助器」「線上小測驗」等靜態網頁	階梯 1 · Gemini Canvas + Google Sites 發布
要在電腦上真正打開、改、測、部署，或已有 GitHub repo 想 clone 下來改	階梯 2 · Antigravity
願意付費、要做專業專案（程式工程強度高、長任務、跨平台）	Claude Code（Section 3）
處理生醫研究、實驗室自動化、文獻整理（要 Skills）	Claude Code + Skills（第 4 章）

入門路線建議

學員建議用「階梯 1（Canvas）→ 階梯 2（Antigravity）→ 付費 Claude Code」的順序探索，每爬一階先做一個小專案確認自己卡在哪。多數人停在階梯 2（Antigravity）就夠用整個職涯；少數有重度開發需求的才需要付費升級。不要直接從 Claude Code 起步，會在「終端機是什麼」「為什麼要裝 Git」這類入門關卡耗太多力氣。

5

30 分鐘做出第一個工具：「個人行程儀表板」

§3、§4 講工具選擇，接下來進入實戰。以「打造一個自己用的個人行程儀表板網頁」為例，輸入今天的待辦事項、自動排優先順序、用顏色標出緊急度、瀏覽器打開就看得到。從 0 到上線，整個過程約 30 分鐘。

啟動 Claude Code

在終端機中建立一個新資料夾，進去後輸入：

mkdir my-dashboard && cd my-dashboard claude

Claude Code 會啟動，並在目前資料夾中等待你的指令。

用一段話描述你想做的

直接在 Claude Code 的對話框輸入：

幫我做一個「個人行程儀表板」網頁。需求： 1. 一個輸入框，可以輸入待辦事項與預估時數（小時） 2. 一個下拉選單，選擇優先級（高 / 中 / 低） 3. 按下「新增」後，待辦事項顯示在下方清單 4. 高優先級的項目用紅色背景，中優先級用黃色，低優先級用綠色 5. 清單右上角顯示總時數 6. 資料用 localStorage 儲存（重新整理不會消失） 7. 視覺風格：簡潔現代，深藍色為主色技術：純 HTML + CSS + JavaScript（不要框架）請一次做完並讓我能在瀏覽器打開看效果。

看 Claude 動手

Claude Code 會：

自動建立 index.html、style.css、script.js 三個檔案
寫好所有需要的 HTML 結構、CSS 樣式、JavaScript 邏輯
跟你說明每個檔案的用途
建議你「打開 index.html 看效果」

瀏覽器開檔，玩玩看

雙擊 index.html，在瀏覽器看效果。試輸入幾筆待辦事項、改優先級、重新整理檢查資料是否還在。

不滿意就直接講，Claude 會改

例如：「字體有點小，全部放大 1.2 倍」「新增按鈕的位置移到輸入框右邊」「清單加上一個刪除按鈕」，每改一次都立刻看效果。

（進階）一鍵部署上網

滿意後告訴 Claude：「請幫我把這個專案部署到 GitHub Pages，讓我有一個公開連結可以分享。」Claude 會建 GitHub repo、push 程式碼、開啟 GitHub Pages，最後給你一個 URL。

活動 · 個人實作 · 做出第一個小工具

每人選 1 個工作或生活情境（薪資計算表、單字背誦網頁、家庭記帳本）。
提需求給 AI，迭代 3 次：需求 → 原型 → 測試 → 修改。
遇到 error 時，練習「把錯誤訊息原樣丟回去」的 SOP。

6

迭代與除錯：把 error 原樣丟回去

§5 跟著 Demo 做過後，自己動手時一定會撞牆：需求講不清楚、AI 改出新 bug、跑出看不懂的 error 訊息。Vibe Coding 不是「一次就對」，是「一次又一次的小調整」。下面是建議的迭代節奏與除錯 SOP。

迭代 3 步循環

需求 → 原型 → 測試 → 修改 ⤴

每跑完一個小循環，存個檔（用 git commit 留下版本快照，或單純複製整個資料夾備份一份）。當哪次改壞了，能直接回到上一個能跑的版本。

除錯 SOP：把 error 訊息原樣丟回去

錯誤示範（多數新手會做的事）

錯誤做法：看到一堆 error 訊息很煩，自己看不懂，於是試著「自己改」，把這段刪掉、那段加個分號，通常會越改越糟。

正確做法

正確做法：把整段 error 訊息原封不動複製，貼回 Claude Code，加一句「我跑出這個錯誤，請幫我看看」。Claude 會立刻分析錯誤、找出原因、給出修復方案。

進階心法

連環追問：如果第一次的修復沒解決，就把新的 error 再丟回去，並補上「上次的修復沒有解決，這是新的錯誤」。Claude 會根據錯誤的演變，慢慢逼近真正的根因。

給「不寫程式」的學員的鼓勵

很多人怕「看不懂 error」，其實 Vibe Coding 的關鍵就是「看不懂沒關係，把它丟回去就好」。你不需要學會讀 error，只需要學會「複製 + 貼上」。Claude 看得懂，這就夠了。

活動 · Demo + 互評

每人 3 分鐘 Demo 自己做出來的工具，介紹「想解決的痛點」與「實際做出來的功能」。
同儕給 3 個改進建議。

7

Claude Design：從零做出可看可點的原型

除了寫程式碼，Vibe Coding 也能延伸到視覺設計。Claude Design 是 Anthropic 的對話式設計工具，能從零做出可看可點的原型，再交接給 Claude Code 變成真網站。下面是附錄頁入口。

此節已獨立為附錄頁，方便聚焦閱讀

Claude Design 是 Anthropic 推出的對話式設計工具，本節聚焦於它在「設計原型與 UI handoff」的進階用法（與第 5 章談的「簡報製作」角度不同）。內容含 3 大應用類型、4 種輸入 + 3 種輸出、5 個 prompt 建議、Design System、5 個心法、以及交接給 Claude Code 變真網站的工作流。份量大，獨立為附錄頁讓你能單獨深入學習。

進入附錄頁內容與原章節一致，獨立頁附返回連結。

8

Gemini CLI 實戰：把 AI 裝進 Windows

另一個值得獨立學習的進階主題是 Gemini CLI。它是 Google 推出的免費 CLI 替代品，免費 Gmail 帳號就能上手，適合沒有 Claude Pro 預算的學員做日常自動化。

此節已獨立為附錄頁，方便聚焦閱讀

Gemini CLI 是 Google 推出的免費 CLI 替代品，免費 Gmail 帳號每天有額度可用，足以做日常自動化。本節以 Windows 學員為主視角，從零裝起做兩個實戰（自動整理資料夾、翻譯整本手冊做成 PPTX），實作步驟細節較多，獨立為附錄頁方便照著操作。

進入附錄頁內容與原章節一致，獨立頁附返回連結。

9

日常應用情境與課堂活動總覽

課堂活動總覽

本章課堂活動已分散到對應的講授段落末尾。下面是快速跳轉清單。

活動一觀念 + Demo§3 活動二個人實作·做出第一個小工具§5 活動三Demo + 互評§6 活動四商業價值判斷§9

活動 · 商業價值判斷

把全班的工具分成下面三類，幫助學員理解「自己做的工具能用到什麼程度」。

SELF · 自用即止

個人效率工具

解決個人特定痛點，不需要分享。例如：個人記帳、個人行程儀表板。

BIZ · 可商業化

能解決一群人的痛點

解決一個產業或一群使用者的共通問題，有付費意願。例如：特定行業的計算器、訂閱制小服務。

日常應用情境

類別	情境	建議工具與技術組合
工作	自動薪資計算表：輸入工時、加班、扣款 → 自動算稅與實領	Claude Code 純 HTML + JS，30 分鐘可完成 + 部署
工作	客戶跟進小工具：輸入 email 與日期，到期自動提醒	Claude Code + Google Apps Script（第 10 章會深入）
生活	家庭記帳本：手機輸入 → 自動分類 → 月底儀表板	Claude Code 做 PWA（手機可安裝的網頁 App）
學習	單字背誦網頁：自動排複習間隔（艾賓浩斯遺忘曲線）	Claude Code + localStorage 儲存進度

10

🔥 最近大家在玩什麼

Claude Code 推出後，社群上出現了大量「我用 Claude Code 一個下午做出 ___」的貼文。下面三個是 2026 年初最常被分享、適合零程式背景上手的玩法。

玩法 1 · 個人化單頁網站

30 分鐘做一個能放履歷、作品、聯絡資訊的個人網站

找工作、轉職、自由接案的人最常做的事，過去要學 Wix / Wordpress / Webflow（這三家都是傳統的「拖拉式建站工具」，要學會操作介面），現在直接讓 Claude Code 一氣呵成做出，部署到 GitHub Pages 還免費。

幫我做一個個人單頁網站，部署到 GitHub Pages。內容區塊（請按順序）： 1. Hero：照片 + 姓名 + 一句自我介紹 2. About：3 段背景介紹（教育 / 經歷 / 興趣） 3. Skills：6 個技能標籤雲 4. Portfolio：4 個作品卡片（含縮圖、簡介、連結） 5. Contact：Email、LinkedIn、IG 等社群連結設計風格： - 配色：[指定 2 色，例如深藍 + 暖橘] - 風格：現代、簡潔，留白多 - 響應式：手機、平板、桌機都好看 - 動畫：滾動時區塊淡入技術：純 HTML + CSS + 一點 JavaScript 完成後幫我建 GitHub repo 並部署到 GitHub Pages，給我公開 URL。

進階：完成後告訴 Claude「請幫我加上多語系切換（中 / 英）」，外商求職時很實用。

玩法 2 · 給家人用的小工具

解決長輩或孩子日常的小痛點

最近社群熱門的暖心玩法，為家人量身做一個工具。例如：給長輩用的「大字版用藥提醒」、給孩子用的「九九乘法練習」、給太太用的「每日穿搭天氣對照」。需求小、上手快、家人會感謝你一輩子。

幫我做一個給 [家人關係 + 年齡] 用的網頁工具。他們的痛點是：[具體描述] 我希望這個工具能： 1. [功能 1] 2. [功能 2] 3. [功能 3] 特別要求： - 字體要 [大/中等]，方便 [視力情況] - 介面操作步驟越少越好（最多 2 - 3 個按鈕） - 顏色高對比，[銀髮族 / 兒童 / 色弱] 友善 - 資料只存在使用者裝置上（不上傳到任何伺服器）技術：純前端（HTML + CSS + JS），不需要後端完成後部署到 GitHub Pages，提供 QR Code 方便家人在手機上開啟。

印小卡片：請 Claude 幫你產一個含 QR Code 的小卡片設計，列印給家人，他們掃一下就能開啟你做的工具。

玩法 3 · 把 Excel 工作流變網頁工具

把同事每天用的 Excel 計算，變成一個網頁

職場上最常見、最有實用價值的玩法。把部門裡「每個人都要算、但每次都用 Excel 慢慢拉公式」的計算（成本估算、KPI 計算、客戶報價、稅務試算），用 Claude Code 變成一個內部小網頁，輸入幾個數字就出結果。比每個人各自維護自己的 Excel 高效太多。

把下面這個 Excel 工作流，做成一個內部網頁工具。 [附上 Excel 截圖或公式描述] 需求： 1. 把所有需要使用者輸入的欄位變成輸入框 2. 自動執行所有公式計算 3. 結果以儀表板樣式呈現（含關鍵數字大字、附帶圖表） 4. 提供「複製結果到剪貼簿」按鈕，方便貼進 email 5. 介面要部門所有人都能用（不只給你一個人用）技術：純前端 HTML + CSS + JS，不需要後端資料完全不傳到任何伺服器（公司資料安全考量）完成後幫我打包成一個 zip 檔，我可以直接放到部門共用資料夾，同事打開 index.html 就能用。

安全提醒：不要把含真實客戶資料、財務資料的 Excel 直接餵給 AI；先脫敏（把名字、金額替換成假資料）再丟。

11

隨堂測驗：檢查你的 Vibe Coding 判斷力

答對加 20 分，答錯倒扣 10 分。

第 1 / 5 題目前得分：0