【Vibe Coding】保姆級教學：一個工程師 2500+ 次 AI 對話後的 18 個血淚經驗

寫在前面：什麼是 Vibe Coding？

簡單說就是：讓 AI 幫你寫程式。

但別誤會，這不是「叫 AI 做完所有事」那麼簡單。就像你不會叫一個新來的實習生「把整個網站做好」，你得學會怎麼跟 AI 溝通、怎麼拆解任務、怎麼檢查品質。

這篇文章會告訴你：一個真實用了半年 Cursor、做過好幾個上線專案的人，到底怎麼跟 AI 合作不翻車。

第一部分：開始前的準備工作（別急著寫 Code）

步驟 1：把你的想法寫清楚

為什麼重要？
你給 AI 爛指令，它就給你爛程式。就這麼簡單。

怎麼做？

1. 打開筆記（或任何能寫字的地方）
2. 回答這三個問題：
   • 這個網站／功能要解決什麼問題？
   • 用戶會怎麼用？（從打開網站到完成目標的流程）
   • 最重要的三個功能是什麼？

懶人工具包：
如果你不知道怎麼整理想法，直接開 Gemini 2.5 Pro（免費），跟它說：

我想做一個 [你的想法]，幫我整理成：
1. 產品目標
2. 主要功能清單
3. 用戶使用流程

請用條列式，每點不超過一句話。

【Vibe Coding】如何用 Gemini 2.5 Pro 打造互動網頁？Vibe Coding 實戰教學指南

用 Gemini 2.5 Pro，只需一句話提示，就能打造出哈利波特風格的互動式湯姆瑞斗日記網頁，輕鬆實現你的魔法創意！

AI郵報Vicky Tsai

步驟 2：畫出你的網站長相

不會設計怎麼辦？
沒關係，你只需要決定「要有哪些區塊」。

推薦工具：

• v0.dev：直接描述你要什麼，它生出畫面給你看
• 21st.dev：超多現成元件，還有 AI 提示詞可以直接複製

要決定的事：

• 按鈕長什麼樣？（圓角？方的？什麼顏色？）
• 卡片怎麼排列？
• 標題多大？用什麼字型？

步驟 3：學會用 Git（救命用的）

講人話：Git 是什麼？
就是「時光機」。按一個按鈕，你的程式就能回到一小時前、昨天、上禮拜的狀態。

為什麼一定要用？
因為 AI 有時候會把你的程式碼搞爛。有 Git，你就能「復原」。沒有 Git，你就準備重寫。

新手只需要會三個指令：

git add .           # 把改動存起來
git commit -m "完成了登入功能"   # 做個記號
git push            # 備份到雲端（GitHub）

什麼時候要 commit？
每完成一個「可以動」的功能就存一次。比如：

• ✅ 登入頁面做好了
• ✅ 資料庫連接成功了
• ✅ 購物車可以加商品了

步驟 4：選對技術（別亂踩雷）

為什麼要選「主流」技術？
因為 AI 是靠「網路上的教學文章」訓練出來的。越多人用的技術，AI 越會寫。

推薦組合包（抄作業用）：

不推薦：
那些「很酷但很冷門」的框架。AI 不會，你自己也查不到資料。

【Vibe Coding】AI 生出網頁卻只能自己看？Vercel 免費部署完整教學指南

網站只能自己看太可惜！手把手教你用 GitHub + Vercel 免費部署，三步驟就能讓 AI 生成網站立即公開，快速分享作品。

AI郵報Vicky Tsai

第二部分：開始寫 Code（重點來了）

步驟 5：設定 Cursor Rules（AI 的使用說明書）

Cursor Rules 是什麼？
就是告訴 AI：「你要遵守這些規則」。

要寫什麼？

你是一個專業的前端工程師。

技術棧：
- Next.js 14 + TypeScript
- Tailwind CSS
- Supabase

規則：
1. 所有元件用 TypeScript
2. 響應式設計，手機優先
3. 不要加我沒要求的功能
4. 保持程式碼簡單，別過度設計
5. 按鈕樣式要統一

程式碼風格：
- 元件名稱用 PascalCase（例如：UserProfile）
- 檔案名稱用 kebab-case（例如：user-profile.tsx）
- 變數名稱要清楚，不要縮寫

哪裡可以抄？
cursor.directory 有一大堆模板，找你的技術棧直接複製。

【Vibe Coding】Cursor 完整使用教學：2025 最新教學，10 分鐘做出一個 App

Cursor 是革命性的 AI 程式開發工具，讓新手也能在10分鐘內開發 App。透過自然語言對話即可生成程式碼，實現 Vibe Coding 體驗，大幅提升開發效率，是2025年程式設計師必學神器。

