# 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 字左右
```

### 擴展思路

基礎版完成後，可以繼續擴展功能。比如添加更多寫作模板，支持論文、報告、小說等不同類型的寫作；支持自定義提示詞模板，讓用戶可以創建自己的模板；添加多語言翻譯功能，一鍵翻譯成其他語言；實現批量生成，一次生成多個版本供選擇；添加文本對比