TaoTao/.kiro/specs/capcut-create-export-confidence/requirements.md

# Requirements Document

## Introduction

本规格定义一个高保真、可交互的移动端原型，用于演示对 CapCut "创作—导出"链路的重新设计。设计的核心主题是**让创作者在投入时间之前就心里有数（Confidence Before Investment）**。

当前 CapCut 的核心摩擦在于"创作—导出链路中的不确定性"：

- 用户做到一半才发现某功能/模板是 Pro，被"中途拦截"；
- 面对分散的 AI 工具不知道用哪个、会不会扣 credit；
- 临到导出才发现有水印、清晰度被锁、credit 已用光。

本原型通过四个动作回应上述痛点：(1) 意图优先的起点；(2) 一个聪明的 AI 编排入口（魔法按钮）；(3) 全程免费/Pro 透明化；(4) 导出预检（pre-flight）。原型以一条完整闭环主线（"30 秒带货/口播视频"）走通：意图选择 → AI 编排 → 透明计费 → 导出预检，并提供 Before/After 对比以量化改进。

本文档描述的"系统"均指该原型及其内部模块，所有行为均为前端模拟（纯 HTML/CSS/JS，无后端、无真实 AI 调用）。

## Glossary

- **原型系统 (Prototype_System)**：整个高保真可交互原型应用，承载所有界面与交互。
- **意图选择器 (Intent_Selector)**：进入创作时呈现"你想做什么"选项（口播、卡点、Vlog、带货）并据此分流的模块。
- **AI编排器 (AI_Orchestrator)**：接收用户自然语言描述、将其拆解为多个有序 AI 步骤并逐步执行的"魔法按钮"模块。
- **AI步骤 (AI_Step)**：AI编排器生成的单个可执行单元，包含名称、计费标签、AI 标记、可编辑结果与撤销能力。
- **计费标签 (Cost_Label)**：标注某功能、模板或 AI 步骤计费属性的视觉标签，取值为"免费""Pro"或"N credits"之一。
- **计费标注系统 (Cost_Label_System)**：负责在功能、模板、AI 步骤入口处统一渲染计费标签并提供免费替代方案的模块。
- **免费替代方案 (Free_Alternative)**：当某项为 Pro 或消耗 credit 时，系统提供的可达到相近效果的零成本选项。
- **导出预检器 (Export_Preflight)**：在导出前汇总清晰度、水印状态、所用 Pro 项、预计 credit 消耗与预计时长，并支持一键替换为免费方案的模块。
- **对比视图 (Comparison_View)**：并列展示"现状路径（Before）"与"新路径（After）"并量化步数、决策点、被拦截次数的模块。
- **Credit余额 (Credit_Balance)**：原型内模拟的用户可用 credit 数量。
- **应用数据 (APP_DATA)**：统一的前端数据结构，集中存放意图、模板、AI 步骤、计费、credit、指标等模拟数据。
- **底部导航 (Bottom_Navigation)**：移动端固定在屏幕底部的主导航组件。
- **提示条 (Toast)**：短暂出现后自动消失的轻量反馈组件。
- **底部抽屉 (Bottom_Sheet)**：从屏幕底部上滑出现、承载选项或详情的面板组件。
- **创作者 (Creator)**：使用原型完成视频创作与导出的目标用户。

## Requirements

### 需求 1：意图优先的创作起点

**用户故事：** 作为创作者，我希望进入创作时先被询问"想做什么"，从而被分流到对应的工具与模板，而不是面对空白时间线无从下手。

#### 验收标准

1. WHEN 创作者发起新建创作，THE Intent_Selector SHALL 在进入空白时间线之前、于 1 秒内呈现意图选项列表，且该列表按固定顺序恰好包含"口播""卡点""Vlog""带货"四项。
2. WHEN 创作者点选某个意图选项，THE Intent_Selector SHALL 在 1 秒内进入与该意图匹配的工作区，并在该工作区可见区域展示已预载的、与该意图对应的模板与工具集合。
3. WHILE 模板与工具集合处于预载过程中，THE Intent_Selector SHALL 显示加载中状态指示，并禁止重复触发意图选择，直至预载完成或失败。
4. IF 所选意图对应的模板或工具集合预载失败，THEN THE Prototype_System SHALL 停留在意图选项列表、保留已选中状态，并展示一条指示"预载失败、可重试"的错误提示。
5. WHERE 创作者选择"带货"意图，THE Prototype_System SHALL 进入"30 秒带货/口播视频"主线闭环工作区。
6. WHEN 意图选项列表呈现时，THE Intent_Selector SHALL 为四项意图中的每一项展示一段不超过 60 个字符、说明该意图将获得的模板与工具的说明文字。
7. WHERE 创作者希望跳过意图选择，THE Intent_Selector SHALL 在意图选项列表中提供"直接进入空白时间线"的入口；WHEN 创作者点选该入口，THE Prototype_System SHALL 在 1 秒内进入空白时间线工作区。

