# 第 3 章：第一次和 Codex 協作

## 本章目標

這一章會練習第一次和 Codex 協作。重點不是讓 Codex 一次完成整個網站，而是學會用清楚的小任務控制產出。

## 你會做出什麼

你會把第 2 章的第一個網頁改成更完整的小首頁，並練習三種 Codex 請求：

- 產生程式
- 解釋程式
- 修改程式

## 核心觀念

好的 prompt 通常包含四件事：

1. 目標：你想做什麼
2. 限制：只能使用哪些技術
3. 範圍：這次只改哪個部分
4. 輸出：希望 Codex 怎麼回答

範例：

```text
請只修改 style.css，讓這個頁面看起來更清爽，使用白色背景、淺藍紫色調、8px 以下圓角。不要修改 HTML 和 JavaScript。
```

## 角色扮演 (Role-playing) 技巧
為了讓 AI 產生更符合業界標準、更專業的程式碼，你可以在 Prompt 的開頭賦予它一個角色。
例如：**「請以一位資深前端工程師的角度...」** 或是 **「你是一位擅長教學的程式導師...」**。這能顯著提升 AI 輸出的穩定性與程式碼品質。

## 協作流程

1. 先說明你要完成的畫面。
2. 請 Codex 先規劃，不急著寫程式。
3. 一次只請 Codex 修改一個檔案或一個功能。
4. 執行或打開網頁測試結果。
5. 如果有錯誤，把錯誤訊息完整交給 Codex。

## Codex Prompt 範例

### 產生程式

```text
請幫我把這個 HTML 首頁補完整，加入 hero 區、三個特色卡片和頁尾。只修改 HTML，不要加入 CSS。
```

### 解釋程式

```text
請用初學者能理解的方式解釋這段 JavaScript。請分段說明每一行在做什麼。
```

### 修改程式

```text
請只修改 CSS，讓卡片在桌面版三欄排列，在手機版一欄排列。不要修改 HTML。
```

## 常見錯誤

*   **[錯誤] 沒有說「只修改哪個檔案」**
    **[解法]**：AI 可能會把 HTML 和 CSS 混在一起。一定要聲明：「請只給我 style.css 的修改內容」。

*   **[錯誤] 同時要求新增功能、改版面、修 bug**
    **[解法]**：遵守「一次一事」原則。先修 bug，確認會動後，再開新的 Prompt 要求改版面。

*   **[錯誤] 不看錯誤訊息，只說「不能用」**
    **[解法]**：把 Console 紅色錯誤訊息複製下來餵給 AI，比單純說「壞了」更有效率。

## 本章練習

請對第 2 章範例做三次修改：

1. 請 Codex 增加一段說明文字
2. 請 Codex 改善按鈕樣式
3. 請 Codex 解釋 `script.js`

## 檢查清單

- 我能寫出包含目標、限制、範圍、輸出的 prompt
- 我知道一次只改一個重點
- 我會把錯誤訊息交給 Codex
- 我會測試 Codex 產生的結果