什麼是 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
有任何疑問,課前可先參考以下解答:
填完規劃表、準備好素材,就是你在工作坊最大的競爭優勢。期待課堂上見!