用 Codex 完成第一个任务

最后核对

官方资料最后核对日期：2026-05-27。本章以开发一个简单网页为例，演示从创建工作目录到任务迭代的完整操作流程。

本章以"用 Codex 桌面 App 开发一个关于 AI 发展历史的简单网页"为例，走完一次完整的任务闭环，帮助你快速上手 Codex 桌面 App 的基本用法。

第一步：创建本地工作文件夹

在本地新建一个空文件夹，作为 Codex 的工作目录。Codex 生成的所有文件都会保存在这里。

注意

文件夹路径中尽量不要包含中文，避免部分工具出现兼容性问题。

第二步：选择对话还是项目

打开 Codex 桌面 App 后，你需要选择用"对话"还是"项目"来开始任务。

• 对话：适合一次性任务，操作简单，但多个对话之间不共享工作目录。
• 项目：支持在同一工作目录下创建多个对话，每个对话处理不同的子任务，管理更方便。

如果你不确定选哪个，优先选择项目——后续扩展任务时更灵活，工作目录也只需要配置一次。

第三步：添加工作目录

选择项目后，点击"使用现有文件夹"，选中刚才创建的文件夹。

选择完成后，对话框左下角会显示当前工作目录的路径，确认路径正确即可。

第四步：输入任务描述，开始执行

在对话框中输入你的需求，点击发送，Codex 就会开始执行任务。

请帮我设计并实现一个高质量的单页网页，主题是「人工智能的发展历史」。

网页目标：
这是一个面向普通用户的科普型网页，用来介绍 AI 从早期理论到现代应用的发展过程。页面应有科技感、历史感和未来感，整体视觉效果要精致，不要像普通课程作业页面。

内容方法：
请你自行搜索、筛选并组织与「人工智能发展历史」相关的关键资料，包括重要时间节点、代表人物、核心技术、重大事件、产业变化和未来趋势。

内容组织不要堆砌资料，要形成清晰叙事：
- 先交代 AI 发展的起点和早期思想来源；
- 再说明不同阶段的技术路线如何变化；
- 接着展示关键突破如何推动 AI 进入新的发展阶段；
- 最后总结当前 AI 的主要方向和未来可能性。

页面结构：
请根据主题自行设计合理的页面结构。页面应至少包含：
- 首屏介绍；
- 历史发展脉络；
- 技术演进逻辑；
- 关键转折点；
- 未来展望。

具体模块名称、内容顺序和信息密度由你根据资料和设计效果自行决定。

设计方法：
整体使用现代科技风格，深色背景为主，可以使用渐变、光效、网格、粒子、玻璃拟态、时间线、卡片等元素。视觉元素要服务于内容表达，不能为了炫技而堆砌。

页面需要做到：
- 信息层次清晰；
- 视觉统一；
- 有明显主视觉；
- 有适当留白；
- 阅读体验顺畅；
- 在桌面端和移动端都有良好表现。

交互与动效：
请加入适度的交互和动画效果，例如加载动效、滚动显现、卡片悬停、背景缓慢动态效果等。动效要克制、流畅，不要影响阅读。

技术要求：
- 使用 HTML、CSS 和 JavaScript 实现；
- 所有代码放在一个 index.html 文件中；
- 可以使用 CDN 引入必要的前端库；
- 不要使用 React、Vue、Angular 等前端框架；
- 页面保存后可以直接在浏览器打开运行；
- 代码结构清晰，不要有无效代码、伪代码或占位内容。

输出要求：
直接输出完整可运行的 index.html 代码。
不要省略代码。
不要写解释说明。

任务完成后，Codex 会在对话中展示结果，同时将生成的文件写入工作目录。

如果生成的是网页文件，可以直接点击 Codex 弹出的"打开"按钮，在 App 内置浏览器中预览效果，无需手动打开文件夹。

第五步：逐步迭代

对结果不满意时，直接在当前对话框中继续描述修改需求，Codex 会在已有基础上进行调整。

随着对话轮次增加，上下文窗口会逐渐被填满。点击对话框右下角的小圆圈图标，可以查看当前上下文使用情况。

什么是上下文窗口？

每次对话都有容量上限，每一轮问答都会占用一定空间。当上下文接近满载时，建议在项目中新建一个对话继续处理后续任务——新对话仍然共享同一工作目录，不需要重新配置。

