過去幾個月，我用 Vibe Coding 完成了三個客戶的形象官網——從零到上線，我沒寫超過十行「傳統意義上的程式碼」。
這不是誇飾，也不是說我完全沒碰技術。而是整個開發過程變成「用自然語言描述需求 → AI 生成程式碼 → 我驗證結果 → 快速調整」的循環。這種工作模式，現在有個名字：Vibe Coding。
什麼是 Vibe Coding？
Vibe Coding 是一種用「概念驅動」取代「語法驅動」的開發方式。你不需要記住 JavaScript 的迴圈寫法，也不用背 CSS Flexbox 的屬性順序，只需要清楚表達「我要什麼效果」，然後讓 AI 工具（如 ChatGPT、Claude、Cursor）把它轉成可執行的程式碼。
但這不等於「完全不懂技術」。更精確的說法是：你需要懂「網站是怎麼組成的」「這個功能在技術上可不可行」「AI 給的程式碼有沒有明顯錯誤」，但不必自己從頭手刻每一行語法。
為什麼 2024 年後這件事才變可能？
三個技術門檻在過去一年內同時被跨越：大型語言模型開始能理解複雜的多步驟指令、程式碼生成的準確率從「能跑但很醜」進步到「接近人類工程師的初稿品質」、開發工具整合了即時預覽與錯誤偵測。
2023 年 Q1 我試過用 GPT-3.5 生成一個 RWD 導覽列，花了兩小時除錯還是歪的。2024 年 Q2 用 Claude 3.5 做同樣的事，五分鐘內就能上線。這不是單純「模型變強」，而是整套協作流程的成熟。
Vibe Coding 的實際操作流程
我會用一個真實案例說明：幫一位心理諮商師建立預約系統頁面。
步驟一：拆解需求成可驗證的小單位
不要直接丟「我要一個預約系統」給 AI，這樣生成的程式碼會像拼裝怪。我的做法是先列出三層結構：
- 版面：單欄置中、手機優先、顏色用淺木色系
- 功能：顯示可預約時段、點選後跳轉 Google Calendar、已滿的時段要顯示為灰色不可點擊
- 資料來源：時段清單先寫死在前端，之後再接 API
這些描述夠具體，AI 才能生成可用的程式碼。如果你只說「要有質感」，AI 會給你一堆 gradient 和動畫，但不一定是你要的質感。
步驟二：用自然語言提示，搭配參考範例
我的 prompt 長這樣：
「用 HTML + Tailwind CSS 做一個預約時段選擇介面。每個時段是一個卡片，包含日期、時間、剩餘名額。已滿的時段加上 opacity-50 和 cursor-not-allowed。參考這個色系（附上客戶的 Figma 連結）。」
AI 會在 30 秒內給我一份完整的 HTML，我直接貼進 Cursor 預覽，90% 的情況下已經能動。
步驟三：驗證＋微調，而不是從頭改寫
這一步是多數人最容易卡住的地方。AI 生成的程式碼通常「大致對，但細節不對」——比如手機版的卡片間距太窄、按鈕文字沒置中、hover 效果太突兀。
我不會直接去改 CSS，而是再丟一句：「卡片在手機版的左右 padding 加到 1rem，按鈕文字要垂直置中。」AI 會幫我更新那幾行，我只需要確認結果。
這個循環通常跑 3～5 次就能收斂。整個頁面從零到定稿，大約一小時。
哪些人適合 Vibe Coding？
這不是萬靈丹，也不是每個人都該用這種方式開發。以下三種情境我認為特別適合：
情境一：你是設計師或內容創作者，想自己把設計稿變成真網站
你懂視覺邏輯、懂使用者體驗，但不想花三個月學 React。Vibe Coding 讓你專注在「這個按鈕應該放哪裡」「這段文字要怎麼排版」，技術實作交給 AI。
情境二：你是一人公司或接案工作者，需要快速交付 MVP
客戶要的是「兩週內上線的形象官網」，不是「符合工程最佳實踐的大型系統」。Vibe Coding 讓你用 20% 的學習成本，完成 80% 的常見需求。
情境三：你本來就會寫程式，但想把重複性工作外包給 AI
我自己也寫 code，但老實說，手刻一個 RWD 表格或處理瀏覽器相容性，這些事情沒有創造性，只是消耗時間。讓 AI 生成初稿，我只負責架構設計和邏輯驗證，整體效率至少提升 3 倍。
Vibe Coding 的三個常見誤區
誤區一：以為完全不用懂技術
你還是需要知道「什麼是 HTML / CSS / JavaScript」「前端和後端的分界在哪」「這個功能需要資料庫還是只需要靜態頁面」。AI 不會幫你做需求分析，也不會告訴你「這個架構三個月後會爆掉」。
我的經驗是：你至少要能看懂 AI 生成的程式碼「大致在做什麼」，才能判斷它是不是在鬼扯。
誤區二：把 AI 當成搜尋引擎，而不是協作夥伴
很多人會問「怎麼做一個購物車」，然後把 AI 給的程式碼直接複製貼上。結果發現功能不符預期，就說 AI 不可靠。
更好的做法是先自己拆解：購物車要包含哪些元件？加入購物車的按鈕點下去要觸發什麼？數量要怎麼計算？然後一步一步讓 AI 生成，每一步都驗證。
誤區三：以為 Vibe Coding 只能做簡單網站
我自己就用這種方式做出串接金流、會員系統、多語系切換的完整電商網站。關鍵不在技術複雜度，而在「你能不能把複雜需求拆解成清楚的指令」。
當然，如果你要做的是高併發、需要優化效能的大型系統，我會建議找專業工程師。但 80% 的中小型網站需求，Vibe Coding 已經夠用。
我實際用 Vibe Coding 完成的三個專案
| 專案類型 | 開發時間 | 主要功能 | 我自己寫的程式碼行數 |
|---|---|---|---|
| 心理諮商師官網 | 5 天 | RWD 排版、預約表單、部落格嵌入 | 少於 20 行（主要是 GA 追蹤碼） |
| 個人品牌形象網站 | 3 天 | 作品集展示、聯絡表單、深色模式切換 | 0 行（全部由 AI 生成） |
| 活動報名頁面 | 1 天 | 倒數計時、Google Sheets 表單串接 | 約 10 行（調整 API 串接邏輯） |
這三個專案的共通點是：需求明確、功能不複雜、客戶在意的是「快速上線」而不是「技術創新」。
什麼時候 Vibe Coding 不適用？
我會誠實告訴你：以下情境我不會用 Vibe Coding，或至少不會只靠它。
- 需要處理敏感資料（金流、醫療、個資）：AI 生成的程式碼可能有安全漏洞，你需要專業工程師 review。
- 系統需要長期維護和擴充：AI 生成的程式碼通常缺乏註解、命名不一致，三個月後你自己都看不懂。
- 效能要求極高的應用：AI 不會幫你做 lazy loading、code splitting、快取策略，這些需要人類判斷。
如果你的專案符合上述任一條件，我會建議你找專業的網站開發團隊，或至少讓工程師做最後的 code review。
從這裡開始：給新手的三個建議
先做一個「只給自己看」的練習專案
不要一上來就接客戶案子。先做一個個人名片網站、或把你的 IG 精選動態做成網頁版，熟悉「提示 → 生成 → 驗證」的循環。
學會問對問題，而不是問更多問題
「怎麼讓這個按鈕變好看」是爛問題，因為 AI 不知道你說的「好看」是什麼。「把按鈕改成圓角 8px、背景色 #4A90E2、hover 時加深 10%」是好問題，因為可驗證。
保留 AI 生成的程式碼記錄
我會把每次 AI 給的程式碼都存成版本，註記當時的 prompt。三個月後回頭看，你會發現自己的提示能力進步了多少，也能快速找到「上次那個功能是怎麼做的」。
這不是取代工程師，是擴大可能性
Vibe Coding 最大的價值不在於「讓不會寫程式的人也能做網站」，而在於「讓一個人可以專注在自己擅長的事，把不擅長的部分交給 AI 協作」。
如果你是設計師，你可以花更多時間打磨視覺細節，而不是卡在「這個 CSS 為什麼跑版」。如果你是內容創作者，你可以快速把想法做成互動網頁，而不用等工程師排期。如果你本來就是工程師，你可以把時間花在架構設計和商業邏輯，而不是刻重複的 UI 元件。
我們團隊在協助客戶建立形象官網或優化網站 SEO 時，也大量採用 Vibe Coding 加速前期開發，把省下來的時間用在更深度的策略規劃和使用者測試上。
如果你也想試試這種工作方式，但不確定自己的專案適不適合，歡迎找我們聊聊——我們可以幫你評估哪些部分適合 AI 協作、哪些部分需要人類專業判斷。
