Vibe Coding 是什麼？深度研究 :bulb:

Vibe Coding 概念圖

:dart: 定義與起源

Vibe Coding（氛圍編碼）是一種新興的程式開發方法，這個概念由OpenAI共同創辦人、電腦科學家Andrej Karpathy於2025年2月在社群平台首次提出。這種方法的核心是開發者大量依賴AI工具生成程式碼，讓工程師可以將注意力從寫程式碼的細節轉移到更高層次的產品設計與架構思考。

[time=Feb 15, 2025] [color=#907bf7] 「最熱門的新程式設計語言，是英文。」（The hottest new programming language is English.）

更具體來說，Karpathy在他的原始貼文中描述Vibe Coding為：

[time=Feb 2, 2025] [color=#907bf7] 「有一種新式編碼我稱為『vibe coding』，你完全順應氛圍、擁抱指數成長，並忘記程式碼的存在。這是可能的，因為LLMs（例如Cursor Composer搭配Sonnet）正變得太強大。而且我只用SuperWhisper跟Composer對話，所以幾乎不碰鍵盤。我會要求一些超懶的事情，像是『把側邊欄的邊距減半』，因為我懶得去找。我總是『全部接受』，從不閱讀程式碼。」

Karpathy用此詞描述一種沉浸式、情境導向的程式設計方式，強調開發者與AI共創的氛圍，並主張「寫程式不必執著於邏輯，而應專注於整體vibe」。

在Vibe Coding的開發流程中，程式設計師不再需要記憶複雜的語法或API詳情，而是專注於描述想要實現的功能，並讓AI工具協助完成實際的編碼工作。

:sparkles: Vibe Coding的特點

1. 以AI為核心的開發流程

[mermaid 圖表 — 原始 HackMD 版本可正常渲染]graph LR
    A[開發者] -->|自然語言描述| B[AI工具]
    B -->|生成代碼| C[程式碼]
    C -->|審核與調整| A
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#bbf,stroke:#333,stroke-width:2px
    style C fill:#bfb,stroke:#333,stroke-width:2px

根據Y Combinator (YC)的調查，許多使用Vibe Coding方法的創辦人估計他們的程式碼庫中有超過95%是由AI生成的。開發者變成了指導者和審核者，而不是每行代碼的直接編寫者。

2. 注重高層次思考 :brain:

Vibe Coding使開發者能夠專注於：

系統架構設計
使用者體驗
產品功能規劃
業務邏輯與價值

3. 快速原型開發 :zap:

這種方法特別適合快速原型設計，讓想法能更迅速地轉化為可測試的產品，大幅縮短開發週期。

4. 即時互動式開發方式 :speech_balloon:

當AI生成的程式碼不符合預期時，開發者可以直接使用自然語言回饋，例如「請加上錯誤處理」或「換成深色主題」，AI就能迅速調整並重新寫程式，減少反覆測試與手動修改的成本。

5. 三大支柱 :triangular_ruler:

根據2025年Reddit上的「Vibe Coding Manual」，Vibe Coding建立在三個基本支柱上：

規格說明：明確表達目標（例如「創建一個具有登入功能的Twitter克隆」）

規則設定：建立明確的約束條件（例如「使用Python，保持簡單」）

監督指導：監督和引導開發過程，確保保持專注

:left_right_arrow: Vibe Coding與LLM Coding的區別

雖然Vibe Coding與LLM Coding（利用大型語言模型輔助編程）看起來相似，但兩者有以下本質差異：

特點	Vibe Coding	LLM Coding
核心理念	「完全順應感覺」和「忘記程式碼」，專注於創意和整體架構	仍保持對程式碼的關注，需具備基本程式語言知識
開發者角色	成為AI的指導者或協作者，使用自然語言表達意圖	開發者仍主動審查和修改生成的代碼
與程式碼互動	鼓勵直接接受AI建議，通常不詳細檢查代碼變更	審查、測試和理解所有代碼
技術門檻	大幅降低，非程式設計師也能參與開發	相對較高，使用者仍需具備一定程式知識
主要工具	Cursor AI、Claude、Superwhisper等	GitHub Copilot、Code Llama、StarCoder等

[time=Mar 10, 2025] [color=#ff6b6b] 「如果LLM寫了你所有的程式碼，但你已經審查、測試和理解了所有這些程式碼，那就不是vibe coding——只是使用LLM作為打字助手」

:hammer_and_wrench: Vibe Coding的流行工具

想要開始Vibe Coding，以下是幾款常用的工具：

1. Cursor AI
這是一款由AI驅動的程式碼編輯器，被認為是目前最具代表性的Vibe Coding編輯器，基於VS Code打造，專為與GPT-4類模型整合而設計。它的Composer聊天介面讓使用者可以與AI對話，請求生成函式、新增功能、重構程式碼，甚至修正錯誤。所有變更都會以diff顯示，使用者可以有信心地逐項審查後套用。

// Cursor AI 範例對話
User: "幫我建立一個簡單的登入表單，使用React和styled-components"
AI: "好的，我來為您創建..."
// AI生成完整的React登入表單代碼

2. Claude 3.7 Sonnet
由Anthropic開發的Claude 3.7 Sonnet是一款強大的大型語言模型，特別適合Vibe Coding應用。它理解複雜的需求描述，能將自然語言轉換為各種程式語言的高質量代碼。

3. Super Whisper
這是一款為coding優化的語音轉文字引擎，讓開發者可以通過語音指令進行Vibe Coding，實現真正的「語音寫Code」。Vibe Coding追求的「擁抱氛圍」，其中一環是鍵盤都不用了，要透過語音寫Code來實現。

[mermaid 圖表 — 原始 HackMD 版本可正常渲染]

sequenceDiagram participant 開發者 participant SuperWhisper as Super Whisper participant CursorAI as Cursor AI participant 程式碼庫

開發者->>SuperWhisper: 語音指令："在畫面中央加一個藍色按鈕"
SuperWhisper->>CursorAI: 轉換為文字指令
CursorAI->>CursorAI: 處理指令並生成代碼
CursorAI->>程式碼庫: 添加/修改代碼
程式碼庫->>開發者: 呈現代碼變更結果
開發者->>SuperWhisper: 語音確認或調整："把按鈕改成綠色"
SuperWhisper->>CursorAI: 轉換新指令
CursorAI->>程式碼庫: 更新代碼
程式碼庫->>開發者: 顯示更新後結果</div>

4. Replit
Replit是一個集開發、部署與AI協作於一體的線上平台，其內建的Ghostwriter AI可理解自然語言描述，自動生成前後端程式碼，使用者可直接在瀏覽器中撰寫、測試並部署應用。對於學生、創業者與非技術背景者來說，是進入Vibe Coding最友善的入口之一。

:rocket: Vibe Coding對創業生態的影響

當美國頂尖創業加速器Y Combinator在2025年提出「不採用Vibe Coding的開發者將被淘汰」的觀察報告時，這場由Karpathy點燃的技術革命，已徹底改變矽谷新創圈的遊戲規則。

据Y Combinator的最新調查顯示：

最新一批創業公司中，有25%的公司程式碼庫中有高達95%是由AI生成
當前孵化的創業公司中約有「81%」是AI公司

```graphviz digraph impact { rankdir=LR; node [shape=box, style=filled, color=lightblue]; VC [label="Y Combinator觀察"]; VCC [label="Vibe Coding革命"]; T1 [label="精簡團隊結構"]; T2 [label="加速開發週期"]; T3 [label="降低技術門檻"]; T4 [label="減少資金需求"];

VC -> VCC;
VCC -> T1;
VCC -> T2;
VCC -> T3;
VCC -> T4;

}


Y Combinator的CEO Garry Tan表示，Vibe Coding正在「超級充電」（Super-Charging）創業公司，使它們能夠保持更精簡的團隊結構。這使軟體建構過程整體更有效率，讓創業公司能以更少的資源完成更多工作。

對於那些正在努力進入日益緊縮的就業市場的人來說，Tan認為Vibe Coding的出現恰逢「完美時機」。它為年輕工程師提供了獨立創業的機會，而不是依賴大公司來開啟他們的職業生涯。

<br>

## :performing_arts: Vibe Coding對開發者角色的改變

Vibe Coding正在從根本上改變軟體開發者的角色：

<div style="background:#dff0d8;border-left:4px solid #3c763d;color:#3c763d;padding:12px 16px;margin:12px 0;border-radius:4px">

**從編碼者到設計師**：開發者從直接編寫程式碼轉變為設計系統和定義需求，更專注於創造性思考和問題解決。

</div>
<div style="background:#dff0d8;border-left:4px solid #3c763d;color:#3c763d;padding:12px 16px;margin:12px 0;border-radius:4px">

**從技術專家到領域專家**：技術知識的重要性減少，而對業務邏輯和用戶需求的深入理解更加重要。

</div>
<div style="background:#dff0d8;border-left:4px solid #3c763d;color:#3c763d;padding:12px 16px;margin:12px 0;border-radius:4px">

**從獨立工作者到AI協作者**：開發者學習如何有效地與AI合作，提供適當的指導和修正，以獲得最佳結果。

</div>
<div style="background:#dff0d8;border-left:4px solid #3c763d;color:#3c763d;padding:12px 16px;margin:12px 0;border-radius:4px">

**從重視語法到重視溝通**：清晰表達需求的能力變得比掌握編程語言的細節更重要。

</div>
<br>

## :globe_with_meridians: Vibe Coding的應用場景

Vibe Coding目前最適合應用在以下場景：

<div style="background:#f6f8fa;border:1px solid #d0d7de;padding:12px;margin:12px 0;border-radius:6px;font-family:monospace;font-size:0.9em;white-space:pre-wrap">[mermaid 圖表 — 原始 HackMD 版本可正常渲染]

mindmap
  root((Vibe Coding應用場景))
    快速原型設計
      將概念轉化為可測試產品
    教育領域
      降低編程入門門檻
    個人專案
      實現複雜項目
    藝術創作
      創新數位藝術作品
    跨領域合作
      促進不同背景人士協作
    MVP開發
      節省時間和資源
    非技術創業
      参與產品開發</div>

<br>

## :white_check_mark: Vibe Coding的最佳實踐

要有效地使用Vibe Coding，以下是一些最佳實踐：

1. **明確的需求描述**：用清晰、具體的語言描述你想要實現的功能

// 不清晰的需求 "做一個用戶頁面"

// 清晰的需求 "創建一個用戶資料頁面，包含頭像、姓名、電子郵件和個人簡介，使用圓形頭像，簡約設計風格，添加編輯功能按鈕"


2. **迭代式開發**：不要期望一次性獲得完美結果，通過多次反饋和調整來改進

3. **保持對結果的審查**：雖然Vibe Coding強調接受AI的建議，但仍需確保結果符合需求

4. **了解基本概念**：掌握基本的程式設計概念，以便能夠理解和評估AI生成的代碼

5. **學習有效溝通**：發展與AI有效溝通的能力，學習如何描述需求和提供反饋

<br>

## :warning: Vibe Coding的挑戰與局限

雖然Vibe Coding帶來諸多便利，但也面臨一些挑戰：

<div style="background:#f2dede;border-left:4px solid #a94442;color:#a94442;padding:12px 16px;margin:12px 0;border-radius:4px">

**代碼品質與可維護性**：AI生成的代碼可能缺乏最佳實踐或可維護性，尤其在大型、複雜的專案中

</div>
<div style="background:#f2dede;border-left:4px solid #a94442;color:#a94442;padding:12px 16px;margin:12px 0;border-radius:4px">

**安全隱憂**：自動生成的代碼可能含有未被識別的安全漏洞，AI coding缺乏資安意識

</div>
<div style="background:#f2dede;border-left:4px solid #a94442;color:#a94442;padding:12px 16px;margin:12px 0;border-radius:4px">

**對複雜系統的適應性**：對於高度複雜或性能要求極高的系統，人工編碼仍有優勢

</div>
<div style="background:#f2dede;border-left:4px solid #a94442;color:#a94442;padding:12px 16px;margin:12px 0;border-radius:4px">

**對AI工具的依賴**：開發流程高度依賴AI服務的可用性與能力

</div>
<div style="background:#f2dede;border-left:4px solid #a94442;color:#a94442;padding:12px 16px;margin:12px 0;border-radius:4px">

**理解和調試困難**：當AI生成大量代碼時，開發者可能難以全面理解和有效調試

</div>
<div style="background:#f2dede;border-left:4px solid #a94442;color:#a94442;padding:12px 16px;margin:12px 0;border-radius:4px">

**創新的限制**：如果過度依賴AI生成解決方案，可能限制真正創新和獨特解決方案的發展

</div>
<br>

## :busts_in_silhouette: 誰最能從Vibe Coding受益？

根據MIT Media Lab的AI安全研究員Tobin South的觀察，Vibe Coding主要有兩類受益群體：

<div style="background:#f5f5f5;border-left:4px solid #777;color:#333;padding:12px 16px;margin:12px 0;border-radius:4px">

<strong>{state="open"} 1. 經驗豐富的開發者</strong><br>像Karpathy這樣已經熟悉編程的專業人士，他們知道如何在AI出錯時進行修正，可以將Vibe Coding作為加速開發的工具。這類開發者能夠：
- 快速評估AI生成代碼的品質
- 識別並修復潛在問題
- 有效引導AI產生更優質的結果

</div>
<div style="background:#f5f5f5;border-left:4px solid #777;color:#333;padding:12px 16px;margin:12px 0;border-radius:4px">

<strong>{state="open"} 2. 完全的新手</strong><br>沒有或極少編程經驗的人，他們可以借助AI工具實現過去無法獨立完成的項目。這包括：
- 想要實現簡單應用的非技術人員
- 學習編程的初學者
- 有創意想法但缺乏技術能力的創作者

</div>
除此之外，Vibe Coding也特別適合：
- **非技術背景的創業者與企業家**
- **產品經理與設計師**
- **學生與教育工作者**
- **內容創作者與數位藝術家**

<br>

## :books: 學習Vibe Coding需要什麼技能？

要有效地運用Vibe Coding，最關鍵的是學會與AI工具有效溝通：

<div style="background:#f6f8fa;border:1px solid #d0d7de;padding:12px;margin:12px 0;border-radius:6px;font-family:monospace;font-size:0.9em;white-space:pre-wrap">[mermaid 圖表 — 原始 HackMD 版本可正常渲染]

graph TD
 A[明確表達需求和目標] --> B[熟悉基本程式設計概念]
 B --> C[掌握提示工程技巧]
 C --> D[培養問題分解和系統思考能力]
 D --> E[持續學習新AI工具和功能]
 style A fill:#f9f,stroke:#333,stroke-width:2px
 style C fill:#bbf,stroke:#333,stroke-width:2px
 style E fill:#bfb,stroke:#333,stroke-width:2px</div>

<br>

## :crystal_ball: 未來展望

隨著生成式AI技術的不斷進步，Vibe Coding可能將重塑軟體開發的未來。它不僅改變了程式設計師的工作方式，也降低了技術門檻，使更多人能夠參與到數位創造中。

在不久的將來，我們可能會看到：

1. **更多專門為Vibe Coding設計的工具**：工具將更加直觀，更適合非技術人員使用
2. **編程教育的轉變**：教育重點從語法和實現轉向系統設計和問題解決
3. **開發團隊結構的改變**：技術專家和領域專家的界限變得模糊
4. **更多由非技術創始人創建的科技創業公司**：降低的技術門檻將使更多有創意的人能夠創建科技公司
5. **程式設計變成通用素養**：程式設計可能會從專業技能演變為更普遍的素養，就像今天的文字處理或電子表格技能一樣，成為知識工作者的基本能力

---

## :star2: 結論

Vibe Coding代表了AI時代軟體開發的新範式，它既不是傳統編程的完全取代，也不僅僅是輔助工具，而是一種全新的思考和創造方式。無論你是專業開發者還是技術愛好者，了解和掌握Vibe Coding都可能成為未來數位世界的重要能力。

<div style="background:#d9edf7;border-left:4px solid #31708f;color:#31708f;padding:12px 16px;margin:12px 0;border-radius:4px">

**想深入了解更多?**
- [Andrej Karpathy關於AI編程的X(Twitter)頁面](https://x.com/karpathy)
- [Y Combinator的AI創業資源庫](https://www.ycombinator.com/library)
- [Cursor AI官方文檔與教學資源](https://www.cursor.com/)
- [OpenAI Whisper語音識別技術文檔](https://github.com/openai/whisper)
- [Anthropic Claude模型技術文檔](https://docs.anthropic.com/)

</div>
###### tags: `Vibe Coding` `AI` `軟體開發` `創業` `未來趨勢` `程式設計`

本文最初發布於 HackMD @BASHCAT。

搜尋此網誌

BASHCAT

Vibe Coding 是什麼？AI 驅動的程式開發新典範

Vibe Coding 是什麼？深度研究 :bulb:

:dart: 定義與起源

:sparkles: Vibe Coding的特點

1. 以AI為核心的開發流程

2. 注重高層次思考 :brain:

3. 快速原型開發 :zap:

4. 即時互動式開發方式 :speech_balloon:

5. 三大支柱 :triangular_ruler:

:left_right_arrow: Vibe Coding與LLM Coding的區別

:hammer_and_wrench: Vibe Coding的流行工具

:rocket: Vibe Coding對創業生態的影響

留言

張貼留言

這個網誌中的熱門文章

Arduino 課本可能沒教的事(1)

SI4432 搭配Arduino

燒錄 Arduino mini Pro 燒錄