Mastra Demo Skill
透過結合下列工具，建立專業產品展示影片：
- 瀏覽器自動化，用於錄製 GIF（透過 claude-in-chrome MCP）
- ElevenLabs 語音旁白生成
- Remotion 影片合成
指令
| 指令 | 用途 |
|---|---|
/mastra-demo:init <name> | 從範本建立新的展示專案 |
/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: Feature Name
## 敘事
先將完整故事以連貫的散文寫出。
這麼做能確保段落間的自然流暢。
## 設定
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: <time> | wait: 2s |
| 尋找 | find: "<query>" | find: "登入按鈕" |
| 點擊 | click: <target> | click: found element |
| 輸入 | type: "<text>" | type: "哈囉 世界" |
| 滾動 | scroll: <dir> | 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 元件（標題、展示 GIF、結尾）
- 瀏覽器框架元件
- 音訊生成腳本
- 套件設定