用 AI 改網頁的方法
學會了 HTML、CSS、JavaScript 的基礎之後，你已經可以看懂 AI 給你的程式碼了。 這一章我們要學最實用的技能：如何高效地和 AI 合作，讓它幫你解 Bug、加功能、改樣式。
本章重點
- 提問的黃金公式：背景 + 目標 + 限制 + 程式碼
- 如何把 Bug 和錯誤訊息告訴 AI
- 請 AI 加功能的正確方式
- 請 AI 改樣式的技巧
- AI 給的答案不對時怎麼辦
教學說明
提問的黃金公式
一個好的 AI 提問，需要包含四個要素：
提問四要素
- 背景：我是誰？在做什麼專案？
- 目標：我想達成什麼效果？
- 限制：有什麼條件或限制？（例如：不要用框架）
- 程式碼：貼上你目前的程式碼，讓 AI 了解現狀
範例一：請 AI 解 Bug
我在學 JavaScript，做一個計數器功能，但點擊按鈕後數字沒有更新。
瀏覽器 console 顯示這個錯誤：
"TypeError: Cannot set properties of null (setting 'textContent')"
這是我的 HTML：
<button id="btn">加一</button>
<div id="counter">0</div>
這是我的 JavaScript（放在 <head> 裡）：
document.getElementById('btn').addEventListener('click', function() {
let count = document.getElementById('counter').textContent;
document.getElementById('counter').textContent = parseInt(count) + 1;
});
請幫我找出問題並修正，用最簡單的方式解釋。範例二：請 AI 加新功能
我有一個個人介紹頁面，目前只有靜態的 HTML + CSS。
我想加一個功能：點擊「聯絡我」按鈕後，用 JavaScript 顯示一個彈出對話框，
裡面有我的 Email 和 GitHub 連結。
請用純 JavaScript（不用 jQuery 或任何框架）幫我實作。
只需要給我新增的 JavaScript 部分就好。範例三：請 AI 改樣式
我有以下這個按鈕的 CSS，目前看起來很普通：
.btn {
background: blue;
color: white;
padding: 8px 16px;
}
我想讓它：
1. 有漸層背景（藍色到紫色）
2. 有圓角
3. 滑鼠移上去時顏色稍微變深
4. 有一點點陰影
請幫我改寫這個 CSS。當 AI 的答案不對時
AI 不是每次都對，遇到問題時這樣處理：
告訴 AI 哪裡不對
把你遇到的問題具體說明，例如「我按照你說的做了，但按鈕還是沒有反應，console 顯示 XXX」。
請 AI 解釋程式碼
如果看不懂 AI 給的程式碼，直接問：「這段程式碼的每一行在做什麼？請逐行解釋。」
換一種問法
如果同一個問題問了三次都不對，試著換個角度：「有沒有其他方法可以達到 XXX 效果？」
提升 AI 輸出品質的小技巧
- 在提問最後加上：「請只修改需要改動的部分，不要改變其他程式碼」
- 說明你的環境：「我使用純 HTML/CSS/JS，不使用任何框架」
- 指定輸出格式：「請幫我把完整修改後的 CSS 部分貼出來」
- 讓 AI 確認：「在回答前，請先確認你理解我的需求，然後再給程式碼」
使用瀏覽器開發工具
在任何網頁按 F12（或 Cmd + Option + I），就能打開「開發者工具」。 這是找 Bug 最重要的工具：
- Elements 標籤：查看 HTML 結構和套用的 CSS
- Console 標籤：看 JavaScript 的錯誤訊息
- Network 標籤：查看圖片或資源是否載入失敗
把錯誤訊息貼給 AI
遇到問題時，打開 Console，把紅色的錯誤訊息完整複製，貼給 AI。這是最快解決問題的方式。
AI 提問範本庫
收藏這些提問範本，需要時直接套用：
我在學 [HTML/CSS/JavaScript]，遇到一個問題：
【問題描述】
[描述你遇到的問題]
【錯誤訊息】
[貼上 Console 的錯誤訊息]
【目前的程式碼】
[貼上相關程式碼]
【我希望的結果】
[描述你想要達到什麼效果]
請幫我找出問題，並用白話解釋錯誤原因。我有一個用純 HTML/CSS/JavaScript 做的網頁，
我想加入 [功能名稱] 的功能。
【功能需求】
1. [需求一]
2. [需求二]
【目前的相關程式碼】
[貼上目前的 HTML/CSS/JS]
請用純 JavaScript（不使用任何框架）實作，
並說明每個重要的部分在做什麼。常見錯誤
沒有貼程式碼就問問題
「我的按鈕不能用，怎麼辦？」AI 沒有看到你的程式碼，只能給很模糊的答案。一定要貼出相關程式碼。
一次問太多問題
「幫我修 Bug、加深色模式、改字體、加動畫」——一次問太多，AI 可能只處理一部分或混亂地全部改掉。
盲目複製 AI 的程式碼
不讀就貼上，下次遇到類似問題還是不會。養成習慣：貼上之前先大致看懂這段程式碼在做什麼。
小練習
🎯 動手試試看
用「提問黃金公式」，向 AI 請求幫你把第 4 章的自我介紹頁面加上「回到頂端」按鈕（滾動到一定高度後出現，點擊後滾回頂端）。
故意在你的 JavaScript 裡製造一個錯誤（例如把 getElementById 拼成 getElementbyId），打開 Console 看錯誤訊息，然後把錯誤訊息和程式碼一起給 AI，看它能不能幫你找到問題。
本章完成！
你現在是懂得用 AI 的開發者了！最後一章，我們要把所有學到的東西整合起來，完成一個真正的個人介紹頁。