如果使用的是"对话"模式而非项目，新建对话时需要重新指定工作目录，两个对话之间也是相互隔离的，不方便统一管理。这也是推荐使用项目的主要原因之一。

⼀份好的Prompt⻓什么样？

一、划定内容边界：5 个必含模块加 4 步叙事

它没有用"介绍一下 AI 历史"这种模糊说法，而是精确到了两层。

页面骨架：至少包含首屏介绍、历史发展脉络、技术演进逻辑、关键转折点、未来展望这 5 个模块。叙事逻辑：内容按 4 步推进，先讲起点和早期思想来源，再讲不同阶段技术路线怎么变，接着讲关键突破怎么把 AI 推进新阶段，最后落到当前方向和未来可能。

5 个模块是骨架，4 步叙事是骨架里的逻辑。骨架告诉 AI 页面长什么样，逻辑告诉 AI 这些模块之间怎么串。

就像你不会跟实习生说"写个报告"，你会说"写一份覆盖 3 个竞品的竞品分析，每个竞品写清优劣势"。有边界，活才不会跑偏。

提示

这份 Prompt 给的不是数量硬指标（比如"15 个节点"），而是结构硬指标：必含哪几块、内容按什么顺序推进。对一篇叙事型网页，结构边界比数量边界更管用。

二、锁定视觉风格：写的是具体效果，不是"好看一点"

它规定了风格：现代科技风，深色背景为主，要有科技感、历史感、未来感。可用的元素也列清楚了：渐变、光效、网格、粒子、玻璃拟态、时间线、卡片。

它没有说"好看一点"。"好看"是最没用的需求描述，每个人对"好看"的定义都不一样。它给的是具体风格加具体元素，还补了一条约束"视觉服务内容，不为炫技堆砌"，又划了一条反例"不要像普通课程作业页面"。给正面方向，也给反面边界，AI 才知道往哪走、不往哪走。

提示

"好看"无法验收，"深色科技风、有时间线、不像课程作业页"可以验收。需求里能被验收的词，才是有效的词。

三、设计内容流转：背后跑的是叙事逻辑

好的需求不只描述用户看到什么，还描述背后有什么在运转。

这份 Prompt 背后运转的不是数值系统，是叙事逻辑。它明确要求"不要堆砌资料，要形成清晰叙事"，并且把这条叙事线定死了：起点和早期思想，到技术路线变化，到关键突破推动阶段跃迁，再到当前方向与未来。

正是这条线，让页面从"一堆时间点的罗列"变成"一段能读下去的故事"。同样一批资料，按时间平铺只是资料库，按这条因果线组织才是科普。

提示

对工具类产品，"背后运转的"是数据和状态。对内容类产品，"背后运转的"是叙事逻辑和信息架构。这份 Prompt 抓的是后者。

四、想好阅读闭环：从首屏落到未来展望

它把开头和结尾都安排了。首屏负责入口和主视觉，结尾落在"未来展望"，让读者读完手里有个结论，而不是看到一半断掉。

这里有一点要说实话：这份 Prompt 的闭环是"阅读闭环"，比交互型产品的闭环弱。它没有要求分享按钮，也没有要求把结论收成一句可转发的话这类让内容扩散出去的设计。如果目标是让这页被传播，这是可以加码的地方。

提示

闭环不一定是"再来一次"按钮。对一篇科普页，最低限度的闭环是：读者滚到底，能拿到一个明确结论。这份 Prompt 用"落到未来展望"完成了这个最低闭环。

五、画技术红线：说清楚"不要做什么"

它划了几条红线：用 HTML/CSS/JS，所有代码放进一个 index.html，CDN 可以用，但不许用 React、Vue、Angular；保存后要能直接在浏览器打开运行；不许有无效代码、伪代码、占位内容；直接输出完整代码，不省略，不写解释。

告诉 AI"不要做什么"，比告诉它"要做什么"更关键。不画这条线，AI 很可能自作主张给你引一套构建框架，也可能在该写内容的地方塞一堆"待补充"的占位注释，最后给你一个跑不起来、打开是半成品的东西。

就像带实习生：你不说"不要用付费素材"，他可能买了一堆图回来找你报销。这份 Prompt 里"不许伪代码和占位内容"这一条，挡的正是这种半成品交付。

提示

