Plan 模式：先規劃再實作

返回 Codex 教學總目錄

目標與準備

先讀需求描述。Plan 模式適合需求還有選擇、需要先讀程式或跨越多個步驟的工作。它讓 Codex 調查背景、提問及提出計畫；不是寫了「計畫」兩字就完成，也不代表權限沙盒已切成唯讀。要保護工作範圍，仍需檢查權限與目前資料夾。

步驟 1：建立可以重做的起點

由第一個小專案取得練習 ZIP，將 start 內五個檔案複製到新的 codex-plan-lab 根目錄：index.html、style.css、app.js、core.mjs、core.test.mjs。不要用 expected，否則篩選已修好。用編輯器開此資料夾，終端機確認路徑與 node --version。保留原始 start 作為還原來源，不用正式專案練習。

node --test core.test.mjs

先執行測試並保存摘要：教材起點預期 2 項通過、1 項失敗。這是準備好的故障，不要先改測試讓它變綠；若結果不同，先確認拿的是 start，而不是 broken 或 expected，三份用途不同。

畫面驗證沿用第一個小專案的 Python 本機預覽：先停止自己先前的練習伺服器，再從 codex-plan-lab 啟動。Windows 用 py -m http.server 4173 --bind 127.0.0.1；macOS／Linux 將 py 改成 python3。瀏覽器開 http://127.0.0.1:4173，不要直接雙擊 HTML。伺服器保留在該終端機，測試命令另開終端機執行；結束後在伺服器終端機按 Ctrl+C。

預覽開啟後，先保留仍需要的舊練習紀錄。在 About this exercise 按 Reset practice data，選 All tasks 並確認清單為空，再新增 Read、Build，只勾選 Read。切 Active／Completed，預期兩種選項仍顯示這兩筆任務。重設只處理教材的儲存資料，不要清除整個瀏覽器的資料。

步驟 2：開啟 Plan 並調查

桌面版在本練習專案建立任務，使用輸入框的 /plan，或 Add 選單內 Plan mode。CLI 從練習目錄執行 codex，待目前工作完成後輸入 /plan；官方也列出 Shift+Tab 切換。看清楚目前模式再送出下面的提示詞。/plan 輸入在 Codex 內，不是 PowerShell、Terminal 或 bash。若版本沒有該入口，先更新並查看指令選單，不猜測快捷鍵。

Plan before implementation. In this codex-plan-lab, inspect index.html, app.js, core.mjs and core.test.mjs. Do not edit files yet.
Goal: make All, Active and Completed filters correct.
Keep the current UI, storage format and task ordering. Add no dependencies.
Report the existing selector and event wiring, the failing behavior and the smallest implementation scope. Ask about unresolved behavior before proposing a plan.
The plan must name files, acceptance cases, test commands and a scoped restoration method. Separate observations from assumptions.

先看它是否真正指出 index.html 已有篩選器、app.js 已接上事件、core.mjs 的 visibleTasks 才是缺口。若計畫要重做整個畫面或安裝框架，請它回到現有檔案證據，說明必要性。這次答案是保留 All 預設、Active 僅未完成、Completed 僅已完成，順序不變、空清單仍為空。把這些答案明講，不讓「改善」留給模型自行解釋。

步驟 3：審閱並修訂計畫

可接受的計畫像下面這份：每步有輸入、修改位置與成功條件，不只是「分析、開發、測試」。你不必要求模型逐字一致，但應能用它判斷實作是否超出範圍。此處的測試結果是未來要達成的條件，不能在計畫階段寫成已通過。預覽也要區分人工驗證與代理有沒有瀏覽器工具。

# Filter plan
1. Read the existing selector, event handler and tests. Confirm the start fixture's failing filter assertion.
2. Edit only visibleTasks in core.mjs: active selects unfinished tasks; completed selects finished tasks; all keeps every task in order.
3. Run node --test core.test.mjs. Target: all 3 tests pass without changing their assertions.
4. Preview Read (completed) and Build (active). Expect All=Read,Build; Active=Build; Completed=Read. Empty lists stay empty.
Scope: no dependencies, storage migrations, UI redesign or deployment.
Restore: copy only core.mjs from the preserved start fixture back into this lab. The known failing baseline should return.

再補一個條件：「不能原地修改傳入陣列，請在計畫寫入驗證方式。」好的修訂會說明 filter 回傳新陣列且不更動任務物件；All 可以回傳原陣列，但不能排序或改值。若模型提出其他必要變更，先釐清理由再更新允許範圍，不要只回一個「好」卻期待它猜到你保留的限制。

在實作前排除一份看似完整的錯誤計畫

判讀例：計畫寫「重做篩選按鈕、安裝套件、修改測試讓結果通過」，步驟很多仍不符合本練習。既有按鈕與事件已存在，缺口是 visibleTasks；應先指出哪些步驟沒有程式證據，再要求下列修訂。修訂後重新對照原範圍與空清單、不改輸入等條件，通過這一步才交付實作。

Revise the plan only; do not implement yet. Use the existing filter controls and event wiring. Limit program changes to visibleTasks in core.mjs, add no dependencies and preserve all test assertions. For each proposed change, cite the observed gap. Include empty input, stable order, no input mutation, actual test execution and separate browser checks. Mark unknown facts instead of assuming them.

步驟 4：交付實作並驗證

確認計畫後，用畫面模式控制切回實作；CLI 可依當前提示使用 Shift+Tab，桌面確認 Plan 已關閉。再送出下面的明確要求。若仍收到另一份計畫，先檢查模式，不要一口氣重送多次。修改完成後看差異，這個教材應只需要 core.mjs 內函式；以下提供對照實作，不必未經閱讀就覆蓋整份檔案。

Implement the reviewed filter plan now. Modify only visibleTasks in core.mjs. Preserve task order and do not mutate inputs. Keep tests and other files unchanged. Run node --test core.test.mjs, inspect the final diff and report actual results. If browser verification is unavailable, list the manual cases as NOT RUN. Do not publish or deploy this practice project.

export function visibleTasks(tasks, filter) {
  if (filter === "active") return tasks.filter((task) => !task.completed);
  if (filter === "completed") return tasks.filter((task) => task.completed);
  return tasks;
}

重跑前面的測試，參考修正應為 3 項全過，再依表格手動確認畫面。為避免先前 localStorage 資料影響，使用只有本教材的獨立瀏覽器設定檔，或在畫面刪除先前的虛構任務；不要清除整個日常瀏覽器的資料。新增 Read、Build，僅勾選 Read，再測空清單。保存實際結果與尚未操作的項目。

常見問題、還原與完成條件

計畫太空泛，就要求每一步指出檔案及驗收例；假設與實際程式相反，就先重新讀檔；修改了測試或加了套件，就檢查差異並收回超出部分。模式仍是 Plan 而沒有改檔，不是網站故障。若切成實作卻被權限阻擋，處理該次需要的權限，不把關閉所有保護當成標準步驟。沒有測試輸出時就寫未執行。

保留最後計畫、只改 core.mjs 的差異、3 項測試與畫面表格，才能區分「計畫可交付」與「功能已驗收」。想重做時，只把保留的 start/core.mjs 複製回練習目錄，預期回到 2 過 1 敗；不要還原整個工作資料夾或刪除登入資料。圖中 1 是確認起點，2 是調查與審閱，3 是實作驗收。長任務下一步可把結果寫成上下文交接。

返回 Codex 教學總目錄

閱讀完整文字說明

Questions to /plan to Implementation

• AI 工具
• 教學
• Codex