AI 实践一个按章节浏览的照片故事页，包含封面、时间线、图片说明和结尾。
开始前准备
先把材料准备好，再让 Codex 动手。缺少真实内容时先留空，不要让它替你编造。
- 选择 8 到 15 张自己有权使用的照片
- 为每张照片写一句时间、地点或故事
- 把图片复制到单独练习目录
第一版只做这些
这一轮只完成最小可用版本。下面四项全部完成以后，再考虑增加功能。
- 封面交代主题和时间范围
- 照片有稳定顺序与替代文字
- 图片在不同屏幕下不变形
- 结尾给出完整回顾
跟着完成一次
不要一次把全部要求扔给 Codex。按顺序完成，每一步都先看结果，再继续下一步。
- 01
盘点图片尺寸、方向和文件名，生成不修改原图的清单。
- 02
按故事而非文件名设计三到五个章节。
- 03
生成响应式图文页面并补充替代文字。
- 04
压缩副本而不是覆盖原图，检查加载顺序和版面节奏。
- 05
用手机滚动完整阅读一次，修复突兀跳动和文字过窄。
复制给 Codex 的完整任务
把方括号中的内容替换成你自己的真实材料，再复制给 Codex。
项目开工提示词
我想把当前目录中的照片做成一个线上故事展览。请先只读盘点图片文件，输出文件名、方向、尺寸和可能重复项，不要移动、重命名或覆盖原图。根据我提供的【主题】【时间线】【每张图片说明】提出三到五个章节，等我确认后再制作静态网页。页面需要封面、章节导航、图片说明、替代文字和结尾；生成的压缩图片只能放在新的输出目录。完成后启动本地页面，在桌面和手机宽度完整滚动一遍，检查图片变形、加载跳动、文字可读性和断链，并提供启动命令与素材来源清单。
Skill 怎么参与
Skill 只是帮助你加快某一步，不是完成项目的前提。没有安装，也可以让 Codex 按同样的目标继续做。
Impeccable
用于控制图文节奏，让照片成为主角而不是卡片装饰。
Browser / Playwright
用于长页面滚动、图片加载与移动端检查。
第一版完成以后
确认第一版可以使用，再复制下面这段升级任务。不要在基础功能还没跑通时提前增加。
项目升级提示词
请为现有照片故事增加两种不破坏主线的浏览方式：按时间查看和按主题查看。继续使用当前图片副本，不修改原文件；先说明数据结构和网址变化，再实现筛选、键盘操作和返回原位置，并在手机端回归验证。
常见偏差
- 直接按文件名排序，故事没有阅读主线。
- 覆盖或重编码唯一的原始照片。
完成检查
- 所有图片均来自可公开素材。
- 每张图片有说明和替代文字。
- 手机滚动没有横向溢出或明显跳动。
- 原始图片未被修改。