product-video

Name: product-video
Author: MatrixReligio

37stars7forks

How to install product-video?

matrixreligio/productvideocreator/product-video

$npx -y skills add MatrixReligio/ProductVideoCreator --skill product-video

Installs into the current project.

Summary

产品介绍视频自动化生成。当用户需要创建产品演示视频、公司介绍短片、宣传片时使用。支持录屏演示型、图文展示型、混合型三种视频类型。

Files · 1

View on GitHub

SKILL.md

1	# 产品介绍视频生成技能
2
3	## 适用场景
4
5	- 产品功能演示视频（需要录屏）
6	- 公司/产品介绍短片（图文展示）
7	- 产品宣传片（混合类型）
8	- 输出格式：MP4 (1920x1080, 30fps)
9
10	## 视频类型选择
11
12	在开始制作前，首先确定视频类型：
13
14	\| 类型 \| 代号 \| 适用场景 \| 核心素材 \|
15	\|------\|------\|----------\|----------\|
16	\| 录屏演示型 \| `demo` \| 软件功能演示、操作教程 \| Playwright 录屏 \|
17	\| 图文展示型 \| `slideshow` \| 公司介绍、产品历程、概念宣传 \| 图片 + 文字动画 \|
18	\| 混合型 \| `mixed` \| 产品宣传片 \| 录屏 + 图片 + 动画 \|
19
20	### 类型判断流程
21
22	```
23	用户需求分析
24	│
25	├─ 需要展示软件操作？ ──→ demo 或 mixed
26	│
27	├─ 纯图文概念展示？ ──→ slideshow
28	│
29	└─ 两者都需要？ ──→ mixed
30	```
31
32	## 工作流程
33
34	### 通用流程
35
36	```
37	┌─────────────────────────────────────────────────────────────┐
38	│ Phase 1: 需求分析与分镜设计 │
39	│ ├── 确定视频类型 (demo/slideshow/mixed) │
40	│ ├── 分析目标受众和核心信息 │
41	│ ├── 设计视频结构和时间线 │
42	│ ├── 编写分镜脚本和配音文案 │
43	│ └── 【必须】等待用户确认分镜脚本 │
44	├─────────────────────────────────────────────────────────────┤
45	│ Phase 2: 素材准备 │
46	│ ├── [demo] 执行 Playwright 录屏，记录时间线 │
47	│ ├── [slideshow] 收集图片素材 (见 asset-collection skill) │
48	│ ├── [mixed] 录屏 + 图片收集 │
49	│ └── 素材格式转换和优化 │
50	├─────────────────────────────────────────────────────────────┤
51	│ Phase 3: 配音生成 │
52	│ ├── 根据分镜计算配音时间线 │
53	│ ├── 生成各段配音音频 (edge-tts) │
54	│ ├── 【新增】验证配音时长和同步性 │
55	│ ├── 合并配音到单个音轨 (FFmpeg adelay) │
56	│ └── 检测并处理配音空白间隙 │
57	├─────────────────────────────────────────────────────────────┤
58	│ Phase 4: 视频合成 │
59	│ ├── 创建 Remotion 项目和场景组件 │
60	│ ├── [demo] 使用 Video 组件嵌入录屏 │
61	│ ├── [slideshow] 使用 Img + 动画组件 │
62	│ ├── 渲染最终视频 │
63	│ └── 音量标准化后期处理 │
64	├─────────────────────────────────────────────────────────────┤
65	│ Phase 5: 验收交付 │
66	│ ├── 打开视频供用户审查 │
67	│ ├── 根据反馈调整 │
68	│ └── 最终交付 │
69	└─────────────────────────────────────────────────────────────┘
70	```
71
72	## 关键原则
73
74	### 1. 分镜先行，确认再做
75
76	绝对禁止直接开始制作！必须：
77	1. 先制定详细分镜脚本
78	2. 包含：时间线、画面描述、素材需求、配音文字
79	3. 用户明确确认后才开始制作
80
81	### 2. 素材质量优先
82
83	\| 素材类型 \| 最低要求 \| 推荐规格 \|
84	\|----------\|----------\|----------\|
85	\| 背景图 \| 1920×1080 \| 2560×1440+ \|
86	\| Logo \| 400×400 PNG \| SVG 矢量 \|
87	\| 人物照片 \| 800×800 \| 1200×1200+ \|
88	\| 录屏视频 \| 1920×1080 30fps \| 同左 \|
89
90	### 3. 配音验证机制
91
92	生成配音后必须验证：
93	- 每段配音时长 ≤ 场景时长
94	- 相邻配音段不重叠
95	- 总配音时长 ≤ 视频时长
96	- 空白间隙 < 3 秒
97
98	### 4. 视觉效果提升
99
100	- 使用 spring 动画增加生动感
101	- 添加发光/阴影效果增强层次
102	- 背景图使用 0.2-0.4 透明度
103	- 文字添加描边或阴影提高可读性
104
105	## 视频结构模板
106
107	### 标准图文展示型 (60-120秒)
108
109	```
110	00:00-00:08 片头
111	- Logo 动画 (spring 缩放 + 发光)
112	- 主标题 + 副标题 (淡入)
113	配音: "[主题]简介"
114
115	00:08-00:XX 内容场景 (根据需要重复)
116	- 年份/关键词大字
117	- 背景图 (低透明度)
118	- 核心信息文字
119	配音: 对应内容解说
120
121	XX:XX-结束片尾
122	- Logo + 发光脉动
123	- 总结文字
124	- 数据展示 (可选)
125	配音: 总结语
126	```
127
128	### 标准录屏演示型 (90-180秒)
129
130	```
131	00:00-00:10 片头
132	- Logo + 产品名
133	- 一句话定位
134	配音: "欢迎使用..."
135
136	00:10-00:18 功能亮点
137	- 功能卡片展示
138	配音: 功能概述
139
140	00:18-XX:XX 核心演示
141	- 完整录屏
142	- 各功能点配音同步
143	配音: 根据录屏时间线
144
145	XX:XX-结束片尾
146	- Logo + 口号
147	- 行动号召
148	配音: "立即开始使用"
149	```
150
151	## 技术栈
152
153	\| 需求 \| 推荐方案 \| 备选方案 \|
154	\|------\|----------\|----------\|
155	\| 视频合成 \| Remotion \| FFmpeg 纯命令行 \|
156	\| 浏览器录屏 \| Playwright \| Puppeteer \|
157	\| 中文配音 \| edge-tts (免费) \| Azure TTS (付费) \|
158	\| 音频处理 \| FFmpeg \| - \|
159	\| 图片素材 \| Unsplash/Pexels \| Pixabay \|
160
161	## 文件结构规范
162
163	```
164	project/
165	├── public/
166	│ ├── images/ # 图片素材
167	│ │ ├── logos/
168	│ │ ├── backgrounds/
169	│ │ └── photos/
170	│ ├── recordings/ # 录屏文件 (demo 类型)
171	│ │ ├── full_demo.mp4
172	│ │ └── timeline.json
173	│ └── audio/
174	│ ├── segments/ # 配音片段
175	│ ├── synced_voiceover.mp3
176	│ └── voiceover_metadata.json
177	├── src/
178	│ ├── index.ts
179	│ ├── Root.tsx
180	│ ├── MainVideo.tsx
181	│ ├── scenes/ # 场景组件
182	│ └── components/ # 可复用组件
183	├── scripts/
184	│ ├── collect_assets.sh # 素材收集
185	│ ├── record_demo.js # 录屏脚本
186	│ └── generate_voiceover.py
187	└── out/
188	└── final.mp4
189	```
190
191	## 相关技能
192
193	- `/storyboard` - 分镜脚本设计
194	- `/asset-collection` - 素材收集 (图文视频)
195	- `/recording` - 浏览器录屏 (演示视频)
196	- `/voiceover` - 配音生成与验证
197	- `/compositing` - 视频合成与渲染

