# Vibe Coding 對話工程技巧

> 迭代式對話的藝術



你好，我是魚皮。

在上一篇文章裡，我們講了 Vibe Coding 的 5 個核心心法。今天我們要深入探討其中最關鍵的一個技能 —— 如何和 AI 進行高效對話。

很多同學在用 AI 的時候，會把它當成一個魔法按鈕：輸入一句話，期待它直接給出完美答案。

但現實往往是，AI 給出的結果要麼不對，要麼不夠好。這時候，大家就會抱怨：AI 太笨了，根本不懂我的意思，是不是你這個 AI 能力不行啊？

其實，問題不在於 AI 笨，而在於我們沒有掌握和它對話的技巧。今天，我就來教你如何通過 **對話工程**，讓 AI 真正聽懂你的需求。



## 一、對話工程和提示詞工程？

很多朋友把和 AI 交流稱為 “寫提示詞”、或者 “提示詞工程”，我之前也是這樣的。但如今，隨著 AI 對模糊指令的理解能力越來越強，我覺得這個說法其實不夠全面，因為它暗示了一種單向的、一次性的交流方式 —— 你寫一個完美的提示詞，AI 給你一個完美的答案。

但實際上，Vibe Coding 更像是一場對話。你和 AI 是在一起工作、一起探索、一起完善想法。這個過程是 **雙向的、迭代的**。

舉個例子，傳統的 **提示詞思維** 是這樣的：

“請幫我用 React 和 Tailwind CSS 寫一個響應式的導航欄，包含 Logo、菜單項（首頁、關於、聯繫）、搜索框和用戶頭像，要支持移動端折疊菜單，顏色是深藍色背景白色文字，Logo 在左邊，菜單在中間，用戶信息在右邊……”

你想要在一句話裡把所有需求都說清楚。但往往會遺漏一些細節，或者說得不夠準確。

而 **對話思維** 是這樣的：

你：我想做一個導航欄，你能幫我嗎？

AI：當然可以。你想用什麼技術棧？有什麼設計要求嗎？

你：我用 React 和 Tailwind CSS。設計上希望簡潔專業，深藍色背景。

AI：好的。導航欄需要包含哪些元素？

你：Logo、幾個菜單項、搜索框和用戶頭像。

AI：明白了。需要支持移動端嗎？

你：對，移動端要能折疊成漢堡菜單。

看到區別了嗎？

對話思維讓你可以逐步明確需求，而不是一開始就要想清楚所有細節。這樣更自然，也更容易得到好結果。

