與 AI 協作改頁面，而不是盲貼程式碼

拆解需求：從「我想要...」
到 AI 能執行的指令

「幫我讓這個頁面更好看」——這是最容易讓你崩潰的 AI 改版指令。它會順便動字型、換顏色、調整體排版，然後你發現它把你精心設計的 Hero 區塊也一起重構了，三十分鐘的設計工作五秒鐘被改沒。

問題不在 AI，而在指令。AI 沒有你腦子裡的那個頁面樣貌——它只能根據你給的描述推斷你的意圖。描述越模糊，AI 的「自由發揮」空間越大。

把這三個要素組合起來，就能寫出有效的改版指令：

範圍控制：只改這裡，不動其他地方

即使你的指令有位置、意圖、限制，AI 有時仍會「改過頭」——特別是當你把整份程式碼貼給它時。AI 看到的是完整的 context，它的訓練讓它傾向於「提供全面改善」，而不只是點對點修改。

三個技巧可以有效控制修改範圍：

實際操作的情境：你想改頁面上的一個按鈕顏色，但不想動按鈕的大小、圓角和 hover 效果。以下是典型的指令示範：

我想修改這個 CSS 片段中 .btn-primary 的背景顏色，
從 #6b7fa3 改成 #5a7a5a。

只改 background 這一個屬性。
border-radius、padding、font-size、hover 效果都不要動。
只回傳修改後的 .btn-primary 規則，不要貼出其他 CSS。

---
.btn-primary {
  background: #6b7fa3;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: .9rem;
  cursor: pointer;
}
.btn-primary:hover {
  background: #5a6d8f;
}

Bug 修復：用結構化語言讓 AI 找到問題

「這個按鈕點了沒有反應」——這是最常見的 bug 回報方式，也是讓 AI 最難幫你的方式。AI 需要知道：它哪裡沒反應？你期待它做什麼？什麼情況下才會沒反應？

一個有效的 bug 描述由三個部分組成：

把這三個要素組合成一段問題描述，再附上相關的程式碼片段，AI 解決問題的成功率會大幅提升：

現象：點擊 id="submit-btn" 的按鈕之後，頁面完全沒有反應。
預期：應該要把 id="user-input" 的輸入值顯示在 id="output" 的段落裡。
觸發條件：不論輸入框有沒有內容，每次點擊都沒有反應。

以下是我的 JavaScript，請找出問題並告訴我哪裡出錯，
然後只修改有問題的地方：

document.getElementById('submit-btn').onclick = function() {
  let value = document.getElementById('user-input').val();
  document.getElementById('output').textContent = value;
};

進階技巧：當你不確定 bug 的原因，可以先請 AI 解釋邏輯，不要急著要它修改。「請逐行說明這段 JavaScript 在做什麼」——這讓你先理解程式流程，再判斷哪裡和你的預期不符，最後才針對性地要求修復。

工具選擇：Cursor / Copilot / Claude Code
各自適合什麼

AI 協作開發工具不只一種，而且每種工具的設計哲學不同。了解它們的差異，能幫你選到最適合當下任務的工具，而不是用同一個工具做所有事。

工具本身不是瓶頸，你描述需求的能力才是。這節課的位置、意圖、限制三要素，以及範圍控制和 bug 描述的方法，在任何 AI 工具上都通用。學好這些方法，換工具只是換介面，不是換技能。

掌握了這節課的方法，你已經能夠有效地讓 AI 幫你修改現有頁面。接下來的 CH5-3 和 CH5-4，我們要解決另一個問題：改到壞掉了怎麼辦、改好了放到哪裡讓別人看到？