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