我尝试新的方式，从头开始让 codex 搭建一个订阅管理的 mobile web app，因为苹果开发者年费昂贵的原因，在没有好的能变现的 app 之前，还是不打算上 apple app store
Table of contents
Open Table of contents
Renewly 项目背景
- 这是一个订阅管理
app，可以实现订阅的管理、按周期进行费用统计、设置； - 我在
apple app store上找了一个我认为ui很好看的订阅管理应用，我对app的页面进行了截图，作为竞品图片； - 一切都让
ChatGPT5.4从头开始规划，告诉它我会让ai去执行它做的规划； - 使用
5.3-CodeX执行代码修改，每一步的结果都复制给ChatGPT，让它指挥给出指令文案，复制给Codex去执行，Codex使用了 计划模式 ； Codex未使用任何Skill；
第一步：制定规范文档
我先使用 Vite + React + pnpm + Tailwind v4 + shadcn 初始化好了项目，然后使用 ChatGPT 告诉它我的项目是个订阅管理 mobile web app，询问它我第一步应该干嘛，并提供了参考应用的截图，告诉它尽量模仿和还原，它的回答片段如下：
你不需要写那种大而全、给老板看的 PRD。
你需要的是一份给 AI 和开发执行的“实施型 PRD / UI 实现规范”。
你现在最该写的，不是一份文档，而是 4 份东西
1）产品实施 PRD
2）UI 还原规范
3）组件规范 / 前端架构说明
4）验收标准文档
结合你当前阶段，我建议的开发顺序
不要直接上业务逻辑。
先按这个顺序推进：
第一阶段
...
第五阶段
最后再做数据接入、存储、提醒逻辑
最后给你一个最实用的结论
你下一步最合理的动作不是立刻写代码，而是先产出这 3 份文件：
docs/renewly-mvp-prd.md
docs/renewly-ui-spec.md
docs/renewly-component-architecture.md
这三份比单独一份 PRD 更有用。然后我就直接让它给我提供了这三份文档，由于考虑到项目功能还算多，ChatGPT 也列出了计划大纲，我就让它给我生成五份执行计划。
阶段一:文档约束与实施基线
阶段二:基础设计代币与通用组件脚手架
阶段三:核心页面静态还原
阶段四:数据接入、本地存储与核心交互闭环
阶段五:交互收口、视觉微调与最终验收我大概看了眼计划概要，担心它设计后端 api 接入的方式，我虽然知道使用本地浏览器是无法同步甚至容易丢失数据的，但是初步 demo 我还是想让它使用浏览器本地缓存来做，于是我提问：“关于你给的这五个阶段执行计划，是否有数据存储方案的设计”
- 有设计
- 但目前属于阶段计划里的“存储实施提纲”
- 还没有形成一份独立、足够约束 AI 的存储设计文档
- 建议现在就补
Renewly 数据存储方案设计文档 `docs/renewly-data-storage-design.md`第二步：执行计划
我告诉 ChatGPT 我将要让 ai 开始执行计划，请它给一段描述文字给我通知 ai 开始执行计划，这里 codex 我使用了 计划模式，之前我一直没有尝试，使用后发现类似我让它给我一个实施清单一样，先给出计划，再询问你是否执行。
每个阶段完成后，我都将 codex 执行完的落实结果，复制给 ChatGPT ，然后它会给我下一阶段的执行命令文案。
在第一阶段执行后，codex 按计划生成了一个 plans/renewly-phase-1-baseline-lock.md
**2. 基线文档（唯一事实源）**
以下 5 份文档已锁定为后续开发唯一事实源：
1. `docs/renewly-mvp-prd.md`
2. `docs/renewly-ui-spec.md`
3. `docs/renewly-component-architecture.md`
4. `docs/renewly-data-storage-design.md`
5. `plans/renewly-phase-1-plan.md`
执行约束：
- 后续实现必须先阅读以上文档再开发。
- 如发生冲突，以本清单中的基线决议为准，并回写文档统一口径。
**3. 阶段范围锁定**
**4. 路由与组件优先级锁定（供 Phase 2 执行）** 里面相当于一个针对整个项目读取后总结的执行原则，后期 ChatGPT 给的命令文案，都会将这 5 个文件带上，提醒 codex 去读取
第三步：收口
完成所有执行计划后，ChatGPT 列了两个后续计划：
-
部署前收口
-
第二期规划
我继续让它做 部署前收口 ，打算这一步之后，预览效果。
这里 codex 询问了我部署方式的选择 Vercel / Netlify / Nginx 的部署配置 ，我这里让 ChatGPT 生成了我先本地预览的命令:
本轮先不要生成 Vercel / Netlify / Nginx 的专属部署配置。
原因：
* 我当前只是本地通过 `pnpm dev` 预览
* 后续目标部署平台是 Cloudflare
* 本轮只需要做平台无关的部署前收口，不绑定具体托管商
请调整为以下范围：
1. 不生成 Vercel / Netlify / Nginx 专属配置文件
2. 只检查和整理与静态部署通用相关的内容：
* `pnpm build` 产物是否正常
* Vite 静态资源路径是否合理
* SPA 路由回退需求是否明确
* README 中补充本地运行、构建、静态部署说明
* 输出一份“Cloudflare 后续部署时需要注意的要点”，但本轮不真正接入 Cloudflare 配置
3. 当前验收以本地开发预览和生产构建可用为主
4. 本轮不要引入任何和具体托管平台绑定的额外实现
codex 询问了应用部署在根目录 / 还是二级目录 /renewly 的问题，我有点疑惑，不应该是 /dist 部署吗，ChatGPT 给我的解释是，如果是单独域名或者二级域名，就选根目录，这是在询问我项目 base path 的问题
第四步：预览
收口完成后，codex 建议我跑一次 pnpm preview 来验证生产预览启动是否正常。
报错了
installHook.js:1 The result of getSnapshot should be cached to avoid an infinite loop
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
页面闪一下变成白屏，尝试截图给 codex 修复，修复成功后，我看了预览效果，给出以下分数：
- 颜色还原度
80% - 结构还原度
80% - 样式还原度
50%，差强人意，字体大小粗细很违和，圆角都不对，不知道是不是图片不能识别的很好，阴影也不对 - 图表等复杂组件还原度
30% - 表单组件操作反馈还原
0%，都是原始表单 - 没有任何动效
- 很多功能可能是因为没有截取操作后的效果，比如修改密码，功能都没有实现
第五步：初步使用总结
-
同一个窗口记忆体使用情况
68%已使用175k标记，共258k -
周额度使用情况
74%->65%
初步结论：
- 给参考图片后，
codex能很好的还原颜色和结构，但是字体大小、粗细、圆角、阴影这些细节差强人意 - 作为一个有参考图的开发结果，我认为比没有参考图得到的好很多，细节可以再调优，页面结构和共用组件的规范设计，让后期很多东西很好调整
- 本轮没有使用任何前端
ui/uxskill，后续有机会可以试试使用后的差别 - 表单没有制定提交规则，使用体验很差
- 依然会形成卡片套卡片的设计，这在我使用
codex开发没有非常细节的约束前端时，多个项目出现这种现象
思考
- 使用
codex的5.4是否会比5.3-codex出来的效果更好，待验证 ； - 在没有给任何流程规范的前提下，使用
ai先制定详细的规范和执行计划是否更好，结论是从目前看更好 ； - 使用
ChatGPT来指挥整个流程是否有必要，目前来看，如果计划制定的完善和详细，没有指挥的必要 ； - 使用前端或者
UI/UX skill，是否会表现的更好？ 待验证 ； - 针对
Vibe Coding，是否需要制定一套通用的完整流程，是否需要针对不同项目类型，制定一套对应的代码工程方面的架构规范？
关联
针对这个实验，需要逐个的分析 ai 给出的文档或者计划产物的详细内容。