第五章：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 核心心法與除錯實戰》的全部課程！帶著這些武器，去征服那些複雜的商業專案吧！