### 需求 2：一个聪明的 AI 编排入口（魔法按钮）

**用户故事：** 作为创作者，我希望用一句话描述需求，由一个统一的 AI 入口帮我编排好多个步骤，而不是自己在分散的 AI 工具里挑选。

#### 验收标准

1. THE AI_Orchestrator SHALL 在创作主界面持续展示单一的魔法按钮入口，作为创作者描述需求的唯一起点。
2. WHEN 创作者点击魔法按钮，THE AI_Orchestrator SHALL 展示一个支持输入 1 至 500 个字符的自然语言需求描述输入区。
3. WHEN 创作者提交一段长度为 1 至 500 字符的自然语言需求描述，THE AI_Orchestrator SHALL 在 3 秒内将该描述拆解为一个包含 1 至 10 个 AI_Step 的有序列表，并按执行顺序自上而下展示。
4. IF 创作者提交的需求描述为空或超过 500 字符，THEN THE AI_Orchestrator SHALL 阻止拆解、保留输入区内容，并展示指示输入长度不符合要求的错误提示。
5. THE AI_Orchestrator SHALL 为每个 AI_Step 展示步骤名称、Cost_Label（计费标签）以及"此步由 AI 完成"的标记。
6. WHEN 创作者确认执行编排，THE AI_Orchestrator SHALL 按列表顺序逐个执行 AI_Step，并为当前执行中的步骤展示 0% 至 100% 的执行进度。
7. WHEN 某个 AI_Step 执行完成，THE AI_Orchestrator SHALL 展示该步骤的生成结果，并将该步骤标记为已完成状态。
8. IF 某个 AI_Step 在执行过程中失败，THEN THE AI_Orchestrator SHALL 暂停后续步骤执行、保留已完成 AI_Step 的结果不变，并展示指示该步骤执行失败的错误提示及重试操作。
9. WHILE 某个 AI_Step 处于已完成状态，THE AI_Orchestrator SHALL 允许创作者对该 AI_Step 的结果进行手动编辑并保存编辑后的结果。
10. WHILE 某个 AI_Step 处于已完成状态，THE AI_Orchestrator SHALL 为该步骤提供撤销操作，撤销后该步骤的结果恢复到执行前的初始状态并解除已完成标记。
11. WHERE 某个 AI_Step 涉及消耗 credit，THE AI_Orchestrator SHALL 在执行该步骤前展示该步骤的 credit 消耗数量。
12. IF 某个 AI_Step 所需的 credit 消耗数量大于当前 Credit_Balance，THEN THE AI_Orchestrator SHALL 阻止该步骤执行，并展示指示 Credit_Balance 不足的错误提示。

### 需求 3：全程免费/Pro 透明化

**用户故事：** 作为创作者，我希望在投入时间之前就清楚每个功能、模板和 AI 步骤是免费还是 Pro，从而不会做到一半被付费墙拦截。

#### 验收标准

