---
name: product-spec-template
description: Product Spec 输出模板。当需要生成产品需求文档时，按照此模板的结构和格式填充内容，输出为 Product-Spec.md 文件。
---

# Product Spec 输出模板

本模板用于生成结构完整的 Product Spec 文档。生成时按照此结构填充内容。

---

## 模板结构

**文件命名**：Product-Spec.md

---

## 产品概述
<一段话说清楚：>
- 这是什么产品
- 解决什么问题
- **目标用户是谁**（具体描述，不要只说「用户」）
- 核心价值是什么

## 应用场景
<列举 3-5 个具体场景：谁、在什么情况下、怎么用、解决什么问题>

## 功能需求
<按「核心功能」和「辅助功能」分类，每条功能说明：用户做什么 → 系统做什么 → 得到什么>

## UI 布局
<描述整体布局结构和各区域的详细设计，需要包含：>
- 整体是什么布局（几栏、比例、固定元素等）
- 每个区域放什么内容
- 控件的具体规范（位置、尺寸、样式等）

## 用户使用流程
<分步骤描述用户如何使用产品，可以有多条路径（如快速上手、进阶使用）>

## AI 能力需求

| 能力类型 | 用途说明 | 应用位置 |
|---------|---------|---------|
| <能力类型> | <做什么> | <在哪个环节触发> |

## 技术说明（可选）
<如果涉及以下内容，需要说明：>
- 数据存储：是否需要登录？数据存在哪里？
- 外部依赖：需要调用什么服务？有什么限制？
- 部署方式：纯前端？需要服务器？

## 补充说明
<如有需要，用表格说明选项、状态、逻辑等>

---

## 完整示例

以下是一个「剧本分镜生成器」的 Product Spec 示例，供参考：

