Initial commit: TaoTao

This commit is contained in:
freedakgmail
2026-06-16 00:38:58 +08:00
commit 0089e9007d
16 changed files with 2985 additions and 0 deletions
Vendored
BIN
View File
Binary file not shown.
@@ -0,0 +1 @@
{"specId": "211727dd-567f-4aef-8f70-34f83987ed43", "workflowType": "requirements-first", "specType": "feature"}
@@ -0,0 +1,182 @@
# 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 涉及消耗 creditTHE AI_Orchestrator SHALL 在执行该步骤前展示该步骤的 credit 消耗数量。
12. IF 某个 AI_Step 所需的 credit 消耗数量大于当前 Credit_BalanceTHEN 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_AlternativeTHE 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_SheetTHE 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_BalanceTHEN THE Export_Preflight SHALL 标示 credit 不足,并提供可降低消耗的 Free_Alternative。
7. WHILE 预计 credit 消耗大于 Credit_BalanceTHE Export_Preflight SHALL 禁用"确认导出"操作,直至预计 credit 消耗回落至不超过 Credit_Balance。
8. WHEN 创作者在预检清单中确认导出,THE Export_Preflight SHALL 以 Toast 展示导出成功反馈,并呈现与确认时清单逐项一致的最终结果。
9. WHEN 创作者取消导出,THE Export_Preflight SHALL 关闭预检清单、返回工作区,并保留创作者已完成的全部编辑内容。
### 需求 5Before/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 值为 0THEN 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 在该指标对应字段位置展示"数据缺失"占位文案,并继续完成其余指标的渲染而不中断。
+59
View File
@@ -0,0 +1,59 @@
---
inclusion: always
---
# AI Coding 工作流规则
本规则定义从需求到交付的标准化协作流程。所有涉及"做一个项目 / 实现一个功能"的请求,均遵循以下五个阶段,逐阶段产出文档并在每个关键节点等待用户确认后再推进。
## 命名约定
- 项目英文缩写记为 `XXX`(如 IPTV、AVCC),由用户提供或与用户确认。
- 文档统一命名并置于项目根目录(或用户指定目录):
- `0-req-XXX.md` — 需求与目标文档
- `1-prd-XXX.md` — 产品需求文档(PRD
- `2-task-XXX.md` — 开发任务文档
## 阶段流程
### 阶段 1:接收需求与目标
- 用户给出需求和目标描述,可以是一段文字,也可以是一份 md 文档。
- 我先完整读取并理解用户的需求与目标;若有歧义或关键信息缺失,先向用户澄清,不臆测。
### 阶段 2:生成 `0-req-XXX.md`(需求文档)
- 基于用户的需求与目标,生成 `0-req-XXX.md`
- 内容应包含:引言、术语表、角色定义、功能性需求(采用 EARS 格式:WHEN/IF/WHILE/WHERE/THE...SHALL)、非功能性需求、关键约束与假设。
- 生成后**必须请用户检查确认**。未确认前不进入下一阶段。
- 用户提出修改意见时,更新文档并再次请其确认,直到通过。
### 阶段 3:生成 `1-prd-XXX.md`(产品需求文档)
- 仅在 `0-req-XXX.md` 确认通过后进行。
- 基于需求文档生成 `1-prd-XXX.md`
- 内容应包含:产品概述与定位、目标与成功指标、用户画像与核心场景(每个场景标注"痛点解法")、功能清单与优先级(MoSCoW,并映射回需求编号)、关键流程、角色权限矩阵、版本规划、非功能性要求、依赖与风险。
- 生成后**必须请用户检查确认**。未确认前不进入下一阶段。
### 阶段 4:生成 `2-task-XXX.md`(开发任务文档)
- 仅在 `1-prd-XXX.md` 确认通过后进行。
- 生成 `2-task-XXX.md`,用于指导开发,包含详细的工作任务分解。
- 任务要求:
- 以可勾选清单(`- [ ]`)组织,编号清晰,粒度可执行可验证。
- 每个任务标注:目标、对应的需求/PRD 条目、验收标准、依赖关系。
- 区分优先级与阶段(如 MVP / 二期 / 三期)。
- **开发过程中根据实际进度持续更新该文档**(勾选完成项、记录变更、补充新任务)。
- 生成后**必须请用户确认**。
### 阶段 5:按任务文档执行开发
- 仅在 `2-task-XXX.md` 确认通过后开始编码。
- 严格按确认的任务文档推进开发工作。
- 每完成一个任务或一组任务:
- 进行相应的测试(构建、单元测试、必要时集成测试)。
- 更新 `2-task-XXX.md` 的任务状态与进度记录。
- 与用户交互、汇报进展、确认下一步。
- 持续推进,直至完成全部任务。
## 通用约束
- 每个阶段的产出都要等待用户确认,不得跨阶段抢跑。
- 文档之间保持可追溯:PRD 功能映射回需求编号,任务映射回需求/PRD 条目。
- 当上游文档(需求或 PRD)发生变更时,同步更新下游文档,保持一致。
- 用户的语言即回复与文档的语言(默认中文)。
+2
View File
@@ -0,0 +1,2 @@
{
}
+14
View File
@@ -0,0 +1,14 @@
Common App Optimization
Please choose one of the following products, find out what problems you
think exist in product design, explain the reasons and redesign at least one key point.
TikTok / Capcut / ins
We would like to see:
Make sure this optimization point can demonstrate your professional ability and integrate your understanding and innovation of the product;
The scope of design changes is not limited, but you need to ensure that your ideas can solve practical problems and encourage innovation while maintaining full feasibility;
Provide complete analysis and design ideas around key issues, present clear interactive links and high-fidelity UI design;
You can relax. There is no absolute right or wrong in changing the plan. We hope to see you think as much as possible.
最终以 AI coding 的形式提交作业;
请在收到笔试题后的一周内提交测试作品
+238
View File
@@ -0,0 +1,238 @@
# 0-req-CEC · 需求与目标文档
> 项目:**CECCapCut Create-Export Confidence** —— CapCut「创作—导出」链路重设计高保真可交互原型
> 作业来源:`0.md`App Optimization:从 TikTok / CapCut / Instagram 中选一,找出设计问题并重设计至少一个关键点,以 AI coding 形式交付)
---
## 1. 引言
### 1.1 作业要求拆解(来自 0.md)
| 维度 | 要求 |
|------|------|
| 选题 | TikTok / CapCut / Instagram 三选一 |
| 内容 | 找出产品设计问题 → 说明原因 → 重新设计至少一个关键点 |
| 标准 | 体现专业能力 + 对产品的理解与创新;解决真实问题;保持完全可行性 |
| 交付 | 完整分析 + 清晰交互链路 + 高保真 UI,以 AI coding 形式提交 |
| 时间 | 收到题目后一周内提交 |
### 1.2 项目目标
交付一个**高保真、可交互的移动端原型**,演示对 **CapCut「创作—导出」链路**的重新设计。一句话主题:
> **让创作者在投入时间之前就心里有数(Confidence Before Investment)。**
### 1.3 产品选择与理由:CapCut
1. **痛点集中在可设计的工作流内**:CapCut 的核心摩擦在「创作—导出」这条可见、可重设计的链路上;而 TikTok / Instagram 的主要问题(推荐排序、审核、政策)依赖系统级机制,难以在原型中可信重现。
2. **外部可验证性高**:通过公开评论与亲自走查即可审计 CapCut 的问题。
3. **原型可行性高**:任务流与交互状态清晰,适合纯前端做高保真可交互演示,契合作业对「可行性 + 交互链路 + 高保真 UI」的要求。
### 1.4 核心问题(优化点)
创作—导出链路中的「**不确定性**」,集中表现为三类:
1. **付费墙不透明**:做到一半才发现某功能/模板是 Pro,被「中途拦截」。
2. **AI 工具分散**:面对一堆 AI 工具不知用哪个、会不会扣 credit。
3. **导出有惊吓**:临到导出才发现有水印 / 清晰度被锁 / credit 用光。
> 设计策略:把「商业化信任」这一本身不可原型化的问题,转化为**可原型化的 UX 表达** —— 用透明、善意的设计修复信任,而非改动定价政策。
### 1.5 优化方案概览(四个动作 + 一条主线)
| # | 动作 | 解决的痛点 |
|---|------|-----------|
| 1 | **意图优先的起点**:进入即问「想做什么」(口播/卡点/Vlog/带货)分流到对应模板工具 | 空白时间线无从下手 |
| 2 | **聪明的 AI 入口(魔法按钮)**:一句话需求 → 编排有序 AI 步骤,逐步标注计费/AI 标记、可编辑可撤销 | AI 工具分散、不会用 |
| 3 | **全程免费/Pro 透明化**:投入前就标明并给免费替代,杜绝「中途被墙」 | 付费墙不透明 |
| 4 | **导出预检(Pre-flight**:导出前清单(清晰度/水印/Pro 项/credit/时长),一键换免费方案 | 导出有惊吓 |
主线:**「30 秒带货/口播视频」** —— 意图选择 → AI 编排 → 透明计费 → 导出预检。
---
## 2. 术语表
- **原型系统 (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)**:从屏幕底部上滑出现、承载选项或详情的面板组件。
---
## 3. 角色定义
| 角色 | 说明 | 关注点 |
|------|------|--------|
| **创作者 (Creator)** | 使用原型完成视频创作与导出的目标用户 | 低摩擦完成视频、清楚成本、保持控制权 |
| **评审者 (Reviewer)** | 评估本设计作业的评委/面试官 | 问题定位是否准确、方案是否创新可行、改进是否可量化 |
| **原型开发者 (Developer)** | 实现该原型的工程角色 | 纯前端可行性、数据驱动、可维护 |
---
## 4. 功能性需求(EARS
> 验收标准采用 EARS 格式(WHEN / IF / WHILE / WHERE / THE…SHALL)。下文「系统」均指本原型,所有行为均为前端模拟。
### R1 意图优先的创作起点
**用户故事:** 作为创作者,我希望进入创作时先被问「想做什么」并分流到对应模板工具,以便不必面对空白时间线无从下手。
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 秒内进入空白时间线工作区。
### R2 一个聪明的 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 秒内拆解为含 110 个 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 暂停后续、保留已完成结果,并提示失败及提供重试。
9. WHILE 某 AI_Step 处于已完成态,THE AI_Orchestrator SHALL 允许创作者手动编辑其结果并保存。
10. WHILE 某 AI_Step 处于已完成态,THE AI_Orchestrator SHALL 提供撤销操作,撤销后恢复执行前初始状态并解除已完成标记。
11. WHERE 某 AI_Step 涉及消耗 creditTHE AI_Orchestrator SHALL 在执行前展示其 credit 消耗数量。
12. IF 某 AI_Step 所需 credit 大于当前 Credit_BalanceTHEN THE AI_Orchestrator SHALL 阻止执行并提示余额不足。
### R3 全程免费/Pro 透明化
**用户故事:** 作为创作者,我希望投入时间前就知道每项是免费还是 Pro,以便不被付费墙中途拦截。
1. THE Cost_Label_System SHALL 在每个功能、模板与 AI_Step 入口处展示 Cost_Label,取值「免费/Pro/N credits」之一(N 为 19999 整数)。
2. WHEN 创作者浏览模板或工具列表,THE Cost_Label_System SHALL 在选择前即同步展示 Cost_Label,无需额外交互(点击/长按/悬停)即可见。
3. WHERE 某项为「Pro」或「N credits」,THE Cost_Label_System SHALL 在入口处同时展示至少一个标注「免费」的 Free_Alternative。
4. WHEN 创作者选择一个 Free_AlternativeTHE 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_SheetTHE Cost_Label_System SHALL 返回原界面并保持关闭前的全部编辑态。
### R4 导出预检(Pre-flight
**用户故事:** 作为创作者,我希望导出前看到一份清单并能一键改用免费方案,以便避免导出时才发现问题。
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/时长,并将该项移除。
6. IF 预计 credit 消耗大于 Credit_BalanceTHEN THE Export_Preflight SHALL 标示不足并提供可降低消耗的 Free_Alternative。
7. WHILE 预计 credit 消耗大于 Credit_BalanceTHE Export_Preflight SHALL 禁用「确认导出」,直至消耗回落至不超过余额。
8. WHEN 创作者确认导出,THE Export_Preflight SHALL 以 Toast 反馈成功,并呈现与确认时清单逐项一致的最终结果。
9. WHEN 创作者取消导出,THE Export_Preflight SHALL 关闭清单、返回工作区并保留全部编辑。
### R5 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)与降幅百分比((BeforeAfter)÷Before×100,四舍五入取整),并标示「改善/增加」方向。
4. IF 某项 Before 值为 0THEN THE Comparison_View SHALL 以「不适用」替代降幅,仍展示绝对差值。
5. WHEN 创作者查看某条路径,THE Comparison_View SHALL 按实际执行顺序完整列出关键节点并展示名称。
6. WHERE 某节点为决策点或被拦截节点,THE Comparison_View SHALL 附加可区分且彼此不同的视觉标记。
### R6 移动端形态约束
**用户故事:** 作为创作者,我在手机上使用 CapCut,所以原型必须针对竖屏与触屏设计。
1. THE Prototype_System SHALL 以 iPhone 竖屏画框(宽 375430、高 812–932 CSS px)呈现全部界面,且不产生横向滚动。
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 外部或下滑,THE Prototype_System SHALL 关闭它并恢复下方界面交互。
6. WHEN 操作需要轻量反馈,THE Prototype_System SHALL 以 Toast 呈现,2–4 秒后自动消失且不阻断交互。
7. WHEN 出现需要确认的关键决策,THE Prototype_System SHALL 以模态对话框承载、阻断背景交互,并提供互斥的「确认/取消」。
8. THE Prototype_System SHALL 为所有可触控元素提供 ≥44×44 CSS px 的可点击区域。
### R7 完整闭环主线
**用户故事:** 作为评审者,我希望原型走通一条完整闭环,而非四个互不相连的浅 demo。
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 呈现完成态,汇总清晰度与水印状态、展示「已就绪」标示并提供导出/发布入口。
### R8 AI 角色与创作者控制权
**用户故事:** 作为创作者,我希望 AI 是帮我起步的助手而非黑盒,以便所有产出都能看懂、能改、能退回。
1. WHERE 某结果由 AI 生成,THE Prototype_System SHALL 在其可视区域持续展示「由 AI 完成」标记,直至被编辑或撤销。
2. THE Prototype_System SHALL 为每项 AI 结果提供始终可见的编辑入口。
3. WHEN 创作者保存手动编辑,THE Prototype_System SHALL 更新展示并将标记由「由 AI 完成」改为「已由创作者编辑」。
4. IF 编辑含无效输入(空/超长),THEN THE Prototype_System SHALL 拒绝并保留原内容、提示原因。
5. THE Prototype_System SHALL 为每项 AI 结果提供撤销入口,恢复到本次生成前状态。
6. WHEN 创作者触发撤销,THE Prototype_System SHALL 在执行前展示一次确认提示。
7. WHEN AI 完成一次编排,THE Prototype_System SHALL 将结果每个元素呈现为可选中继续编辑的状态,且不展示锁定/禁用控件。
### R9 成功指标可视化
**用户故事:** 作为评审者,我希望原型呈现衡量成效的指标,以便判断设计是否达成目标。
1. WHEN 指标面板加载,THE Prototype_System SHALL 从 APP_DATA 读取并展示**用户效率**指标(≥任务完成时间、任务完成率),每项含名称/当前值/单位/基线值/目标值五字段。
2. WHEN 指标面板加载,THE Prototype_System SHALL 从 APP_DATA 读取并展示**用户信心**指标(≥自评信心、犹豫/流失减少程度),每项含上述五字段。
3. WHEN 指标面板加载,THE Prototype_System SHALL 从 APP_DATA 读取并展示**产品健康**指标(≥功能采用率、重复使用率、转化/留存影响),每项含上述五字段。
4. WHEN 渲染任一指标,IF 当前值相对基线已达到/超过目标值,THEN THE Prototype_System SHALL 显示与未达成态明显区分的「达成」视觉标识。
5. WHEN 渲染任一指标,IF 当前值尚未达到目标值,THEN THE Prototype_System SHALL 显示「未达成」视觉标识。
6. IF 某指标任一必需字段缺失/为空,THEN THE Prototype_System SHALL 在该字段位置展示「数据缺失」占位,并继续渲染其余指标而不中断。
---
## 5. 非功能性需求
| 类别 | 要求 |
|------|------|
| **技术栈** | 仅 HTML/CSS/JS(含原生浏览器 API),不引入需编译/打包/转译/装依赖的构建工具或框架运行时。 |
| **零构建运行** | 在现代桌面浏览器中直接打开入口 HTML 即可运行全部界面与交互。 |
| **数据驱动** | 全部模拟数据集中于唯一全局 `APP_DATA`,不在渲染逻辑/标记中硬编码重复副本;计费/AI 标记/指标均从 `APP_DATA` 读取渲染。 |
| **资源自包含** | 图标用内联 SVG、媒体用本地占位图,均不加载外部网络资源(离线可用)。 |
| **健壮性** | 数据项缺失/为空时跳过渲染或显示占位,不中断页面其余部分。 |
| **响应性能** | 意图分流、AI 拆解等关键反馈在数秒内(详见 R1/R2 量化时限)给出可见反馈。 |
| **可用性** | 移动端竖屏、触控目标 ≥44×44 CSS px、关键反馈用 Toast/Bottom_Sheet/对话框。 |
| **语言** | 界面与文档默认中文。 |
---
## 6. 关键约束与假设
### 6.1 范围
**纳入(In Scope**
- 移动端竖屏单页原型(单一 `index.html` 优先)
- 一条「30 秒带货/口播视频」完整闭环主线
- 四个核心动作 + Before/After 对比 + 成功指标页
**非目标(Out of Scope**
- 真实视频编解码、真实 AI 推理、真实导出文件
- 真实账号/支付/订阅后端
- 桌面端、横屏与多平台适配
- CapCut 全功能编辑器(仅围绕主线所需功能)
### 6.2 假设
- 所有数据、计费、credit、指标均为**演示用模拟值**,不代表 CapCut 真实定价或性能。
- 评审在桌面浏览器中以 iPhone 尺寸画框查看移动端原型。
- 占位图与图标可离线渲染,无需联网。
---
## 7. 交付物与文档链路
| 文档 | 用途 | 状态 |
|------|------|------|
| `0-req-CEC.md` | 需求与目标(本文档) | 待确认 |
| `1-prd-CEC.md` | 产品需求文档(PRD) | 待生成 |
| `2-task-CEC.md` | 开发任务文档 | 待生成 |
| `index.html` | 高保真可交互原型 | 待开发 |
+185
View File
@@ -0,0 +1,185 @@
# 1-prd-CEC · 产品需求文档(PRD
> 项目:**CECCapCut Create-Export Confidence**
> 上游:`0-req-CEC.md`(需求与目标,已确认)
> 主题:**让创作者在投入时间之前就心里有数(Confidence Before Investment**
---
## 1. 产品概述与定位
### 1.1 一句话定位
一个聚焦 CapCut「创作—导出」链路的高保真可交互原型,用**意图分流 + AI 编排 + 计费透明 + 导出预检**四个动作,消除创作过程中的不确定性,让创作者在投入前就对「能做什么、要花多少、最终产出什么」心里有数。
### 1.2 设计原则
- Guide, don't take over(引导而非替代)
- Make trade-offs visible(让权衡可见)
- Respect creator control(尊重创作者控制权)
- Reduce cognitive load at high-friction moments(高摩擦时刻减负)
- AI-first, Manual-secondAI 起步,人工兜底,结果永远可改)
### 1.3 它不是什么(边界)
不是可用的视频编辑器,不接真实 AI / 支付 / 后端,不做桌面端与全功能编辑。仅围绕主线演示设计理念与交互链路。
---
## 2. 目标与成功指标
### 2.1 产品目标
| 目标 | 说明 |
|------|------|
| 降低不确定性 | 把「中途被墙 / 不会用 AI / 导出惊吓」三类摩擦消除在投入之前 |
| 降低决策负担 | 用意图分流与 AI 编排替代「面对空白时间线 + 散落工具」的茫然 |
| 提升信心与控制权 | 全程透明成本 + AI 产出可改可撤销 |
| 体现专业与创新 | 一条可演示的完整闭环 + 可量化的 Before/After |
### 2.2 成功指标(演示用,映射 R9)
| 维度 | 指标 | 基线(Before) | 目标(After) |
|------|------|-------------|------------|
| 用户效率 | 任务完成时间 | 8.5 min | ≤ 4 min |
| 用户效率 | 任务完成率 | 62% | ≥ 85% |
| 用户信心 | 自评信心(15 | 2.8 | ≥ 4.2 |
| 用户信心 | 中途流失率 | 38% | ≤ 15% |
| 产品健康 | AI 入口采用率 | — | ≥ 60% |
| 产品健康 | 7 日重复使用率 | 41% | ≥ 55% |
| 产品健康 | 免费→Pro 转化率 | 3.1% | ≥ 5% |
> 数值均为演示用模拟值,写入 `APP_DATA.metrics`,不代表 CapCut 真实数据。
---
## 3. 用户画像与核心场景
### 3.1 用户画像
| 画像 | 描述 | 核心诉求 | 主要痛点 |
|------|------|---------|---------|
| **小白带货新手** | 想发带货短视频,不会剪辑 | 几分钟出片、别花冤枉钱 | 不懂从哪下手、怕被扣费 |
| **吐槽的老用户** | 用过免费版,反感付费墙 | 沿用熟悉的简单模板 | 免费功能被收回、中途被墙 |
| **进阶口播创作者** | 常做口播/卡点,追求效率 | AI 帮忙提速但要可控 | AI 工具分散、产出不可控 |
### 3.2 核心场景(标注「痛点 → 解法」)
**场景 A:带货新手首次成片(主线)**
- 痛点:打开 App 面对空白时间线,不知做什么、用什么工具。
- 解法:**意图选择器**(R1)让他选「带货」,直接进入预载好模板工具的主线工作区。
**场景 B:一句话生成视频**
- 痛点:字幕、配乐、卡点是分散的 AI 工具,不知道用哪个、会不会扣费。
- 解法:**魔法按钮**(R2)一句话「帮我做个 30 秒带货视频,加字幕和卡点音乐」→ 编排出有序步骤,每步标注成本与 AI 标记,可改可撤销(R8)。
**场景 C:避免中途被墙**
- 痛点:选了个模板做到一半,提示要 Pro。
- 解法:**计费透明化**(R3)在选择前就标明免费/Pro,并给免费替代;点 Pro 项用底部抽屉说明而非打断。
**场景 D:导出不再惊吓**
- 痛点:导出才发现有水印、清晰度被锁、credit 用光。
- 解法:**导出预检**(R4)导出前出清单,一键换免费方案,credit 不足直接禁用导出并给降本方案。
**场景 E:评审者理解价值**
- 痛点:评委需要快速判断改进是否真实有效。
- 解法:**Before/After 对比**R5+ **成功指标页**R9)量化呈现。
---
## 4. 功能清单与优先级(MoSCoW)
> 映射回 `0-req-CEC.md` 的需求编号 R1R9。
| 优先级 | 功能 | 映射需求 | 说明 |
|--------|------|---------|------|
| **Must** | 意图选择器 | R1 | 主线入口,四意图分流 + 跳过 |
| **Must** | AI 魔法按钮编排 | R2 | 一句话 → 有序步骤 + 进度 + 计费/AI 标记 |
| **Must** | 计费透明化 | R3 | 标签前置 + 免费替代 + Pro 说明抽屉 |
| **Must** | 导出预检 | R4 | 清单 + 一键换免费 + credit 守卫 |
| **Must** | 完整闭环主线 | R7 | 四环节顺序串联 + 状态传递 |
| **Must** | 移动端形态 | R6 | 竖屏画框、底部导航、抽屉、Toast、对话框 |
| **Must** | AI 可控(编辑/撤销/标记) | R8 | 贯穿 R2 的产出 |
| **Should** | Before/After 对比页 | R5 | 量化改进,强说服力 |
| **Should** | 成功指标页 | R9 | 三类指标 + 基线/目标 + 达成态 |
| **Could** | 微动效与转场打磨 | R6 | 弹性动画、环节转场 |
| **Could** | 多意图差异化内容 | R1 | 口播/卡点/Vlog 各自模板(主线只需带货完整) |
| **Won't(本期)** | 真实编辑/AI/支付/后端、桌面端 | — | 见非目标 |
---
## 5. 关键流程
### 5.1 主线闭环(Happy Path
```
启动
└─ 意图选择器(R1)──选「带货」──▶ 主线工作区
└─ 魔法按钮(R2)──输入需求──▶ AI 编排步骤列表
├─ 每步:计费标签 + AI 标记(R3/R8)
├─ 执行:逐步进度 + 结果(R2)
└─ 结果:可编辑 / 可撤销(R8)
└─ 透明计费校对(R3)──Pro 项?──▶ 一键换免费替代
└─ 发起导出 ──▶ 导出预检清单(R4)
├─ 清晰度 / 水印 / Pro 项 / credit / 时长
├─ credit 不足 → 禁用导出 + 降本方案
└─ 确认导出 ──▶ 完成态(R7)+ Toast
└─(旁路)Before/After 对比(R5)|成功指标(R9)
```
### 5.2 关键分支
- 意图预载失败 → 停留列表 + 可重试(R1.4)
- AI 输入为空/超长 → 阻止 + 提示(R2.4)
- AI 步骤失败 → 暂停后续 + 重试(R2.8)
- 免费替代与编辑不兼容 → 抽屉确认(R3.5)
- credit 不足 → 禁用导出直至降本(R4.7)
- 撤销 AI 产出 → 确认提示(R8.6)
---
## 6. 角色权限矩阵
> 原型为单机演示,无真实账号体系;此处描述各角色在原型内可执行的操作。
| 操作 | 创作者 | 评审者 | 开发者 |
|------|:---:|:---:|:---:|
| 走主线(意图→编排→计费→导出) | ✅ | ✅ | ✅ |
| 编辑/撤销 AI 产出 | ✅ | ✅ | ✅ |
| 查看 Before/After 与指标页 | ✅ | ✅ | ✅ |
| 修改 `APP_DATA` 模拟数据 | — | — | ✅ |
---
## 7. 版本规划
| 阶段 | 范围 | 对应优先级 |
|------|------|-----------|
| **MVP(本周交付)** | 主线闭环 R1+R2+R3+R4+R6+R7+R8 全部走通 | Must |
| **增强(如有余力)** | Before/After 对比页 R5 + 成功指标页 R9 | Should |
| **打磨(可选)** | 微动效转场、多意图差异化内容 | Could |
---
## 8. 非功能性要求(摘自 0-req-CEC.md 第 5 节)
- 纯 HTML/CSS/JS,零构建,浏览器直接打开即运行。
- 全部数据集中于唯一 `APP_DATA`,数据驱动渲染,不硬编码。
- 内联 SVG + 本地占位图,离线可用,无外部资源。
- 数据缺失健壮降级;关键反馈数秒内可见。
- 移动端竖屏,触控目标 ≥44×44 CSS px,默认中文。
---
## 9. 依赖与风险
| 类型 | 项 | 影响 | 应对 |
|------|----|------|------|
| 依赖 | 仅浏览器原生能力(无框架/CDN) | 低 | 用原生 JS + CSS 实现组件 |
| 依赖 | 占位图(本地生成/内联) | 低 | 用 SVG/渐变色块占位,避免外链 |
| 风险 | 范围蔓延(想做成真编辑器) | 高 | 严守主线,非目标明确写入文档 |
| 风险 | 单 HTML 体量过大难维护 | 中 | 模块化组织 JS(视图/数据/组件分层),统一 `APP_DATA` |
| 风险 | 一周工期紧张 | 中 | MVP 先于增强;Should/Could 视余力 |
| 风险 | AI 编排「演示真实感」不足 | 中 | 用拟真进度、分步结果与可编辑态增强可信度 |
---
## 10. 文档链路
| 文档 | 用途 | 状态 |
|------|------|------|
| `0-req-CEC.md` | 需求与目标 | ✅ 已确认 |
| `1-prd-CEC.md` | 产品需求文档(本文档) | 待确认 |
| `2-task-CEC.md` | 开发任务文档 | 待生成 |
| `index.html` | 高保真可交互原型 | 待开发 |
+170
View File
@@ -0,0 +1,170 @@
# 2-task-CEC · 开发任务文档
> 项目:**CECCapCut Create-Export Confidence**
> 上游:`0-req-CEC.md`(需求,已确认)、`1-prd-CEC.md`PRD,已确认)
> 交付物:单一 `index.html`(纯 HTML/CSS/JS,零构建,离线可用)
> 进度记录:开发过程中持续勾选与更新本文件。
## 设计质量基线(创意项目 · 高保真 · 丝滑)
- **风格**CapCut 风格深色界面(near-black 背景 + 分层 surface),活力渐变强调色(电蓝→青)。
- **计费色彩语义**:免费=绿、Pro=金、credits=琥珀,全局一致,呼应「投入前心里有数」。
- **动效**spring 缓动 `cubic-bezier(.34,1.56,.64,1)` + ease-out `cubic-bezier(.16,1,.3,1)`;按压缩放、抽屉上滑+背景模糊、Toast 滑入、AI 生成微光(shimmer)与逐步进度、环节转场淡入位移。
- **质感**:大圆角(1824px)、柔和投影、毛玻璃(backdrop-filter)、内联 SVG 线性图标、iPhone 画框含灵动岛与状态栏。
- **细节**:触控目标 ≥44px、骨架屏/加载态、空状态、达成态高亮、可访问对比度。
---
## 阶段总览
| 阶段 | 目标 | 任务区间 |
|------|------|---------|
| **阶段 0 · 脚手架** | 项目骨架、APP_DATA、组件库、路由 | T0.x |
| **阶段 1 · MVP(必交付)** | 主线闭环全链路走通(R1/R2/R3/R4/R6/R7/R8 | T1.x |
| **阶段 2 · 增强** | Before/After 对比页(R5+ 成功指标页(R9 | T2.x |
| **阶段 3 · 打磨(可选)** | 微动效、多意图差异化、自查 | T3.x |
依赖图(粗):`T0 → T1.1 → T1.2 → T1.3 → T1.4 → T1.5``T2.*` 依赖 `T1.*``T3.*` 依赖前序完成。
---
## 阶段 0 · 脚手架
- [x] **T0.1 项目骨架与移动端画框**
- 目标:建立单一 `index.html`,含 iPhone 竖屏画框容器与全局样式变量(CapCut 风格设计令牌:色板/圆角/间距/字体)。
- 对应:R6 / 非功能性
- 验收:浏览器直接打开即渲染竖屏画框(宽 375–430、高 812–932 CSS px),无横向滚动;无外部资源请求。
- 依赖:无
- [x] **T0.2 统一数据层 `APP_DATA`**
- 目标:定义唯一全局 `APP_DATA`,含 `intents / templates / tools / aiSteps / costs / creditBalance / metrics / comparison` 等模拟数据。
- 对应:R8(技术)/R1–R9 数据来源
- 验收:所有后续渲染均从 `APP_DATA` 读取;无硬编码重复副本;缺字段时有降级占位。
- 依赖:T0.1
- [x] **T0.3 基础组件库**
- 目标:实现 Bottom_Navigation、Bottom_Sheet(上滑/外点关闭/下滑关闭)、Toast(2–4s 自动消失)、模态对话框(确认/取消)、Cost_Label 徽标、AI 标记徽标。
- 对应:R3 / R6 / R8
- 验收:各组件可独立调用;触控目标 ≥44×44 CSS px;交互动效正常。
- 依赖:T0.1
- [x] **T0.4 视图路由与主线状态机**
- 目标:实现轻量视图切换(意图→工作区→编排→计费→预检→完成)与跨环节共享状态(编辑内容/选择/credit)。
- 对应:R7
- 验收:环节按固定顺序前进;可返回上一环节并恢复数据;状态在环节间传递不丢失。
- 依赖:T0.2, T0.3
---
## 阶段 1 · MVP(必交付)
- [x] **T1.1 意图选择器(R1**
- 目标:进入即呈现「口播/卡点/Vlog/带货」四项(固定顺序)+ 说明文字(≤60 字)+「跳过」入口;选「带货」进主线工作区。
- 对应:R1 / 场景 A / PRD §5.1
- 验收:1 秒内呈现四项;选择后进入预载工作区;预载中显示加载态、失败可重试;跳过入口可用。
- 依赖:T0.4
- [x] **T1.2 AI 魔法按钮编排(R2 + R8**
- 目标:主界面常驻魔法按钮;输入 1–500 字需求 → 3 秒内拆解 1–10 个有序 AI_Step;逐步执行带进度;每步含名称/计费标签/AI 标记;结果可编辑、可撤销(撤销前确认)。
- 对应:R2 / R8 / 场景 B / PRD §5.1
- 验收:空/超长输入被拦截并提示;步骤失败暂停后续并可重试;编辑后标记转「已由创作者编辑」;撤销恢复执行前态;credit 不足步骤被阻止。
- 依赖:T1.1
- [x] **T1.3 计费透明化(R3**
- 目标:功能/模板/AI 步骤入口前置 Cost_Label(免费/Pro/N credits);Pro 或计费项提供标注「免费」的替代;点 Pro 项用 Bottom_Sheet 说明价值+替代而不打断;替代与编辑不兼容时先确认。
- 对应:R3 / 场景 C / PRD §5.2
- 验收:选择前标签即可见无需额外交互;选免费替代保留已完成编辑;抽屉关闭后回到原界面保持编辑态。
- 依赖:T1.2
- [x] **T1.4 导出预检(R4**
- 目标:发起导出先出预检清单(清晰度/水印/Pro 项/credit 消耗/预计时长);每个 Pro 项可一键换免费方案并同步更新清单;credit 不足禁用「确认导出」并给降本方案;确认后 Toast 反馈且结果与清单一致;可取消返回。
- 对应:R4 / 场景 D / PRD §5.2
- 验收:未用 Pro 项时展示空状态+无水印;替换后清单各项同步且移除该项;不足时导出按钮禁用直至降本;取消保留编辑。
- 依赖:T1.3
- [x] **T1.5 主线闭环串联与完成态(R7)**
- 目标:把 T1.1–T1.4 按「意图→AI 编排→透明计费→导出预检」固定顺序串成端到端闭环;进度指示+当前/已完成环节标记;完成态汇总清晰度与水印、显示「已就绪」+导出/发布入口。
- 对应:R7 / PRD §5.1
- 验收:可从启动一路走到完成态;未完成当前环节无法进入下一环节并提示;返回可恢复;完成态要素齐全。
- 依赖:T1.4
- [x] **T1.6 MVP 自测走查**
- 目标:按场景 A→D 完整走查一遍,修复阻断性问题。
- 对应:R1R8
- 验收:主线无死路、无控制台报错;移动端竖屏交互(抽屉/Toast/对话框)均正常。
- 依赖:T1.5
---
## 阶段 2 · 增强
- [x] **T2.1 Before/After 对比页(R5**
- 目标:竖屏内上下/左右并列 Before vs After(完成同一主线目标),展示步数/决策点/被拦截次数的绝对差值+降幅%+方向标记;按序列出关键节点并标记决策点/拦截点;Before=0 时降幅显示「不适用」。
- 对应:R5 / 场景 E / PRD §3.2
- 验收:三项指标差值与降幅计算正确;节点顺序与标记清晰;数据来自 `APP_DATA.comparison`
- 依赖:T1.6
- [x] **T2.2 成功指标页(R9**
- 目标:三类指标(效率/信心/产品健康),每项含名称/当前值/单位/基线/目标;达成与未达成有可区分视觉标识;字段缺失显示「数据缺失」。
- 对应:R9 / PRD §2.2
- 验收:达成态判定正确(当前值相对基线达到/超过目标);缺字段降级不影响其余渲染;数据来自 `APP_DATA.metrics`
- 依赖:T1.6
---
## 阶段 3 · 打磨(可选)
- [ ] **T3.1 微动效与转场**
- 目标:环节转场、AI 执行进度、徽标弹跳等动效打磨。
- 对应:R6(Could)
- 验收:动效流畅不卡顿,不阻断交互。
- 依赖:T2.x
- [ ] **T3.2 多意图差异化内容**
- 目标:为口播/卡点/Vlog 补充各自模板与说明(主线仍以带货为完整闭环)。
- 对应:R1(Could)
- 验收:切换不同意图进入差异化工作区,数据来自 `APP_DATA`
- 依赖:T2.x
- [ ] **T3.3 终检与交付**
- 目标:全量自查(需求 R1–R9 逐条核对)、离线打开验证、清理调试代码、补 README。
- 对应:全部
- 验收:断网打开 `index.html` 全功能可用;R1R9 逐条满足。
- 依赖:T3.1, T3.2
---
## 需求覆盖核对表(R → 任务)
| 需求 | 任务 |
|------|------|
| R1 意图优先起点 | T1.1T3.2 增补) |
| R2 AI 魔法按钮 | T1.2 |
| R3 计费透明化 | T1.3 |
| R4 导出预检 | T1.4 |
| R5 Before/After 对比 | T2.1 |
| R6 移动端形态 | T0.1, T0.3T3.1 增补) |
| R7 完整闭环主线 | T0.4, T1.5 |
| R8 AI 角色与控制权 | T1.2, T0.3 |
| R9 成功指标可视化 | T2.2 |
| 技术栈/数据驱动 | T0.1, T0.2 |
---
## 进度记录
> 格式:`日期 — 任务号 — 变更/状态`
- 2026-06-14 — T0.1T0.4 — 完成脚手架:单文件 `prototype/index.html`、iPhone 画框(灵动岛/状态栏)、设计令牌、统一 `APP_DATA`、组件库(Bottom Sheet/Toast/对话框/计费徽标/AI 标记)、视图状态机与环节进度指示。
- 2026-06-14 — T1.1T1.6 — 完成 MVP 主线闭环:意图选择(4 项+跳过+预载态)→ AI 魔法按钮编排(输入校验/逐步进度/可编辑可撤销/AI 标记)→ 计费透明化(标签前置/Pro 说明抽屉/免费替代)→ 导出预检(清单/一键换免费/credit 不足禁用导出)→ 完成态(结果与清单一致)。
- 2026-06-14 — T2.1T2.2 — 完成增强:Before/After 对比页(步数 14→6、决策点 9→3、拦截 4→0,含降幅与流程节点)+ 成功指标页(效率/信心/产品健康三类,基线/目标/达成态)。
- 2026-06-14 — 验证 — Playwright 全流程走查通过:意图→编排→编辑→导出(含 credit 不足 13>10 禁用 → 换免费 5≤10 启用)→ 完成态(1080p/无水印/5credits/33s)→ 对比→指标;控制台 0 错误。
- 待办(可选):T3.1 微动效深化、T3.2 多意图差异化、T3.3 终检与 README。
## 修复记录(用户走查反馈)
- 2026-06-14 — 成功页内容溢出、与底部导航/按钮重叠 → 改为可滚动容器 + 底部留白 110px。
- 2026-06-14 — 指标页「得分数值」与「已达成」状态徽标重叠 → 状态徽标从绝对定位改为跟随指标名左侧。
- 2026-06-14 — 工作区进入即显示大块空视频(死空间)→ 去掉,改为轻量空状态引导 + 魔法按钮为主角;AI 生成后才出现紧凑成片结果卡。
- 2026-06-14 — 工作区无法垂直滚动到导出按钮 → 滚动内容底部补 110px 留白,按钮完整露出于导航之上。
- 2026-06-14 — T3.3(部分)— 完成 README`prototype/README.md`:快速开始、选题理由、四动作方案、操作指引、设计思路、技术说明、配套文档索引);并完成布局/溢出/可达性全面复查(各屏无超框、抽屉/对话框/各页滚动可达、控制台 0 错误)。
+59
View File
@@ -0,0 +1,59 @@
---
inclusion: always
---
# AI Coding 工作流规则
本规则定义从需求到交付的标准化协作流程。所有涉及"做一个项目 / 实现一个功能"的请求,均遵循以下五个阶段,逐阶段产出文档并在每个关键节点等待用户确认后再推进。
## 命名约定
- 项目英文缩写记为 `XXX`(如 IPTV、AVCC),由用户提供或与用户确认。
- 文档统一命名并置于项目根目录(或用户指定目录):
- `0-req-XXX.md` — 需求与目标文档
- `1-prd-XXX.md` — 产品需求文档(PRD
- `2-task-XXX.md` — 开发任务文档
## 阶段流程
### 阶段 1:接收需求与目标
- 用户给出需求和目标描述,可以是一段文字,也可以是一份 md 文档。
- 我先完整读取并理解用户的需求与目标;若有歧义或关键信息缺失,先向用户澄清,不臆测。
### 阶段 2:生成 `0-req-XXX.md`(需求文档)
- 基于用户的需求与目标,生成 `0-req-XXX.md`
- 内容应包含:引言、术语表、角色定义、功能性需求(采用 EARS 格式:WHEN/IF/WHILE/WHERE/THE...SHALL)、非功能性需求、关键约束与假设。
- 生成后**必须请用户检查确认**。未确认前不进入下一阶段。
- 用户提出修改意见时,更新文档并再次请其确认,直到通过。
### 阶段 3:生成 `1-prd-XXX.md`(产品需求文档)
- 仅在 `0-req-XXX.md` 确认通过后进行。
- 基于需求文档生成 `1-prd-XXX.md`
- 内容应包含:产品概述与定位、目标与成功指标、用户画像与核心场景(每个场景标注"痛点解法")、功能清单与优先级(MoSCoW,并映射回需求编号)、关键流程、角色权限矩阵、版本规划、非功能性要求、依赖与风险。
- 生成后**必须请用户检查确认**。未确认前不进入下一阶段。
### 阶段 4:生成 `2-task-XXX.md`(开发任务文档)
- 仅在 `1-prd-XXX.md` 确认通过后进行。
- 生成 `2-task-XXX.md`,用于指导开发,包含详细的工作任务分解。
- 任务要求:
- 以可勾选清单(`- [ ]`)组织,编号清晰,粒度可执行可验证。
- 每个任务标注:目标、对应的需求/PRD 条目、验收标准、依赖关系。
- 区分优先级与阶段(如 MVP / 二期 / 三期)。
- **开发过程中根据实际进度持续更新该文档**(勾选完成项、记录变更、补充新任务)。
- 生成后**必须请用户确认**。
### 阶段 5:按任务文档执行开发
- 仅在 `2-task-XXX.md` 确认通过后开始编码。
- 严格按确认的任务文档推进开发工作。
- 每完成一个任务或一组任务:
- 进行相应的测试(构建、单元测试、必要时集成测试)。
- 更新 `2-task-XXX.md` 的任务状态与进度记录。
- 与用户交互、汇报进展、确认下一步。
- 持续推进,直至完成全部任务。
## 通用约束
- 每个阶段的产出都要等待用户确认,不得跨阶段抢跑。
- 文档之间保持可追溯:PRD 功能映射回需求编号,任务映射回需求/PRD 条目。
- 当上游文档(需求或 PRD)发生变更时,同步更新下游文档,保持一致。
- 用户的语言即回复与文档的语言(默认中文)。
+349
View File
@@ -0,0 +1,349 @@
#!/bin/bash
# ============================================================
# 百度网盘备份脚本
# 用法: ./baidu-backup.sh [目标目录]
# 示例: ./baidu-backup.sh /2026/0517
# ./baidu-backup.sh # 自动使用 /年份/月日
# ============================================================
set -e
# ---- 配置 ----
APP_KEY="z3gemBZfg7KYj6U3eHNfIzTs7uYS9OMh"
SECRET_KEY="ptCKj2DfxL0KtGR1pM08c9KO2t2UC7SR"
TOKEN_FILE="$HOME/.baidu_pan_token.json"
BLOCK_SIZE=$((4 * 1024 * 1024)) # 4MB
# ---- 自动识别项目 ----
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
PROJECT_NAME="$(basename "$SCRIPT_DIR")"
PARENT_DIR="$(dirname "$SCRIPT_DIR")"
ZIP_FILE="/tmp/${PROJECT_NAME}.zip"
MD5_FILE="/tmp/baidu_md5_list.txt"
# ---- 目标目录 ----
if [ -n "$1" ]; then
REMOTE_DIR="$1"
else
REMOTE_DIR="/$(date +%Y)/$(date +%m%d)"
fi
REMOTE_PATH="${REMOTE_DIR}/${PROJECT_NAME}.zip"
echo ""
echo "╔══════════════════════════════════════════╗"
echo "║ 📦 百度网盘备份工具 ║"
echo "╚══════════════════════════════════════════╝"
echo ""
echo " 项目: $PROJECT_NAME"
echo " 目标: $REMOTE_PATH"
echo ""
# ============================================================
# 步骤1: 打包
# ============================================================
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo "[1/5] 📦 打包项目文件..."
rm -f "$ZIP_FILE"
cd "$PARENT_DIR"
# 先统计文件总数
TOTAL_FILES=$(find "$PROJECT_NAME" -not -path "${PROJECT_NAME}/.git/*" -type f | wc -l | tr -d ' ')
echo " 📊 共 ${TOTAL_FILES} 个文件"
# 打包并实时显示百分比
COUNTER=0
zip -r "$ZIP_FILE" "$PROJECT_NAME" -x "${PROJECT_NAME}/.git/*" 2>&1 | while IFS= read -r line; do
COUNTER=$((COUNTER + 1))
PCT=$((COUNTER * 100 / TOTAL_FILES))
if [ $PCT -gt 100 ]; then PCT=100; fi
# 进度条
BAR_FILLED=$((PCT * 30 / 100))
BAR_EMPTY=$((30 - BAR_FILLED))
BAR=""
for ((b=0; b<BAR_FILLED; b++)); do BAR="${BAR}"; done
for ((b=0; b<BAR_EMPTY; b++)); do BAR="${BAR}"; done
printf "\r %s %3d%% (%d/%d) " "$BAR" "$PCT" "$COUNTER" "$TOTAL_FILES"
done
echo ""
FILE_SIZE=$(stat -f%z "$ZIP_FILE" 2>/dev/null || stat -c%s "$ZIP_FILE" 2>/dev/null)
FILE_SIZE_MB=$((FILE_SIZE / 1024 / 1024))
echo " ✅ 打包完成: ${FILE_SIZE_MB}MB"
# ============================================================
# 步骤2: 获取 Token(缓存 / 刷新 / 设备授权)
# ============================================================
echo ""
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo "[2/5] 🔑 获取百度网盘授权..."
ACCESS_TOKEN=""
# 尝试读取缓存
if [ -f "$TOKEN_FILE" ]; then
CACHED=$(python3 -c "
import json, time, sys
with open('$TOKEN_FILE') as f:
d = json.load(f)
if time.time() < d.get('expires_at', 0):
print('VALID|' + d['access_token'])
else:
print('EXPIRED|' + d.get('refresh_token', ''))
" 2>/dev/null || echo "FAIL|")
STATUS="${CACHED%%|*}"
VALUE="${CACHED#*|}"
if [ "$STATUS" = "VALID" ]; then
ACCESS_TOKEN="$VALUE"
echo " ✅ 使用缓存 Token(有效)"
elif [ "$STATUS" = "EXPIRED" ] && [ -n "$VALUE" ]; then
echo " ⏳ Token 已过期,尝试刷新..."
RESP=$(curl -s -X POST "https://openapi.baidu.com/oauth/2.0/token" \
-d "grant_type=refresh_token&refresh_token=${VALUE}&client_id=${APP_KEY}&client_secret=${SECRET_KEY}")
NEW_TOKEN=$(echo "$RESP" | python3 -c "import sys,json;d=json.load(sys.stdin);print(d.get('access_token',''))" 2>/dev/null)
if [ -n "$NEW_TOKEN" ]; then
ACCESS_TOKEN="$NEW_TOKEN"
# 更新缓存
python3 -c "
import json, time
d = json.loads('$RESP'.replace(\"'\", '\"'))
token = {'access_token': d['access_token'], 'refresh_token': d['refresh_token'], 'expires_at': int(time.time()) + d['expires_in']}
with open('$TOKEN_FILE', 'w') as f: json.dump(token, f)
" 2>/dev/null
echo " ✅ Token 刷新成功"
else
echo " ⚠️ 刷新失败,需要重新授权"
fi
fi
fi
# 如果没有有效 Token,走设备授权流程
if [ -z "$ACCESS_TOKEN" ]; then
echo " 🔐 需要设备授权..."
DEVICE_RESP=$(curl -s -X POST "https://openapi.baidu.com/oauth/2.0/device/code" \
-d "response_type=device_code&client_id=${APP_KEY}&scope=basic,netdisk")
DEVICE_CODE=$(echo "$DEVICE_RESP" | python3 -c "import sys,json;print(json.load(sys.stdin)['device_code'])")
USER_CODE=$(echo "$DEVICE_RESP" | python3 -c "import sys,json;print(json.load(sys.stdin)['user_code'])")
QRCODE_URL=$(echo "$DEVICE_RESP" | python3 -c "import sys,json;print(json.load(sys.stdin)['qrcode_url'])")
echo ""
echo " ┌─────────────────────────────────────┐"
echo " │ 请打开: https://openapi.baidu.com/device"
echo " │ 输入码: $USER_CODE"
echo " │ 或扫码: $QRCODE_URL"
echo " └─────────────────────────────────────┘"
echo ""
read -p " 授权完成后按回车继续..." _
TOKEN_RESP=$(curl -s -X POST "https://openapi.baidu.com/oauth/2.0/token" \
-d "grant_type=device_token&code=${DEVICE_CODE}&client_id=${APP_KEY}&client_secret=${SECRET_KEY}")
ACCESS_TOKEN=$(echo "$TOKEN_RESP" | python3 -c "import sys,json;print(json.load(sys.stdin).get('access_token',''))" 2>/dev/null)
if [ -z "$ACCESS_TOKEN" ]; then
echo " ❌ 授权失败: $TOKEN_RESP"
rm -f "$ZIP_FILE"
exit 1
fi
# 保存缓存
echo "$TOKEN_RESP" | python3 -c "
import sys, json, time
d = json.load(sys.stdin)
token = {'access_token': d['access_token'], 'refresh_token': d['refresh_token'], 'expires_at': int(time.time()) + d['expires_in']}
with open('$TOKEN_FILE', 'w') as f: json.dump(token, f)
"
echo " ✅ 授权成功,Token 已缓存"
fi
# ============================================================
# 步骤3: 预创建文件
# ============================================================
echo ""
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
BLOCKS=$(( (FILE_SIZE + BLOCK_SIZE - 1) / BLOCK_SIZE ))
echo "[3/5] 📋 预创建文件(${BLOCKS}个分片)..."
BLOCK_LIST=$(python3 -c "import json; print(json.dumps(['0'*32]*$BLOCKS))")
PRE_RESP=$(curl -s "https://pan.baidu.com/rest/2.0/xpan/file?method=precreate&access_token=${ACCESS_TOKEN}" \
-d "path=${REMOTE_PATH}&size=${FILE_SIZE}&isdir=0&autoinit=1&block_list=${BLOCK_LIST}")
UPLOAD_ID=$(echo "$PRE_RESP" | python3 -c "import sys,json;print(json.load(sys.stdin).get('uploadid',''))" 2>/dev/null)
if [ -z "$UPLOAD_ID" ]; then
echo " ❌ 预创建失败: $PRE_RESP"
rm -f "$ZIP_FILE"
exit 1
fi
echo " ✅ 预创建成功"
# ============================================================
# 步骤4: 分片上传(并发)
# ============================================================
echo ""
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
PARALLEL="${BAIDU_PARALLEL:-8}"
if [ "$PARALLEL" -gt "$BLOCKS" ]; then PARALLEL=$BLOCKS; fi
echo "[4/5] 🚀 上传中(${PARALLEL} 路并发)..."
echo ""
UNSORTED_MD5="/tmp/baidu_md5_unsorted_${UPLOAD_ID}.txt"
PROGRESS_FILE="/tmp/baidu_progress_${UPLOAD_ID}.txt"
ERR_FILE="/tmp/baidu_err_${UPLOAD_ID}.txt"
DONE_FLAG="/tmp/baidu_done_${UPLOAD_ID}"
: > "$UNSORTED_MD5"
: > "$PROGRESS_FILE"
: > "$ERR_FILE"
rm -f "$DONE_FLAG"
: > "$MD5_FILE"
START_TIME=$(date +%s)
# 单分片上传 worker(并发安全:单行 echo < PIPE_BUF 是原子写)
upload_part() {
local i=$1
local chunk="/tmp/baidu_chunk_${UPLOAD_ID}_${i}"
dd if="$ZIP_FILE" bs="$BLOCK_SIZE" skip="$i" count=1 2>/dev/null > "$chunk"
local resp md5 attempt
md5=""
for attempt in 1 2 3; do
resp=$(curl -s --max-time 600 \
"https://d.pcs.baidu.com/rest/2.0/pcs/superfile2?method=upload&access_token=${ACCESS_TOKEN}&type=tmpfile&path=${REMOTE_PATH}&uploadid=${UPLOAD_ID}&partseq=${i}" \
-F "file=@${chunk}")
md5=$(echo "$resp" | python3 -c "import sys,json;print(json.load(sys.stdin).get('md5',''))" 2>/dev/null)
[ -n "$md5" ] && break
sleep $((attempt * 2))
done
rm -f "$chunk"
if [ -z "$md5" ]; then
echo "part ${i} failed after 3 attempts: ${resp}" >> "$ERR_FILE"
return 1
fi
echo "${i}|${md5}" >> "$UNSORTED_MD5"
echo "x" >> "$PROGRESS_FILE"
}
export -f upload_part
export ZIP_FILE BLOCK_SIZE ACCESS_TOKEN REMOTE_PATH UPLOAD_ID
export UNSORTED_MD5 PROGRESS_FILE ERR_FILE
# 后台进度刷新进程(每秒刷新一次)
(
while :; do
DONE=$(wc -l < "$PROGRESS_FILE" 2>/dev/null | tr -d ' ')
DONE=${DONE:-0}
if [ "$DONE" -gt "$BLOCKS" ]; then DONE=$BLOCKS; fi
PCT=$((DONE * 100 / BLOCKS))
UPLOADED_MB=$((DONE * BLOCK_SIZE / 1024 / 1024))
if [ $UPLOADED_MB -gt $FILE_SIZE_MB ]; then UPLOADED_MB=$FILE_SIZE_MB; fi
NOW=$(date +%s)
ELAPSED=$((NOW - START_TIME))
if [ $ELAPSED -gt 0 ] && [ $DONE -gt 0 ]; then
SPEED_KB=$((DONE * BLOCK_SIZE / 1024 / ELAPSED))
SPEED_INT=$((SPEED_KB / 1024))
SPEED_DEC=$(( (SPEED_KB % 1024) * 10 / 1024 ))
if [ "$SPEED_KB" -gt 0 ]; then
REMAINING_KB=$(( (FILE_SIZE - DONE * BLOCK_SIZE) / 1024 ))
if [ $REMAINING_KB -lt 0 ]; then REMAINING_KB=0; fi
ETA=$(( REMAINING_KB / SPEED_KB ))
ETA_MIN=$((ETA / 60))
ETA_SEC=$((ETA % 60))
ETA_STR="${ETA_MIN}m${ETA_SEC}s"
else
ETA_STR="计算中"
fi
else
SPEED_INT=0
SPEED_DEC=0
ETA_STR="计算中"
fi
BAR_FILLED=$((PCT * 30 / 100))
BAR_EMPTY=$((30 - BAR_FILLED))
BAR=""
for ((b=0; b<BAR_FILLED; b++)); do BAR="${BAR}"; done
for ((b=0; b<BAR_EMPTY; b++)); do BAR="${BAR}"; done
printf "\r %s %3d%% | %d/%dMB | %d.%dMB/s | 剩余%s " "$BAR" "$PCT" "$UPLOADED_MB" "$FILE_SIZE_MB" "$SPEED_INT" "$SPEED_DEC" "$ETA_STR"
if [ -f "$DONE_FLAG" ] || [ "$DONE" -ge "$BLOCKS" ]; then
break
fi
sleep 1
done
) &
PROGRESS_PID=$!
# 并发上传:xargs -P 同时跑 PARALLEL 个 worker(绕开百度 PCS 单连接限速)
XARGS_RC=0
seq 0 $((BLOCKS-1)) | xargs -P "$PARALLEL" -I % bash -c 'upload_part "$@"' _ % || XARGS_RC=$?
# 通知进度进程退出并等待,最后重画一行
touch "$DONE_FLAG"
wait "$PROGRESS_PID" 2>/dev/null || true
echo ""
if [ "$XARGS_RC" -ne 0 ]; then
echo ""
echo " ❌ 分片上传失败:"
if [ -s "$ERR_FILE" ]; then
head -n 5 "$ERR_FILE"
fi
rm -f "$ZIP_FILE" "$MD5_FILE" "$UNSORTED_MD5" "$PROGRESS_FILE" "$ERR_FILE" "$DONE_FLAG"
rm -f /tmp/baidu_chunk_${UPLOAD_ID}_*
exit 1
fi
# 校验分片数
DONE_COUNT=$(wc -l < "$UNSORTED_MD5" | tr -d ' ')
if [ "$DONE_COUNT" != "$BLOCKS" ]; then
echo ""
echo " ❌ 分片数不匹配: ${DONE_COUNT}/${BLOCKS}"
if [ -s "$ERR_FILE" ]; then
head -n 5 "$ERR_FILE"
fi
rm -f "$ZIP_FILE" "$MD5_FILE" "$UNSORTED_MD5" "$PROGRESS_FILE" "$ERR_FILE" "$DONE_FLAG"
rm -f /tmp/baidu_chunk_${UPLOAD_ID}_*
exit 1
fi
# 按 partseq 升序生成最终 MD5_FILE
sort -t'|' -k1n "$UNSORTED_MD5" | cut -d'|' -f2 > "$MD5_FILE"
rm -f "$UNSORTED_MD5" "$PROGRESS_FILE" "$ERR_FILE" "$DONE_FLAG"
echo ""
echo " ✅ 所有分片上传完成"
# ============================================================
# 步骤5: 合并文件
# ============================================================
echo ""
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo "[5/5] 🔗 合并文件..."
MD5_LIST=$(awk '{printf "\"%s\",", $0}' "$MD5_FILE" | sed 's/,$//')
CREATE_RESP=$(curl -s "https://pan.baidu.com/rest/2.0/xpan/file?method=create&access_token=${ACCESS_TOKEN}" \
-d "path=${REMOTE_PATH}&size=${FILE_SIZE}&isdir=0&uploadid=${UPLOAD_ID}&block_list=[${MD5_LIST}]")
CREATE_ERRNO=$(echo "$CREATE_RESP" | python3 -c "import sys,json;print(json.load(sys.stdin).get('errno',99))" 2>/dev/null)
FINAL_PATH=$(echo "$CREATE_RESP" | python3 -c "import sys,json;print(json.load(sys.stdin).get('path',''))" 2>/dev/null)
# 清理
rm -f "$ZIP_FILE" "$MD5_FILE"
rm -f /tmp/baidu_chunk_${UPLOAD_ID}_* 2>/dev/null || true
# 计算耗时
END_TIME=$(date +%s)
TOTAL=$((END_TIME - START_TIME))
T_MIN=$((TOTAL / 60))
T_SEC=$((TOTAL % 60))
# 输出结果
echo ""
echo "╔══════════════════════════════════════════════╗"
if [ "$CREATE_ERRNO" = "0" ]; then
echo "║ 📦 百度网盘备份完成! ║"
echo "╠══════════════════════════════════════════════╣"
echo " 📁 路径: $FINAL_PATH"
echo " 📊 大小: ${FILE_SIZE_MB} MB"
echo " ⏱️ 耗时: ${T_MIN}${T_SEC}"
echo " ✅ 状态: 上传成功"
else
echo "║ ❌ 合并失败 ║"
echo "╠══════════════════════════════════════════════╣"
echo " errno: $CREATE_ERRNO"
echo " 响应: $CREATE_RESP"
fi
echo "╚══════════════════════════════════════════════╝"
echo ""
Binary file not shown.
BIN
View File
Binary file not shown.
+134
View File
@@ -0,0 +1,134 @@
# CapCut · Confidence Before Investment
> CapCut「创作—导出」链路重设计 — 高保真可交互原型
> 主题:**让创作者在投入时间之前就心里有数(Confidence Before Investment**
一个纯前端、零依赖、可离线运行的移动端原型,演示对 CapCut 创作流程的重新设计。
---
## 一、快速开始
1. 用 Chrome / Safari 直接双击打开 `index.html` 即可,**无需任何构建或安装**。
2. 推荐用浏览器的「设备模拟」或直接在桌面观看 —— 原型以 iPhone 竖屏画框呈现。
3. 从首页「带货」意图开始,跟着下方操作指引走一遍完整闭环。
> 也可用本地服务器查看:在该目录运行 `python3 -m http.server`,浏览器访问 `http://localhost:8000`。
---
## 二、为什么选 CapCut,又为什么是这个点
### 选择 CapCut
在 TikTok / CapCut / Instagram 中,CapCut 的核心痛点集中在**一条可见、可重设计的创作工作流**里;而 TikTok / Instagram 的主要问题(推荐排序、审核、政策)依赖系统级机制,难以在原型中可信地重现。CapCut 在「可设计性、外部可验证性、可原型化」上都最契合作业对"可行性 + 交互链路 + 高保真 UI"的要求。
### 核心问题:创作—导出链路中的「不确定性」
- **付费墙不透明**:做到一半才发现某功能/模板是 Pro,被「中途拦截」。
- **AI 工具分散**:面对一堆 AI 工具不知用哪个、会不会扣 credit。
- **导出有惊吓**:临到导出才发现有水印 / 清晰度被锁 / credit 用光。
> 关键洞察:把「商业化信任」这一本身**不可原型化**的问题,转化为**可原型化的 UX 表达** —— 用透明、善意的设计修复信任,而不是去改定价政策。
---
## 三、解决方案:四个动作,一条闭环
| # | 动作 | 解决的痛点 |
|---|------|-----------|
| 1 | **意图优先的起点** —— 进入即问「想做什么」,分流到对应模板工具 | 空白时间线无从下手 |
| 2 | **一个聪明的 AI 入口(魔法按钮)** —— 一句话需求 → 编排有序 AI 步骤 | AI 工具分散、不会用 |
| 3 | **全程免费/Pro 透明化** —— 投入前就标明,并给免费替代 | 付费墙不透明 |
| 4 | **导出预检(Pre-flight** —— 导出前清单 + 一键换免费方案 | 导出有惊吓 |
四个动作由一条主线串联:**「30 秒带货/口播视频」** → 意图选择 → AI 编排 → 透明计费 → 导出预检 → 完成。
---
## 四、操作指引(建议体验路径)
### 1. 意图选择(首页)
| 操作 | 效果 |
|------|------|
| 点「带货」卡片 | 加载后进入带货主线工作区(推荐,走完整闭环) |
| 点其它意图 | 进入工作区(演示主线统一以带货闭环呈现) |
| 点底部「直接进入空白时间线」 | 跳过意图选择(Toast 提示) |
### 2. 工作区
| 操作 | 效果 |
|------|------|
| 点「用一句话生成视频」魔法按钮 | 打开 AI 编排面板 |
| 点带 **Pro / N credits** 标签的模板或工具 | 弹出底部抽屉:说明价值 + 提供免费替代(不打断流程) |
| 点带「免费」标签的项 | 直接应用(Toast 提示) |
| 上下滚动 | 查看推荐模板、工具、导出入口 |
| 点「预览并导出」 | 进入导出预检 |
### 3. AI 编排面板(魔法按钮)
| 操作 | 效果 |
|------|------|
| 输入需求(或点推荐词)后「生成编排」 | 拆解为有序 AI 步骤并逐步执行(带进度) |
| 留空直接生成 | 被拦截并提示(输入校验) |
| 每个完成步骤的「编辑」 | 手动改写结果,标记变为「已由创作者编辑」 |
| 每个完成步骤的「撤销」 | 弹确认对话框,撤销后恢复到 AI 生成前 |
| 「完成编排,去校对成本」 | 关闭面板,成片结果卡出现在工作区 |
> 每个步骤都标注**计费标签**与**「由 AI 完成」标记** —— 体现 *AI-first, Manual-second*AI 是起点,不是终点。
### 4. 导出预检(核心亮点)
| 操作 | 效果 |
|------|------|
| 发起导出 | 先看清单:清晰度 / 水印 / 用到的 Pro 项 / 预计 credit / 预计时长 |
| credit 不足时 | 顶部红色警示,**「确认导出」按钮被禁用** |
| 点某 Pro 项「换免费」 | 清单实时更新(清晰度/水印/credit/时长),credit 回落后导出自动启用 |
| 「确认导出」 | 进入完成态,结果与清单**逐项一致** |
| 「返回继续编辑」 | 关闭清单、保留全部编辑 |
### 5. 完成态 / 对比 / 指标(底部导航)
| 页面 | 内容 |
|------|------|
| **完成态** | 汇总清晰度/水印/花费/时长 + 「再做一个」「看 Before/After」 |
| **对比** | Before/After 量化对比:步数 14→6、决策点 9→3、被拦截 4→0;可切换查看两条路径的流程节点 |
| **指标** | 三类成功指标(用户效率 / 用户信心 / 产品健康),含基线值、目标值与「达成」状态 |
---
## 五、设计思路
### 设计原则
- **Guide, don't take over** —— 引导而非替代
- **Make trade-offs visible** —— 让权衡可见(计费色彩语义:免费=绿 / Pro=金 / credits=琥珀)
- **Respect creator control** —— AI 产出皆可编辑、可撤销
- **Reduce cognitive load** —— 在高摩擦时刻(选择前、导出前)减负
- **AI-first, Manual-second** —— AI 起步,人工兜底
### 把「信任」做成体验
最尖锐的痛点是商业化对用户信任的伤害,但定价政策无法用原型表达。于是我们把它转译成**三个可交互的 UX 承诺**:
1. **投入前透明** —— 计费标签前置,杜绝「中途被墙」。
2. **善意的替代** —— 凡 Pro/计费项都给免费方案,大方告知而非诱导付费。
3. **导出前无惊吓** —— 预检清单 + 一键降本,结果与承诺一致。
### 交互/视觉
- CapCut 风格深色界面 + 电蓝→青品牌渐变;大圆角、毛玻璃抽屉、spring 弹性动效、AI 生成微光与逐步进度。
- iPhone 竖屏画框(灵动岛 + 状态栏);底部导航 / 底部抽屉 / Toast / 模态对话框;触控目标 ≥44×44。
- 渐进式展示:进入工作区先以「一句话生成」为主角(不再有空视频死区),AI 生成后才出现紧凑成片卡。
---
## 六、技术说明
- **纯 HTML/CSS/JS**,单文件 `index.html`,无构建工具、无框架、无 CDN,离线可用。
- **数据驱动**:意图、模板、AI 步骤、计费、credit、指标等模拟数据集中在唯一全局 `APP_DATA`,界面从中读取渲染。
- **图标**:全部内联 SVG。**媒体**:本地占位色块,无外部网络请求。
- **健壮性**:数据缺失时降级占位,不中断其余渲染。
> 所有数据、价格、credit、指标均为**演示用模拟值**,不代表 CapCut 真实定价或性能。
---
## 七、配套文档
| 文档 | 内容 |
|------|------|
| `../0-req-CEC.md` | 需求与目标(含 EARS 验收标准) |
| `../1-prd-CEC.md` | 产品需求文档(画像/场景/优先级/流程/指标) |
| `../2-task-CEC.md` | 开发任务文档(任务分解 + 进度 + 修复记录) |
| `index.html` | 高保真可交互原型 |
+1583
View File
File diff suppressed because it is too large Load Diff
+9
View File
@@ -0,0 +1,9 @@
1、AICoding 的规则是 ai-coding-workflow.md,告诉AI如何干活
2、0-problem.md是作业的目标
3、0-req-CEC.md、1-prd-CEC.md、2-task-CEC.md 是 LLM 根据 ai-coding-workflow.md 的工作过程的产出物
4、prototype中的结果prototype/index.html 是按照 ai-coding-workflow.md 执行完的作业结果,prototype/README.md 是作业完成的设计思路和过程
5、demo-voiced.mp4 是 作业的说明视频