Menu

← 返回文章列表

Vibe Coding vs. Muggle Coding

前言與聲明

本文中借用「麻瓜」一詞來暱稱不懂程式碼的一般人，絕非嘲弄、輕視意味。僅僅是因為「非工程人員」這個詞真的很長，影響閱讀體驗，但我又一時找不到一個簡短又適合的詞來描述。剛好身邊有一些朋友他們都以此來暱稱自己，我也覺得這個比喻很有趣，即使「麻瓜」一詞在哈利波特系列裡面是一個極為貶低不懂魔法的平凡人。希望讀者不要因為這個詞而感到不適，如果有更適合的詞，歡迎給我建議。

什麼是 Vibe Coding？

2025 年，OpenAI 共同創辦人 Andrej Karpathy 提出了一種全新的開發模式 - - Vibe Coding。這種方法讓開發者不再需要精通程式語言的語法細節，而是透過自然語言描述任務，由大型語言模型（LLM）自動生成程式碼。 Karpathy 形容這是一種「順著感覺走（embracing the vibes）」的程式設計體驗，開發者只需專注於「問題描述」與「邏輯設計」，而非糾結於程式碼的具體實現。這種方式大幅降低了軟體開發的門檻，讓非工程背景的人也能快速打造出功能完整的應用程式。

Vibe Coding 的特色

  1. 自然語言驅動（Natural Language First）： 開發者只需用日常對話描述需求，AI 即可自動轉譯為可執行的程式碼。這種直覺式的開發方式，讓程式設計不再受制於特定語法的限制，而是以人類最自然的思考模式來驅動開發流程，大幅降低技術門檻。
  2. 高階抽象化（High-Level Abstraction）： 開發者能完全跳脫實作細節的束縛，專注於「要解決什麼問題」而非「如何實作」。這種以設計思維為導向的開發模式，讓工程師可以更直覺地依照當下的創作靈感（vibes）來塑造產品邏輯，將注意力集中在使用者體驗、功能架構與創意發想等更高層次的思考。
  3. 即時迭代（Instant Iteration）： AI 能即時理解開發者的修改意圖並快速調整程式碼。當生成結果不符預期時，開發者只需用自然語言給予反饋，例如「加入錯誤處理機制」或「改用深色主題」，AI 就能立即產生修正版本。這種流暢的互動模式，大幅降低了傳統開發中反覆除錯與手動調整的時間成本。
  4. 跨領域協作（Cross-Domain Collaboration）： 這項技術徹底打破了技術與非技術人員之間的溝通障礙。行銷、設計、產品經理等不同領域的專家，現在都能直接參與軟體開發的實作階段，讓產品原型的驗證與迭代速度獲得革命性的提升。這種多元協作模式，為產品開發帶來了更豐富的視角與創意可能。

Vibe Coding 真的令人驚艷

最近在社群上看到許多非工程師人員使用 Vibe Coding 做出令人驚艷的 Side Project，我真的發自內心感到佩服。像是：

另外也有其他非工程師朋友，跟我說他最近做了一個怎麼樣的產品網頁，分享給我看，我看到真的驚呆了，做得有模有樣的。

專業工程師 vs. 麻瓜的 Vibe Coding 差異

雖然 Vibe Coding 讓程式設計變得更直覺，但幾次接觸和瞭解這些非工程師人員的作品和程式碼之後，我發現，專業工程師和一般使用者的產出仍然有顯著差距，舉例來說：

需求描述的精準度差異

  • 麻瓜的 Vibe Coding 「幫我做一個可以上傳照片的功能」
    • → AI 可能生成：
<input type="file" accept="image/*">
  • 工程師的 Vibe Coding
- 前端限制（accept=".jpg,.png"，單檔<5MB）
- 即時預覽（URL.createObjectURL）
- 多檔案上傳（拖放+進度條）
- 後端驗證（檔案簽名檢查+自動壓縮）
- 錯誤處理（格式/大小/網路異常）」