People who liked this also viewed

6 picks

Type

product-video

37stars7forks

View on GitHub

How to install product-video?

matrixreligio/productvideocreator/product-video

$npx -y skills add MatrixReligio/ProductVideoCreator --skill product-video

Installs into the current project.

Summary

产品介绍视频自动化生成。当用户需要创建产品演示视频、公司介绍短片、宣传片时使用。支持录屏演示型、图文展示型、混合型三种视频类型。

Files · 1

View on GitHub

SKILL.md

1	# 产品介绍视频生成技能
2
3	## 适用场景
4
5	- 产品功能演示视频（需要录屏）
6	- 公司/产品介绍短片（图文展示）
7	- 产品宣传片（混合类型）
8	- 输出格式：MP4 (1920x1080, 30fps)
9
10	## 视频类型选择
11
12	在开始制作前，首先确定视频类型：
13
14	\| 类型 \| 代号 \| 适用场景 \| 核心素材 \|
15	\|------\|------\|----------\|----------\|
16	\| 录屏演示型 \| `demo` \| 软件功能演示、操作教程 \| Playwright 录屏 \|
17	\| 图文展示型 \| `slideshow` \| 公司介绍、产品历程、概念宣传 \| 图片 + 文字动画 \|
18	\| 混合型 \| `mixed` \| 产品宣传片 \| 录屏 + 图片 + 动画 \|
19
20	### 类型判断流程
21
22	```
23	用户需求分析
24	│
25	├─ 需要展示软件操作？ ──→ demo 或 mixed
26	│
27	├─ 纯图文概念展示？ ──→ slideshow
28	│
29	└─ 两者都需要？ ──→ mixed
30	```
31
32	## 工作流程
33
34	### 通用流程
35
36	```
37	┌─────────────────────────────────────────────────────────────┐
38	│ Phase 1: 需求分析与分镜设计 │
39	│ ├── 确定视频类型 (demo/slideshow/mixed) │
40	│ ├── 分析目标受众和核心信息 │
41	│ ├── 设计视频结构和时间线 │
42	│ ├── 编写分镜脚本和配音文案 │
43	│ └── 【必须】等待用户确认分镜脚本 │
44	├─────────────────────────────────────────────────────────────┤
45	│ Phase 2: 素材准备 │
46	│ ├── [demo] 执行 Playwright 录屏，记录时间线 │
47	│ ├── [slideshow] 收集图片素材 (见 asset-collection skill) │
48	│ ├── [mixed] 录屏 + 图片收集 │
49	│ └── 素材格式转换和优化 │
50	├─────────────────────────────────────────────────────────────┤
51	│ Phase 3: 配音生成 │
52	│ ├── 根据分镜计算配音时间线 │
53	│ ├── 生成各段配音音频 (edge-tts) │
54	│ ├── 【新增】验证配音时长和同步性 │
55	│ ├── 合并配音到单个音轨 (FFmpeg adelay) │
56	│ └── 检测并处理配音空白间隙 │
57	├─────────────────────────────────────────────────────────────┤
58	│ Phase 4: 视频合成 │
59	│ ├── 创建 Remotion 项目和场景组件 │
60	│ ├── [demo] 使用 Video 组件嵌入录屏 │
61	│ ├── [slideshow] 使用 Img + 动画组件 │
62	│ ├── 渲染最终视频 │
63	│ └── 音量标准化后期处理 │
64	├─────────────────────────────────────────────────────────────┤
65	│ Phase 5: 验收交付 │
66	│ ├── 打开视频供用户审查 │
67	│ ├── 根据反馈调整 │
68	│ └── 最终交付 │
69	└─────────────────────────────────────────────────────────────┘
70	```
71
72	## 关键原则
73
74	### 1. 分镜先行，确认再做
75
76	绝对禁止直接开始制作！必须：
77	1. 先制定详细分镜脚本
78	2. 包含：时间线、画面描述、素材需求、配音文字
79	3. 用户明确确认后才开始制作
80
81	### 2. 素材质量优先
82
83	\| 素材类型 \| 最低要求 \| 推荐规格 \|
84	\|----------\|----------\|----------\|
85	\| 背景图 \| 1920×1080 \| 2560×1440+ \|
86	\| Logo \| 400×400 PNG \| SVG 矢量 \|
87	\| 人物照片 \| 800×800 \| 1200×1200+ \|
88	\| 录屏视频 \| 1920×1080 30fps \| 同左 \|
89
90	### 3. 配音验证机制
91
92	生成配音后必须验证：
93	- 每段配音时长 ≤ 场景时长
94	- 相邻配音段不重叠
95	- 总配音时长 ≤ 视频时长
96	- 空白间隙 < 3 秒
97
98	### 4. 视觉效果提升
99
100	- 使用 spring 动画增加生动感
101	- 添加发光/阴影效果增强层次
102	- 背景图使用 0.2-0.4 透明度
103	- 文字添加描边或阴影提高可读性
104
105	## 视频结构模板
106
107	### 标准图文展示型 (60-120秒)
108
109	```
110	00:00-00:08 片头
111	- Logo 动画 (spring 缩放 + 发光)
112	- 主标题 + 副标题 (淡入)
113	配音: "[主题]简介"
114
115	00:08-00:XX 内容场景 (根据需要重复)
116	- 年份/关键词大字
117	- 背景图 (低透明度)
118	- 核心信息文字
119	配音: 对应内容解说
120
121	XX:XX-结束片尾
122	- Logo + 发光脉动
123	- 总结文字
124	- 数据展示 (可选)
125	配音: 总结语
126	```
127
128	### 标准录屏演示型 (90-180秒)
129
130	```
131	00:00-00:10 片头
132	- Logo + 产品名
133	- 一句话定位
134	配音: "欢迎使用..."
135
136	00:10-00:18 功能亮点
137	- 功能卡片展示
138	配音: 功能概述
139
140	00:18-XX:XX 核心演示
141	- 完整录屏
142	- 各功能点配音同步
143	配音: 根据录屏时间线
144
145	XX:XX-结束片尾
146	- Logo + 口号
147	- 行动号召
148	配音: "立即开始使用"
149	```
150
151	## 技术栈
152
153	\| 需求 \| 推荐方案 \| 备选方案 \|
154	\|------\|----------\|----------\|
155	\| 视频合成 \| Remotion \| FFmpeg 纯命令行 \|
156	\| 浏览器录屏 \| Playwright \| Puppeteer \|
157	\| 中文配音 \| edge-tts (免费) \| Azure TTS (付费) \|
158	\| 音频处理 \| FFmpeg \| - \|
159	\| 图片素材 \| Unsplash/Pexels \| Pixabay \|
160
161	## 文件结构规范
162
163	```
164	project/
165	├── public/
166	│ ├── images/ # 图片素材
167	│ │ ├── logos/
168	│ │ ├── backgrounds/
169	│ │ └── photos/
170	│ ├── recordings/ # 录屏文件 (demo 类型)
171	│ │ ├── full_demo.mp4
172	│ │ └── timeline.json
173	│ └── audio/
174	│ ├── segments/ # 配音片段
175	│ ├── synced_voiceover.mp3
176	│ └── voiceover_metadata.json
177	├── src/
178	│ ├── index.ts
179	│ ├── Root.tsx
180	│ ├── MainVideo.tsx
181	│ ├── scenes/ # 场景组件
182	│ └── components/ # 可复用组件
183	├── scripts/
184	│ ├── collect_assets.sh # 素材收集
185	│ ├── record_demo.js # 录屏脚本
186	│ └── generate_voiceover.py
187	└── out/
188	└── final.mp4
189	```
190
191	## 相关技能
192
193	- `/storyboard` - 分镜脚本设计
194	- `/asset-collection` - 素材收集 (图文视频)
195	- `/recording` - 浏览器录屏 (演示视频)
196	- `/voiceover` - 配音生成与验证
197	- `/compositing` - 视频合成与渲染

People who liked this also viewed

6 picks

Type