Files
invoice-master-poc-v2/.claude/skills/product-spec-builder/templates/product-spec-template.md
Yaojia Wang a564ac9d70 WIP
2026-02-01 18:51:54 +01:00

8.4 KiB
Raw Blame History

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

Product Spec 输出模板

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


模板结构

文件命名Product-Spec.md


产品概述

<一段话说清楚:>

  • 这是什么产品
  • 解决什么问题
  • 目标用户是谁(具体描述,不要只说「用户」)
  • 核心价值是什么

应用场景

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

功能需求

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

UI 布局

<描述整体布局结构和各区域的详细设计,需要包含:>

  • 整体是什么布局(几栏、比例、固定元素等)
  • 每个区域放什么内容
  • 控件的具体规范(位置、尺寸、样式等)

用户使用流程

<分步骤描述用户如何使用产品,可以有多条路径(如快速上手、进阶使用)>

AI 能力需求

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

技术说明(可选)

<如果涉及以下内容,需要说明:>

  • 数据存储:是否需要登录?数据存在哪里?
  • 外部依赖:需要调用什么服务?有什么限制?
  • 部署方式:纯前端?需要服务器?

补充说明

<如有需要,用表格说明选项、状态、逻辑等>


完整示例

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

## 产品概述

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

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

**核心价值**用户只需输入剧本文本、上传角色和场景参考图、选择画风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. 补充说明:用表格,适合解释选项、状态、逻辑