什麼是 Vibe Coding？
Vibe Coding 是一種「以自然語言描述需求，讓 AI 自動生成程式碼」的開發方式。你不需要懂程式語法，只要能清楚說出「我想要什麼」，AI 工具（如 Claude Code）就能幫你把網站或工具做出來。
你的角色：導演
你負責說清楚想要什麼——需求越具體，成果越接近你的期待。你不需要親自「演」，AI 會幫你實作。
💡 核心精神
你的角色是「導演」，不是「演員」——你負責說清楚想要什麼，AI 負責實作。規劃越清楚，成果越接近你的期待。
【前半段】 Karen 分享實作案例 ＋ 基礎建設確認 ＋ 需求規劃與指令優化
【後半段】 Vibe Coding 實戰操作 ＋ Zeabur 部署上線
工作坊流程
以下是當天的流程安排，從案例分享到實際動手，帶你完整走過一輪 Vibe Coding。
詳細流程
前面三個階段是為了確保你在 15:30 之後能全力投入實作。請務必在課前完成基礎建設確認清單，把寶貴的課堂時間留給真正的 coding！
基礎建設確認清單
開始之前，請先確認以下工具與帳號都已準備好。這些是工作坊當天能順利動手的前提條件。
claude plugin marketplace add zeabur/zeabur-claude-plugin && claude plugin install zeabur@zeabur
課前準備：規劃網站架構
Vibe Coding 的成果好壞，80% 取決於事前規劃的品質。AI 只是工具，「你想做什麼」才是核心。請在課前認真完成本節的規劃。
3-1 了解你是哪一種需求者
先誠實評估自己目前的狀態：
| 類型 | 狀況描述 | 課前建議行動 |
|---|---|---|
| 類型 0 | 完全不知道自己的需求，沒有具體想法 | 先瀏覽自己工作中最常做哪些重複性高的事，寫下 3 個最想減少時間的任務 |
| 類型 1 | 知道有需求，但想像不出最終樣子（例如：我想讓報價流程更快，但不知道網站長什麼樣） | 找 3-5 個你覺得「好用」的工具或網站截圖，帶來課堂作為參考 |
| 類型 2 ★ | 有明確需求、能描述出想要的成果，但不知道如何實作 → 本課程核心對象 | 完成下方「網站規劃表」，準備越詳細，Vibe Coding 越快完成 |
| 類型 3 | 有需求、能想像、也知道技術方向，缺少的是執行時間與工具 | 直接帶著既有的 spec 或 wireframe，課堂中可直接實作 |
你有明確的需求，也大概知道想要什麼樣的成果，但不知道如何用 AI 實作——這正是本課程的核心場景。建議課前完成下方的「網站規劃表」。
3-2 網站難度評估
| 網站類型 | ✅ 低難度 | ⚙️ 中難度 | 🔥 高難度 |
|---|---|---|---|
| 一頁式網站 | ✅ 適合初學者，prompt 描述清楚即可快速完成 | — | — |
| 多頁式網站 | — | ⚙️ 需規劃各頁面之間的跳轉與資料傳遞 | — |
| 具有後端 / 資料庫的工具 | — | ⚙️ 有固定表單、資料記錄需求 | 🔥 用戶登入、權限管理、複雜邏輯 |
| AI 功能整合（如 Claude API） | — | ⚙️ 固定 prompt 流程，結果格式明確 | 🔥 動態對話、多輪互動、個人化推薦 |
| 第三方服務串接（金流、Line、GA 等） | — | — | 🔥 需要 API 設定、Webhook、安全驗證 |
先從低難度的核心功能出發，成功上線後再逐步添加中高難度的功能。完美是進步的敵人，先讓網站跑起來！
3-3 課前必填：我的網站規劃表
請在工作坊前填寫以下規劃表，填寫越完整，課堂上的成果越好。這份表格也是你給 Claude Code 的第一個「提示（prompt）」的基礎。
不確定的欄位可以先寫「待確認」，但「核心功能」和「主要使用者」這兩項一定要填。這是 AI 理解你需求的最關鍵資訊。
如何跟 AI 溝通
寫 Prompt 其實就是「描述情境」——把你遇到的狀況、你想要什麼、不想要什麼，用日常語言說清楚就好。你不需要知道技術上怎麼解決，只要把問題和期望說得具體，AI 就能幫你診斷問題、提出方案。
你是提出需求的人，不是解決問題的人。具體描述「我要什麼」「我不要什麼」「我希望做到什麼」，至於怎麼實現——交給 AI 來診斷和處理。
4-1 好 Prompt 的四個要素
做一個報價單
做一個可以輸入客戶名稱、選擇方案（年約/專案），並自動產出 PDF 的報價單工具
給內部用
給業務同仁在拜訪客戶前快速產出報價，不需要登入帳號
做好看一點
風格參考 Notion，主色調使用公司藍 (#1A3C5E)，不需要動畫效果
產出結果
產出一頁式 PDF，包含公司 Logo、客戶資料、方案明細、總金額、有效期限
4-2 實戰案例：一段真實的 Prompt
以下是一個真實的需求描述。注意看——它不包含任何技術術語，但把情境說得很具體，AI 就能理解並幫你規劃。
- 說出了「我要什麼」——公司官網、案例展示、文章上架功能
- 說出了「我不要什麼」——公開網站不需要登入功能
- 描述了使用情境——前台給訪客看、後台給自己管理內容
- 讓 AI 來設計方案——不指定技術細節，而是說「請你設計一下幫我製作」
- 可以更好的地方——可以補充：公司產業、想要的風格、參考網站、預計上架的內容量，讓 AI 給出更貼合的方案
這個 prompt 的難度高，但使用者不需要知道「前後端分離」「CMS」這些技術名詞。只要把情境說清楚，AI 就會幫你拆解問題、提出架構建議，再一步步帶你完成。
4-3 迭代的心態
不需要一次就說清楚所有細節。Vibe Coding 的精髓在於「邊看邊調整」：
專業工程師也不會第一次就寫出完美的程式碼。平均每個功能需要 3-5 輪溝通才能達到理想效果，這是正常流程，不是失敗。
部署概覽
部署的詳細操作將由 Zeabur 創辦人在課堂上示範，以下是你需要了解的基礎概念：
什麼是「部署」？
把 Claude Code 產生的程式碼，從你的電腦「搬到」雲端伺服器，讓其他人可以透過網址使用你的工具。
🌐 Zeabur 能幫你做什麼？
- 提供雲端伺服器空間（不需要自架）
- 提供資料庫服務（儲存用戶輸入的資料）
- 一鍵部署，不需要懂指令列操作
- 提供自訂網域或 Zeabur 子網域
📋 課前你只需要
- 完成 Zeabur 帳號註冊
- 備妥公司信箱
- 準備好公司 Logo（PNG 格式）
- 確認公司標準配色色碼
部署的操作會在課堂中完整示範。你現在只需要確保已完成 Zeabur 帳號註冊，並備妥公司信箱。
常見問題 Q&A
有任何疑問，課前可先參考以下解答：
填完規劃表、準備好素材，就是你在工作坊最大的競爭優勢。期待課堂上見！