Codex App 进阶实战课：用它写教程、做办公四件套、写 PPT、做动画视频和小项目（小白友好版）
上一篇我写的是 Codex App 从 0 到 1 入门，重点是带大家认识界面：
- 左边导航是什么。
- 中间对话区怎么用。
- 右边预览区能看什么。
- 插件、技能、MCP、自动化、Git 这些词到底是什么意思。
那篇更像是“地图”。
这篇就往前走一步，开始讲 Codex App 真正厉害的地方：
它不是只陪你聊天，而是可以把一个想法拆成任务，然后生成文件、运行项目、打开预览、截图检查、继续修改。
说白了，Codex App 进阶用法的核心不是“它会不会写代码”，而是：
你能不能把它当成一个可以交付东西的工作台。
这篇我会按普通人最容易用上的几个场景来讲：
- 用 Codex 写图文教程。
- 用 Codex 做 Word、PDF、PPT、表格这四件套。
- 做 PPT 的两条路线：图片型 PPT 和 HTML PPT。
- 用 Remotion / HyperFrames 做动画视频。
- 用 Codex 做一个小项目，并在右侧预览里检查效果。
- 每一步最容易踩的坑和怎么排查。
本文基于 2026-05-09 的实操流程整理。
Codex App 更新很快，你看到的按钮和入口可能会变化，但“新建干净项目 → 让它拆任务 → 生成文件 → 预览 → 截图复查 → 继续修改”这条主线不会变。
先说清楚：这篇的截图怎么来的
我这次专门做了一个干净的演示项目，放在：
/Users/yichen/Documents/Codex/2026-05-09/yichen-tutorial-writing-users-yichen-codex/codex-advanced-course-demo这个目录里没有私人账号、没有聊天记录、没有 Cookie、没有微信信息，只是为了给教程截图。
本次已经补好的截图有 6 张：
| 截图 | 用途 |
|---|---|
| 小项目预览图 | 证明 Codex 可以生成一个本地网页项目并打开预览 |
| HTML PPT 第 1 页 | 展示“HTML 写 PPT”的最终效果 |
| HTML PPT 第 2 页 | 展示同一套 HTML PPT 可以翻页 |
| 办公四件套预览图 | 展示 Word、PDF、表格、PPT 四类文件的结果 |
| 代码目录示意图 | 展示一个小项目通常会有哪些文件 |
| 图片型 PPT 单页图 | 展示“先生成图片，再铺满 PPT”的路线 |
还有几张图建议你发布前手动补拍：
- Codex App 右侧预览区真实截图。
- Codex App 右侧文件目录或代码变化截图。
- Codex 内置图片生成结果截图，也就是你说的 Image 2 路线。
- Remotion / HyperFrames 预览和渲染完成截图。
原因也很简单：Codex App 自身窗口对 Computer Use 有安全限制，不能直接被我抓取成教程图。这里我先用“干净演示项目截图 + 需要补拍清单”的方式写正文，不假装已经看到没有拍到的界面。
一、这篇进阶教程到底解决什么问题
很多人第一次用 Codex App，会停留在一个阶段：
我知道它很强，但我不知道该让它做什么。
如果只是问问题，那普通 ChatGPT 也能问。
Codex App 更值得折腾的地方，是它可以在一个项目文件夹里真的干活。
比如你可以让它：
- 写一篇图文教程。
- 把教程整理成 Word。
- 把最终版导出成 PDF。
- 做一张选题或排期表。
- 做一套 PPT。
- 写一个 HTML 幻灯片。
- 写一个小网页工具。
- 生成一个 Remotion 或 HyperFrames 动画视频工程。
- 打开预览，截图检查，继续修改。
普通人最应该学的不是某个按钮，而是这套工作方式：
想法
↓
让 Codex 拆任务
↓
生成文件
↓
打开预览
↓
截图检查
↓
继续修改
↓
形成可交付结果这就像你以前找设计、找文案、找表格助理、找前端同学，现在先让 Codex 在一个安全目录里跑一版。
不一定一次完美，但它能把“空想”变成“可修改的东西”。
二、基础概念：这次你只需要懂 5 个词
1. 项目文件夹
项目文件夹就是 Codex 的“工作桌”。
你让它做教程、PPT、表格、小项目，都最好先放进一个干净文件夹。
不要一上来就让它扫你的整个桌面、下载文件夹、微信聊天目录、公司资料目录。
作为小白，最稳的做法是：
新建一个干净文件夹
↓
只放这次任务需要的素材
↓
让 Codex 只在这个文件夹里工作成功标志：
- 文件夹里出现了 Codex 生成的文件。
- 你知道每个文件大概是干什么的。
- Codex 没有跑到别的私人目录里乱看。
2. 右侧预览
Codex App 的右侧预览区，可以理解成“交作业窗口”。
它可能显示：
- 生成出来的图片。
- 本地网页预览。
- 文档或 PDF 预览。
- 代码变化。
- 外部网页。
- 搜索来源。
这里的关键不是“右侧长什么样”，而是：
你不要只听 Codex 说它做完了，要让它把结果打开给你看。
3. 截图复查
截图复查是进阶使用里非常重要的一步。
你让 Codex 做 PPT、网页、视频画面，最容易翻车的不是“它不会写”，而是：
- 字溢出了。
- 按钮挡住文字了。
- 移动端排版崩了。
- PPT 看起来像模板。
- 视频某一帧太挤。
- 表格字段不够用。
所以你要养成一个习惯：
每次生成可视化结果，都让它截图，然后让它自己看图复查。
4. 文件四件套
这里的四件套指：
| 文件类型 | 大白话解释 | 适合做什么 |
|---|---|---|
| Word | 可继续编辑的正文稿 | 教程、报告、合同草稿、说明书 |
| 固定版式的交付稿 | 对外发送、定稿、手册 | |
| 表格 | 结构化数据容器 | 选题库、排期、统计、清单 |
| PPT | 展示型内容 | 课程、路演、汇报、直播课 |
很多人会把这几个东西分开做。
但 Codex 里最舒服的用法，是让它围绕同一个主题，一次性把这几类文件拆出来。
5. HTML PPT
HTML PPT 就是用网页技术写幻灯片。
你可以先把它理解成：
一套可以在浏览器里播放的 PPT。
它的好处是：
- Codex 很擅长改 HTML / CSS。
- 每一页都能截图检查。
- 版本记录清楚。
- 可以做更自由的排版和动效。
- 可以导出成图片、PDF，甚至继续转成 PPT。
这也是为什么最近很多人开始用 HTML 写 PPT。
三、总体架构：进阶任务应该怎么安排
如果你要用 Codex 做一个复杂任务，不要直接说：
帮我做一个进阶课。这句话太大了。
更好的方式是让它先拆成几个交付物：
| 模块 | 交付物 | 验收方式 |
|---|---|---|
| 图文教程 | Markdown 正文 + 截图清单 | 小白能不能照着做 |
| Word | .docx 文件 | 能否正常打开，标题层级是否清楚 |
.pdf 文件 | 版式是否稳定，有没有乱码 | |
| 表格 | .xlsx 文件 | 字段是否合理，有没有公式或筛选 |
| 图片型 PPT | .pptx + 每页 PNG | 全屏是否清晰，文字是否可读 |
| HTML PPT | index.html | 浏览器打开是否正常，翻页是否正常 |
| 动画视频 | Remotion / HyperFrames 工程 | 抽帧是否不溢出，能否导出 MP4 |
| 小项目 | 本地网页或工具 | 预览能否打开，核心功能能否点 |
你可以把 Codex 当成一个项目经理加执行员：
- 项目经理：先帮你拆任务。
- 执行员：再逐个生成文件。
- 质检员：截图、预览、检查。
看到下面这张图，重点看左侧导航和右侧预览。左边是我们给它拆出来的任务模块，右边是它生成出来的结果预览。
这张图的意义不是说这个小项目多复杂，而是让你理解：
Codex 进阶用法的核心，是把结果做成“看得见、改得动、能验证”的东西。
四、用 Codex 写图文教程
这是普通人最容易上手的进阶用法。
以前我们写教程，经常会卡在两个地方：
- 不知道结构怎么排。
- 截图不知道放哪里。
Codex 很适合帮你做这件事。
但你千万不要只说：
帮我写一篇教程。这样写出来很容易像官方说明书，读者看完还是不知道点哪里。
更好的提示词是：
我要写一篇小白友好的图文教程，主题是【这里写主题】。
请先不要直接写正文。
先帮我做 4 件事：
1. 判断目标读者是谁。
2. 列出读者必须先懂的基础概念。
3. 列出完整操作步骤。
4. 列出每一步需要什么截图，以及截图应该证明什么。
要求：
- 每一步都写成功标志。
- 高风险步骤写失败排查。
- 不要写官方腔，用大白话。
- 不要假装已经有截图，没有截图就标注“需要补拍”。这一步的成功标志：
- Codex 不是直接开始写长文，而是先列出结构。
- 它能告诉你每张图放在哪里。
- 它能写清楚每一步的成功标志。
图文教程的正确顺序
我现在比较推荐这个顺序：
先定读者
↓
再定最终结果
↓
列截图清单
↓
写大纲
↓
补操作步骤
↓
补成功标志
↓
补踩坑排查
↓
最后润色成文章为什么截图要提前？
因为图片不是装饰。
图片的作用只有几个：
- 证明结果。
- 告诉读者按钮在哪里。
- 告诉读者参数怎么填。
- 证明某一步已经成功。
- 展示报错长什么样。
如果你先写完正文，再硬塞图片，文章很容易变成“看起来很丰富，但读者还是不会做”。
我常用的截图清单模板
你可以直接复制给 Codex：
请按下面格式给我列截图清单：
1. 图片名称：
2. 放在文章哪个位置：
3. 这张图要证明什么：
4. 读者看图时应该重点看哪里：
5. 如果没有这张图，是否会影响跟做：这样 Codex 会更像一个教程编辑，而不是一个只会写段落的助手。
五、用 Codex 做 Word、PDF、PPT、表格四件套
很多人听到 Codex 会处理文件，第一反应是：
那我是不是可以让它帮我做 Word、PDF、PPT、Excel？
答案是可以，但要注意一个重点：
不要让它一上来就做最终版，先让它做结构版。
比如你要做一个课程资料包，可以这样拆：
| 文件 | 让 Codex 做什么 | 你应该怎么验收 |
|---|---|---|
| Word | 写完整正文和标题层级 | 打开后目录清楚，段落不乱 |
| 把最终内容固定成可发送版本 | 打开后没有乱码，分页正常 | |
| 表格 | 整理选题、任务、状态、时间 | 字段合理，能筛选，能继续补数据 |
| PPT | 做课程展示稿 | 全屏播放不变形，重点清楚 |
我这次生成了一组示例文件：
office-pack/codex-word-demo.docx
office-pack/codex-pdf-demo.pdf
office-pack/codex-content-plan.xlsx
office-pack/codex-image-deck.pptx下面这张图是结果预览。你重点看四个卡片：Word、PDF、XLS、PPT。
能看到这一组结果，就说明“同一个主题拆成多种文件”这条路是通的。
做四件套的推荐提示词
你可以这样说：
我想围绕【主题】做一套资料包，请你在当前项目文件夹里生成四类交付物：
1. Word：一份结构完整的正文稿。
2. PDF：一份适合对外发送的定稿版。
3. 表格：一份内容计划表，包含模块、交付物、状态、优先级、预计耗时。
4. PPT：一套 16:9 演示稿，先做 6 页结构版。
要求：
- 先给我文件清单和每个文件的用途。
- 生成后告诉我每个文件在哪里。
- 每个文件都要有成功标志。
- 如果某个文件需要额外工具，请先说明。这里最容易踩的坑
第一个坑：文件能生成，但打开乱码。
解决方法：
让 Codex 明确使用中文字体，尤其是 PDF。你可以说：
请确保 PDF 能正常显示中文。如果需要，请使用系统中文字体或支持中文的 PDF 字体。第二个坑：PPT 能打开，但长得很丑。
解决方法：
先不要追求最终视觉。让它先做“结构版”，确认页数、标题和逻辑，然后再单独做视觉升级。
第三个坑：表格字段不够用。
解决方法：
让 Codex 先问你业务字段，或者让它给两版：
- 小白简洁版。
- 运营详细版。
六、做 PPT 的第一条路线：图片型 PPT
你说的第一种 PPT 很有代表性：
让 Codex 先生成一套图片，每张图片就是一页 PPT，然后把这些图片铺满幻灯片。
这条路线特别适合：
- 课程封面。
- 视觉海报型 PPT。
- 宣传页。
- 氛围感很强的主题演示。
- 不需要后续逐字编辑的展示稿。
它的本质是：
先生成 16:9 图片
↓
每张图片铺满一页 PPT
↓
得到一套图片型 PPT我这次用本地占位图模拟了这个流程。正式做的时候，你可以把占位图替换成 Codex 内置图片生成能力生成的图，也就是你说的 Image 2 路线。
下面这张就是一页 16:9 图片。重点看：它已经是完整的一页视觉稿，所以放进 PPT 以后不需要再排版。
图片型 PPT 的标准流程
第一步，让 Codex 先写页码结构。
不要直接让它生成图片。
先说：
我要做一套 8 页课程 PPT，主题是【主题】。
请先给我：
1. 每页标题。
2. 每页一句核心观点。
3. 每页视觉方向。
4. 每页图片生成提示词。
5. 每页是否适合放中文大字。第二步，让它生成每页图片提示词。
这里最重要的原则是：
中文小字不要完全交给图片模型。
图片模型做中文小字，经常会翻车。
更稳的办法是：
- 图片负责背景、构图、氛围、主视觉。
- 核心中文标题尽量少，字要大。
- 如果有复杂文字，后期用 PPT 或 HTML 叠上去。
第三步，逐页生成 16:9 图片。
提示词里要写清楚：
16:9 横版，适合作为 PPT 单页背景。
不要生成密密麻麻的小字。
画面留出标题区和正文区。
整体风格统一。第四步，把图片铺满 PPT。
成功标志：
- 每页没有白边。
- 全屏播放时不变形。
- 图片清晰。
- 文字没有糊。
- 页与页之间风格统一。
图片型 PPT 的优点和缺点
| 维度 | 说明 |
|---|---|
| 优点 | 视觉冲击强，适合封面、海报、课程宣传、氛围感内容 |
| 缺点 | 后续改字不方便，图片里小字容易翻车 |
| 适合人群 | 想快速做一套好看的展示稿，但不需要频繁改文字的人 |
| 不适合 | 需要反复改数据、改标题、改版本的正式汇报 |
如果你做的是课程封面、开场页、宣传型 PPT，这条路很香。
如果你做的是商业计划书、投融资路演、数据汇报，那我更建议你用下面的 HTML PPT。
七、做 PPT 的第二条路线：HTML 直接写 PPT
最近 HTML PPT 很火，不是没有原因的。
传统 PPT 对 AI 来说有点像黑盒：里面很多布局、对象、主题、母版、字体、动画，都藏在复杂结构里。
HTML 就不一样了。
HTML / CSS 对 Codex 来说是非常熟的东西，它可以：
- 直接写页面。
- 直接改样式。
- 直接打开浏览器预览。
- 直接截图检查。
- 直接定位哪一块文字溢出。
这也是为什么很多新工具开始往“幻灯片即代码”走。
我这次做了一套简单的 HTML PPT，入口是：
slides/html-ppt/index.html打开以后就是一个浏览器里的幻灯片。
这张图重点看两个地方：左边是标题，右边是这一页的内容卡片。它不是传统 PPT 文件，而是网页。
点击下一页以后，结构还能继续保持一致。
能看到这两页，就说明 HTML PPT 的基本流程已经跑通：
写 HTML
↓
浏览器打开
↓
翻页
↓
截图检查
↓
继续改代码现在流行的几个 HTML PPT 路线
我搜了一圈，目前值得关注的路线大概有这些：
| 工具 | 大白话解释 | 更适合谁 |
|---|---|---|
| open-slide | 面向 AI Agent 的 React 幻灯片框架，每页都是 1920×1080 画布上的 React 代码 | 想让 Codex 写 React 幻灯片的人 |
| HTMLSlides | 单文件 HTML 幻灯片，强调 AI Agent、无依赖、可打开即用 | 不想折腾工程配置的人 |
| frontend-slides | 更偏前端工程式的幻灯片仓库，适合组件化和主题化 | 会一点前端的人 |
| Slidev | Markdown + Vue 的开发者幻灯片工具 | 程序员、技术分享 |
| Marp | Markdown 写幻灯片，快速导出 | 内容优先、排版简单的分享 |
| reveal.js | 经典 HTML 演示框架 | 想要成熟生态和动效的人 |
这里有个小提醒：
你记的 OpenSlide 可能会搜到医学图像领域的 OpenSlide。做 PPT 的这个更准确叫 open-slide，官网是 open-slide.dev。
HTML PPT 的推荐提示词
你可以这样让 Codex 做：
请在当前项目里做一套 HTML PPT。
主题：【主题】
页数：8 页
比例：16:9
尺寸：1920x1080
风格：高级但清爽，不要模板感，不要紫蓝渐变科技风
要求：
1. 用一个 index.html 完成，先不要引入复杂依赖。
2. 支持左右方向键翻页。
3. 每页都要有明确标题和一句核心观点。
4. 字不要溢出画面。
5. 做完后打开浏览器预览并截图检查。
6. 如果发现文字太多，优先删字，不要把字号缩到看不清。这段提示词的关键是两点：
第一，固定 16:9。
第二，明确要求截图检查。
HTML PPT 的成功标志
你至少要检查这几个点：
- 浏览器能打开。
- 左右键能翻页。
- 每页没有文字溢出。
- 标题和正文层级清楚。
- 全屏时不变形。
- 截图后看起来像正式演示稿，而不是网页草稿。
HTML PPT 最容易踩的坑
第一个坑：一页塞太多字。
解决方法：
让 Codex 每页只保留一句核心观点，详细内容放到讲稿或备注里。
第二个坑：看起来像网页，不像 PPT。
解决方法：
给它明确的画布约束：
请把每页当成 1920x1080 的幻灯片画布设计，不要做成长网页。第三个坑：动效太多。
解决方法：
让它只做“进入动效”和“翻页动效”，不要搞循环动画。
八、用 Remotion / HyperFrames 做动画视频
如果说 HTML PPT 是“会翻页的网页”，那 Remotion / HyperFrames 更像是：
可以被代码控制的动画视频工程。
这块特别适合做：
- 知识博主视频。
- 信息图动画。
- 口播可视化。
- 排行榜视频。
- 数据变化视频。
- 工具流程演示视频。
Remotion 和 HyperFrames 怎么理解
不用纠结术语，先这么理解：
| 工具 | 大白话解释 | 更适合 |
|---|---|---|
| Remotion | 用 React 写视频画面和时间轴 | 复杂视频工程、强控制、React 用户 |
| HyperFrames | 用 HTML / CSS / JS 写视频，再渲染成 MP4 | AI Agent 驱动、HTML 思路、快速迭代 |
我本地之前沉淀过一套风格工作流，核心原则很有用：
- 先把脚本拆成章节。
- 先做最拥挤的一帧。
- 确认文字不出界，再加动画。
- 每个元素只做一次性进入，不要一直动。
- 导出有声版和无声版。
- 最后抽关键帧检查。
这点特别重要。
很多人第一次做动画视频会犯一个错：上来就要动效。
其实最稳的顺序是：
脚本
↓
章节
↓
每章终态画面
↓
最拥挤一帧检查
↓
加入动画
↓
预览
↓
渲染
↓
抽帧复查做动画视频的推荐提示词
你可以这样说：
我要用 Codex 做一条知识类信息图视频。
主题：【主题】
比例：16:9
时长：约 60 秒
风格：高级杂志信息图风，清爽、克制、不要短视频大字报
请先不要写代码。
先做：
1. 把口播稿拆成章节。
2. 给每个章节设计一个终态画面。
3. 标出最拥挤的一帧。
4. 列出需要哪些素材。
5. 说明用 Remotion 还是 HyperFrames 更合适。
确认后再生成工程。如果你要指定 HyperFrames，可以加一句：
优先使用 HyperFrames。请按“HTML 画面 + 时间轴 + 预览 + 渲染 + 抽帧检查”的流程执行。如果你要指定 Remotion，可以加一句：
优先使用 Remotion。请先做静态终态布局，再加动画，不要一开始就堆复杂动效。动画视频的成功标志
不是“它说渲染完成了”就完事。
至少要看：
- 预览能打开。
- 最拥挤的一帧文字不溢出。
- 章节切换不卡。
- 字幕或标题没有出画。
- 导出的 MP4 能正常播放。
- 如果要进剪映，最好再导出无音频版。
这块最容易踩的坑
第一个坑：画面太像 PPT。
解决方法：
给 Codex 一个风格约束，比如：
像一本高级科技杂志的信息图页面，不要像普通 PPT。第二个坑：所有东西一直动。
解决方法：
明确禁止循环动画：
元素只做一次性进入动画，落位后保持静止。不要呼吸、不要漂浮、不要循环发光。第三个坑：只看开场，不看最挤的一帧。
解决方法：
让 Codex 抽取每章内容最多的一帧截图。
请不要只截开场。请抽取每个章节文字最多的一帧，检查有没有出界、重叠、字号过小。九、用 Codex 做一个小项目，并在右侧预览
这是 Codex App 最应该被小白掌握的一块。
你不需要一上来做复杂 SaaS，也不需要搞数据库。
先做一个很简单的小项目就行：
- 一个网页计算器。
- 一个内容排期看板。
- 一个课程资料目录。
- 一个小工具导航页。
- 一个 HTML PPT 预览器。
这次我做的是一个“Codex 进阶课工作台”小网页。
项目目录大概长这样：
这张图重点看文件分工：
index.html是网页结构。styles.css是样式。script.js是交互。slides/html-ppt/index.html是 HTML PPT。office-pack/里是 Word、PDF、表格、PPT。
小白不用一上来理解每行代码。
你先知道：
一个能跑的小项目，不是只有一段代码，而是一组互相配合的文件。
小项目的推荐提示词
你可以这样说：
请在当前项目文件夹里做一个很小的网页项目，用来演示【主题】。
要求：
1. 只用 HTML、CSS、JS，不要先引入复杂框架。
2. 首页要能直接展示最终效果。
3. 请生成 README，告诉我怎么打开。
4. 做完后启动本地预览。
5. 打开预览截图，并检查有没有文字重叠、按钮溢出、移动端排版问题。
6. 最后用小白能懂的话解释每个文件是干什么的。这段提示词适合第一次练手。
因为它足够小，不容易失控。
小项目的成功标志
你至少要看到：
- 项目文件夹里有
index.html。 - 浏览器能打开页面。
- 页面不是空白。
- 手机上也能看。
- Codex 能解释每个文件的作用。
- 你知道下一步要改哪里。
如果右侧预览里能直接看到页面，那就很爽。
如果右侧预览打不开，也不要慌，可以让 Codex 告诉你本地地址，比如：
http://127.0.0.1:8765/然后你在浏览器里打开也可以。
十、进阶使用里的安全边界
Codex 能做很多事，但不代表什么都应该让它做。
尤其是下面几类，建议非常谨慎：
| 场景 | 建议 |
|---|---|
| 微信 | 不要让 Codex 操作微信 |
| 付款页面 | 不要让它自动点击付款、订阅、购买 |
| 社媒发布 | 发布前必须人工确认 |
| 删除文件 | 先让它列出要删什么，再确认 |
| 私人文件夹 | 不要把整个桌面、下载、聊天记录目录交给它 |
| Cookie / API Key | 不要写进教程正文和截图里 |
我自己的习惯是：
凡是涉及账号、钱、隐私、发布、删除，一律让 Codex 先解释风险，再人工确认。
小白最安全的练习方式还是：
新建干净文件夹
↓
只放演示素材
↓
只做可撤回的小任务十一、常见踩坑和排查
1. Codex 做了一堆文件，我不知道哪个是最终版
让它整理文件清单：
请按表格列出你刚刚生成的所有文件：
1. 文件路径
2. 文件用途
3. 我应该打开哪个看最终结果
4. 哪些是中间文件，可以先不用管2. 右侧预览和我想的不一样
不要急着重做。
直接让它基于截图改：
请根据当前预览截图做修改：
- 标题太大，压住了正文。
- 右侧卡片太挤。
- 底部留白太少。
请只改样式，不要改内容结构。3. HTML PPT 文字溢出
让它优先删字，而不是疯狂缩小字号。
这页文字太多，请保留核心观点，删掉解释性长句。不要把字号缩到看不清。4. 图片型 PPT 里的中文乱码
这是图片生成路线的老问题。
解决办法：
- 少放中文。
- 字要大。
- 复杂文字后期叠加。
- 或者改用 HTML PPT。
5. PDF 中文显示不正常
让 Codex 使用中文字体重新生成。
PDF 里的中文显示不正常，请使用支持中文的字体重新导出，并重新检查 PDF。6. 动画视频渲染出来才发现画面挤
不要只看最终 MP4。
让 Codex 抽帧：
请抽取每个章节内容最多的一帧，保存为截图，然后检查文字是否出界、是否重叠、字号是否太小。十二、我推荐的小白进阶路线
如果你刚看完上一篇入门教程，这篇不要一次全做完。
按这个顺序来最稳：
- 先让 Codex 写一篇图文教程。
- 再让它列截图清单。
- 然后让它生成 Word 和 PDF。
- 再让它做一张内容计划表。
- 接着尝试图片型 PPT。
- 然后尝试 HTML PPT。
- 最后再碰 Remotion / HyperFrames。
- 等这些都跑通过，再让它做小项目。
为什么小项目放后面？
因为小项目虽然看起来简单，但它会牵扯：
- 文件结构。
- 本地预览。
- 浏览器检查。
- 代码修改。
- 响应式适配。
你前面先把“文件交付”和“截图复查”的习惯练出来，再做项目会稳很多。
十三、可以直接复制的总提示词
如果你想一次性启动一个进阶任务，可以复制下面这段：
我想用 Codex App 做一个进阶实战项目，主题是【主题】。
请你先不要急着执行，先帮我拆成任务：
1. 图文教程：Markdown 正文 + 截图清单。
2. 办公四件套：Word、PDF、表格、PPT。
3. PPT 两条路线：
- 图片型 PPT：先生成每页 16:9 图片，再铺满 PPT。
- HTML PPT：用 HTML/CSS/JS 写一套可预览、可截图检查的幻灯片。
4. 动画视频：判断更适合 Remotion 还是 HyperFrames。
5. 小项目：做一个可以在浏览器预览的小网页。
要求：
- 所有文件都放在当前项目文件夹里。
- 先给文件清单和截图清单。
- 每一步都写成功标志。
- 生成可视化结果后必须打开预览并截图检查。
- 如果截图里有敏感信息，必须提醒我打码。
- 不要操作微信、付款、删除、发布类动作。
- 如果你不确定，先问我，不要自己乱点。这段提示词的作用不是让 Codex 一次性神奇地做完所有事。
它的真正作用是让 Codex 先进入“项目工作台模式”。
它会知道：
- 这不是普通聊天。
- 这是一组交付物。
- 每个交付物都要能打开。
- 每个阶段都要有成功标志。
十四、写在最后
上一篇教程解决的是：
Codex App 到底是什么，我应该从哪里开始点。
这篇教程解决的是：
我怎么把 Codex App 用成一个真正能交付内容和项目的工作台。
小白刚开始不要贪多。
你先跑通一个非常小的闭环：
让 Codex 写一篇教程
↓
列截图清单
↓
生成一个 Word
↓
生成一个 PDF
↓
做一张表格
↓
做一页 PPT
↓
打开预览截图
↓
让 Codex 根据截图修改只要你跑通这一遍，后面很多东西都会突然变简单。
因为你会发现，Codex 最强的地方不是“第一次生成就完美”，而是：
它能一直陪你把东西改到能用。
这才是 Codex App 真正像超级 APP 的地方。
参考资料和延伸链接
-
OpenAI Academy：Codex 入门与项目工作方式
https://openai.com/academy/codex-how-to-start -
OpenAI：Codex App 介绍
https://openai.com/index/introducing-the-codex-app/ -
open-slide：面向 Agent 的 React 幻灯片框架
https://open-slide.dev/ -
HTMLSlides：单文件 HTML 幻灯片与 AI Agent 工作流
https://htmlslides.com/docs/ -
Slidev：Markdown + Vue 的开发者幻灯片工具
https://sli.dev/ -
Marp：Markdown 写幻灯片
https://marp.app/ -
reveal.js：经典 HTML 演示框架
https://revealjs.com/ -
Remotion：用 React 做视频
https://www.remotion.dev/docs/ -
HyperFrames：用 HTML 渲染视频，面向 AI Agent
https://hyperframes.heygen.com/introduction