AI郵報Vicky Tsai

步驟 6：準備一個「參考資料夾」

為什麼需要？
AI 不知道你公司的設計規範、常用的元件長什麼樣。你得給它「範例」。

建立 instructions 資料夾，裡面放：

button-example.md

# 按鈕元件範例

我們的按鈕都長這樣：

\`\`\`tsx
<button className="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg">
  按我
</button>
\`\`\`

顏色只用：
- 主要按鈕：blue-600
- 次要按鈕：gray-200
- 危險操作：red-600

api-pattern.md

# API 呼叫模式

所有 API 呼叫都要加錯誤處理：

\`\`\`tsx
try {
  const response = await fetch('/api/users');
  if (!response.ok) throw new Error('請求失敗');
  const data = await response.json();
  return data;
} catch (error) {
  console.error('API 錯誤：', error);
  return null;
}
\`\`\`

步驟 7：學會寫「好提示詞」

爛提示詞 vs. 好提示詞

❌ 爛的：

幫我做一個登入功能

✅ 好的：

請幫我做登入頁面，需求如下：

頁面元素：
- 左邊：品牌 Logo + 標語
- 右邊：登入表單（email、密碼、記住我、登入按鈕、忘記密碼連結）

技術要求：
- 使用 Supabase Auth
- 表單驗證：email 格式、密碼至少 6 字元
- 錯誤訊息要顯示在表單上方（紅色背景）
- 登入成功跳轉到 /dashboard

樣式：
- 使用 Tailwind CSS
- 響應式設計
- 按鈕用 bg-blue-600

請先做好頁面 UI，確認無誤後再加登入邏輯。

萬用公式：

[要做什麼功能] + [具體元素] + [技術要求] + [樣式要求] + [分步執行]

【Vibe Coding】AI 提示詞全攻略：CLEAR 框架＋四層技巧，少花時間成本發揮最大潛力

學會正確下指令，AI 就能成為你的「高效實習生」。本文濃縮 Lovable 官方提示詞指南，從 CLEAR 框架到四層提示與防幻覺技巧，帶你少走彎路，快速打造高品質 Vibe Coding 工作流。

AI郵報Vicky Tsai

步驟 8：拆解複雜功能（別一次叫 AI 做太多）

為什麼要拆？
AI 一次做太多事會「發瘋」，開始胡說八道。

怎麼拆？以「文章列表頁」為例：

第 1 步：

請先做文章列表的靜態版本：
- 10 張卡片（佔位內容即可）
- 每張卡片：縮圖（16:9灰色佔位）+ 標題 + 摘要 + 閱讀時間
- 網格排列（桌機 3 欄、平板 2 欄、手機 1 欄）

第 2 步（確認上一步沒問題後）：

現在請串接 API：
- 從 /api/posts 取得文章資料
- 加入 loading 狀態（顯示骨架屏）
- 加入錯誤處理（顯示友善錯誤訊息）

第 3 步：

加入分頁功能：
- 每頁顯示 9 篇
- 底部顯示頁碼（1 2 3 ... 10）
- 點擊頁碼會載入對應頁面

第 4 步：

加入篩選功能：
- 頂部分類標籤（全部/新聞/教學/心得）
- 點擊分類會過濾文章
- 保持分頁功能運作

步驟 9：管理對話長度（該換新對話了）

什麼時候該開新對話？

• 對話超過 30 個來回
• AI 開始忘記你之前說的規則
• AI 開始產生奇怪的程式碼

開新對話時要做的事：

我們正在做文章列表頁的篩選功能。

目前進度：
- ✅ 列表頁 UI 完成（components/ArticleList.tsx）
- ✅ API 串接完成
- ✅ 分頁功能完成
- ⏳ 現在要加篩選功能

相關檔案：
- components/ArticleList.tsx
- app/api/posts/route.ts
- types/article.ts

請先確認你理解目前的程式碼結構，然後我們繼續。

步驟 10：AI 寫錯了怎麼辦？

兩個選擇：

選項 A：重來（推薦）

1. 點擊「編輯」按鈕
2. 修改你的提示詞（更清楚、更具體）
3. 重新送出

選項 B：繼續修

1. 把錯誤訊息完整複製給 AI
2. 說明：「出現這個錯誤，請修正」
3. 如果 3 次還沒修好 → 回到選項 A

小技巧：
每次讓 AI 改之前，先用 Git commit。改爛了可以直接復原。

步驟 11：給 AI「正確的參考資料」

什麼是正確的 context？

❌ 太少：

幫我修 Header

（AI：「哪個 Header？有什麼問題？」）

❌ 太多：

@整個專案資料夾 幫我修 Header

（AI：「資料太多了，我看不完...」）

✅ 剛好：

請修改 Header 元件（components/Header.tsx），
參考我們的按鈕樣式（instructions/button-example.md）。

現在的問題：手機版選單沒有正常收合。
期望行為：點擊漢堡選單圖示會展開/收合選單。

步驟 12：讓 AI 學會「你的風格」

怎麼做？
在建新元件時，給 AI 看「已經做好的類似元件」。

範例：

請幫我做「產品卡片」元件，
參考「文章卡片」元件（components/ArticleCard.tsx）的結構和樣式。

主要差異：
- 不顯示作者和日期
- 改顯示價格和「加入購物車」按鈕
- 保持相同的 hover 效果和圓角設計

AI 會自動學習你的：

• 程式碼風格
• 命名習慣
• 元件結構

第三部分：品質控管（讓程式更穩定）

步驟 13：用 Gemini 檢查程式碼

為什麼用 Gemini？
它有超大的「記憶容量」，可以一次看完你整個功能的程式碼。

檢查流程：

第 1 輪（安全性檢查）：

請扮演資安專家，檢查以下程式碼的安全漏洞：

[貼上你的程式碼]

請檢查：
1. 是否有 XSS 風險
2. 是否有 SQL Injection 風險
3. API 是否缺少驗證
4. 敏感資料是否外洩
5. 權限控管是否完整

請條列問題，並說明如何修正。

第 2 輪（效能檢查）：

請扮演 [技術棧] 專家，檢查程式碼品質：

[貼上你的程式碼]

請檢查：
1. 有沒有效能問題
2. 有沒有不必要的重複程式碼
3. 有沒有更好的寫法
4. 有沒有遵守最佳實踐

請條列建議。

第 3 輪（修正）：
把 Gemini 的建議複製給 Cursor 的 AI，說：「請根據這些建議修正程式碼」。

第 4 輪（再檢查）：
把修正後的程式碼再給 Gemini 看一次，直到它說「沒問題」。

步驟 14：不能忽略的 7 個資安重點

1. 不要相信用戶輸入

// ❌ 危險
const userId = req.query.id;
const user = await db.query(`SELECT * FROM users WHERE id = ${userId}`);

// ✅ 安全
const userId = req.query.id;
const user = await db.users.findUnique({ where: { id: userId } });

2. API 金鑰絕對不放前端

// ❌ 危險
const apiKey = "sk-1234567890abcdef";

// ✅ 安全
// .env.local（確保在 .gitignore）
OPENAI_API_KEY=sk-1234567890abcdef

// 程式碼
const apiKey = process.env.OPENAI_API_KEY;

3. 檢查權限，不只檢查登入

// ❌ 只檢查有沒有登入
if (!user) return res.status(401).json({ error: '未登入' });

// ✅ 檢查是否有權限
if (!user) return res.status(401).json({ error: '未登入' });
if (post.authorId !== user.id) {
  return res.status(403).json({ error: '無權限' });
}

4. 錯誤訊息不要太詳細

// ❌ 給用戶看錯誤細節
catch (error) {
  res.status(500).json({ error: error.message });
}

// ✅ 給用戶看友善訊息，詳細錯誤記在 log
catch (error) {
  console.error('資料庫錯誤：', error);
  res.status(500).json({ error: '伺服器錯誤，請稍後再試' });
}

5. 檢查資料擁有權（防止 IDOR 攻擊）

// ❌ 只用 ID 就能刪除
async function deletePost(postId) {
  await db.posts.delete({ where: { id: postId } });
}

// ✅ 確認是作者才能刪除
async function deletePost(postId, userId) {
  const post = await db.posts.findUnique({ where: { id: postId } });
  if (post.authorId !== userId) throw new Error('無權限');
  await db.posts.delete({ where: { id: postId } });
}

6. 使用資料庫層級的安全機制

-- Supabase RLS (Row Level Security) 範例
CREATE POLICY "用戶只能看到自己的文章"
ON posts FOR SELECT
USING (auth.uid() = author_id);

7. API 要加速率限制

// 使用 middleware 限制請求頻率
import rateLimit from 'express-rate-limit';

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 分鐘
  max: 100 // 最多 100 個請求
});

app.use('/api/', limiter);

步驟 15：錯誤處理策略

遇到錯誤時的決策樹：

錯誤出現
↓
是小錯誤（拼字、小調整）？
├─ 是 → 直接給 AI 錯誤訊息，請它修正
└─ 否 → 是邏輯錯誤？
    ├─ 是 → 重新描述需求，從頭再來
    └─ 否 → 3 次內修不好？
        ├─ 是 → 往下看步驟 16
        └─ 否 → 繼續讓 AI 修

步驟 16：對付「修不好的錯誤」

當 AI 卡在一個錯誤修不好時：

請暫停修改，先幫我分析：

1. 列出最可能造成這個錯誤的 3 個原因
2. 在相關的檔案中加入 console.log，幫助我們追蹤問題：
   - 函數的輸入參數
   - 關鍵變數的值
   - API 回傳的資料

請不要急著修改，先加 log 讓我們看看實際發生什麼事。

執行後：

1. 執行程式
2. 把 console 的輸出完整複製給 AI
3. 說：「根據這些 log，請找出問題並修正」

步驟 17：防止 AI「擅自做主」

AI 常見的壞習慣：

• 你叫它改按鈕顏色，它順便把整個版面改了
• 你叫它加功能，它把其他功能也「優化」了
• 你叫它修 bug，它重寫了整個元件

萬用咒語（每次提示詞最後加這句）：

重要：請「只」做我明確要求的事，
不要修改、優化、或「順便改」其他部分的程式碼。

進階版（給不聽話的 AI）：

拜託，真的只改我說的那個地方就好。
其他地方就算你覺得可以更好，也先不要動。
改完請告訴我具體改了哪些檔案的哪幾行。

步驟 18：建立「AI 常犯錯誤清單」

建立 ai-mistakes.md：

# AI 常犯錯誤清單

## 別再犯這些錯誤

1. **不要用 any 型別**
   - 所有 TypeScript 型別都要明確定義

2. **不要忘記錯誤處理**
   - 所有 API 呼叫都要 try-catch
   - 所有 async 函數都要處理失敗情況

3. **不要用 inline style**
   - 全部用 Tailwind CSS class

4. **不要寫超過 200 行的元件**
   - 超過就要拆成更小的元件

5. **不要忘記響應式設計**
   - 所有版面都要測試手機版

6. **不要直接用 console.log**
   - 使用我們的 logger 函數

7. **按鈕只用這三種顏色**
   - primary: bg-blue-600
   - secondary: bg-gray-200
   - danger: bg-red-600

使用方式：
每次開始新功能時，在提示詞加上：

請參考 @ai-mistakes.md，避免犯這些錯誤。

第四部分：實戰心態調整

真相 1：Vibe Coding 不是「輕鬆寫 Code」

很多人以為：「有 AI 就不用學程式了！」

真相是：

• 你還是要懂基本邏輯
• 你還是要會看程式碼
• 你還是要知道怎麼除錯

差別在於：

• 以前要自己手寫 500 行 → 現在 AI 幫你寫，你負責檢查和調整
• 以前卡住要 Google 半天 → 現在問 AI 就有答案
• 以前改一個地方要改十個檔案 → 現在 AI 幫你改完

Vibe Coding = 你是建築師，AI 是工人。

真相 2：前期準備佔 50% 時間

很多人：

• 10% 時間規劃
• 90% 時間寫 Code（然後一直改、一直爛）

高手：

• 50% 時間規劃（想清楚、設計好、準備好）
• 50% 時間執行（很順、很快、品質好）

磨刀不誤砍柴工。

真相 3：Git 是你最好的朋友

新手常說：「Git 好難，我不想學。」

兩個禮拜後：「幹，程式碼被 AI 改爛了，救不回來了...」

花 30 分鐘學會 Git，省下 30 小時的重寫時間。

真相 4：主流技術棧真的很重要

「我想用 [超冷門框架]，因為它很酷！」

結果：

• AI 寫出來的 Code 都是錯的
• Google 也找不到解法
• 問題卡三天

選主流 = 選 easy mode。

工具推薦清單

AI 寫 Code

• Cursor（最推薦，專為 AI 協作設計）
• Windsurf（新起之秀）
• Claude.ai（Web 版，不用裝軟體）

AI 規劃

• Gemini 2.5 Pro（免費，超大記憶容量）
• ChatGPT o1（推理能力強）

UI 設計

• v0.dev（文字描述 → 產生畫面）
• 21st.dev（抄元件用）

技術棧

• Next.js（前端）
• Supabase（資料庫 + 驗證）
• Tailwind CSS（樣式）
• Vercel（部署）

參考資源

• cursor.directory（Cursor Rules 模板）
• shadcn/ui（元件庫）

最後的叮嚀

如果你看到這裡，恭喜你！你比 90% 的人更認真。

記住這三點：

1. 清楚的規劃 > 強大的 AI
   AI 很強，但不會幫你想清楚產品要做什麼。
2. 小步快跑 > 一次做完
   每次做一小塊，測試 OK 再往下。
3. Git 救人命
   每完成一個功能就 commit。

Vibe Coding 不是魔法，是方法。

用對方法，AI 就是超強的隊友。
用錯方法，AI