# 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` | 高保真可交互原型 |