# 第 1 章：什麼是 AI Coding

## 本章目標

讀完這一章，你要理解 AI coding 不是「讓 AI 取代你寫程式」，而是學會把想法拆清楚，交給 Codex 協助產生、修改、解釋與除錯程式碼。

## 你會做出什麼

本章不急著寫完整網站，而是完成一份自己的 AI coding 學習任務卡：

- 我想做的第一個網頁是什麼
- 這個網頁需要哪些區塊
- 哪些事情可以請 Codex 幫忙
- 哪些結果需要自己檢查

## 核心觀念

AI coding 是一種新的寫程式方式。你仍然是專案的負責人，Codex（或 ChatGPT、GitHub Copilot Chat、Claude 等現代 AI 工具）是你的協作夥伴。你負責說明目標、做決定、測試結果；AI 協助你把需求轉成程式碼、解釋不懂的地方、找出錯誤。

**提供充足的「上下文 (Context)」**
AI 只知道你告訴它的事。在編寫 Prompt 時，把你目前的程式碼片段貼給 AI，或者在 AI 工具中選取特定段落，給予充足的「上下文」，產生的程式碼才會精準。

初學者最容易犯的錯，是把一句很大的需求丟給 AI，例如：「幫我做一個網站。」這樣得到的結果通常很難控制。比較好的方式是把需求拆小，例如：「請幫我產生一個個人介紹網站的 HTML 結構，包含導覽列、自我介紹、技能與作品區，不需要 CSS。」

## AI 與人的分工

| 你（專案負責人）負責 | AI（協作夥伴）負責 |
| :--- | :--- |
| **說清楚目標、決定功能範圍** | **產生 HTML、CSS、JavaScript 程式碼** |
| **檢查畫面是否符合需求** | **解釋看不懂的程式邏輯** |
| **測試按鈕與互動是否正常** | **改善版面與提供重構建議** |
| **保留能運作的版本** | **幫忙找出報錯的原因** |

## 實作步驟

1. 打開 VS Code。
2. 新增一個檔案，命名為 `my-first-prompt.txt` 並存檔。
3. 在這個文字檔裡面，寫下你想完成的第一個網頁的 3 到 5 個區塊。
4. 把其中一個區塊改寫成可以交給 AI 的 prompt。

範例：

```text
我想做一個個人介紹網站。
請先只產生 HTML 結構，包含：

1. 頁首導覽列
2. 自我介紹區
3. 技能列表
4. 作品卡片
5. 頁尾
不要加入 CSS 和 JavaScript。
```

## Codex Prompt 範例

```text
請用初學者可以理解的方式，幫我規劃一個只使用 HTML、CSS、JavaScript 的個人介紹網站。先不要寫程式，請先列出頁面區塊、需要的檔案，以及每個檔案負責什麼。
```

## 常見錯誤

*   **[錯誤] 一次要求 AI 做太多事**
    **[解法]**：請將需求拆解成小塊，例如先要求「只要 HTML 結構」。

*   **[錯誤] 沒有限制使用的技術**
    **[解法]**：在 Prompt 中明確加上：「請只使用純 HTML、CSS 和 Vanilla JavaScript」。

*   **[錯誤] 沒有說明輸出格式**
    **[解法]**：明確告訴 AI「只輸出程式碼，不要解釋」或「請逐行加上註解」。

*   **[錯誤] 沒有測試就繼續加功能**
    **[解法]**：每次 AI 給出程式碼，務必存檔測試，確認沒問題才繼續。

*   **[錯誤] 看不懂程式碼也直接複製貼上**
    **[解法]**：請馬上問 AI：「請用初學者的角度解釋這段在做什麼？」。

## 本章練習

請寫出三個 prompt：

1. 請 Codex 規劃一個網頁
2. 請 Codex 只產生 HTML
3. 請 Codex 解釋產生的 HTML

## 檢查清單

- 我知道 Codex 是協作工具，不是專案負責人
- 我能把大需求拆成小任務
- 我能寫出明確限制的 prompt
- 我知道產生程式後需要自己測試