198 lines
8.4 KiB
Markdown
198 lines
8.4 KiB
Markdown
---
|
||
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. **补充说明**：用表格，适合解释选项、状态、逻辑
|