配置工作区与任务边界

用一个原生 HTML/CSS/JavaScript 任务清单，练习如何给 Codex 提供上下文、限定修改范围并定义可验收结果。

直接结论

本课完成标准：Codex 能在指定文件内完成任务清单的新增、完成和删除，并通过浏览器手动验收；不引入框架、不改动无关文件。

学习目标

完成本课后，你能把一个模糊的“做个任务清单”拆成输入、行为、边界和验收标准，并用一条可复用提示词让 Codex 先检查工作区再动手。

准备环境

准备 Node.js 18 或更高版本、一个空目录和 Codex。新建 index.html、styles.css、app.js 三个文件；如果你使用已有仓库，请先确认当前分支干净，并记录启动命令。

边界约束

本练习只允许修改 index.html、styles.css、app.js；不安装依赖、不引入框架、不修改构建配置。任务必须支持新增、完成切换、删除和空状态提示，刷新页面后数据可以暂不持久化。

实操步骤

1. 让 Codex 先列出工作区文件、启动方式和可修改范围。 2. 把任务拆为静态结构、交互状态和视觉验收三部分。 3. 先实现最小可用版本，再让 Codex 自查空输入、重复点击和空列表。 4. 启动本地服务，在桌面和手机宽度各检查一次。 5. 记录实际改动文件、验证命令和仍未处理的限制。

可直接发送给 Codex 的提示词

提示词 A：先不要修改文件。请检查当前工作区，告诉我启动方式、相关文件、可修改范围和你认为缺失的上下文。提示词 B：请在 index.html、styles.css、app.js 内实现一个原生任务清单：可新增任务、切换完成、删除任务；空输入不新增；列表为空时显示明确空状态。不要安装依赖，不改动其他文件。完成后说明改动和验证方式。提示词 C：请按验收清单复查刚才的实现，逐项说明通过或未通过，并只修复与本任务直接相关的问题。

本课验收清单

□ 能说清启动命令和允许修改的 3 个文件 □ 新增空文本不会产生任务 □ 新增任务、完成切换、删除均可操作 □ 删除最后一项后显示空状态 □ 浏览器控制台无新增报错 □ 桌面和手机宽度下按钮与文字不重叠 □ 能向别人说明本次没有做什么