第五章：Few-Shot Prompting：給 AI 範例勝過千言萬語的除錯實戰

在前面的章節中，我們學會了如何看懂報錯、如何拆分檔案、以及如何控制上下文。本章將介紹 Vibe Coding 中最高級的 Prompt 技巧——Few-Shot Prompting (少樣本提示)。

當你發現無論你怎麼解釋，AI 都聽不懂你想要的排版、動畫效果或資料結構時，這招將會是你的殺手鐧。

什麼是 Few-Shot Prompting？

在提示詞工程 (Prompt Engineering) 中：

Zero-Shot (零樣本)：直接下指令。例如：「幫我寫一個漂亮的按鈕。」
One-Shot (單樣本)：給一個範例。例如：「幫我寫一個按鈕，風格要像這樣：<button className="bg-red-500 rounded-lg p-2">按鈕</button>。」
Few-Shot (少樣本)：給多個範例，讓 AI 歸納出規律。

為什麼 Few-Shot 這麼強？因為人類的語言充滿歧義。你說的「高科技感」，跟 AI 理解的「高科技感」可能完全不同。與其寫 500 字解釋高科技感，不如直接貼兩段完美的 Code 給它看。

實戰場景 1：統一團隊的 UI 風格

假設你專案裡的卡片 (Card) 都是毛玻璃 (Glassmorphism) 風格，你現在要請 AI 寫一個新的「聯絡我們」卡片。

❌ 糟糕的 Prompt (Zero-Shot)

幫我寫一個聯絡我們的卡片，要有表單，背景要毛玻璃風格，看起來要高級。 (AI 可能會用 backdrop-blur-sm，但你原本專案是用 backdrop-blur-md bg-white/10，導致新卡片跟舊卡片長得格格不入。)

✅ 高階的 Prompt (One-Shot)

我需要一個「聯絡我們」的表單卡片。

[UI 風格參考] 請完全依照以下我們專案既有的毛玻璃風格來設計最外層的 div：
<div className="glass p-6 rounded-2xl border border-primary/20 shadow-xl backdrop-blur-md bg-background/50">
  // 內容
</div>
請在這個風格基礎上，實作姓名、Email 與留言內容的表單。

透過給出具體的 ClassName 範例，AI 產出的 UI 將會與你的專案 100% 契合，不用再浪費時間微調 Tailwind 參數。

實戰場景 2：複雜資料結構的轉換與除錯

假設你從後端拿到的資料是扁平的 (Flat Array)，你需要轉換成樹狀結構 (Tree) 給選單使用。AI 寫的演算法一直有 Bug，有時候會漏掉子節點。

❌ 糟糕的 Prompt

你的樹狀結構轉換函式寫錯了，子節點沒有正確塞進去 parent 裡面，請修復。 (AI 只能亂猜哪裡寫錯，可能越改越糟)

✅ 高階的 Prompt (Few-Shot)

你的 buildTree 函式有 Bug。為了讓你清楚了解預期的行為，請參考以下的輸入與輸出範例：

[範例 1] 輸入： [{ id: 1, parent_id: null }, { id: 2, parent_id: 1 }] 期望輸出： [{ id: 1, children: [{ id: 2, children: [] }] }]

[範例 2 (目前出錯的情境)] 輸入： [{ id: 3, parent_id: 4 }, { id: 4, parent_id: null }] 期望輸出： [{ id: 4, children: [{ id: 3, children: [] }] }]

請根據上述的輸入/輸出範例，重新檢查並修復你的程式碼。

當 AI 看到明確的 Input/Output 範例時，它內部的邏輯推理引擎會被啟動，它會自動將它寫的程式碼代入範例進行推演，瞬間就能發現它沒有處理「子節點比父節點先出現在陣列中」的 Bug。

實戰場景 3：教 AI 使用你不熟悉的第三方套件

有時候你想用一個很新的套件（例如最新的 Framer Motion 寫法，或是剛更新的 API），但 AI 的知識庫停留在去年的版本。

這時候你可以善用 Cursor 的 @Web 功能，或是直接把官方文件的範例貼給它。

[任務] 我想用 Framer Motion 實作一個 Scroll 觸發的淡入動畫。

[官方最新語法參考] 請根據以下最新版官方文件的寫法來實作，不要用舊版的 useViewportScroll：
import { motion, useScroll } from "framer-motion"

function Component() {
  const { scrollYProgress } = useScroll()
  return <motion.div style={{ scaleX: scrollYProgress }} />
}
請參考上述寫法，把我的 PricingCard 加上滾動淡入效果。

結論

不要總是試圖用「人類的自然語言」去講述複雜的邏輯或視覺效果。 「Show, don't tell.」（展示給它看，不要只用說的）。

給 AI 程式碼片段、給它 JSON 資料範例、給它錯誤日誌的完整內容。當你掌握了 Few-Shot Prompting，你會發現 AI 突然從一個「聽不懂人話的實習生」，變成了一個「一點就通的資深架構師」。

恭喜你，完成了《Vibe Coding 核心心法與除錯實戰》的全部課程！帶著這些武器，去征服那些複雜的商業專案吧！