麻瓜只能說「要什麼」，而工程師能定義「怎麼做+防錯機制」，工程師的 prompt 自帶邊界條件和技術約束，因此實際產出程式碼的完備性差距極大

效能優化思維

  • 麻瓜的 Vibe Coding： 「讓商品頁面載入快一點。」

    • → AI 可能僅優化前端元件，忽略後端查詢和快取機制，導致效能瓶頸仍在。

  • 工程師的 Vibe Coding：

實施全方位效能優化：

- 後端使用Redis快取熱門商品查詢結果。
- 前端實作懶載入（Lazy Loading）和圖片最佳化（WebP格式）。
- CDN加速靜態資源。
- 資料庫查詢優化（避免N+1問題）。
  • → AI 會生成從前端到後端的完整效能優化解決方案，確保系統高效運作。

問題處理思維

  • 麻瓜的 Vibe Coding
「我的圖片出不來，幫我修好。」

  • → AI 可能只檢查 <img> 標籤的 src 是否正確，但忽略其他潛在問題（如路徑錯誤、CORS 限制、伺服器權限等）。

  • 工程師的 Vibe Coding

- 路徑問題：確認 src 是相對路徑還是絕對路徑，開發環境與正式環境路徑是否一致。
- CORS 限制：如果是跨域圖片，確保伺服器設定 Access-Control-Allow-Origin。
- 檔案權限：檢查伺服器上的圖片是否可公開讀取（HTTP 404/403 錯誤）。
- 格式與壓縮：確認圖片格式（WebP/PNG/JPG）是否支援，並檢查是否因壓損導致載入失敗。
- Lazy Loading 衝突：如果使用 loading="lazy"，確認是否因延遲載入導致初期偵測不到。
- CDN 快取問題：如果使用 CDN，確認圖片是否已正確部署，或快取是否需清除。

程式碼維護性思維

  • 麻瓜的 Vibe Coding：
    • 「做一個 xxx 的功能」
    • → AI 產生的程式碼可能會造成一些問題。
- 業務邏輯與UI渲染完全混在一起
- 狀態管理直接寫在視圖層
- 沒有抽離可複用的組件
- 邏輯難以單獨測試
  • 工程師的 Vibe Coding：
- 抽離獨立 xxxComponent 元件
- 狀態管理提升至自訂 hook 
- 關注點分離（邏輯/視圖/樣式）
- 支援 SSR（hydration安全）」
  • → AI 會生成更嚴謹的程式碼，減少潛在漏洞。

進階技術需求

麻瓜可能不知道下面觀念或如何描述：

  • Server-Side Rendering (SSR) vs. Static Site Generation (SSG)
  • 不知道什麼是 API
  • 不知道通常前端不會直接串接資料庫
  • 不知道 HTML, CSS, JS 各自扮演的角色
  • 不知道什麼是環境變數
  • 其他…

結論

AI 的崛起確實讓許多工程師感到焦慮，擔心自己的工作會被取代。但仔細觀察會發現，麻瓜與工程師之間的專業鴻溝，並非單純靠 AI 就能彌補。

換個角度來想，既然 AI 這麼厲害，為什麼他只是叫做「Vibe Coding」？而不是叫做「No-Human Coding」、「Auto Coding」、「Magic Coding」、「Wishful Coding」呢？

因為現階段的 AI： ✅ 仍需要人類「引導」（精準的 Prompt = 工程師的專業） ✅ 無法自主「決策」（技術選型、架構取捨仍需人類判斷） ✅ 難以處理「模糊需求」（當客戶說「我要一個感覺很潮的網站」，AI 會困惑）

換句話說：

  • 麻瓜用 Vibe Coding → 只能做出「勉強能用」的東西
  • 工程師用 Vibe Coding → 能產出「高效、可維護、安全」的系統

所以，與其擔心被取代，不如問自己：

「當 AI 能寫程式時，我的價值該如何升級？」 🚀

延伸閱讀