[GitHub Global] Translate Vibe Coding 零基础教程/20 项目实战/03 Vibe Coding AI 应用开发.md to zh-TW

2026-02-05 13:21:24 +00:00
parent 17ea7c7173
commit cd165e6459
1 changed files with 385 additions and 0 deletions
@@ -0,0 +1,385 @@
+# Vibe Coding AI 應用開發
+
+你好，我是魚皮。
+
+如今，AI 已經不再是遙不可及的高科技，而是每個開發者都可以輕鬆使用的工具。通過調用 AI API，你可以快速做出各種智能應用，比如聊天助手、寫作助手、圖片生成器等。這些項目不僅有趣，而且非常實用，做出來可以直接用，也可以作為你的作品集項目。
+
+這篇文章，我會帶你做 4 個熱門的 AI 應用：AI 聊天助手、智能寫作助手、AI 圖片生成器、語音識別應用。
+
+需要先說明的是，本節教程更多的是做一個思路和項目開發流程的指導，目的是引導大家學會使用 Vibe Coding 開發項目的方法，需要大家自行動手實踐。如果你需要更完整的 Vibe Coding 圖文和視頻教程，可以看看魚皮的原創項目實戰部分。
+
+## 一、AI 應用開發基礎
+
+在開始做項目之前，我們先了解一下 AI 應用開發的基礎知識。
+
+AI 應用就是利用 AI 能力（比如文本生成、圖片生成、語音識別等）來解決實際問題的應用程序。你不需要訓練 AI 模型，只需要調用現成的 AI API 就可以了。這就像你不需要知道汽車引擎怎麼工作，只需要會開車就行。
+
+目前主流的 AI API 服務有很多。文本生成方面，有 OpenAI 的 GPT-4、Anthropic 的 Claude、Google 的 Gemini，還有國產大模型比如通義千問、文心一言、智譜 AI 等。圖片生成方面，有 DALL-E 3、Midjourney、Stable Diffusion，還有國產的文心一格等。語音識別方面，有 OpenAI 的 Whisper、Google Speech-to-Text、訊飛語音識別等。
+
+AI 應用的開發流程和普通應用類似，只是多了一個調用 AI API 的步驟。整個流程是：用戶輸入 → 處理輸入 → 調用 AI API → 處理 AI 響應 → 展示結果。
+
+聽起來很簡單對吧？確實，AI 應用開發的門檻已經非常低了。
+
+![](https://pic.yupi.icu/1/aiapp-workflow%E5%A4%A7.jpeg)
+
+在開發 AI 應用時，有幾個注意事項。
+
+首先是 API Key 安全，不要把 API Key 暴露在前端代碼中，否則別人可以盜用你的 Key。其次是成本控制，AI API 按使用量收費，要控制好成本，避免浪費。第三是錯誤處理，API 調用可能失敗，要做好錯誤處理，給用戶友好的提示。最後是用戶體驗，AI 響應可能需要幾秒鐘，要有加載提示，讓用戶知道正在處理。
+
+## 二、項目實戰 - AI 聊天助手
+
+AI 聊天助手是最基礎也是最實用的 AI 應用。通過這個項目，你可以學習如何用 Vibe Coding 的方式快速開發一個完整的 AI 對話應用。
+
+這個項目要實現一個完整的聊天界面，用戶可以輸入問題，AI 給出回答。要支持多輪對話，AI 能記住之前說過的內容，這樣對話才連貫。為了更好的體驗，AI 的回答要逐字顯示，而不是一次性全部出現，這叫流式輸出。對話記錄要保存在本地，刷新頁面也不會丟失。另外，還需要一個清空對話的功能，方便開始新的話題。
+
+![](https://pic.yupi.icu/1/demoweb6.png)
+
+技術選型上，我們使用 React + TypeScript + Vite 作為前端框架，Tailwind CSS 來寫樣式。AI 能力通過調用大模型 API 實現，對話歷史用 LocalStorage 保存，AI 的回答用 react-markdown 來渲染，這樣可以支持代碼高亮等格式。
+
+### 開發步驟
+
+1）準備工作
+
+開發的第一步是準備工作。你需要獲取 API Key 來調用 AI 模型。訪問 [智譜 AI 開放平台](https://bigmodel.cn)，進入用戶控制台，點擊 API Key 就可以獲取。智譜 AI 提供的 GLM 模型效果不錯，而且有免費額度，適合學習使用。
+
+2）寫需求文檔
+
+有了 API Key，就可以開始寫需求文檔了。創建 `PRD.md` 文件，明確你要做什麼：
+
+```markdown
+# AI 聊天助手 PRD
+
+## 核心功能
+1. 用戶可以輸入問題，AI 給出回答
+2. 支持多輪對話，AI 能記住之前的對話內容
+3. AI 回答要逐字顯示，不要一次性全部出現
+4. 對話記錄要保存在本地，刷新頁面不會丟失
+5. 可以清空對話，開始新的話題
+6. AI 的回答支持 Markdown 格式，包括代碼高亮
+
+## 界面要求
+- 類似微信的聊天界面
+- 用戶消息在右邊，AI 消息在左邊
+- 底部有輸入框和發送按鈕
+- 簡潔現代的設計風格
+```
+
+這個文檔清楚地說明了要實現什麼功能，界面是什麼樣的。
+
+3）寫技術設計文檔
+
+然後寫技術設計文檔 `TECH_DESIGN.md`：
+
+```markdown
+# 技術設計
+
+## 技術棧
+- React + TypeScript + Vite
+- Tailwind CSS
+- 智譜 AI API
+- LocalStorage 存儲對話歷史
+- react-markdown 渲染 Markdown
+
+## 數據結構
+- Message: role（user 或 assistant）、content（內容）、timestamp（時間戳）
+- 對話歷史存儲在 LocalStorage 中
+
+## API 調用
+- 使用智譜 AI Chat Completions API
+- 啟用 stream 模式實現流式輸出
+- API Key 存儲在環境變量中
+```
+
+這個文檔說明了用什麼技術，數據結構是什麼樣的，API 怎麼調用。
+
+4）寫 AGENTS.md 文件
+
+接著創建 `AGENTS.md` 文件，告訴 AI 開發規範：
+
+```markdown
+# AI 聊天助手開發指令
+
+## 項目概述
+使用 React + TypeScript 開發的 AI 聊天助手，調用智譜 AI API 實現對話功能。
+
+## 開發規範
+- 使用 TypeScript，確保類型安全
+- 使用 Tailwind CSS 編寫樣式
+- API Key 從環境變量讀取，不要硬編碼
+- 錯誤要有友好的提示
+
+## 功能要求
+- 實現流式輸出，AI 回答要逐字顯示
+- 支持多輪對話，要把歷史消息發送給 API
+- 對話歷史要保存在 LocalStorage
+- 支持 Markdown 渲染和代碼高亮
+
+## 注意事項
+- 要處理 API 調用失敗的情況
+- 加載時要有明確的提示
+- 輸入框在發送時要禁用，避免重複發送
+```
+
+這個文件是給 AI 的開發規範，讓它知道代碼要怎麼寫。
+
+5）和 AI 對話開發
+
+有了這三個文檔，就可以開始和 AI 對話開發了。打開 Cursor，把這 3 個文檔放在項目根目錄。
+
+第一步是初始化項目：
+
+```
+請根據 PRD.md、TECH_DESIGN.md 和 AGENTS.md 的要求，初始化一個 React + TypeScript + Vite 項目，並安裝必要的依賴：Tailwind CSS、react-markdown、react-syntax-highlighter。
+```
+
+這個提示詞告訴 AI 要創建什麼項目，安裝哪些依賴。AI 會讀取這三個文檔，然後按照要求創建項目結構，安裝依賴，配置 Tailwind CSS。
+
+第二步是創建數據類型和 API 封裝：
+
+```
+創建 types.ts 文件，定義 Message 類型。然後創建 api.ts 文件，封裝智譜 AI API 調用，要支持流式輸出，參數從環境變量讀取。
+```
+
+這一步是為後續開發打基礎，把數據結構和 API 調用都封裝好，後面用起來就很方便。
+
+第三步是實現聊天界面：
+
+```
+創建 ChatInterface 組件，實現聊天界面。要求：
+1. 消息列表顯示在上方，用戶消息在右邊，AI 消息在左邊
+2. 底部有輸入框和發送按鈕
+3. 使用 Tailwind CSS 實現類似微信的聊天界面樣式
+4. 消息要支持 Markdown 渲染
+```
+
+這個提示詞說明了界面的佈局和樣式要求。AI 會創建完整的聊天界面組件。
+
+第四步是實現對話功能：
+
+```
+實現發送消息的功能：
+1. 用戶輸入消息後，添加到消息列表
+2. 調用 API 獲取 AI 回答
+3. 使用流式輸出，逐字顯示 AI 的回答
+4. 要把歷史消息也發送給 API，實現多輪對話
+5. 加載時禁用輸入框，顯示"思考中..."
+```
+
+這個提示詞包含了對話功能的所有要求。流式輸出是關鍵，它讓 AI 的回答像打字一樣逐字出現，用戶體驗會好很多。多輪對話也很重要，要把之前的對話歷史一起發送給 API，這樣 AI 才能記住之前說過的內容。
+
+第五步是添加數據持久化：
+
+```
+使用 LocalStorage 保存對話歷史：
+1. 每次對話更新後自動保存
+2. 頁面加載時讀取歷史記錄
+3. 添加"清空對話"按鈕，清除歷史記錄
+```
+
+這樣用戶刷新頁面後，之前的對話還在，不會丟失。
+
+第六步是優化用戶體驗：
+
+```
+優化用戶體驗：
+1. 新消息出現時，自動滾動到底部
+2. 添加複製按鈕，方便複製 AI 的回答
+3. 代碼塊要有語法高亮
+4. API 調用失敗時，顯示友好的錯誤提示
+```
+
+這些細節雖然小，但能大幅提升用戶體驗。
+
+### 開發技巧
+
+在開發過程中，有幾個技巧可以讓你更高效。首先，不要一次性讓 AI 實現所有功能，而是分成多個小步驟，每完成一步就測試一下。這樣即使出問題，也容易定位和修復。
+
+其次，在對話時要給 AI 提供足夠的上下文。明確告訴它要實現什麼功能、有什麼具體要求、要遵循什麼規範。上下文越清晰，AI 生成的代碼質量就越高。
+
+如果代碼出現問題，記得把完整的錯誤信息發給 AI，讓它幫你分析和修復。不要只說 “代碼報錯了”，而是要把具體的錯誤信息粘貼給它。
+
+### 擴展思路
+
+基礎版完成後，你可以繼續擴展功能。
+
+比如添加系統提示詞設置，讓 AI 扮演不同角色（比如編程助手、寫作助手、心理諮詢師等）；支持多個對話會話管理，可以同時進行多個話題的對話；添加語音輸入功能，用語音和 AI 對話；集成圖片識別功能，讓 AI 可以看圖回答問題；支持導出對話記錄，保存重要的對話內容。
+
+## 三、項目實戰 - 智能寫作助手
+
+掌握了 AI 對話的基本流程後，讓我們來做一個更專業的應用 —— 智能寫作助手。寫作助手是 AI 最實用的應用場景之一，通過這個項目，你可以學習如何用提示詞工程讓 AI 完成不同的寫作任務。
+
+這個項目要支持多種寫作模式，比如文章續寫、內容改寫、文案生成、郵件撰寫等。用戶可以調整創意度和輸出長度等參數，控制 AI 的生成效果。還可以一鍵優化文本的語法和表達，讓文字更專業。為了方便選擇，可以一次生成多個版本，用戶挑選最滿意的。生成的內容要保存到歷史記錄中，方便查看和管理。
+
+![](https://pic.yupi.icu/1/demoweb7.png)
+
+技術棧和聊天助手類似，使用 React + TypeScript + Vite，配合 Tailwind CSS。核心還是調用智譜 AI API，數據用 LocalStorage 保存。
+
+### 開發步驟
+
+1）設計提示詞模板
+
+開發的第一步是設計提示詞模板。在開始寫代碼之前，先設計好不同寫作任務的提示詞。創建一個 `prompts.md` 文件，定義各種寫作模式的提示詞：
+
+```markdown
+# 寫作助手提示詞模板
+
+## 文章續寫
+請繼續寫下面的文章，保持風格一致，內容連貫：
+[用戶輸入的內容]
+
+## 內容改寫
+請改寫下面的內容，使其更加流暢、專業：
+[用戶輸入的內容]
+
+## 內容擴展
+請擴展下面的內容，增加更多細節和例子：
+[用戶輸入的內容]
+
+## 內容總結
+請總結下面的內容，提取核心要點：
+[用戶輸入的內容]
+
+## 郵件撰寫
+請寫一封[正式/友好]的郵件，主題是：[主題]
+
+## 文案生成
+請為[產品名稱]寫一段[風格]風格的營銷文案
+```
+
+提示詞是 AI 應用的核心，好的提示詞能讓 AI 生成更好的結果。一個好的提示詞通常包含 3 個要素：明確的任務描述、充足的上下文信息、清晰的輸出格式要求。
+
+![](https://pic.yupi.icu/1/promptcompare%E5%A4%A7.jpeg)
+
+舉個例子，如果你想讓 AI 寫一篇文章，不要只說 “幫我寫一篇文章”，而要說清楚主題、讀者對象、字數要求、包含哪些內容。比如：
+
+```markdown
+請寫一篇關於 AI 編程的科普文章，面向零基礎讀者，通俗易懂，多舉例子，字數 800-1000 字，要包含什麼是 AI 編程、為什麼要學、如何入門。 
+```
+
+這樣 AI 才知道應該怎麼寫。
+
+如果是改寫內容，要告訴 AI 這段內容的背景。比如：
+
+```markdown
+這是一篇技術博客的開頭段落，請改寫得更吸引人，同時保持專業性。
+```
+
+這樣 AI 才知道應該往什麼方向改。
+
+指定輸出格式也很重要。如果你想讓 AI 總結文章，可以明確要求：
+
+```markdown
+請總結這篇文章，輸出格式：
+1. 核心觀點（3-5 條）
+2. 關鍵數據（如果有）
+3. 結論（一句話）
+```
+
+這樣生成的結果更規範，更符合你的需求。
+
+有時候，給 AI 一些示例效果會更好。比如讓 AI 寫營銷文案，你可以先給幾個示例，讓它參考風格。這種方法叫 Few-shot Learning，在很多場景下都很有效。
+
+2）寫需求文檔
+
+設計好提示詞模板後，就可以寫需求文檔了。創建 `PRD.md` 文件：
+
+```markdown
+# 智能寫作助手 PRD
+
+## 核心功能
+1. 左右分欄佈局，左側輸入，右側顯示生成結果
+2. 支持 6 種寫作模式：續寫、改寫、擴展、總結、郵件、文案
+3. 可以調整創意度（temperature）和輸出長度
+4. 生成的內容要流式顯示
+5. 有"優化提示詞"按鈕，AI 幫用戶優化描述
+6. 保存生成歷史
+
+## 界面要求
+- 頂部：大標題
+- 輸入區：大文本框（多行）
+- 參數區：尺寸選擇、風格選擇
+- 按鈕區：優化提示詞、生成內容
+- 展示區：顯示生成的內容 + 複製按鈕
+- 側邊欄：歷史記錄
+```
+
+3）和 AI 對話開發
+
+有了文檔，就可以和 AI 對話開發了。
+
+第一步，創建基礎界面：
+
+```
+請根據 PRD.md 創建智能寫作助手的界面：
+1. 左右分欄佈局
+2. 左側：模式選擇下拉框 + 輸入文本框 + 生成按鈕
+3. 右側：顯示生成的內容
+4. 使用 Tailwind CSS，界面要美觀
+```
+
+第二步，實現提示詞模板：
+
+```
+創建 promptTemplates.ts 文件，根據 prompts.md 中的模板，實現 6 種寫作模式的提示詞函數。每個函數接收用戶輸入，返回完整的提示詞。
+```
+
+這樣就把提示詞邏輯封裝好了，不同的寫作模式用不同的提示詞。
+
+第三步，實現生成功能：
+
+```
+實現內容生成功能：
+1. 用戶選擇模式，輸入內容，點擊生成
+2. 根據選擇的模式，生成對應的提示詞
+3. 調用智譜 AI API，使用流式輸出
+4. 在右側實時顯示生成的內容
+5. 支持 Markdown 渲染
+```
+
+第四步，添加參數調整：
+
+```
+添加高級設置面板：
+1. 創意度滑塊（temperature: 0-1）
+2. 輸出長度滑塊（max_tokens: 100-2000）
+3. 這些參數要傳遞給 API 調用
+4. 可以折疊/展開高級設置
+```
+
+temperature 值會影響輸出的創意程度。
+
+- 0-0.3 比較保守，適合事實性內容
+- 0.4-0.7 比較平衡，適合大多數場景
+- 0.8-1.0 很有創意，適合創意寫作。
+
+第五步，添加歷史記錄：
+
+```
+實現歷史記錄功能：
+1. 每次生成後，保存到 LocalStorage
+2. 保存內容：提示詞、生成結果、生成時間
+3. 左側顯示歷史記錄列表
+4. 點擊歷史記錄可以查看之前的內容
+5. 支持刪除歷史記錄
+```
+
+### 提示詞優化技巧
+
+如果你不確定提示詞是否夠好，可以讓 AI 幫你優化。比如你可以這樣問：
+
+```
+我想讓 AI 幫我改寫文章，讓文章更專業。我現在的提示詞是："請改寫這段話"。請幫我優化這個提示詞，讓 AI 生成更好的結果。
+```
+
+AI 會給你一個更詳細、更有效的提示詞，比如：
+
+```markdown
+這是一篇技術博客的開頭段落，請改寫得更吸引人，同時保持專業性。要求：
+1. 用更生動的語言
+2. 保持技術準確性
+3. 字數控制在 200 字左右
+```
+
+### 擴展思路
+
+基礎版完成後，可以繼續擴展功能。比如添加更多寫作模板，支持論文、報告、小說等不同類型的寫作；支持自定義提示詞模板，讓用戶可以創建自己的模板；添加多語言翻譯功能，一鍵翻譯成其他語言；實現批量生成，一次生成多個版本供選擇；添加文本對比