1. THE Cost_Label_System SHALL 在每个功能、模板与 AI_Step 的入口处展示 Cost_Label，取值为"免费""Pro"或"N credits"之一；其中 N 为 1 至 9999 之间的整数。
2. WHEN 创作者浏览模板或工具列表，THE Cost_Label_System SHALL 在创作者选择某项之前即同步展示该项的 Cost_Label，且无需创作者执行任何额外交互（如点击、长按或悬停）即可见。
3. WHERE 某项的 Cost_Label 为"Pro"或"N credits"，THE Cost_Label_System SHALL 在该项入口处同时展示至少一个 Free_Alternative，并对该 Free_Alternative 标注"免费"标签。
4. WHEN 创作者选择一个 Free_Alternative，THE Cost_Label_System SHALL 用该免费方案替换原 Pro 项，并完整保留创作者已完成的全部编辑内容，不丢失任何已应用的修改。
5. IF 创作者所选的 Free_Alternative 与已有编辑内容不兼容，THEN THE Cost_Label_System SHALL 先通过 Bottom_Sheet 展示不兼容说明并请求创作者确认，在创作者确认前不替换、不丢失任何已完成编辑内容。
6. WHEN 创作者点选一个标注为"Pro"的项，THE Cost_Label_System SHALL 通过 Bottom_Sheet 说明该项所属的 Pro 价值与至少一个可用的 Free_Alternative，且不中断或重置当前创作流程与编辑状态。
7. WHEN 创作者关闭 Bottom_Sheet，THE Cost_Label_System SHALL 返回打开该 Bottom_Sheet 前的原界面，并保持创作者关闭前的全部编辑状态不变。

### 需求 4：导出预检（Pre-flight）

**用户故事：** 作为创作者，我希望在导出前看到一份清单，明确清晰度、是否有水印、用到的 Pro 项和预计时长，并能一键改用免费方案，从而避免导出时才发现问题。

#### 验收标准

1. WHEN 创作者发起导出，THE Export_Preflight SHALL 在生成最终文件之前展示预检清单。
2. THE Export_Preflight SHALL 在预检清单中展示输出清晰度（取值为 720p 或 1080p）、水印状态（取值为"有水印"或"无水印"）、所用 Pro 项列表、预计 credit 消耗（0 至 999 之间的整数）与预计导出时长（1 至 600 秒之间的整数）。
3. WHERE 当前项目未使用任何 Pro 项，THE Export_Preflight SHALL 展示空状态的 Pro 项清单，并将水印状态置为"无水印"。
4. WHERE 当前项目使用了 Pro 项，THE Export_Preflight SHALL 为每个 Pro 项提供"换成免费替代方案"的一键操作。
5. WHEN 创作者对某个 Pro 项执行"换成免费替代方案"，THE Export_Preflight SHALL 同步更新预检清单中的输出清晰度、水印状态、Pro 项列表、预计 credit 消耗与预计导出时长，并将该 Pro 项从列表中移除。
6. IF 预计 credit 消耗大于 Credit_Balance，THEN THE Export_Preflight SHALL 标示 credit 不足，并提供可降低消耗的 Free_Alternative。
7. WHILE 预计 credit 消耗大于 Credit_Balance，THE Export_Preflight SHALL 禁用"确认导出"操作，直至预计 credit 消耗回落至不超过 Credit_Balance。
8. WHEN 创作者在预检清单中确认导出，THE Export_Preflight SHALL 以 Toast 展示导出成功反馈，并呈现与确认时清单逐项一致的最终结果。
9. WHEN 创作者取消导出，THE Export_Preflight SHALL 关闭预检清单、返回工作区，并保留创作者已完成的全部编辑内容。

### 需求 5：Before/After 路径对比

**用户故事：** 作为评审者，我希望并列查看现状路径与新路径的量化对比，从而直观理解此次重新设计的价值。

#### 验收标准

1. THE Comparison_View SHALL 以上下分区或左右分栏的方式在移动端竖屏画框内并列展示"现状路径（Before）"与"新路径（After）"两条均完成"30 秒带货/口播视频"主线目标的流程。
2. THE Comparison_View SHALL 为两条路径分别展示步数、决策点数量与被拦截次数三项量化指标，每项取值均为 ≥0 的整数且来源于 APP_DATA。
3. THE Comparison_View SHALL 为步数、决策点数量与被拦截次数三项指标分别同时展示 Before 与 After 的绝对差值（差值 = Before 值 − After 值，结果为整数）与降幅百分比（百分比 = (Before 值 − After 值) ÷ Before 值 × 100，四舍五入取整为整数），并以方向标记标示该项为"改善"（After 值小于 Before 值）或"增加"（After 值大于 Before 值）。
4. IF 某项指标的 Before 值为 0，THEN THE Comparison_View SHALL 跳过该项降幅百分比的除法计算并以"不适用"标识替代百分比，同时仍展示该项的绝对差值。
5. WHEN 创作者查看某条路径，THE Comparison_View SHALL 按该路径的实际执行顺序完整列出全部关键节点，并为每个节点展示节点名称。
6. WHERE 某关键节点为决策点或被拦截节点，THE Comparison_View SHALL 为该节点附加可与普通节点相区分的视觉标记，且决策点与被拦截节点使用彼此不同的视觉标记。

