Vibe Coding 是什麼？用自然語言做 App 很快，但真正容易爆炸的是你沒看懂的那一段

你現在可以對 Coding Agent 說：

幫我做一個待辦事項 App。
要有登入、分類、搜尋，介面簡潔，最後部署上線。

過一段時間，真的可能拿到一個能操作的網站。

這種「主要用自然語言描述想要的結果，讓 AI 大量產生與修改程式碼」的開發方式，常被稱為 Vibe Coding。

它很有吸引力，因為第一次讓很多不會寫程式的人直接跨過空白專案。

但也最容易讓人誤會：

畫面能跑 = 軟體完成。

Prototype 和 Production 是兩個世界

Prototype（原型） 的目標是快速驗證：

• 想法有沒有感覺
• UI 合不合理
• 流程能不能走
• 使用者會不會想要

這正是 Vibe Coding 很強的地方。

但 Production（正式上線環境） 還要處理：

• 權限
• 資料一致性
• Error Handling
• Backup
• Monitoring
• Security
• Migration
• Scalability
• Dependency Updates

這些事情很多不會直接出現在漂亮的首頁 Demo。

最危險的是「你不知道自己不知道什麼」

如果 Agent 產生：

const isAdmin = localStorage.getItem('role') === 'admin';

一個新手可能看到：

有 Admin 判斷，應該安全。

但如果權限只在 Browser 裡判斷，使用者可能自己改 Local Storage。

問題不是 AI 一定會犯這個錯，而是你可能沒有足夠背景辨識它是不是錯。

Vibe Coding 最適合哪些東西？

很適合：

• 個人小工具
• Landing Page
• Prototype
• 內部低風險 Workflow
• 資料視覺化 Demo
• 一次性 Script

因為「快速驗證」比「五年維護」更重要。

什麼東西要提高警戒？

只要開始碰：

• Authentication
• Payment
• 個資
• 醫療資料
• 公司 Secret
• Production Database
• File Upload
• 任意程式執行

就不能只用「看起來能跑」驗收。

和 Coding Agent 的關係

Lesson 048：Coding Agent 講的是一個能讀 Repo、改檔、跑 Test、開 PR 的 Agent 工作方式。

Vibe Coding 則比較像人怎麼使用這些能力：

你可以完全不看 Code，只描述 Outcome；也可以讓 Agent 做大量工作，但自己持續 Review 架構與 Diff。

兩種都可能叫 Vibe Coding，但風險非常不同。

新手至少要學會看四件事

1. Git Diff

Lesson 027 已經講過 Git。

你不一定要看懂每一行，但至少知道 Agent 改了哪些檔案、刪了什麼、加了什麼 Dependency。

2. Test

要求 Agent：

補測試，然後真的執行測試。
不要只告訴我理論上會通過。

3. Secret

API Key 不要硬寫進前端或 Commit 到 Repo。

4. Database Migration

任何改 Schema、刪欄位、搬資料的操作都要有 Backup 與 Rollback 思維。

最好的 Vibe Coding 不是「完全不懂 Code」

真正高效率的狀態比較像：

人類定需求 / 邊界 / 驗收標準
AI 做大量實作
自動測試做機械檢查
人類 Review 重要設計與風險

你不一定要手寫每一行，但至少要懂系統的關鍵邊界。

先從低風險專案開始

如果你是完全新手，最適合第一個 Vibe Coding 專案的不是「幫我做一個銀行」。

而是：

• 個人記帳介面（先不用真金流）
• 食譜整理工具
• 待辦清單
• 個人作品集
• 公開資料 Dashboard

先學會：

需求 → 生成 → 測試 → 看 Diff → 修 Bug → 部署

再逐步增加真實風險。

一句話帶走

Vibe Coding 把「從想法到能跑的 Prototype」變得非常快，但能跑不等於能安全上線。當專案碰到帳號、資料、付款、Secret 與長期維護時，你仍需要測試、Version Control、Security Review 與基本工程判斷。