product-intro-video

Name: product-intro-video
Author: topo-ai

39stars7forks

How to install product-intro-video?

topo-ai/ai-video-skills/product-intro-video

$npx -y skills add topo-ai/ai-video-skills --skill product-intro-video

Installs into the current project.

Summary

制作产品介绍视频。默认使用中文介绍产品，除非用户明确要求其他语言。流程：访问官网→获取素材(VL验证)→Web搜索补充→用户确认→HyperFrames渲染。支持任意比例。触发：产品视频、product video、官网视频、intro video、产品介绍。

Files · 1

View on GitHub

SKILL.md

1	# 产品介绍视频制作 Skill
2
3	根据官网信息制作产品介绍视频，使用 `HyperFrames + GSAP` 渲染。
4
5	## 默认语言规则（中文优先）
6
7	默认用中文介绍产品。只要用户没有明确指定其他语言，旁白、画面主文案、说明性字幕、分镜说明和交付总结都使用中文。
8
9	如果官网原文是英文，也不要直接把英文官网文案当成旁白。应先理解产品，再改写成自然中文，保留必要的英文品牌名、产品名、技术名和短 CTA，例如 `HyperFrames`、`HTML`、`CSS`、`GSAP`、`MP4`。
10
11	只有在以下情况才使用非中文：
12
13	1. 用户明确说要英文、双语或某种具体语言。
14	2. 品牌口号必须保留原文，并且原文比翻译更像品牌资产。
15	3. 代码片段、命令、API 名称、产品专有名词需要保持英文。
16
17	## 中文旁白与音频规则
18
19	### 先判断是否需要旁白
20
21	广告片不是每个画面都必须有旁白。开始写脚本前，先判断这条视频到底需不需要旁白，以及哪些段落需要旁白。
22
23	必须在 `SCRIPT.md` 或 `STORYBOARD.md` 里写清楚：
24
25	1. 旁白段落：哪些场景需要旁白说明产品、卖点、差异化或 CTA。
26	2. 无旁白段落：哪些场景只保留原素材声音、音乐、音效、产品画面或情绪停顿。
27	3. 素材优先段落：如果用户提供了视频素材、产品演示、访谈、实拍、屏幕录制或官网 demo，要先判断这些素材本身是否已经能讲清楚内容，不要强行盖上旁白。
28	4. 留白段落：品牌露出、视觉冲击、转场、产品界面细节展示，可以留 0.5-2 秒给音乐和画面呼吸。
29
30	判断原则：
31
32	\| 情况 \| 旁白策略 \|
33	\|------\|----------\|
34	\| 产品概念复杂、观众不容易一眼看懂 \| 用短旁白解释“这是什么”和“为什么有用” \|
35	\| 画面是完整产品演示或用户提供素材 \| 优先让素材自己说话，旁白只补充必要上下文 \|
36	\| 模板、界面、操作流程正在快速展示 \| 可用少量关键词旁白，不要逐项念屏幕内容 \|
37	\| 情绪高潮、品牌片尾、视觉转场 \| 可以无旁白，只用音乐、音效和视觉停顿 \|
38	\| 用户明确要求无旁白 \| 不生成旁白，只做字幕、音乐和音效 \|
39
40	旁白密度建议：
41
42	- 15 秒广告：通常 1-3 句旁白即可。
43	- 30 秒广告：通常 4-8 句旁白，中间要留音乐和画面呼吸。
44	- 60 秒产品介绍：可以有完整旁白，但仍应保留关键无旁白展示段。
45
46	不要为了“填满音轨”而写旁白。旁白过多会让广告片像说明书，削弱画面和产品素材的说服力。
47
48	### 中文旁白默认使用 Edge TTS
49
50	默认使用 `edge-tts` 生成中文旁白，不使用 macOS `say`、系统朗读声或低质量离线 TTS，除非 Edge TTS 确认不可用。
51
52	推荐中文声音：
53
54	\| 声音 \| 适合场景 \| 说明 \|
55	\|------\|----------\|------\|
56	\| `zh-CN-YunyangNeural` \| 产品介绍、技术产品、企业宣传 \| 专业、可靠，默认优先选这个 \|
57	\| `zh-CN-YunxiNeural` \| 节奏更轻快的产品视频 \| 年轻、有活力 \|
58	\| `zh-CN-XiaoxiaoNeural` \| 亲和、温暖、轻柔产品 \| 女声，温暖自然 \|
59
60	先检查本机可用声音：
61
62	```bash
63	edge-tts --list-voices \| rg 'zh-CN.*Neural'
64	```
65
66	生成中文旁白：
67
68	```bash
69	edge-tts --voice zh-CN-YunyangNeural --rate +6% \
70	--text "中文旁白内容" \
71	--write-media narration.mp3
72	```
73
74	转成 HyperFrames 稳定使用的 wav：
75
76	```bash
77	ffmpeg -y -i narration.mp3 -ar 48000 -ac 2 narration.wav
78	```
79
80	### 旁白时长处理
81
82	生成旁白后必须检查时长：
83
84	```bash
85	ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 narration.wav
86	```
87
88	如果旁白超过视频时长，优先压缩脚本，不要大幅加速音频。只有在只差一点点时才允许轻微加速，建议不超过 `+8%` 或 `atempo=1.08`。大幅加速会让中文旁白变尖、赶、僵硬，成片听感会很差。
89
90	### 视频时序必须跟随音频
91
92	先确认旁白真实长度，再制作视频时间线。不要先固定 30 秒画面再把音频塞进去，否则很容易出现前面还正常、最后几个片段音频提前结束或画面拖尾的问题。
93
94	正确流程：
95
96	1. 先写中文旁白脚本。
97	2. 用 Edge TTS 生成旁白音频。
98	3. 用 `ffprobe` 读取旁白真实时长。
99	4. 根据旁白内容把脚本拆成场景，并给每个场景分配时间。
100	5. `STORYBOARD.md`、`index.html`、`data-duration`、转场时间、BGM 时长都跟随这个真实音频长度。
101	6. 渲染后再次用 `ffprobe` 确认成片时长和音频时长一致。
102
103	如果旁白真实长度是 `31.2s`，视频就应该做成约 `31.2s`；除非用户明确要求必须 30 秒，此时应该先压缩旁白脚本，而不是强行让画面和音频互相错位。
104
105	检查命令：
106
107	```bash
108	ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 narration.wav
109	ffprobe -v error -show_entries stream=codec_type,duration -show_entries format=duration -of json renders/final.mp4
110	```
111
112	交付前必须抽查：
113
114	1. 开头第一句是否和第一幕同步。
115	2. 中段核心卖点是否和对应画面同步。
116	3. 最后一句 CTA 是否落在片尾品牌画面上，而不是提前几秒读完。
117
118	### 背景音乐规则
119
120	如果需要 BGM，优先使用无版权风险方案：用 Web Audio API 或等价离线合成脚本生成背景音乐，再作为独立音轨插入 HyperFrames。
121
122	BGM 必须比旁白低很多，建议：
123
124	```html
125	<audio
126	id="bgm"
127	data-start="0"
128	data-duration="30"
129	data-track-index="20"
130	src="assets/audio/bgm-webaudio.wav"
131	data-volume="0.12"
132	></audio>
133	```
134
135	BGM 设计原则：
136
137	1. 不要有人声，避免和中文旁白冲突。
138	2. 音量只做氛围层，通常 `0.08-0.18`。
139	3. 科技产品适合低频脉冲、柔和和弦、轻微扫频和转场 whoosh。
140	4. 每次渲染前确认旁白和 BGM 都是本地文件，并且音频时长覆盖完整视频。
141
142	## 整体流程（中文工作流）
143
144	```
145	1. 访问官网 → 2. 获取素材(VL验证) → 3. Web搜索补充 → 4. 用户确认 → 5. 写HTML → 6. 渲染
146	```
147
148	关键：Step 4 必须等用户确认后才能进入创作！
149
150	---
151
152	## Step 1: 访问官网 & 获取素材
153
154	### 抓取方式
155
156	\| 网站类型 \| 方式 \| 说明 \|
157	\|---------\|------\|------\|
158	\| 静态 HTML \| web_fetch \| 直接抓文本内容 \|
159	\| JS 渲染 \| browser 工具 \| 打开页面→snapshot→screenshot \|
160	\| API 文档 \| web_fetch \| 通常可抓 \|
161
162	### 素材获取清单
163
164	1. Logo — 官网头部/导航栏，右键保存或截图
165	2. 产品截图 — Hero 区域、功能展示、界面截图
166	3. 品牌色 — 从 CSS 变量、Logo 颜色中提取
167	4. 核心文案 — 标语、功能描述、CTA 按钮文字
168	5. 产品图片 — 功能展示区的配图/截图
169	6. 视频预览 — 如果有 demo 视频，记录 URL
170
171	### 截图流程
172
173	```bash
174	# 用 browser 工具截图（全页 + 首屏）
175	browser(screenshot, fullPage=true) → 保存全页截图
176	browser(screenshot, fullPage=false) → 保存首屏截图
177	# 复制到项目目录
178	cp /path/to/screenshot.jpg <project>/assets/images/
179	```
180
181	### VL 验证素材
182
183	对每张截图用 image 工具验证：
184
185	```python
186	image(
187	image="assets/images/hero-screenshot.jpg",
188	prompt="描述这张截图的内容。是否包含：1)产品Logo 2)产品界面 3)品牌色 4)核心功能展示？列出可用于视频的元素。"
189	)
190	```
191
192	---
193
194	## Step 2: Web 搜索补充信息
195
196	### 搜索内容
197
198	1. 产品新闻 — 最新发布、融资、用户评价
199	2. 竞品对比 — 同类产品有哪些，差异化是什么
200	3. 社区讨论 — Hacker News / Reddit 反馈
201	4. 技术细节 — GitHub star 数、开源协议、API 功能
202	5. 使用案例 — 谁在用，怎么用的
203
204	### 搜索关键词模板
205
206	```
207	"<产品名> review"
208	"<产品名> vs <竞品名>"
209	"<产品名> site:news.ycombinator.com"
210	"<产品名> site:reddit.com"
211	"<产品名> open source" / "<产品名> API"
212	```
213
214	---
215
216	## Step 3: 用户确认
217
218	### 输出格式
219
220	```
221	📋 产品信息确认
222
223	【基本信息】
224	产品名：HyperFrames
225	公司：HeyGen
226	定位：Open-source, agent-native HTML-to-video 渲染框架
227	品牌色：#00D9A5 (薄荷绿) + #000000 (纯黑)
228	Logo：抽象几何播放图标
229
230	【核心卖点】
231	1. HTML → Video — 用 Web 技术栈写视频
232	2. Agent-Native — AI Agent 可直接生成/修改视频
233	3. Open Source — 开源框架，本地渲染
234	4. 51+ 模板目录 — Notion/Stripe/Raycast Showcase 等
235
236	【视频规格】
237	比例：3:4 竖版 (1080×1440)
238	风格：深色科技风
239	重点突出：AI Agent 可直接生成和修改视频
240
241	【已有素材】
242	✅ 官网全页截图
243	✅ 社区 Playground 截图
244	✅ 本地 CLI 环境可用
245
246	确认信息准确？需要修改什么？
247	```
248
249	### 规格选项
250
251	\| 项目 \| 选项 \|
252	\|------\|------\|
253	\| 比例 \| 16:9 (1920×1080) / 9:16 (1080×1920) / 3:4 (1080×1440) / 1:1 (1080×1080) \|
254	\| 风格 \| 跟随品牌色 / 深

