快速摘要
Vibe Coding 的真正價值不是「AI 會寫程式」，而是「非工程師也能做出產品」。但從想法到安全上線之間有很多坑。本文以飛飛的實作經驗，整理出 10 步驟的完整工作流程，每個步驟都包含安全檢查點。
什麼是 Vibe Coding
Vibe Coding 這個詞由 Andrej Karpathy 在 2025 年提出，意思是「用自然語言描述你想要什麼，讓 AI 把程式碼寫出來」。你只需要指定方向和感覺（vibe），不需要逐行寫程式。
但 Vibe Coding ≠ 完全不懂程式碼。你至少需要：
- 能看懂 AI 做了什麼（基本的程式碼閱讀能力）
- 能判斷結果是否正確（測試和驗證能力）
- 能識別安全問題（基本的安全意識）
步驟 1：定義需求與範圍
在開啟任何 AI 工具之前，先花 30 分鐘把需求寫清楚：
- 核心功能是什麼？（不超過 3 個）
- 誰會使用？（目標用戶）
- 預計部署在哪？（GitHub Pages、Vercel、VPS）
- 有沒有敏感資料？（使用者登入、付款、個資）
安全檢查點
如果涉及使用者登入或付款，不建議用 Vibe Coding 從零開始做，應使用成熟的驗證服務（Auth0、Supabase Auth）。步驟 2：選擇工具
| 工具 | 適合場景 | 安全注意 |
|---|---|---|
| Claude Code | 完整專案開發 | 可存取本機檔案，注意權限 |
| Cursor | 前端開發、快速迭代 | 程式碼上傳到 Cursor 伺服器 |
| GitHub Copilot | 既有專案的輔助開發 | 程式碼片段上傳到 GitHub |
| ChatGPT / Claude Web | 小型腳本、學習用 | 程式碼需手動複製貼上 |
步驟 3：建立版本控制
這一步絕對不能跳過。在讓 AI 寫任何程式碼之前：
- 建立 Git repository：
git init - 建立
.gitignore（排除 node_modules、.env 等） - 建立
.claudeignore（如果用 Claude Code） - 做第一次空 commit：
git commit --allow-empty -m "init" - 建立開發分支：
git checkout -b dev
步驟 4：讓 AI 理解你的專案
不要直接說「幫我做一個網站」。給 AI 足夠的上下文：
- 專案的目標和功能清單
- 使用的技術棧（如果你有偏好）
- 設計風格參考
- 既有的程式碼或文件
步驟 5：逐步開發
最重要的原則：一次只做一件事。不要要求 AI 一次生成整個專案。
- 先做骨架（HTML 結構）
- 加入樣式（CSS）
- 加入互動（JavaScript）
- 每完成一個功能就 commit
步驟 6：檢查 AI 生成的程式碼
每次 AI 生成程式碼後，至少要做以下檢查：
- 程式碼是否有你看不懂的部分（如果有，問 AI 解釋）
- 有沒有硬編碼的密碼或 API Key
- 有沒有引入你沒聽過的套件
- 輸入欄位有沒有做驗證
步驟 7：測試
至少要做三種測試：
- 功能測試：每個功能是否正常運作
- 邊界測試：輸入極端值（空白、超長字串、特殊字元）
- 多裝置測試：手機、平板、桌機上是否正常顯示
步驟 8：安全檢查
上線前的安全必做清單：
- 用
grep搜尋硬編碼的敏感資訊 - 用
npm audit檢查套件漏洞 - 確認 HTTPS 設定正確
- 測試所有表單的 XSS 防護
- 確認沒有暴露不該公開的 API 端點
步驟 9：部署
推薦的部署平台（依安全性排序）：
- 靜態網站→ GitHub Pages、Cloudflare Pages、Vercel
- 有後端的應用→ Railway、Render、Fly.io
- 完全控制→ VPS（需要自己負責安全設定）
步驟 10：監控與維護
上線不是結束，而是開始。至少要做到：
- 設定 Google Analytics 或 Plausible 追蹤流量
- 定期更新套件（
npm update） - 定期檢查是否有新的安全漏洞
- 備份重要資料
常見問題
Vibe Coding 做出的東西品質夠好嗎？
品質取決於你的需求定義和檢查流程，而不是 AI 本身。用 Vibe Coding 做 MVP 或個人專案完全可以，但商業產品建議有工程師做 code review。
完全不會程式可以用 Vibe Coding 嗎？
可以開始，但你會需要逐步學習基本的程式碼閱讀能力。至少要能看懂 AI 做了什麼變更，否則你無法判斷結果是否安全。
用 AI 做出的網站，著作權歸誰？
法律仍在發展中，但一般認為 AI 輔助創作（你提供指令和設計決策）的成果著作權歸你。純 AI 生成（無人類創作貢獻）的部分可能不受著作權保護。