從「拖拉式網站」到「一句話產生整個專案」
如果你只聽過 ChatGPT，或頂多用過 Lovable 生網站，本篇將帶你一路走到 Cursor／Windsurf 等 Vibe IDE，並補足 Claude、Gemini 等名字到底在做什麼。讀完可以直接動手——或動嘴——開發。
1 | 什麼是 Vibe Coding？
定義
Vibe Coding（又寫作 vibecoding）是一種「以自然語言提示驅動大型語言模型（LLM），由 AI 直接產生並迭代程式碼」的開發模式。概念由前 OpenAI 研究總監 Andrej Karpathy 在 2025 年 2 月 X (Twitter) 發文提出：「There’s a new kind of coding I call vibe coding…」X (formerly Twitter)
你描述 想做什麼 ➜ AI 把程式碼全寫好 ➜ 人只做測試與微調。
背景脈絡
- No-code/Low-code 讓「拖拉元件」取代了手寫語法；
- Vibe Coding 更進一步，把「拖拉」也消滅——只剩「對話」。
IBM 把它稱為「從意圖 (intent) 直接到可執行代碼」的新世代軟體生產模式。IBM
2 | 為何 2025 忽然大爆發？
| 里程碑 | 說明 |
| 2023–24 | ChatGPT 把「AI 幫忙寫幾行程式」推向大眾。 |
| 2025 / 02 | Karpathy 正式命名 Vibe Coding，媒體跟進報導。 |
| 2025 / 05 | OpenAI 宣布以 30 億美元併購 AI 編輯器 Windsurf（前 Codeium），投下產業震撼彈。彭博社Reuters |
| 2025 / 05–06 | TikTok「30 分鐘做完 App」影片破百支；Amazon AWS 副總裁指出「NAB 半數生產代碼由 AI 生產」。Business Insider |
關鍵訊號：巨頭投資、用例成熟、社群瘋傳，三者同時到位。
3 | 核心工作流程（放大解剖）
| 步驟 | 你在做什麼 | AI 在做什麼 | 注意事項 |
| Prompt | 用人話描述功能、約束、風格 | 把語句轉為程式設計目標 | 先拆小題，減少含糊 |
| 生成 | 等待結果 | 產出前端 / 後端 / 測試碼 | 指定語言與框架 |
| 審核 | 執行、跑測試、提問 | 回答疑問、修正錯誤 | 保持 Git 提交，方便回滾 |
| 迭代 | 追加需求、優化效能 | 全案重構、跨檔案 Diff | 每輪都要自動測試 |
好比與極速 Pair-Programmer 合作──你講需求，他秒寫 Code，再一起改。
4 | 工具生態：誰在玩哪個位置？
| 名稱 | 類型 | 一句話定位 | 學習曲線 | 典型價格 |
| ChatGPT | 聊天式 LLM | 最知名，程式建議 + 圖片生成 | ★ | 免費 / Plus US$20 |
| Claude | 聊天式 LLM | 超長上下文，適合讀大專案 | ★ | 免費 / Plus US$20 |
| Gemini | 多模態 LLM | Google 旗下，可看圖、整合 Docs | ★ | Advanced US$19.9 |
| Lovable.ai | AI 網站生成器 | 「Idea → App in seconds」；可匯入 Figma | ★★ | Free / Pro US$25 |
| Cursor | AI-first IDE | VS Code 分支，選段即可重構 | ★★★ | Pro US$20 / 月 |
| Windsurf | 雲端 Vibe IDE | 被 OpenAI 併購；多人成對話式重構 | ★★★ | Free / Pro US$15 |
★ 越多 = 越需要程式基礎。
5 | 實戰案例：把「一頁式活動站」做到底
5-1 先用 Lovable 生出 MVP
登入 Lovable ➜ 填一句話：
「幫我做一頁式母親節活動，粉色調，含倒數計時與表單收集」
30 秒得到可運行網站（含寄到自訂子網域）。
5-2 用 ChatGPT 快速改文案
「把所有『早鳥』改成『限時』，CTA 按鈕顏色換 #B94A6F。」
5-3 進階：搬到 Cursor 深度客製
git clone https://github.com/your-lovable-mvp.git
cursor .
- 選取 HeroSection.tsx → ⌘K →
「改成暗色系，背景用玻璃擬態，新增 FAQSection。」 - 30 秒後，Cursor 同步修改多檔案＋新增 FAQSection.tsx 與 SCSS。
5-4 再升級到 Windsurf（團隊協作情境）
- 直接把 GitHub Repo 連到 Windsurf。
- 在 PR 視圖輸入：
「重構重複 CSS，提取到 shared Card.css，並寫 Jest snapshot 測試。」 - Windsurf 產出 Diff + 測試檔；點擊 “Apply & Commit” 即可。
6 | 提示工程進階技巧
- 分層提問
- 高層：說明商業目標、核心 KPI。
- 中層：敘述頁面區塊、API 介面。
- 低層：指定檔案位置、函式名稱。
- 高層：說明商業目標、核心 KPI。
- Few-Shot 示例
提供「期待的輸出格式」，AI 會對齊風格。 - 連鎖提示 (Chain-of-Thought)
先要 AI 規劃步驟，再要它實作，可減少邏輯錯誤。 - 自動測試生成
結尾加一句：
「並為上述功能生成 Jest 單元測試與解釋測試重點。」
7 | 風險、法遵與治理
| 風險 | 具體情境 | 緩解措施 |
| 授權衝突 | AI 摻入 GPL 片段 | 引入 SPDX 比對 + 人工審查 |
| 隱藏漏洞 | XSS / SQL Injection 未捕捉 | SAST、DAST、e2e 全部跑一次 |
| 生成成本飆高 | GPT-4o Token 回呼過度 | 設 Token 配額 + Cache |
| 維護困難 | 生成碼缺乏註解 | 要求 AI 同步生成註解＋架構圖 |
8 | 職涯與市場趨勢
- AWS 統計：澳洲國家銀行已有 50 % 生產代碼由 AI 產生。Business Insider
- 招募方向：
- Prompt Engineer / AI Pair-Programming Lead：懂框架 + 懂提問。
- AI Governance Engineer：負責安全、授權、成本管控。
- Prompt Engineer / AI Pair-Programming Lead：懂框架 + 懂提問。
- 核心能力轉移：
- 抽象思考力 → 能拆問題；
- 項目管理 → 能定義需求與驗收；
- 資安與測試 → 保證品質。
- 抽象思考力 → 能拆問題；
9 | 你的行動計劃（30 天路線圖）
| 週期 | 目標 | 指標任務 |
| Week 1 | 打基礎 | 在 ChatGPT 用 prompt 產出 3 個 Python 小腳本，了解流程 |
| Week 2 | MVP 練兵 | 用 Lovable 做一頁式活動站；部署並收集 10 筆表單 |
| Week 3 | IDE 深潛 | 把 MVP 匯入 Cursor：完成 UI 重構 + 自動化測試 |
| Week 4 | 協作上雲 | 與朋友共用 Windsurf Repo，完成 CI/CD + 版本控制 |
10 | 結語
Vibe Coding 把「軟體開發」從敲鍵盤升級為「對話式創作」。當拖拉式工具已經不夠快、模板不夠靈活，善用 ChatGPT 打底、Lovable 速生成，再進階到 Cursor／Windsurf，你就能把「點子 ➜ 可用產品」的迭代週期壓到前所未有的極限。最終勝出的開發者，不是英文打得最快，而是問題拆得最準、能讓 AI 幫你完美落地的人。