Mastra Demo Skill
通过组合以下工具，创建专业的产品演示视频：
- 浏览器自动化：用于录制 GIF（通过 claude-in-chrome MCP）
- ElevenLabs：画外音生成
- Remotion：视频合成
命令
| 命令 | 用途 |
|---|---|
/mastra-demo:init <名称> | 从模板创建新的演示项目 |
/mastra-demo:script | 生成或验证 DEMO_SCRIPT.md |
/mastra-demo:record | 录制浏览器操作并保存为 GIF |
/mastra-demo:audio | 通过 ElevenLabs 生成画外音 |
/mastra-demo:compose | 构建 Remotion 合成 |
/mastra-demo:render | 导出最终视频 |
/mastra-demo:status | 显示进度和后续步骤 |
快速开始
# 1. 创建新演示项目
/mastra-demo:init my-awesome-demo
# 2. 编辑 DEMO_SCRIPT.md 以加入您的脚本内容（或通过交互方式生成）
/mastra-demo:script
# 3. 为每个片段录制浏览器 GIF
/mastra-demo:record
# 4. 生成画外音
/mastra-demo:audio
# 5. 构建视频合成
/mastra-demo:compose
# 6. 渲染最终视频
/mastra-demo:render
先决条件
- claude-in-chrome MCP：用于录制 GIF 的浏览器自动化扩展
- ElevenLabs API 密钥：用于画外音生成
- Node.js 18+：用于 Remotion
- ffprobe：用于音频时长检测（随 ffmpeg 自带）
项目结构
由本技能创建的演示项目具有以下结构：
my-demo/
├── .env # ELEVENLABS_API_KEY
├── .mastra-demo-state.json # 执行状态
├── DEMO_SCRIPT.md # 包含各片段的脚本
├── package.json # Remotion 依赖
├── public/ # 资源文件（GIF、音频）
│ ├── segment-01.gif
│ ├── segment-01.mp3
│ └── ...
├── out/ # 渲染输出
│ └── demo.mp4
└── src/
├── Root.tsx
├── DemoVideo.tsx
└── scenes/
脚本格式
DEMO_SCRIPT.md 用于定义您的演示：
# Demo: 功能名称
## 旁白
先以连续段落书写完整的故事。
这有助于确保各片段之间的自然流畅。
## 设置
fps: 30
voice: Daniel
## 标题
text: "功能名称"
subtitle: "标语"
duration: 5s
## 片段
### segment-01-intro
url: http://localhost:4111
voiceover: |
这是与上述旁白自然衔接的
开场旁白。
actions:
- navigate: http://localhost:4111
- wait: 2s
- find: "登录按钮"
- click: found element
## 片尾
heading: "快速开始"
command: "npx create-mastra@latest"
links:
- mastra.ai/docs
叙事流程
优秀演示的关键在于叙事流畅性。即使我们录制的是单独的 GIF 和音频片段，画外音也必须讲述一个连贯的故事。
良好的过渡：
- "现在我们已经登录了..."
- "精彩的部分来了..."
- "回到 Mastra Studio，差异立刻显现..."
不良的习惯：
- 没有上下文的生硬片段切换
- 项目符号式的旁白
- 片段之间缺乏连接
浏览器操作
录制时可用的操作：
| 操作 | 格式 | 示例 |
|---|---|---|
| 导航 | navigate: <url> | navigate: http://localhost:4111 |
| 等待 | wait: <时间> | wait: 2s |
| 查找 | find: "<查询>" | find: "登录按钮" |
| 点击 | click: <目标> | click: found element |
| 输入 | type: "<文本>" | type: "Hello world" |
| 滚动 | scroll: <方向> | scroll: down |
语音设置
推荐用于专业演示的 ElevenLabs 设置：
- 语音：Daniel、Brian、George 或 Chris
- 模型：eleven_multilingual_v2
- 稳定性：0.5
- 相似度增强：0.75
参考资料
详细文档请参阅：
references/script-format-reference.md- 完整的 DEMO_SCRIPT.md 格式references/gif-recording-reference.md- 浏览器自动化模式references/audio-generation-reference.md- ElevenLabs 集成
模板
templates/ 目录包含 Remotion 项目文件：
- 场景的 React 组件（标题、DemoGif、片尾）
- 浏览器框架组件
- 音频生成脚本
- 包配置