[GitHub Global] Translate Vibe Coding 零基础教程/30 经验技巧/02 Vibe Coding 对话工程技巧.md to zh-TW

2026-02-05 13:39:18 +00:00
parent ceb6441c94
commit 4e22d5cd09
1 changed files with 478 additions and 0 deletions
@@ -0,0 +1,478 @@
+# 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："明白了