![](https://pic.yupi.icu/1/promptvschat%E5%A4%A7.jpeg)




### 對話的好處

使用對話思維有幾個明顯的好處：

1. 降低認知負擔：你不需要一次性想清楚所有細節，可以邊聊邊想。

2. 更容易發現問題：AI 的提問會幫你發現自己遺漏的地方。

3. 結果更準確：通過多輪交流，AI 能更準確地理解你的需求。

4. 學習效果更好：在對話過程中，你會學到很多新知識和最佳實踐。



## 二、迭代式對話的核心技巧

下面分享幾個最重要的對話技巧。



### 技巧一：從大到小，逐步細化

不要一開始就陷入細節。先從整體開始，然後逐步細化。

比如你想做一個博客系統，不要一上來就說：幫我寫一個支持 Markdown、代碼高亮、評論、點讚、分類、標籤、搜索、RSS 訂閱的博客系統。

而是這樣開始：

1. 我想做一個簡單的博客系統，用戶能發布和查看文章
2. 文章需要支持 Markdown 格式
3. 能不能加上代碼高亮功能
4. 我還想要一個簡單的評論功能

每一步都很小，很容易理解和實現。這樣 AI 就不會被複雜的需求搞暈，你也能隨時調整方向。



### 技巧二：具體而非抽象

AI 不擅長理解抽象的概念，但很擅長處理具體的描述。

❌ 不好的例子：做一個好看的按鈕

✅ 好的例子：做一個圓角按鈕，藍色背景（#3B82F6），白色文字，padding 上下 12px 左右 24px，鼠標懸停時背景變深藍色（#2563EB）。

❌ 不好的例子：加一個用戶友好的錯誤提示

✅ 好的例子：當用戶輸入的郵箱格式不對時，在輸入框下方顯示紅色文字 "請輸入有效的郵箱地址"。

描述越具體，AI 就越能準確地實現你的需求。




### 技巧三：提供參考和示例

你可以通過文字描述或者圖片舉例來幫助 AI 理解需求。

用文字描述，你可以這樣說：

- 我想要一個類似 GitHub 的個人主頁佈局：左邊是用戶信息卡片，右邊是活動時間線。
- 按鈕的樣式參考 Stripe 的設計：簡潔、現代、有微妙的陰影。
- 表單驗證的提示方式參考 Airbnb：實時驗證，錯誤提示在輸入框下方。

AI 見過很多網站和應用，你提供的參考能幫它快速理解你想要什麼。

更直接的方法是用圖片，現在的很多 AI 大模型（比如 Claude、GPT、Gemini）都支持圖片理解，你可以：

- 截圖你想要的設計效果，讓 AI 照著做
- 截圖出現的 bug 或錯誤，讓 AI 看到具體問題
- 截圖參考網站的佈局，讓 AI 模仿

比如下面這些提示詞：

- 請參考這個截圖的佈局來設計我的頁面：【上傳截圖】
- 我的頁面在移動端顯示不正常，看這個截圖：【上傳截圖】，應該怎麼修復？

一圖勝千言，圖片能讓 AI 更準確地理解你的需求，特別是 UI 設計、網站開發和 Bug 修復時。



### 技巧四：分步驟提問

跟技巧 1 有點類似。對於複雜的功能，不要一次性要求 AI 全部完成。把它拆成多個步驟，一步一步來。

比如實現用戶登錄功能：

1. 先幫我創建一個登錄表單，包含郵箱和密碼輸入框，還有一個登錄按鈕。
2. 現在給表單添加客戶端驗證：郵箱要符合格式，密碼至少 6 位。
3. 當用戶點擊登錄按鈕時，發送 POST 請求到 /api/login，攜帶郵箱和密碼。
4. 如果登錄成功，跳轉到首頁；如果失敗，顯示錯誤信息。

每完成一步，你都可以測試一下，確保沒問題再繼續。這樣即使出錯，也容易定位問題。



### 技巧五：用提問來引導思考

有時候，你不確定該怎麼做，可以讓 AI 幫你分析。

- 我想在這裡加一個緩存機制，但不確定用哪種方案。你能分析一下 Redis 和 Memcached 的優缺點嗎？
- 這個頁面加載有點慢，你覺得可能是什麼原因？有什麼優化建議？
- 我在考慮用 SSR 還是 CSR，你能幫我分析一下這兩種方案在我這個項目中的適用性嗎？

這樣的提問能讓 AI 發揮它的知識優勢，幫你做出更好的決策。



## 三、如何描述清楚需求？

描述需求是對話中最重要的環節。描述得好，AI 就能做對；描述得不好，就會南轅北轍。



### 使用需求描述框架

在描述需求時，可以用一個系統化的框架來組織你的想法。這裡推薦一個實用的框架：

**基礎版（5要素）**：

1. 是什麼（What）：要做什麼功能或組件？
2. 為什麼（Why）：這個功能的目的是什麼？
3. 怎麼做（How）：技術實現有什麼要求？
4. 什麼樣（Style）：外觀和交互有什麼要求？
5. 什麼情況（When/Where）：在什麼場景下使用？

舉個例子：

- 我需要一個搜索框（What）
- 讓用戶能快速找到文章（Why）
- 用 React 實現，輸入時實時搜索（How）
- 樣式要簡潔，有搜索圖標，輸入框圓角（Style）
- 放在頁面頂部導航欄的右側（Where）

當然，不是每次都要說全五個要素，但建議至少要包含前三個。

**進階版（6要素）**：

如果你想要更專業的輸出，可以補充這個要素：

6）受眾（Audience）：這個功能是給誰用的？他們的技術水平如何？

比如：“這個搜索功能是給普通用戶用的，要簡單易懂，不需要高級篩選。”

這樣 AI 就能根據受眾調整實現方案和交互設計。



### 說明技術背景

如果你想讓 AI 幫你優化已有項目，那麼 AI 需要知道你的項目用的是什麼技術，才能給出合適的代碼。

每次開始新對話時，建議先說明技術背景，比如：我的項目用的是 Next.js 15（App Router）、TypeScript、Tailwind CSS 和 Supabase。

如果有特殊的代碼規範，也要說明，比如：我們的項目使用函數式組件，不用 class 組件。所有的 API 調用都用自定義的 useFetch hook。

這樣 AI 生成的代碼就能和你的項目保持一致。

雖然現在很多 AI 編程工具會引導 AI 先分析你已有的項目代碼，但是人工明確技術棧可以讓 AI 生成的內容更準確。

不過如果你不是一名程序員，或者不太懂這些技術，那麼這一點就可以完全忽略掉了。這就是為什麼在 AI 時代，我們仍然需要學習編程，因為懂技術的人更能引導和利用 AI。 




### 描述期望的輸出

告訴 AI 你期望什麼樣的輸出。比如：

- 請給我完整的組件代碼，包括 TypeScript 類型定義
- 只給我核心邏輯，不需要樣式代碼
- 請給我一個可以直接運行的完整示例
- 請分步驟解釋這段代碼的工作原理

明確輸出格式，能讓 AI 更好地滿足你的需求，否則 AI 可能會給你輸出一大堆亂七八糟的內容。

我發現越強的 AI 就越容易把簡單的需求搞複雜。像我之前就遇到過讓 AI 生成一個小項目，結果它給我生成了 7 ~ 8 個文檔，浪費了賊多 Token。




## 四、追問和糾偏的技巧

AI 第一次給出的答案往往不夠完美。這時候，你需要通過追問和糾偏來改進結果。



### 追問的藝術

如果 AI 的回答不夠詳細，不要重新問一遍，而是追問細節。

❌ 不好的追問：再詳細一點（太模糊）

✅ 好的追問：

- 你提到了使用 useEffect，能詳細解釋一下為什麼要在這裡用它嗎？
- 這個函數的性能如何？處理大量數據時會有問題嗎？
- 你選擇用 Map 而不是 Object，是基於什麼考慮？

具體的追問更能得到具體的答案。



### 讓 AI 主動追問你

有時候，你可能不知道該提供哪些信息。這時候，可以讓 AI 主動追問你：

```markdown
我想做【你的需求】。請你在回答前，先問我幾個問題，了解更多細節，然後再給出方案。
```

這樣 AI 會根據它的理解，問你一些關鍵問題，比如技術棧、使用場景、設計要求等。通過回答這些問題，你能把需求描述得更清楚，AI 也能給出更準確的方案。

這種方式特別適合你對需求還不夠明確的時候，讓 AI 幫你理清思路。



### 糾偏的方法

如果 AI 理解錯了你的意思，要及時糾正。

- 不對，我想要的不是這樣。我的意思是……
- 這個方案不太適合我的場景，因為……你能給我另一個方案嗎？
- 你誤解了我的需求。我要的是 A，不是 B。

不要不好意思糾正 AI，請盡情地罵它、羞辱它、甚至可以把它當做臭狗一樣教訓。它不會生氣，反而會根據你的反饋給出更好的答案。



### 要求解釋

如果你不理解 AI 給出的代碼或方案，可以要求它解釋。

- 這段代碼是什麼意思？能逐行解釋一下嗎？
- 為什麼要這樣寫？有沒有其他寫法？
- 這個方案的優缺點是什麼？

理解了原理，你才能真正掌握這些知識。




## 五、如何引導 AI 的輸出？

有時候，AI 會給出一些不太理想的方案。這時候，你需要引導它往正確的方向走。




### 設定約束條件

通過設定約束，讓 AI 在特定範圍內思考。

- 請給我一個不依賴第三方庫的純 JavaScript 實現。
- 這個功能要在 100ms 內完成，請考慮性能優化。
- 代碼要盡可能簡潔，不超過 20 行
- 要考慮邊界情況，比如空數組、null 值等

這些約束能讓 AI 的輸出更符合你的實際需求。




### 要求多個方案

不要滿足於第 1 個方案，而是讓 AI 給你多個選擇。

- 請給我 3 種不同的實現方式，分別說明它們的優缺點。
- 這個問題有沒有更簡單的解決方案？
- 除了你剛才說的方法，還有其他方案嗎？

多個方案能讓你做出更明智的選擇。

此外，魚皮在做一個大項目時，會讓多個不同的 AI 模型或 AI 產品同時給出方案，然後再人工進行挑選。這種方法適用於有一定專業知識的朋友。




### 使用角色扮演

讓 AI 扮演特定角色，能得到更專業的建議。

- 請以一個資深前端工程師的角度，審查這段代碼並給出改進建議。
- 假設你是一個 UX 設計師，這個交互流程有什麼問題？
- 作為一個性能優化專家，你會如何改進這個頁面的加載速度？

角色扮演能激發 AI 在特定領域的專業知識。

如果你不知道該讓 AI 扮演什麼角色，可以讓 AI 自己選擇最合適的專家：

```markdown
我想探討【你的問題】。請你先選一位最適合的領域專家來思考它，可以是真實存在的名人或專家。然後以這個專家的視角來回答我的問題。
```

比如你想優化一個產品的用戶體驗，可以讓 AI 選擇合適的 UX 專家。AI 可能會選擇某個知名的設計師或產品經理，然後以他們的視角給出建議。這樣的回答往往更專業、更有深度。




## 六、對話模板庫

為了提高效率，你可以準備一些常用的對話模板。

1）開始新功能的模板

```markdown
我要開發一個新功能：【功能描述】。我的技術棧是【技術棧】。請幫我：
1）分析這個功能的核心需求
2）建議一個合理的實現方案
3）列出可能遇到的問題
```

2）調試問題的模板

```markdown
我遇到了一個問題：【問題描述】。報錯信息是：【錯誤信息】。相關代碼是：【代碼片段】。請幫我：
1）分析可能的原因
2）給出解決方案
3）解釋為什麼會出現這個問題
```

3）優化代碼的模板

```markdown
這是我的代碼：【代碼片段】。它的功能是【功能說明】。請幫我：
1）找出可能的性能問題
2）改進代碼的可讀性
3）指出潛在的 bug
```

4）學習新知識的模板

```markdown
我想學習【技術/概念】。請：
1）用簡單的語言解釋它是什麼
2）給我一個實際的使用例子
3）告訴我什麼時候應該用它
```

這些模板可以幫你快速開始對話，節省時間。

更多的 AI 提示詞模板可以在魚皮的 [AI 資源導航網站](https://ai.codefather.cn/prompt) 獲取：

![](https://pic.yupi.icu/1/image-20260104174539349.png)



## 七、常見的對話陷阱

在和 AI 對話時，有一些常見的錯誤要避免。



### 陷阱 1、一次問太多

不要在一個提問裡塞進太多內容。

❌ 不好的例子：幫我實現用戶註冊、登錄、密碼重置、郵箱驗證、權限管理、個人資料編輯功能。

這樣 AI 會不知道從哪裡開始，或者給你一個大而全但不夠深入的答案。

正確做法：一次只問一個功能，做完一個再做下一個。



### 陷阱 2、不要假設 AI 有記憶

AI 的記憶是有限的。不要假設它記得很久之前說過的話。

如果你不確定 AI 的記憶容量是否足夠，還想引用之前的內容，最好重新說明一遍：還記得我們之前做的登錄表單嗎？現在我想在它的基礎上……

或者直接把相關代碼貼出來：這是我們之前寫的登錄表單代碼：【代碼】。現在我想……

不過很多 AI 編程工具會顯示當前記憶容量，能幫你把控：

![](https://pic.yupi.icu/1/image-20260104174741309.png)



### 陷阱 3、不要不測試就繼續

每次 AI 給你代碼後，一定要測試！不要不測試就繼續要求下一個功能。

如果代碼有問題，及時反饋給 AI。不要等到做了很多功能後才發現基礎部分有問題。



### 陷阱 4、過度依賴

不要什麼都問 AI。有些簡單的問題，自己查文檔、搜索或者使用其他工具可能更快。

AI 適合用來：
- 生成代碼框架
- 解決複雜問題
- 學習新概念
- 審查和優化代碼

不適合用來：
- 查詢 API 文檔
- 找簡單的語法錯誤
- 做簡單的計算（不如用計算器）

當然，不是說 AI 不能做這些，還是具體場景具體分析吧~



## 八、實戰案例：完整的對話流程

讓我用一個真實的例子，展示一次完整的、推薦的對話流程。

假設你要做一個待辦事項應用的 “添加任務” 功能。



### 第一輪：明確需求

你："我想在我的待辦事項應用裡添加一個新建任務的功能。"

AI："好的。你想用什麼方式讓用戶添加任務？是一個表單、一個輸入框，還是其他方式？"

你："就一個簡單的輸入框，用戶輸入任務內容後按回車就添加。"

AI："明白了