```markdown
## 产品概述

这是一个帮助漫画作者、短视频创作者、动画团队将剧本快速转化为分镜图的工具。

**目标用户**：有剧本但缺乏绘画能力、或者想快速出分镜草稿的创作者。他们可能是独立漫画作者、短视频博主、动画工作室的前期策划人员，共同的痛点是「脑子里有画面，但画不出来或画太慢」。

**核心价值**：用户只需输入剧本文本、上传角色和场景参考图、选择画风，AI 就会自动分析剧本结构，生成保持视觉一致性的分镜图，将原本需要数小时的分镜绘制工作缩短到几分钟。

## 应用场景

- **漫画创作**：独立漫画作者小王有一个 20 页的剧本，需要先出分镜草稿再精修。他把剧本贴进来，上传主角的参考图，10 分钟就拿到了全部分镜草稿，可以直接在这个基础上精修。

- **短视频策划**：短视频博主小李要拍一个 3 分钟的剧情短片，需要给摄影师看分镜。她把脚本输入，选择「写实」风格，生成的分镜图直接可以当拍摄参考。

- **动画前期**：动画工作室要向客户提案，需要快速出一版分镜来展示剧本节奏。策划人员用这个工具 30 分钟出了 50 张分镜图，当天就能开提案会。

- **小说可视化**：网文作者想给自己的小说做宣传图，把关键场景描述输入，生成的分镜图可以直接用于社交媒体宣传。

- **教学演示**：小学语文老师想把一篇课文变成连环画给学生看，把课文内容输入，选择「动漫」风格，生成的图片可以直接做成 PPT。

## 功能需求

**核心功能**
- 剧本输入与分析：用户输入剧本文本 → 点击「生成分镜」→ AI 自动识别角色、场景和情节节拍，将剧本拆分为多页分镜
- 角色设定：用户添加角色卡片（名称 + 外观描述 + 参考图）→ 系统建立角色视觉档案，后续生成时保持外观一致
- 场景设定：用户添加场景卡片（名称 + 氛围描述 + 参考图）→ 系统建立场景视觉档案（可选，不设定则由 AI 根据剧本生成）
- 画风选择：用户从下拉框选择画风（漫画/动漫/写实/赛博朋克/水墨）→ 生成的分镜图采用对应视觉风格
- 分镜生成：用户点击「生成分镜」→ AI 生成当前页 9 张分镜图（3x3 九宫格）→ 展示在右侧输出区
- 连续生成：用户点击「继续生成下一页」→ AI 基于前一页的画风和角色外观，生成下一页 9 张分镜图

**辅助功能**
- 批量下载：用户点击「下载全部」→ 系统将当前页 9 张图打包为 ZIP 下载
- 历史浏览：用户通过页面导航 → 切换查看已生成的历史页面

## UI 布局

### 整体布局
左右两栏布局，左侧输入区占 40%，右侧输出区占 60%。

### 左侧 - 输入区
- 顶部：项目名称输入框
- 剧本输入：多行文本框，placeholder「请输入剧本内容...」
- 角色设定区：
    - 角色卡片列表，每张卡片包含：角色名、外观描述、参考图上传
    - 「添加角色」按钮
- 场景设定区：
    - 场景卡片列表，每张卡片包含：场景名、氛围描述、参考图上传
    - 「添加场景」按钮
- 画风选择：下拉选择（漫画 / 动漫 / 写实 / 赛博朋克 / 水墨），默认「动漫」
- 底部：「生成分镜」主按钮，靠右对齐，醒目样式

### 右侧 - 输出区
- 分镜图展示区：3x3 网格布局，展示 9 张独立分镜图
- 每张分镜图下方显示：分镜编号、简要描述
- 操作按钮：「下载全部」「继续生成下一页」
- 页面导航：显示当前页数，支持切换查看历史页面

## 用户使用流程

### 首次生成
1. 输入剧本内容
2. 添加角色：填写名称、外观描述，上传参考图
3. 添加场景：填写名称、氛围描述，上传参考图（可选）
4. 选择画风
5. 点击「生成分镜」
6. 在右侧查看生成的 9 张分镜图
7. 点击「下载全部」保存

### 连续生成
1. 完成首次生成后
2. 点击「继续生成下一页」
3. AI 基于前一页的画风和角色外观，生成下一页 9 张分镜图
4. 重复直到剧本完成

## AI 能力需求

| 能力类型 | 用途说明 | 应用位置 |
|---------|---------|---------|
| 文本理解与生成 | 分析剧本结构，识别角色、场景、情节节拍，规划分镜内容 | 点击「生成分镜」时 |
| 图像生成 | 根据分镜描述生成 3x3 九宫格分镜图 | 点击「生成分镜」「继续生成下一页」时 |
| 图像理解 | 分析用户上传的角色和场景参考图，提取视觉特征用于保持一致性 | 上传角色/场景参考图时 |

## 技术说明

- **数据存储**：无需登录，项目数据保存在浏览器本地存储（LocalStorage），关闭页面后仍可恢复
- **图像生成**：调用 AI 图像生成服务，每次生成 9 张图约需 30-60 秒
- **文件导出**：支持 PNG 格式批量下载，打包为 ZIP 文件
- **部署方式**：纯前端应用，无需服务器，可部署到任意静态托管平台

## 补充说明

| 选项 | 可选值 | 说明 |
|------|--------|------|
| 画风 | 漫画 / 动漫 / 写实 / 赛博朋克 / 水墨 | 决定分镜图的整体视觉风格 |
| 角色参考图 | 图片上传 | 用于建立角色视觉身份，确保一致性 |
| 场景参考图 | 图片上传（可选） | 用于建立场景氛围，不上传则由 AI 根据描述生成 |
```

---

## 写作要点

1. **产品概述**：
   - 一句话说清楚是什么
   - **必须明确写出目标用户**：是谁、有什么特点、什么痛点
   - 核心价值：用了这个产品能得到什么
   
2. **应用场景**：
   - 具体的人 + 具体的情况 + 具体的用法 + 解决什么问题
   - 场景要有画面感，让人一看就懂
   - 放在功能需求之前，帮助理解产品价值

3. **功能需求**：
   - 分「核心功能」和「辅助功能」
   - 每条格式：用户做什么 → 系统做什么 → 得到什么
   - 写清楚触发方式（点击什么按钮）

4. **UI 布局**：
   - 先写整体布局（几栏、比例）
   - 再逐个区域描述内容
   - 控件要具体：下拉框写出所有选项和默认值，按钮写明位置和样式

5. **用户流程**：分步骤，可以有多条路径

6. **AI 能力需求**：
   - 列出需要的 AI 能力类型
   - 说明具体用途
   - **写清楚在哪个环节触发**，方便开发理解调用时机

7. **技术说明**（可选）：
   - 数据存储方式
   - 外部服务依赖
   - 部署方式
   - 只在有技术约束时写，没有就不写

8. **补充说明**：用表格，适合解释选项、状态、逻辑