Table of contents
背景
我使用 vibe coding 做出来的订阅管理移动 app Renewly 产出了很多份文档，我将针对这些文档逐个分析，其一是想知道这些规范文档是否规范，来判定后续这些文档的必要性，其二是通过查看这些文档和执行计划，与 V0 版本的代码进行比对分析，确认 AI 真的有在认真按照这些执行吗？
👉 Renewly：用 Codex 尝试从零搭建一个订阅管理 Mobile Web 项目
先说结论
-
这份 MVP 实施型 PRD 是否有生成的必要？
有，但感觉不应该将
PRD和 技术开发架构 融合在一起，另外感觉有些地方写的描述很简单，需要更丰富和详细才行。 -
实际生成的代码有达到这份规范文档的要求吗？也就是
AI有按照这个去做吗？有，但是和第一个问题一样，由于很多部分内容不尽详细，导致缺失描述的部分表现很差。
分析
产品范围
## 3. 产品范围
## 3.1 MVP 包含范围
MVP 首期必须实现以下页面和能力：
### A. 首页（Home）
- 展示页面标题
- 展示本月预计花费汇总卡片
- 展示订阅总数与累计花费摘要
- 展示订阅列表
- 支持从首页进入新增页
- 支持点击列表项进入订阅详情页从这里可以看出，这份实施型 PRD 在描述原型结构和交互范围，已经做的很全。
页面信息架构
## 5. 页面信息架构
## 5.1 一级导航结构
底部 Tab 固定为三项：
1. 首页
2. 统计
3. 设置
## 5.2 页面路由建议
- `/` 首页
- `/subscriptions/new` 新增订阅
- `/subscriptions/library` 预置库选择页或抽屉
- `/subscriptions/:id` 订阅详情页
- `/subscriptions/:id/edit` 编辑页
- `/stats` 统计页
- `/settings` 设置页从这里就能看出为什么说是 实施型 ，除了产品定义，这里把路由也规划进去了，这其实是开发规范的一部分，在传统 PRD 是不应该存在的。
核心业务对象与数据模型
## 6. 核心业务对象与数据模型
## 6.1 Subscription（订阅对象）
## 6.2 分类枚举
## 6.3 货币枚举
## 6.4 周期枚举
## 6.5 提醒字段偏技术，但也有一部分是产品需要定义的，比如 分类枚举 产品文档肯定需要先定义。
核心业务规则
## 7. 核心业务规则
## 7.1 本月预计花费计算规则
首页顶部“本月预计花费”用于展示当前自然月内预计发生的扣费总额。
规则：
- 筛选状态为 active 的订阅
- 计算当前月内落入账单周期的订阅金额
- 金额统一转换为主币种后汇总（MVP 可先用静态汇率或不换汇，仅占位）
- 未设置开始时间的订阅不得进入统计
## 7.2 累计花费规则
累计花费用于展示用户截至当前时间内的总支出，可按模拟规则计算：
- 从开始订阅时间到当前时间，按周期推导已发生扣费次数
- 首期允许前端简化为 mock 计算
## 7.3 列表展示状态文案
首页列表中每个订阅项的右下辅助文案遵循以下规则：
- 当期已扣费：显示“本月已扣费”或等效文案
- 未来周期：显示“每月X日扣费”/“每年X月X日扣费”
- 非规则情况：显示下一次扣费日期
## 7.4 结束订阅时间
- 可为空
- 为空时详情页显示 `--`
- 编辑页中为空时显示占位文案“请选择结束时间”
- 有结束时间且已过期时状态为 expired
## 7.5 免费试用周期
MVP 支持展示和选择，但可先按字段存储处理，不要求复杂试用转正式订阅计算。
## 7.6 删除规则
- 删除为软删除体验即可
- 删除后首页与统计页应立即刷新
- 可在本地存储中直接移除数据从这里开始可以发现，使用 ChatGPT 来做竞品分析，是非常棒的，很多细节都考虑进去了，你正式使用时可以针对内容逐步打磨细化。
优先级
## 11. 优先级
### P0（必须）
- 首页
- 新增/编辑页
- 详情页
- 统计页
- 设置页
- 本地存储
- 主币种切换
- 基础排序
- UI 风格统一
### P1（应该）
- 图标选择流程更完整
- 更真实的历史账单生成
- 更合理的统计图数据映射
- 空状态与异常状态
### P2（可后续）
- AppStore 获取
- 同步能力
- RevenueCat 对接
- 提醒推送
- 登录系统产品开发生命周期分为三阶段
里程碑建议
## 13. 里程碑建议
1. 先完成文档约束
2. 先搭样式 token 与基础组件
3. 完成首页静态还原
4. 完成新增/编辑/详情静态还原
5. 完成统计/设置静态还原
6. 接入本地数据
7. 完成交互收口和验收修正文档做后的建议，算是纯静态前端项目的开发流程，也就是必定需要先搭建基础组件，以此来形成所以页面的风格统一。
原文
以下是 《Renewly MVP 实施型 PRD》的原文：
# Renewly MVP 实施型 PRD
## 1. 文档目的
本文档用于约束 Renewly 第一阶段（MVP）产品范围、页面结构、核心数据、交互规则与验收边界，作为后续 AI 生成代码、拆分组件、编写 Mock 数据、补充交互逻辑的统一依据。
本 PRD 不是面向融资、汇报或市场宣传的传统产品文档，而是面向执行落地的实施型文档。目标是减少 AI 生成结果发散、避免视觉风格漂移、降低返工成本。
---
## 2. 项目概述
### 2.1 项目名称
Renewly
### 2.2 项目定位
一个面向个人用户的订阅管理 Mobile Web 项目，用于记录和管理各类订阅服务，包括但不限于：
- 影音娱乐类订阅
- 效率工具类订阅
- 云服务类订阅
- 交通/生活服务类订阅
- 自定义手动录入订阅
### 2.3 项目目标
帮助用户以接近原生 iOS 应用的体验：
- 统一管理所有订阅项目
- 查看当前月预计花费
- 查看订阅分类占比与统计
- 新增、编辑、删除订阅
- 设置主币种、主题、排序等偏好
- 获取到期前提醒信息
### 2.4 当前技术栈
- Vite
- React
- pnpm
- Tailwind CSS v4
- shadcn/ui
### 2.5 设计实现原则
- 优先移动端视觉呈现
- 尽可能贴近参考竞品图
- 布局比例、留白、字体层级、圆角、卡片边界、浅色背景、底部导航等需高度统一
- 禁止直接套用 shadcn 默认桌面风样式而不做移动端风格重构
- 所有页面优先按 390px 宽度基准设计，再兼容常见手机宽度
---
## 3. 产品范围
## 3.1 MVP 包含范围
MVP 首期必须实现以下页面和能力：
### A. 首页（Home）
- 展示页面标题
- 展示本月预计花费汇总卡片
- 展示订阅总数与累计花费摘要
- 展示订阅列表
- 支持从首页进入新增页
- 支持点击列表项进入订阅详情页
### B. 新增订阅页（Create Subscription）
- 支持从预置产品库快速添加
- 支持手动创建自定义订阅
- 支持填写基础字段
- 支持选择图标
- 支持选择币种、分类、周期、提醒
- 支持保存数据
### C. 编辑订阅页（Edit Subscription）
- 支持编辑已有订阅字段
- 支持删除订阅
- 支持更新图标和说明
- 支持保存修改
### D. 订阅详情页（Subscription Detail）
- 展示订阅头图标与名称
- 展示价格、周期、开始订阅时间、结束订阅时间等核心信息
- 展示账单/续费历史列表
- 支持跳转到编辑页
### E. 统计页（Stats）
- 支持时间维度切换：本月 / 本年 / 全部
- 展示总花费概览
- 展示分类占比环图
- 展示分类金额与项目数量
- 展示时间趋势柱状图
### F. 设置页（Settings）
- iCloud 同步展示占位
- 主币种设置
- 密码管理占位
- 主题模式设置
- 语言设置
- 首页排序设置
- RevenueCat ID 展示/输入占位
- 意见反馈入口占位
---
## 3.2 MVP 暂不包含范围（非目标）
以下能力首期不做或只做占位，不进入本阶段真实实现：
- 用户注册登录系统
- 多设备账号同步的真实后端实现
- App Store 自动拉取真实订阅数据
- Google Play 自动拉取真实订阅数据
- 推送通知真实打通
- 支付接入
- 分享订阅
- 团队协作
- 导出报表
- 深度筛选和高级搜索
- RevenueCat 实时数据集成
- 复杂预算计划与预测模型
---
## 4. 目标用户
主要面向：
- 有多个数字订阅的个人用户
- 习惯在手机上整理财务/周期服务信息的用户
- 希望掌握月度固定支出的用户
- 对界面美观和信息秩序较敏感的用户
---
## 5. 页面信息架构
## 5.1 一级导航结构
底部 Tab 固定为三项：
1. 首页
2. 统计
3. 设置
## 5.2 页面路由建议
- `/` 首页
- `/subscriptions/new` 新增订阅
- `/subscriptions/library` 预置库选择页或抽屉
- `/subscriptions/:id` 订阅详情页
- `/subscriptions/:id/edit` 编辑页
- `/stats` 统计页
- `/settings` 设置页
---
## 6. 核心业务对象与数据模型
## 6.1 Subscription（订阅对象）
建议字段如下：
```ts
type Subscription = {
id: string
name: string
iconType: "preset" | "upload" | "appstore"
icon: string
category: SubscriptionCategory
price: number
currency: CurrencyCode
billingCycle: BillingCycle
trialCycle?: TrialCycle | null
startDate: string
endDate?: string | null
reminderDays: number | null
note?: string
source: "manual" | "preset"
status: "active" | "expired" | "cancelled"
nextBillingDate?: string | null
isCurrentPeriodPaid?: boolean
createdAt: string
updatedAt: string
}
```
## 6.2 分类枚举
```ts
type SubscriptionCategory =
| "热门"
| "影音娱乐"
| "效率工具"
| "阅读学习"
| "生活方式"
| "社交"
| "金融"
| "交通"
| "其他"
```
## 6.3 货币枚举
MVP 首期支持：
- CNY
- USD
- JPY
- EUR
- HKD
## 6.4 周期枚举
```ts
type BillingCycle =
| "weekly"
| "monthly"
| "quarterly"
| "yearly"
| "custom"
```
## 6.5 提醒字段
建议使用整数天数：
- 0：当天提醒
- 1：提前 1 天
- 3：提前 3 天
- 7：提前 7 天
- 15：提前 15 天
- 30：提前 30 天
---
## 7. 核心业务规则
## 7.1 本月预计花费计算规则
首页顶部“本月预计花费”用于展示当前自然月内预计发生的扣费总额。
规则：
- 筛选状态为 active 的订阅
- 计算当前月内落入账单周期的订阅金额
- 金额统一转换为主币种后汇总（MVP 可先用静态汇率或不换汇，仅占位）
- 未设置开始时间的订阅不得进入统计
## 7.2 累计花费规则
累计花费用于展示用户截至当前时间内的总支出，可按模拟规则计算：
- 从开始订阅时间到当前时间，按周期推导已发生扣费次数
- 首期允许前端简化为 mock 计算
## 7.3 列表展示状态文案
首页列表中每个订阅项的右下辅助文案遵循以下规则：
- 当期已扣费：显示“本月已扣费”或等效文案
- 未来周期：显示“每月X日扣费”/“每年X月X日扣费”
- 非规则情况：显示下一次扣费日期
## 7.4 结束订阅时间
- 可为空
- 为空时详情页显示 `--`
- 编辑页中为空时显示占位文案“请选择结束时间”
- 有结束时间且已过期时状态为 expired
## 7.5 免费试用周期
MVP 支持展示和选择，但可先按字段存储处理，不要求复杂试用转正式订阅计算。
## 7.6 删除规则
- 删除为软删除体验即可
- 删除后首页与统计页应立即刷新
- 可在本地存储中直接移除数据
---
## 8. 页面详细需求
## 8.1 首页
### 页面目标
让用户一眼看到本月支出压力和主要订阅项。
### 必备区块
1. 页面标题区
2. 新增按钮
3. 本月预计花费卡片
4. 已订阅摘要条
5. 订阅列表
6. 底部 TabBar
### 列表项展示字段
- 图标
- 名称
- 开始订阅时间
- 价格
- 周期/状态辅助文案
### 交互要求
- 点击右上角加号进入新增流程
- 点击列表项进入详情页
- 首页列表支持按设置项定义的排序方式展示
### 空状态
- 无订阅时展示空状态插画/占位
- 空状态提供“新增订阅”按钮
---
## 8.2 新增订阅页
### 页面目标
允许用户快速从产品库选择或手动录入订阅。
### 页面组成
1. 顶部关闭按钮
2. 分类 tabs
3. 自定义入口
4. 搜索框
5. 预置产品列表
6. 点击产品后进入编辑/确认页面
### 自定义新增页字段
- 图标
- 名称
- 分类
- 价格
- 订阅周期
- 免费试用周期
- 开始订阅时间
- 结束订阅时间
- 订阅到期提醒
- 订阅描述
### 图标来源选项
- 从 AppStore 获取（首期可占位）
- 选择预置图标
- 从相册选择（首期可只做 UI 占位）
### 提交要求
- 名称必填
- 价格必填，默认 0
- 周期必填
- 开始订阅时间必填
- 保存成功后返回首页并刷新列表
---
## 8.3 订阅详情页
### 页面目标
展示单个订阅完整信息和账单历史。
### 区块组成
1. 返回按钮
2. 编辑按钮
3. 顶部品牌图标区
4. 名称
5. 核心信息卡片
6. 历史账单列表
### 核心信息卡片字段
- 价格
- 订阅周期
- 开始订阅时间
- 结束订阅时间
### 历史账单列表字段
- 图标
- 周期
- 价格
- 日期
- 当前项高亮文案（如“每月12日扣费”）
---
## 8.4 编辑订阅页
### 页面目标
允许用户修改已有订阅，保持与新增页高度一致。
### 额外要求
- 顶部有删除按钮
- 右上角为保存按钮
- 保存后回到详情页或首页
- 删除需有确认逻辑（首期可简化）
---
## 8.5 统计页
### 页面目标
帮助用户按时间维度理解支出结构。
### 区块组成
1. 页面标题
2. 时间切换 segmented control
3. 环形统计卡片
4. 分类详情列表
5. 趋势柱状图
6. 底部 TabBar
### 指标要求
- 显示总金额
- 显示本月预计花费/本年花费/全部花费
- 按分类聚合金额占比
- 显示分类对应订阅项目数量
### 图表要求
- 环图以分类金额为依据
- 柱状图为时间序列支出
- 数据不足时允许显示占位数据
---
## 8.6 设置页
### 页面目标
集中管理个人偏好。
### 区块组成
- iCloud 同步
- 主币种设置
- 密码管理
- 主题模式
- 语言设置
- 首页排序
- RevenueCat ID
- 意见反馈
### 首期行为要求
- 主币种设置可真实切换
- 主题模式可真实切换 light/dark/system
- 首页排序至少支持 2~3 种方式
- 其他项可先展示占位页或弹层
---
## 9. 存储方案建议
MVP 推荐优先采用本地存储：
- `localStorage` 或 `IndexedDB`
- 使用 React state + 持久化方案管理
- 统一封装 storage service，避免页面直接读写
建议实体：
- subscriptions
- settings
- currencies
- preset products
---
## 10. 技术实现边界
## 10.1 首期建议
- 先使用 Mock 数据完成页面还原
- 再接入本地真实增删改查
- 图表使用轻量方案
- 所有业务先前端闭环，不引入后端
## 10.2 不建议首期做的事
- 一开始就上复杂状态管理框架
- 一开始就做全量动画
- 一开始就追求真实第三方同步
- 一开始就做复杂国际汇率计算
---
## 11. 优先级
### P0（必须）
- 首页
- 新增/编辑页
- 详情页
- 统计页
- 设置页
- 本地存储
- 主币种切换
- 基础排序
- UI 风格统一
### P1（应该）
- 图标选择流程更完整
- 更真实的历史账单生成
- 更合理的统计图数据映射
- 空状态与异常状态
### P2（可后续）
- AppStore 获取
- 同步能力
- RevenueCat 对接
- 提醒推送
- 登录系统
---
## 12. 验收标准
### 功能验收
- 可以新增订阅
- 可以编辑订阅
- 可以删除订阅
- 首页可展示列表和汇总
- 统计页可展示图表和分类
- 设置页可保存偏好
- 刷新后数据不丢失
### 视觉验收
- 移动端宽度下整体视觉接近参考图
- 页面结构、区块顺序、布局比例一致
- 卡片圆角、边框、留白统一
- 列表、表单、底部导航风格一致
- 不出现明显桌面端控件观感
### 代码验收
- 通用组件有复用
- 页面结构清晰
- 样式 token 可复用
- 不允许大面积重复 JSX 结构
- 不允许把颜色、圆角、阴影硬编码散落各处
---
## 13. 里程碑建议
1. 先完成文档约束
2. 先搭样式 token 与基础组件
3. 完成首页静态还原
4. 完成新增/编辑/详情静态还原
5. 完成统计/设置静态还原
6. 接入本地数据
7. 完成交互收口和验收修正