### 需求 6：移动端形态约束

**用户故事：** 作为创作者，我在手机上使用 CapCut，因此原型必须针对移动端竖屏与触屏交互设计。

#### 验收标准

1. THE Prototype_System SHALL 以宽度 375 至 430 CSS px、高度 812 至 932 CSS px 的 iPhone 竖屏画框呈现全部界面，且画框内容不产生横向滚动。
2. THE Prototype_System SHALL 提供固定于屏幕底部的 Bottom_Navigation。
3. WHILE 页面内容处于滚动状态，THE Prototype_System SHALL 保持 Bottom_Navigation 固定于屏幕底部并持续可见。
4. WHEN 创作者触发承载选项或详情面板的入口，THE Prototype_System SHALL 以自下而上的上滑动效呈现 Bottom_Sheet。
5. WHEN 创作者点击 Bottom_Sheet 外部区域或在 Bottom_Sheet 上执行下滑手势，THE Prototype_System SHALL 关闭该 Bottom_Sheet 并恢复其下方界面的交互能力。
6. WHEN 操作需要轻量即时反馈，THE Prototype_System SHALL 以 Toast 呈现反馈，且 Toast 在 2 至 4 秒后自动消失、不阻断创作者对其下方界面的交互。
7. WHEN 出现需要创作者确认的关键决策，THE Prototype_System SHALL 以模态对话框承载该决策，模态期间阻断对背景界面的交互，并提供确认与取消两个互斥操作以要求创作者显式选择其一。
8. THE Prototype_System SHALL 为所有可触控交互元素提供不小于 44 × 44 CSS px 的可点击区域。

### 需求 7：完整闭环主线

**用户故事：** 作为评审者，我希望原型走通一条完整闭环主线，而不是四个互不连接的浅层演示。

#### 验收标准

1. THE Prototype_System SHALL 以"30 秒带货/口播视频"作为可端到端走通的主线场景。
2. WHEN 创作者沿主线推进，THE Prototype_System SHALL 按固定顺序"意图选择 → AI 编排 → 透明计费 → 导出预检"串联四个环节，且仅在完成当前环节后才进入下一环节。
3. IF 当前环节尚未完成，THEN THE Prototype_System SHALL 阻止进入下一环节，并提示创作者需先完成当前环节。
4. WHILE 创作者沿主线推进，THE Prototype_System SHALL 展示主线进度指示，并标记当前环节与已完成环节。
5. WHILE 创作者沿主线推进，THE Prototype_System SHALL 将创作者在前序环节已完成的编辑内容与选择带入后续环节，并保持其可见且可继续编辑。
6. WHEN 创作者返回上一环节，THE Prototype_System SHALL 恢复该环节此前的编辑内容与选择，且不丢失任何已有数据。
7. WHEN 创作者完成主线，THE Prototype_System SHALL 呈现完成态，汇总输出清晰度与水印状态并展示明确的"已就绪"标示。
8. WHEN 主线进入完成态，THE Prototype_System SHALL 提供导出或发布的入口。

### 需求 8：统一数据结构与技术栈约束

**用户故事：** 作为原型开发者，我希望用纯前端技术与统一数据结构实现原型，从而保证可移植、易维护、无需构建工具。

#### 验收标准