📝 Few-Shot Prompting 的進階技巧

為什麼範例比描述更有效？

當你只對 AI 說「請用 Tailwind 寫一個漂亮的按鈕」，AI 的輸出可能不符合你的審美。但如果你貼一個你喜歡的按鈕範例，然後說「照這個風格幫我寫另一個」，AI 就能精準複製你想要的風格。

這就是 Few-Shot Prompting 的力量——給 AI 1-3 個範例，遠比用 100 個形容詞描述更有效。

Few-Shot 的三大應用場景

| 場景 | 給 AI 的內容 | 預期效果 | |------|-------------|---------| | UI 風格統一 | 貼 2 個你設計好的元件程式碼 | AI 會遵循同樣的樣式與結構 | | API 呼叫模式 | 貼 1 個完整的 API 呼叫範例 | AI 會用同樣的 error handling | | 資料庫查詢 | 貼 2 個 SQL 查詢範例 | AI 會遵循同樣的命名與風格 | | 測試寫法 | 貼 1 個單元測試範例 | AI 會用同樣的測試框架與斷言 |

實戰：Few-Shot 除錯

❌ 沒有效果：
「請幫我修這個 Bug」
[貼上報錯程式碼]

✅ 非常有效：
「我有一個 type error，請參考我上次是怎麼修的：

上次的 Bug：
[貼上舊的錯誤與修復後的程式碼]

這次的 Bug：
[貼上新的錯誤]

請用同樣的除錯方法幫我找出問題。」

建立你的個人 Few-Shot 庫

建議你建立一個 vibe-coding-examples.md 檔案，收錄你常用的 Prompt 範例：

# Vibe Coding Prompt 範例庫

## 1. 建立 API 端點
"請在 src/app/api/products/route.ts 建立 GET 端點，
使用 Supabase SDK 查詢 products 資料表，支援 pagination (page, limit)，
回傳格式：{ data: Product[], total: number, page: number }"

## 2. 建立資料庫 Migration
"請在 supabase/migrations/ 建立一個新的 SQL migration，
新增一個 orders 資料表，包含 user_id (FK), total (decimal), status (enum)"

當你需要請 AI 做重複性工作時，直接從這個庫複製貼上，保證品質穩定！

關鍵要點

✅ Vibe Coding = 用自然語言描述需求，AI 生成程式碼
✅ 精準的 Prompt = 角色 + 目標 + 格式 + 約束
✅ AI 鬼打牆時：打斷重來 > 繼續糾纏
✅ .cursorrules / CLAUDE.md 是規範 AI 行為的關鍵
✅ Terminal 報錯訊息是 AI 除錯最重要的線索

Prompt 框架

角色：你是一個 [資深 Python 工程師]
目標：[幫我建立一個 FastAPI 使用者 CRUD API]
格式：[回傳完整的 Python 程式碼]
約束：[使用 Pydantic v2, SQLAlchemy async, PostgreSQL]

📚 建立你的 Vibe Coding Prompt 庫

隨著你使用 Vibe Coding 的時間越長，你會發現自己有一組經常重複使用的 Prompt 模式。把它們記錄下來，可以大幅提升效率。

Prompt 庫範本

# 我的 Vibe Coding Prompt 庫

## 1. 建立 CRUD API
"請在 src/app/api/[resource]/route.ts 建立完整的 REST API：
- GET (列表 + pagination)
- GET/[id] (單筆)
- POST (新增)
- PUT/[id] (更新)
- DELETE/[id] (刪除)
使用 Supabase SDK，回傳格式統一是 { data, error }"

## 2. 建立表單頁面
"請在 src/app/[resource]/page.tsx 建立一個表單頁面：
- 使用 react-hook-form + zod validation
- 欄位驗證錯誤時顯示 inline error message
- 提交成功後顯示 toast 並導向列表頁
- 支援編輯模式 (從 URL 參數讀取 ID)"

## 3. 建立資料表 UI
"請在 src/app/[resource]/page.tsx 建立一個資料表格：
- 使用 @tanstack/react-table
- 支援排序、搜尋、分頁
- 每行有編輯和刪除按鈕
- 載入中顯示 Skeleton"

何時該建立 Prompt 庫？

當你發現你第三次對 AI 說出類似的話時，就該把它寫下來了！

實戰：完整除錯案例

案例一：API 回傳 500

錯誤：POST /api/users 回傳 500

排查步驟：
1. 檢查伺服器日誌 → 看到「ValidationError: email is required」
2. 檢查前端請求 → 發現沒送 email 欄位
3. 檢查前端程式碼 → 表單中的 email input name 打錯了
4. 修正 input name → 問題解決

案例二：畫面空白

錯誤：頁面載入後完全空白

排查步驟：
1. 開啟瀏覽器 DevTools（F12）
2. Console 面板 → 看到「Cannot read properties of null」
3. Sources 面板 → 中斷點除錯
4. 發現 API 回傳的資料結構跟預期不同

課程總結

這堂 Vibe Coding 除錯課從錯誤訊息解讀、console.log 除錯、瀏覽器 DevTools、API 除錯到完整案例——你現在可以系統性地解決開發中遇到的問題。