Prompt Engineering Playbook

為什麼 Prompt Engineering 很重要

• AI 只懂你給它的資訊：沒有上下文，AI 無法理解你的專案背景和需求。

• 模糊的指令＝模糊的答案：不明確的問題只會得到籠統、無用的建議。

• 精確的 prompt 發揮 AI 最大效益：明確描述需求，AI 才能給出精準、實用的解決方案。

• 節省時間、提升效率：好的 prompt 減少來回溝通，快速獲得正確答案。

• 促進學習與成長：精確的 prompt 讓你學到更多最佳實踐與問題拆解能力。

有效提示的原則（簡明整理）

1. 提供豐富上下文（語言、框架、程式碼、錯誤訊息）

2. 明確你的目標（預期與實際行為）

3. 拆解複雜任務（分步驟請求）

4. 舉例說明（給輸入/輸出範例）

5. 設定角色或專家身份（指定 AI 身份）

6. 反覆對話與修正（逐步引導）

7. 保持程式碼清晰一致（良好命名、註解）

實際應用情境與範例

1. 除錯（Debugging）

   • 不良 prompt：「Why isn’t my mapUsersById function working?」

   • 優良 prompt：
     “I have a JavaScript function mapUsersById that should convert an array of user objects into a map (object) keyed by user ID. However, it throws an error when I run it. For example, when I pass [ {id: 1, name: “Alice”} ], I get TypeError: Cannot read property ‘id’ of undefined. Here is the function code: … It should return { “1”: {id: 1, name: “Alice”} }. What is the bug and how can I fix it?”

   • 中文解釋：
     我有一個 JavaScript 的 mapUsersById 函式，目的是把一個 user 物件陣列轉成以 user ID 為 key 的物件。但執行時出現錯誤，例如傳入 [ {id: 1, name: “Alice”} ] 會出現 TypeError: Cannot read property ‘id’ of undefined。這裡是我的程式碼… 預期結果應該是 { “1”: {id: 1, name: “Alice”} }。請問這個 bug 出在哪裡？要怎麼修正？

   • 重點：包含了語言、功能說明、錯誤訊息、範例輸入與預期輸出，讓 AI 能精準定位問題。

2. 重構與優化（Refactoring & Optimization）

   • 不良 prompt：「Refactor the above getCombinedData function.」

   • 優良 prompt：
     “Refactor the above getCombinedData function to eliminate duplicate code and improve performance. Specifically: (1) Avoid repeating the fetch logic for users and orders – maybe use a helper or fetch them together. (2) Fetch both lists in parallel if possible. (3) Keep the error handling for each fetch (we want to know which call failed). (4) Improve the combination of data, possibly by using a more efficient structure for lookup instead of a nested loop. Provide the refactored code with comments explaining the changes.”

   • 中文解釋：
     請重構上面的 getCombinedData 函式，目標是消除重複的程式碼並提升效能。具體來說：(1) 避免 users 和 orders 的 fetch 邏輯重複——可以考慮用 helper 或一起 fetch；(2) 如果可以的話，同時（平行）取得兩個清單；(3) 每個 fetch 都要有獨立的錯誤處理（我們想知道是哪一個失敗）；(4) 合併資料時，改用更有效率的結構取代巢狀迴圈。請提供重構後的程式碼並加上註解說明修改內容。

   • 重點：明確列出所有重構目標，讓 AI 依據具體需求進行優化，並要求解釋每個修改。

3. 新功能開發（Feature Implementation）

   • 優良 prompt：
     “Create a React functional component called ProductList that displays a list of products and includes a text input to filter the products by name. The component should: fetch an array of products from /api/products (assume it returns JSON array of {id, name, …}), store them in state, and allow the user to type in a search box to filter the displayed products by name (case-insensitive match). Display the filtered list in a simple  

     with product names. Include basic error handling (e.g. show an error message if the API call fails) and a loading state while fetching.”

     • 中文解釋：
       請建立一個名為 ProductList 的 React 函式元件，功能如下：顯示產品清單，並有一個文字輸入框可依產品名稱篩選。這個元件需要從 /api/products 取得產品陣列（格式為 {id, name, …}），把資料存在 state，讓使用者可以在搜尋框輸入關鍵字來篩選（不分大小寫）。篩選後的產品用  

       顯示產品名稱。還要有基本錯誤處理（例如 API 失敗時顯示錯誤訊息），以及 loading 狀態（資料讀取時顯示載入中）。

       • 重點：

         • 明確描述所有功能需求

         • 資料來源

         • UI 行為與錯誤處理

         • 讓 AI 能一次產生完整且實用的元件。