1. THE Prototype_System SHALL 仅使用 HTML、CSS 与 JavaScript（含原生浏览器 API）实现，不引入任何需要编译、打包、转译或安装依赖的构建工具或框架运行时。
2. THE Prototype_System SHALL 支持在不执行任何编译、打包或安装步骤的前提下，通过在现代桌面浏览器中直接打开入口 HTML 文件即可运行全部界面与交互。
3. THE Prototype_System SHALL 将意图、模板、AI_Step、Cost_Label、Credit_Balance 与指标等全部模拟数据集中存放于唯一的全局 APP_DATA 结构，且不在渲染逻辑或界面标记中硬编码上述任一类模拟数据的重复副本。
4. THE Prototype_System SHALL 使用内联 SVG 渲染全部界面图标，且不为图标加载任何外部网络资源。
5. THE Prototype_System SHALL 使用本地生成的占位图代替真实媒体素材，且不加载任何外部真实媒体文件或外部网络资源。
6. WHERE 界面需要展示计费、AI 标记或指标，THE Prototype_System SHALL 从 APP_DATA 读取对应数据进行渲染，不使用界面内硬编码的常量值。
7. IF 渲染界面时所需的数据项在 APP_DATA 中缺失或为空，THEN THE Prototype_System SHALL 跳过该数据项的渲染或显示占位内容，并保持页面其余部分正常呈现而不中断交互。

### 需求 9：AI 角色与创作者控制权

**用户故事：** 作为创作者，我希望 AI 是帮我起步的助手而不是替我做决定的黑盒，所有 AI 产出我都能看懂、能改、能退回。

#### 验收标准

1. WHERE 某项结果由 AI 生成，THE Prototype_System SHALL 在该结果的可视区域内持续展示一个带"由 AI 完成"文案的可见标记（图标或文字标签），并保持显示直至该结果被创作者编辑或撤销。
2. THE Prototype_System SHALL 在每一项 AI 生成结果上提供始终可见且可操作的编辑入口，允许创作者对该结果的内容进行手动编辑。
3. WHEN 创作者保存对某项 AI 生成结果的手动编辑，THE Prototype_System SHALL 以编辑后的内容更新该结果的展示，并将其标记由"由 AI 完成"更新为"已由创作者编辑"。
4. IF 创作者提交的手动编辑包含无效输入（如必填内容为空或超出允许长度），THEN THE Prototype_System SHALL 拒绝本次编辑、保留编辑前的内容，并展示指明无效原因的错误提示。
5. THE Prototype_System SHALL 在每一项 AI 生成结果上提供撤销入口，允许创作者撤销该结果并将其恢复到本次 AI 生成前的状态。
6. WHEN 创作者触发撤销某项 AI 生成结果，THE Prototype_System SHALL 在执行撤销前展示一次确认提示，告知该操作将丢弃此 AI 生成结果且可在确认后恢复到生成前状态。
7. WHEN AI 完成一次编排，THE Prototype_System SHALL 将结果中的每个组成元素呈现为可被创作者选中并继续编辑的状态，且不展示任何禁用或锁定该结果后续编辑的控件。

### 需求 10：成功指标可视化

**用户故事：** 作为评审者，我希望原型能呈现衡量本设计成效的指标，从而判断设计是否达成目标。

#### 验收标准

1. WHEN 指标面板加载，THE Prototype_System SHALL 从 APP_DATA 读取并展示用户效率类指标（至少包含任务完成时间与任务完成率），且每项指标均展示指标名称、当前值、计量单位、基线值（Before）与目标值五个字段。
2. WHEN 指标面板加载，THE Prototype_System SHALL 从 APP_DATA 读取并展示用户信心类指标（至少包含自评信心与犹豫/流失减少程度），且每项指标均展示指标名称、当前值、计量单位、基线值（Before）与目标值五个字段。
3. WHEN 指标面板加载，THE Prototype_System SHALL 从 APP_DATA 读取并展示产品健康类指标（至少包含功能采用率、重复使用率与转化/留存影响），且每项指标均展示指标名称、当前值、计量单位、基线值（Before）与目标值五个字段。
4. WHEN 渲染任一指标，IF 该指标的当前值相对基线值已达到或超过目标值，THEN THE Prototype_System SHALL 为该指标显示可与未达成态明显区分的达成态视觉标识，使两名独立评审者对"是否达成"得出一致判断。
5. WHEN 渲染任一指标，IF 该指标的当前值尚未达到目标值，THEN THE Prototype_System SHALL 为该指标显示与达成态明显区分的未达成态视觉标识。
6. IF APP_DATA 中某指标的任一必需字段（名称、当前值、单位、基线值、目标值）缺失或为空，THEN THE Prototype_System SHALL 在该指标对应字段位置展示"数据缺失"占位文案，并继续完成其余指标的渲染而不中断。