[GitHub Global] Translate Vibe Coding 零基础教程/00 Vibe Coding 简介.md to zh-TW
This commit is contained in:
yupi-translate-app[bot]
committed by
GitHub
GitHub
parent
a78ca65948
commit
0cd7c3b706
@@ -0,0 +1,386 @@
|
||||
# Vibe Coding 簡介
|
||||
|
||||
你好，我是程式設計師魚皮，前騰訊全端開發，全網 200 萬粉的 [AI 程式設計博主](https://space.bilibili.com/12890453)，也是 [AI 導航](https://ai.codefather.cn) 和 [程式設計導航](https://www.codefather.cn) 等 10+ 自研產品的創造者。
|
||||
|
||||
如果你曾經想學程式設計，但被複雜的語法、難懂的概念勸退過；或者你是一個傳統程式設計師，每天被重複的程式碼折磨得想摔鍵盤；再或者你有不錯的創意，想要快速開發上線自己的產品並盈利。
|
||||
|
||||
那麼恭喜你，我的這套《Vibe Coding 零基礎入門教程》，可能會對你很有幫助。
|
||||
|
||||
2026 年，開發產品的規則已經徹底改變了。AI 的出現，讓程式設計從 “寫程式碼” 變成了 “寫需求”，從 “背語法” 變成了 “聊需求”。這種全新的程式設計方式，就叫做 **Vibe Coding**。
|
||||
|
||||
這篇文章，我會用最接地氣的方式，帶你理解：什麼是 Vibe Coding？為什麼它會成為未來的主流程式設計方式？以及你應該如何開始學習？
|
||||
|
||||
完全不用擔心聽不懂，我會像和朋友聊天一樣講給你聽。
|
||||
|
||||
讓我們開始吧！
|
||||
|
||||
|
||||
|
||||
## 一、什麼是 Vibe Coding？
|
||||
|
||||
一句話解釋 Vibe Coding，就是 **用自然語言（人話）和 AI 聊天，讓 AI 幫你生成程式碼、修改程式碼、優化程式碼的程式設計方式**。
|
||||
|
||||
你可能會說：不就是用 AI 寫程式碼嗎？
|
||||
|
||||
這麼說也沒錯，但真正的 Vibe Coding 不僅僅是讓 AI 寫幾行程式碼那麼簡單，而是一種全新的開發思維和工作流程。
|
||||
|
||||
如果用比較正式的語言來說，Vibe Coding 是一種：
|
||||
|
||||
> 以自然語言提示驅動大型語言模型（LLM），由 AI 直接生成並迭代程式碼的意圖驅動型開發模式。
|
||||
|
||||
|
||||
|
||||
在這種模式下：
|
||||
|
||||
- 你負責 "想清楚要做什麼"（表達意圖）
|
||||
- AI 負責 "把它做出來"（實現邏輯）
|
||||
- 你們一起迭代優化（協作進化）
|
||||
|
||||
你不需要記住這麼複雜的定義，你只需要知道：
|
||||
|
||||
**Vibe Coding = 用人話和 AI 聊天 + AI 幫你寫程式碼 + 你們一起迭代優化**
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 為什麼叫 "Vibe" Coding？
|
||||
|
||||
"Vibe" 這個詞，原意是氛圍感、感覺。
|
||||
|
||||
在程式設計領域，它有特別的含義：**你只需要把你想要的 “感覺” 告訴 AI，AI 就能把你腦子裡的想法變成真實的程式。**
|
||||
|
||||
比如你說：
|
||||
- “我想要一個簡潔現代的記賬頁面”，AI 就能給你生成一個乾淨好看的介面
|
||||
- “這個按鈕點擊後要有個動畫效果”，AI 就能給你加上動畫
|
||||
- “幫我把這個頁面改成暗黑模式”，AI 就能幫你重新設計配色
|
||||
|
||||
是不是很神奇？
|
||||
|
||||
這就是 Vibe Coding 的魅力所在，它讓程式設計變得像聊天一樣自然。
|
||||
|
||||
**那為什麼要叫氛圍程式設計呢？**
|
||||
|
||||
說說我的理解。
|
||||
|
||||
用 Vibe Coding 開發時，整個工作氛圍都不一樣了。以前程式設計師寫程式碼，一邊敲鍵盤一邊眉頭緊皺，遇到 bug 後要在網上搜半天。現在呢，基本就盯著編輯器，隔幾分鐘敲幾下（和 AI 對話），眉頭舒展，有時甚至還會突然激動起來！
|
||||
|
||||
不僅開發者的工作氛圍變了，整個辦公室的氛圍都不一樣了。開發同學討論問題時，產品、營運的同事都可以來指點江山，因為大家都能用 AI 快速驗證想法。
|
||||
|
||||
**氛圍程式設計，誠不欺我。**
|
||||
|
||||
|
||||
|
||||
## 二、核心理念：意圖驅動程式設計
|
||||
|
||||
什麼是意圖驅動？
|
||||
|
||||
在傳統程式設計中，你需要自己寫程式碼來告訴電腦 “怎麼做”（How）：
|
||||
|
||||
```python
|
||||
# 傳統方式：你要寫出每一步怎麼做
|
||||
total = 0
|
||||
for item in shopping_cart:
|
||||
total = total + item.price
|
||||
print(total)
|
||||
```
|
||||
|
||||
而在 Vibe Coding 中，你只需要告訴 AI "要做什麼"（What）：
|
||||
|
||||
```
|
||||
你：幫我計算購物車裡所有商品的總價
|
||||
AI：好的，我來實現這個功能
|
||||
```
|
||||
|
||||
看到區別了嗎？你不需要關心迴圈怎麼寫、變數怎麼命名，你只需要清楚地表達你的意圖，AI 就能幫你實現。
|
||||
|
||||
在 Vibe Coding 時代，最重要的 "程式設計語言" 不是 Python、JavaScript，**而是你的母語**！
|
||||
|
||||
這才是真正的中文程式設計，像我以前接觸的什麼易語言、Q 語言都弱爆了~
|
||||
|
||||
以前學程式設計，你要記住：
|
||||
- 變數怎麼定義
|
||||
- 迴圈怎麼寫
|
||||
- 函數怎麼呼叫
|
||||
- 各種語法規則
|
||||
|
||||
現在，你只需要會說人話：
|
||||
- "我想做一個待辦事項列表"
|
||||
- "這個按鈕點擊後跳轉到首頁"
|
||||
- "用戶輸入錯誤時顯示紅色提示"
|
||||
|
||||
**你的意圖，就是你的程式碼邏輯。**
|
||||
|
||||
|
||||
|
||||
### AI 是你的程式設計夥伴
|
||||
|
||||
很多人會把 AI 當做工具來使用，但是在 Vibe Coding 中，AI 不是工具，而是你的程式設計夥伴：
|
||||
|
||||
- 你是產品經理：負責想清楚要做什麼
|
||||
- AI 是工程師：負責把它實現出來
|
||||
- 你們是團隊：一起討論、迭代、優化
|
||||
|
||||
這種協作模式，讓程式設計從 "孤獨的戰鬥" 變成了 "愉快的對話"。
|
||||
|
||||
|
||||
|
||||
## 三、傳統程式設計思維和 Vibe Coding 思維
|
||||
|
||||
讓我用一個表格，幫你理解這兩種思維的區別：
|
||||
|
||||
| 維度 | 傳統程式設計 | Vibe Coding |
|
||||
|------|----------|-------------|
|
||||
| **核心能力** | 寫程式碼（背語法） | 表達需求（說人話） |
|
||||
| **學習重點** | 程式設計語言、演算法、資料結構 | 產品思維、需求表達、迭代優化 |
|
||||
| **工作方式** | 自己從零開始寫 | 和 AI 對話生成 |
|
||||
| **出問題時** | 自己調試、查文件、搜尋 | 把錯誤告訴 AI，讓它修復 |
|
||||
| **優化程式碼** | 重構、優化演算法 | 告訴 AI 優化方向 |
|
||||
| **學習曲線** | 陡峭（需要幾個月到幾年） | 平緩（可以幾天上手） |
|
||||
| **適合人群** | 理工科背景、邏輯思維強 | 任何會表達需求的人 |
|
||||
|
||||
舉個例子，比如你想做一個天氣查詢應用。
|
||||
|
||||
如果用傳統程式設計思維：
|
||||
1. 先學一門程式設計語言（比如 JavaScript）
|
||||
2. 學習如何搭建網頁
|
||||
3. 學習如何呼叫天氣 API
|
||||
4. 學習如何處理 JSON 資料
|
||||
5. 學習如何設計介面
|
||||
6. 花幾周時間一點點寫程式碼
|
||||
|
||||
如果用 Vibe Coding 思維：
|
||||
1. 對 AI 說："幫我做一個天氣查詢網頁，可以輸入城市名，顯示溫度和天氣狀況"
|
||||
2. AI 生成初版程式碼
|
||||
3. 你看到效果後說："再加個搜尋歷史功能"
|
||||
4. AI 幫你加上
|
||||
5. 你說："介面改成藍色調，更清爽一些"
|
||||
6. AI 幫你調整
|
||||
7. 半小時搞定！
|
||||
|
||||
|
||||
|
||||
看到區別了嗎？傳統程式設計關注 “怎麼做”，Vibe Coding 關注 “做什麼”。**把需求講清楚很重要。**
|
||||
|
||||
|
||||
|
||||
## 四、一個真實的例子
|
||||
|
||||
說了這麼多理論，讓我給你看一個真實的 Vibe Coding 案例。
|
||||
|
||||
|
||||
### 背景
|
||||
|
||||
我有個老師朋友，她每周都要把學生的考勤、作業完成情況發給家長。以前她都是一條一條地把學生的情況編輯成文字，每次都要花一兩個小時。
|
||||
|
||||
於是她問我能不能做個工具，輸入學生資訊後自動生成週報資訊。
|
||||
|
||||
|
||||
|
||||
### 用 Vibe Coding 實現
|
||||
|
||||
我打開 Cursor（一個主流的 AI 程式碼編輯器），進入一個空的目錄（用來裝生成的項目程式碼），然後準備和 AI 對話：
|
||||
|
||||
|
||||
|
||||
第 1 輪對話：
|
||||
```
|
||||
我：幫我做一個學生週報生成器網頁
|
||||
要求：
|
||||
1. 可以輸入學生姓名、考勤天數、作業完成數
|
||||
2. 點擊生成按鈕後，自動生成一段週報文字
|
||||
3. 可以一鍵複製到剪貼板
|
||||
```
|
||||
|
||||
AI 立刻給我生成了一個初版頁面，包含表單輸入框和按鈕。
|
||||
|
||||
|
||||
|
||||
第 2 輪對話：
|
||||
```
|
||||
我：週報的格式改成這樣：
|
||||
"【學生週報】{姓名}同學本週表現：出勤{考勤}天，完成作業{作業}份。{評價}"
|
||||
其中評價根據完成情況自動生成
|
||||
```
|
||||
|
||||
AI 修改了程式碼，加上了智能評價功能（雖然沒有特別智能）。
|
||||
|
||||
|
||||
|
||||
第 3 輪對話：
|
||||
```
|
||||
我：介面太簡陋了，改成清新的綠色調，加點圓角和陰影
|
||||
```
|
||||
|
||||
AI 美化了介面。
|
||||
|
||||
|
||||
|
||||
第 4 輪對話：
|
||||
```
|
||||
我：加個歷史記錄功能，可以看到之前生成的週報
|
||||
```
|
||||
|
||||
AI 加上了歷史記錄。
|
||||
|
||||
|
||||
|
||||
從開始到完成，一共花了不到 **10 分鐘**。我朋友現在每周用這個工具，省下來的時間夠陪我玩一把狼人殺了。
|
||||
|
||||
注意我在這個過程中做了什麼：
|
||||
- 我沒有寫一行程式碼（全是 AI 寫的）
|
||||
- 我只是清楚地表達了需求
|
||||
- 我通過多輪對話不斷優化
|
||||
- 我關注的是功能和效果，不是實現細節
|
||||
|
||||
這就是 Vibe Coding 的魔力！
|
||||
|
||||
|
||||
|
||||
## 五、Vibe Coding 能做什麼？
|
||||
|
||||
你可能會想：Vibe Coding 聽起來很酷，但它到底能做哪些事情呢？
|
||||
|
||||
答案是：**幾乎你能想到的軟體開發，它都能做！**
|
||||
|
||||
比如下面這些實用的軟體：
|
||||
|
||||
1）網頁應用：個人作品集網站、在線工具（待辦事項、記賬、筆記等）、企業官網、博客系統、在線商城
|
||||
|
||||
2）小程序 / App
|
||||
|
||||
3）AI 應用：聊天機器人、智能寫作助手、圖片生成工具、語音識別應用
|
||||
|
||||
4）資料處理工具：資料視覺化、自動化報表、表格處理工具
|
||||
|
||||
5）自動化腳本：批量文件處理、爬蟲工具、自動化測試
|
||||
|
||||
6）輔助工具：展示 PPT 的網頁、原型圖和演示網站、架構圖和流程圖、動畫演示網站
|
||||
|
||||
隨著 Vibe Coding 的進化，我們解決問題的思路也更開闊了。很多工作我都會想：能不能通過 AI 生成網站來解決？
|
||||
|
||||
這種思維的轉變，讓我們能用更快的方式驗證想法、展示創意。
|
||||
|
||||
像魚皮自己少說用 Vibe Coding 做過幾十個項目了，比如公開分享過的：
|
||||
|
||||
1）幫用戶通過提問的方式學知識的小程序 [《學習英雄》](https://bilibili.com/video/BV1yMn3zuE7L)
|
||||
|
||||
|
||||
|
||||
2）幫程式設計師提升需求分析和技術選型能力的網站 [《程式設計師技術練兵場》](https://bilibili.com/video/BV1dW4tz9E5M)
|
||||
|
||||
|
||||
|
||||
還有各種圖片處理工具、資料處理工具、資料分析工具等等。這些項目中，絕大多數程式碼都是和 AI 對話生成的，我可以一邊喝可樂，一邊看著 AI 幹活~
|
||||
|
||||
|
||||
|
||||
## 六、為什麼現在是學程式設計的最好時代？
|
||||
|
||||
如果你曾經被程式設計勸退過，那麼我要告訴你一個好消息：**今天，是人類歷史上學習程式設計最容易的時刻！**
|
||||
|
||||
**門檻從未如此之低**
|
||||
|
||||
以前學程式設計，你要花少說幾個月學習基礎知識、面對無數的報錯和調試。現在學 Vibe Coding，你只需要會說人話、會表達需求，幾天就能上手，像聊天一樣程式設計，AI 幫你解決大部分問題。
|
||||
|
||||
**從想法到產品的距離更短**
|
||||
|
||||
以前，你有個好點子，但實現它可能需要學習幾個月程式設計，再花幾周甚至幾個月開發，或者招一個程式設計師，最後可能只能放棄這個想法。
|
||||
|
||||
現在，用 Vibe Coding，今天想到一個點子，今天就能做出來，甚至可以直接部署上線，成本接近於零。
|
||||
|
||||
**創造力比技術更重要**
|
||||
|
||||
在 AI 時代，最重要的不再是 "會寫程式碼"，而是會想創意（創造力）、會表達需求（溝通能力）、會迭代優化（產品思維）。這些能力，任何人都可以培養。
|
||||
|
||||
**終身學習成為可能**
|
||||
|
||||
以前，程式設計技術更新太快，學了可能很快就過時。現在，有了 AI 助手，新技術出來 AI 就已經學會了，你只需要告訴 AI 用新技術實現，可以把精力放在創意和產品上。
|
||||
|
||||
|
||||
|
||||
## 七、3 大 Vibe Coding 誤區
|
||||
|
||||
在開始學習 Vibe Coding 之前，我必須幫你破除 3 個常見的誤區。很多同學就是因為這些誤區，遲遲不敢開始。
|
||||
|
||||
|
||||
### 誤區 1、Vibe Coding 是不是在作弊？
|
||||
|
||||
當然不是！
|
||||
|
||||
有些傳統程式設計師會說：用 AI 寫程式碼，那不就是不會程式設計嗎？
|
||||
|
||||
那讓我們想一想：
|
||||
- 100 年前，會心算的人覺得用計算器是作弊
|
||||
- 30 年前，會手寫程式碼的人覺得用 IDE 是作弊
|
||||
- 今天，會手寫程式碼的人覺得用 AI 是作弊
|
||||
|
||||
**工具的進步，不是作弊，而是效率的提升。**
|
||||
|
||||
你用 AI 寫程式碼，就像設計師用 Photoshop、建築師用 CAD 一樣，是正常的生產力工具。
|
||||
|
||||
關鍵不是你怎麼實現的，而是你能不能把東西做出來，能不能解決問題。
|
||||
|
||||
|
||||
|
||||
### 誤區 2、Vibe Coding 會讓我失去學習能力嗎？
|
||||
|
||||
有人擔心：如果總是讓 AI 寫程式碼，我不就什麼都學不到了嗎？
|
||||
|
||||
恰恰相反！Vibe Coding 是最好的學習方式：
|
||||
- AI 生成程式碼後，你可以閱讀理解
|
||||
- 你不懂的地方，可以問 AI 解釋
|
||||
- 你可以嘗試修改程式碼，看看效果
|
||||
- 你可以邊做項目邊學習
|
||||
|
||||
我大學時期就是通過自己做項目學會了很多新技術，而現在有了 Vibe Coding，哪怕你剛開始沒有自己獨立做項目的能力，用 AI 做了幾個項目後，也能看懂一些新技術的程式碼了。
|
||||
|
||||
**在實戰中學習，遠比啃書本效率高得多！**
|
||||
|
||||
|
||||
|
||||
### 誤區 3：Vibe Coding 只能做簡單的玩具項目嗎？
|
||||
|
||||
當然不是！複雜項目一樣能做！
|
||||
|
||||
有人覺得 AI 只能寫些簡單程式碼，複雜項目還得靠程式設計師。
|
||||
|
||||
但實際上，如今的 AI 已經非常強大了：
|
||||
- 可以處理幾萬行程式碼的項目
|
||||
- 可以理解複雜的業務邏輯
|
||||
- 可以使用各種框架和技術棧
|
||||
- 可以幫你調試複雜的 bug
|
||||
|
||||
且不說網上天花亂墜地說什麼獨立用 AI 開發商業變現項目，就拿魚皮自己的團隊來說，我們的 [程式設計導航小程序](https://codefather.cn/) 就是用 Vibe Coding 在一周時間內開發完成的。魚皮也全程直播帶大家用 AI 開發過一個包含完整前端和後端的 [《AI 程式設計師技術練兵場》](https://bilibili.com/video/BV1dW4tz9E5M) 項目。
|
||||
|
||||
|
||||
|
||||
關鍵不是 AI 的能力，而是你的需求表達和迭代能力。
|
||||
|
||||
|
||||
|
||||
## 八、Vibe Coding 的問題
|
||||
|
||||
雖然 Vibe Coding 很強大，但我也要誠實地告訴你，它目前還存在一些局限性。了解這些問題，能幫你更理性地使用 Vibe Coding。
|
||||
|
||||
|
||||
|
||||
### 1、介面同質化
|
||||
|
||||
你可能會發現，很多用 AI 生成的網站介面都長得很像，特別是顏色 —— 經常是淡紫色或藍紫漸變色。這是因為 AI 的訓練資料中，這類設計（或者引用的樣式程式碼）比較常見，所以它會傾向於生成類似的風格。
|
||||
|
||||
|
||||
|
||||
如果你想要獨特的設計，需要在提示詞中明確說明顏色、風格、參考案例，或者提供設計稿讓 AI 參考。
|
||||
|
||||
|
||||
|
||||
### 程式碼不可控的風險
|
||||
|
||||
還有個更麻煩的問題，就是 AI 生成的程式碼不可控。AI 目前更多地還是用來生成小項目，如果你在有點兒體量的程式碼庫下使用 AI，出 Bug 時，就很可能出現調試困難的 **死局** —— 你既看不懂 AI 生成的程式碼，又捨不得放棄這些程式碼。之前在 AI 社群裡，就看到有開發者吐槽同事用 AI 把項目改崩了：
|
||||
|
||||
|
||||
|
||||
這就是為什麼我建議：
|
||||
- 盡量讓 AI 生成簡單、清晰的程式碼
|
||||
-
|
||||
Reference in New Issue
Block a user