红线分两种：技术栈红线（不用框架、单文件）和交付红线（不许占位、不许省略、直接能跑）。这份 Prompt 两种都写了，AI 就没有"自由发挥到跑偏"的空间。

一个容易看错的点：留白不等于歧义

这份 Prompt 有一句话看着像"没说清楚"："具体模块名称、内容顺序和信息密度由你根据资料和设计效果自行决定。"

这不是歧义，是主动授权。

歧义是 AI 会猜错、且猜错就返工的地方。授权是这件事本来就该交给执行方判断、怎么做都在可接受范围内的地方。模块叫什么名字、时间线放多密，属于后者：定死了反而限制发挥，交出去更好。

区分这两者很重要。该说清的地方含糊，是 bug；该放手的地方硬管，是浪费。这份 Prompt 把"必含哪几块、按什么逻辑讲、不许用什么"这些会影响结果的事定死了，把"具体怎么排版、用什么标题"这些不影响结果的事交了出去。这个分寸是它写得好的地方。

歧义是最贵的 Bug

顺着上面说。需求里真正的歧义，最后都会变成返工成本。两个经典例子：

"下班顺路买一斤包子带回来，如果看到卖西瓜的，买一个。" 买一个什么？西瓜还是包子？

"小明无法将奖杯放到口袋里，因为它太大了。" 什么太大了？奖杯还是口袋？

人能靠常识猜，AI 不行。AI 会严格按字面执行，然后给你一个"技术上正确、但完全不是你要的"东西。

这份「AI 发展史」Prompt 基本没有这类歧义。每个维度都用清单写死，留白的地方又明说了"由你决定"。该定的定了，该放的放了，AI 不需要猜。

信息不是越多越好

斯坦福那门课里有一篇阅读材料《长上下文是怎么失败的》，核心观点是：给 AI 塞太多信息，效果反而变差。因为 AI 会被无关信息干扰，就像你给实习生发 20 页参考资料，他反而找不到重点。

那这份 Prompt 不是挺长吗？

它长，但不杂。它的长是"按维度分块的清单式长"：目标、内容方法、内容组织、页面结构、设计方法、交互动效、技术要求、输出要求，每一块都是可验收的条目，没有一段在写"我个人很喜欢科技感""灵感来自某某网站"这种帮不上忙的话。

少而准胜过多而杂。这份 Prompt 走的是"多而准"，每一条都准，所以多也不拖后腿。

提示

判断一份长 Prompt 该不该删：逐条问"这条能不能拿来验收成品"。能，留着；不能（比如纯个人偏好、灵感来源），删掉。

写给 AI 的任务书：一份检查清单

斯坦福大学 2025 年秋季有一门课叫 CS146S: The Modern Software Developer，专门教"AI 时代怎么做软件"。它的一个核心观点是：Spec is the new source code，需求规格就是新的源代码。

课程给学生发了一份正式的设计文档模板，里面有十几个字段，覆盖现状、功能需求、非功能需求、设计决策、技术设计、实施计划、测试策略等。专业开发者写几十页设计文档才开工，你写五行就能让 AI 干活，这就是 AI 时代给普通人的杠杆。

把那份专业模板简化成新手能用的五条，正好对应前面拆出来的规律。下面用这五条对照这份「AI 发展史」Prompt：

检查项	问自己	这份 Prompt 怎么答的
问题陈述	用户要什么体验？一句话能说清吗？	能。面向普通人的 AI 发展史科普单页，要有科技感、历史感、未来感
方案描述	功能、模块、交互、视觉，具体了吗？	具体。5 个必含模块、4 步叙事、视觉元素清单、交互清单，全列了
技术约束	技术栈写了吗？	写了。HTML/CSS/JS，单文件 index.html，可用 CDN，禁三大框架
红线	说清楚"不要什么"了吗？	说了。不用框架、不许伪代码占位、不省略代码、不写解释
交付标准	怎么算做完？手机能用吗？有闭环吗？	保存后浏览器直接能跑，桌面和移动端都要好，叙事落到未来展望

五条全部命中。这就是这份 Prompt 读起来不像"聊天"、像"任务书"的原因。

提示

你写给 AI 的每一段 Prompt，本质上就是一份迷你设计文档。下次动手前拿这五条过一遍：问题陈述、方案描述、技术约束、红线、交付标准。缺哪条，补哪条。

小作业

利用上面的Prompt技巧生成一个你想要的网页，并且把截图发到群里