People who liked this also viewed

6 picks

Type

product-intro-video

39stars7forks

View on GitHub

How to install product-intro-video?

topo-ai/ai-video-skills/product-intro-video

$npx -y skills add topo-ai/ai-video-skills --skill product-intro-video

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# 产品介绍视频制作 Skill
2
3	根据官网信息制作产品介绍视频，使用 `HyperFrames + GSAP` 渲染。
4
5	## 默认语言规则（中文优先）
6
7	默认用中文介绍产品。只要用户没有明确指定其他语言，旁白、画面主文案、说明性字幕、分镜说明和交付总结都使用中文。
8
9	如果官网原文是英文，也不要直接把英文官网文案当成旁白。应先理解产品，再改写成自然中文，保留必要的英文品牌名、产品名、技术名和短 CTA，例如 `HyperFrames`、`HTML`、`CSS`、`GSAP`、`MP4`。
10
11	只有在以下情况才使用非中文：
12
13	1. 用户明确说要英文、双语或某种具体语言。
14	2. 品牌口号必须保留原文，并且原文比翻译更像品牌资产。
15	3. 代码片段、命令、API 名称、产品专有名词需要保持英文。
16
17	## 中文旁白与音频规则
18
19	### 先判断是否需要旁白
20
21	广告片不是每个画面都必须有旁白。开始写脚本前，先判断这条视频到底需不需要旁白，以及哪些段落需要旁白。
22
23	必须在 `SCRIPT.md` 或 `STORYBOARD.md` 里写清楚：
24
25	1. 旁白段落：哪些场景需要旁白说明产品、卖点、差异化或 CTA。
26	2. 无旁白段落：哪些场景只保留原素材声音、音乐、音效、产品画面或情绪停顿。
27	3. 素材优先段落：如果用户提供了视频素材、产品演示、访谈、实拍、屏幕录制或官网 demo，要先判断这些素材本身是否已经能讲清楚内容，不要强行盖上旁白。
28	4. 留白段落：品牌露出、视觉冲击、转场、产品界面细节展示，可以留 0.5-2 秒给音乐和画面呼吸。
29
30	判断原则：
31
32	\| 情况 \| 旁白策略 \|
33	\|------\|----------\|
34	\| 产品概念复杂、观众不容易一眼看懂 \| 用短旁白解释“这是什么”和“为什么有用” \|
35	\| 画面是完整产品演示或用户提供素材 \| 优先让素材自己说话，旁白只补充必要上下文 \|
36	\| 模板、界面、操作流程正在快速展示 \| 可用少量关键词旁白，不要逐项念屏幕内容 \|
37	\| 情绪高潮、品牌片尾、视觉转场 \| 可以无旁白，只用音乐、音效和视觉停顿 \|
38	\| 用户明确要求无旁白 \| 不生成旁白，只做字幕、音乐和音效 \|
39
40	旁白密度建议：
41
42	- 15 秒广告：通常 1-3 句旁白即可。
43	- 30 秒广告：通常 4-8 句旁白，中间要留音乐和画面呼吸。
44	- 60 秒产品介绍：可以有完整旁白，但仍应保留关键无旁白展示段。
45
46	不要为了“填满音轨”而写旁白。旁白过多会让广告片像说明书，削弱画面和产品素材的说服力。
47
48	### 中文旁白默认使用 Edge TTS
49
50	默认使用 `edge-tts` 生成中文旁白，不使用 macOS `say`、系统朗读声或低质量离线 TTS，除非 Edge TTS 确认不可用。
51
52	推荐中文声音：
53
54	\| 声音 \| 适合场景 \| 说明 \|
55	\|------\|----------\|------\|
56	\| `zh-CN-YunyangNeural` \| 产品介绍、技术产品、企业宣传 \| 专业、可靠，默认优先选这个 \|
57	\| `zh-CN-YunxiNeural` \| 节奏更轻快的产品视频 \| 年轻、有活力 \|
58	\| `zh-CN-XiaoxiaoNeural` \| 亲和、温暖、轻柔产品 \| 女声，温暖自然 \|
59
60	先检查本机可用声音：
61
62	```bash
63	edge-tts --list-voices \| rg 'zh-CN.*Neural'
64	```
65
66	生成中文旁白：
67
68	```bash
69	edge-tts --voice zh-CN-YunyangNeural --rate +6% \
70	--text "中文旁白内容" \
71	--write-media narration.mp3
72	```
73
74	转成 HyperFrames 稳定使用的 wav：
75
76	```bash
77	ffmpeg -y -i narration.mp3 -ar 48000 -ac 2 narration.wav
78	```
79
80	### 旁白时长处理
81
82	生成旁白后必须检查时长：
83
84	```bash
85	ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 narration.wav
86	```
87
88	如果旁白超过视频时长，优先压缩脚本，不要大幅加速音频。只有在只差一点点时才允许轻微加速，建议不超过 `+8%` 或 `atempo=1.08`。大幅加速会让中文旁白变尖、赶、僵硬，成片听感会很差。
89
90	### 视频时序必须跟随音频
91
92	先确认旁白真实长度，再制作视频时间线。不要先固定 30 秒画面再把音频塞进去，否则很容易出现前面还正常、最后几个片段音频提前结束或画面拖尾的问题。
93
94	正确流程：
95
96	1. 先写中文旁白脚本。
97	2. 用 Edge TTS 生成旁白音频。
98	3. 用 `ffprobe` 读取旁白真实时长。
99	4. 根据旁白内容把脚本拆成场景，并给每个场景分配时间。
100	5. `STORYBOARD.md`、`index.html`、`data-duration`、转场时间、BGM 时长都跟随这个真实音频长度。
101	6. 渲染后再次用 `ffprobe` 确认成片时长和音频时长一致。
102
103	如果旁白真实长度是 `31.2s`，视频就应该做成约 `31.2s`；除非用户明确要求必须 30 秒，此时应该先压缩旁白脚本，而不是强行让画面和音频互相错位。
104
105	检查命令：
106
107	```bash
108	ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 narration.wav
109	ffprobe -v error -show_entries stream=codec_type,duration -show_entries format=duration -of json renders/final.mp4
110	```
111
112	交付前必须抽查：
113
114	1. 开头第一句是否和第一幕同步。
115	2. 中段核心卖点是否和对应画面同步。
116	3. 最后一句 CTA 是否落在片尾品牌画面上，而不是提前几秒读完。
117
118	### 背景音乐规则
119
120	如果需要 BGM，优先使用无版权风险方案：用 Web Audio API 或等价离线合成脚本生成背景音乐，再作为独立音轨插入 HyperFrames。
121
122	BGM 必须比旁白低很多，建议：
123
124	```html
125	<audio
126	id="bgm"
127	data-start="0"
128	data-duration="30"
129	data-track-index="20"
130	src="assets/audio/bgm-webaudio.wav"
131	data-volume="0.12"
132	></audio>
133	```
134
135	BGM 设计原则：
136
137	1. 不要有人声，避免和中文旁白冲突。
138	2. 音量只做氛围层，通常 `0.08-0.18`。
139	3. 科技产品适合低频脉冲、柔和和弦、轻微扫频和转场 whoosh。
140	4. 每次渲染前确认旁白和 BGM 都是本地文件，并且音频时长覆盖完整视频。
141
142	## 整体流程（中文工作流）
143
144	```
145	1. 访问官网 → 2. 获取素材(VL验证) → 3. Web搜索补充 → 4. 用户确认 → 5. 写HTML → 6. 渲染
146	```
147
148	关键：Step 4 必须等用户确认后才能进入创作！
149
150	---
151
152	## Step 1: 访问官网 & 获取素材
153
154	### 抓取方式
155
156	\| 网站类型 \| 方式 \| 说明 \|
157	\|---------\|------\|------\|
158	\| 静态 HTML \| web_fetch \| 直接抓文本内容 \|
159	\| JS 渲染 \| browser 工具 \| 打开页面→snapshot→screenshot \|
160	\| API 文档 \| web_fetch \| 通常可抓 \|
161
162	### 素材获取清单
163
164	1. Logo — 官网头部/导航栏，右键保存或截图
165	2. 产品截图 — Hero 区域、功能展示、界面截图
166	3. 品牌色 — 从 CSS 变量、Logo 颜色中提取
167	4. 核心文案 — 标语、功能描述、CTA 按钮文字
168	5. 产品图片 — 功能展示区的配图/截图
169	6. 视频预览 — 如果有 demo 视频，记录 URL
170
171	### 截图流程
172
173	```bash
174	# 用 browser 工具截图（全页 + 首屏）
175	browser(screenshot, fullPage=true) → 保存全页截图
176	browser(screenshot, fullPage=false) → 保存首屏截图
177	# 复制到项目目录
178	cp /path/to/screenshot.jpg <project>/assets/images/
179	```
180
181	### VL 验证素材
182
183	对每张截图用 image 工具验证：
184
185	```python
186	image(
187	image="assets/images/hero-screenshot.jpg",
188	prompt="描述这张截图的内容。是否包含：1)产品Logo 2)产品界面 3)品牌色 4)核心功能展示？列出可用于视频的元素。"
189	)
190	```
191
192	---
193
194	## Step 2: Web 搜索补充信息
195
196	### 搜索内容
197
198	1. 产品新闻 — 最新发布、融资、用户评价
199	2. 竞品对比 — 同类产品有哪些，差异化是什么
200	3. 社区讨论 — Hacker News / Reddit 反馈
201	4. 技术细节 — GitHub star 数、开源协议、API 功能
202	5. 使用案例 — 谁在用，怎么用的
203
204	### 搜索关键词模板
205
206	```
207	"<产品名> review"
208	"<产品名> vs <竞品名>"
209	"<产品名> site:news.ycombinator.com"
210	"<产品名> site:reddit.com"
211	"<产品名> open source" / "<产品名> API"
212	```
213
214	---
215
216	## Step 3: 用户确认
217
218	### 输出格式
219
220	```
221	📋 产品信息确认
222
223	【基本信息】
224	产品名：HyperFrames
225	公司：HeyGen
226	定位：Open-source, agent-native HTML-to-video 渲染框架
227	品牌色：#00D9A5 (薄荷绿) + #000000 (纯黑)
228	Logo：抽象几何播放图标
229
230	【核心卖点】
231	1. HTML → Video — 用 Web 技术栈写视频
232	2. Agent-Native — AI Agent 可直接生成/修改视频
233	3. Open Source — 开源框架，本地渲染
234	4. 51+ 模板目录 — Notion/Stripe/Raycast Showcase 等
235
236	【视频规格】
237	比例：3:4 竖版 (1080×1440)
238	风格：深色科技风
239	重点突出：AI Agent 可直接生成和修改视频
240
241	【已有素材】
242	✅ 官网全页截图
243	✅ 社区 Playground 截图
244	✅ 本地 CLI 环境可用
245
246	确认信息准确？需要修改什么？
247	```
248
249	### 规格选项
250
251	\| 项目 \| 选项 \|
252	\|------\|------\|
253	\| 比例 \| 16:9 (1920×1080) / 9:16 (1080×1920) / 3:4 (1080×1440) / 1:1 (1080×1080) \|
254	\| 风格 \| 跟随品牌色 / 深

People who liked this also viewed

6 picks

Type