/demo — 自動化示範影片管線
您正在製作一個網頁應用程式的導覽示範影片。整個流程—探索、錄製、旁白與渲染—都在這個單一命令中完成。
引數
從 $ARGUMENTS 解析：
- 第一個位置引數：要示範的 URL（必要）
--login <憑證>：登入憑證，格式為email:password。若提供，則在錄製前先登入。--brief <"要展示的內容">：自然語言描述，說明示範應涵蓋的內容。可以非常簡短—例如「顯示儀表板並建立一個專案」就足夠。若省略，則自由探索。--name <名稱>：輸出名稱（預設：從 URL 主機名稱衍生）--duration <秒數>：目標影片長度（預設：60）--voice <語音>：文字轉語音的語音（預設：en-US-GuyNeural）--preset <draft|production>：品質預設（預設：draft）
引數也可以在 URL 之後以自然語言傳遞。以下都是等效的：
/demo https://app.com --login [email protected]:pass123 --brief "顯示帳單頁面並新增付款方式"
/demo https://app.com — 以 [email protected] / pass123 登入，顯示帳單並新增付款方式
/demo https://app.com 登入：[email protected] pass123。顯示帳單頁面。
盡可能解析。如果使用者以純英文提供憑證和指示，請使用它們。
管線
階段 1：偵查應用程式
在錄製之前，了解您要處理的內容：
- 透過
new_page或navigate_page開啟 URL - 若提供了憑證（
--login），找到登入表單並先登入。尋找常見模式：/login、/sign-in、「登入」連結等。使用fill填入電子郵件/密碼欄位，然後點擊提交。在繼續之前等待儀表板/首頁載入。 - 截圖並擷取快照以了解應用程式
- 捕捉品牌：辨識應用程式的標誌和強調/品牌色彩。
- 嘗試將標誌圖片下載到輸出目錄（在階段 2 中解析）作為
logo.png（或 .svg/.webp）。在偵查期間，先將其儲存到臨時位置，然後在唯一名稱解析後將其移動到最終輸出目錄。使用evaluate_script找到標誌<img>的 src URL，然後使用 Bash 的curl或wget儲存它。管線會自動偵測它並在介紹卡中使用。 - 從應用程式的主要按鈕/品牌色彩中選取強調色，並在 narration.json 中將其用作
accentColor（rgba 格式）。
- 嘗試將標誌圖片下載到輸出目錄（在階段 2 中解析）作為
- 若提供了大綱（
--brief），使用它來引導您的探索。大綱告訴您使用者關心什麼—優先考慮那些功能。若沒有大綱，則自由探索。 - 辨識關鍵功能、導航和有趣的流程
- 規劃 3-6 個示範段落，在大約
duration秒的旁白時間內展示應用程式
思考如何製作引人入勝的示範：
- 如果有大綱，請遵循它—使用者知道他們想展示什麼
- 從視覺上最令人印象深刻或獨特的功能開始
- 展示廣度（導航到不同區塊），而不是深度（不要卡在一個表單上）
- 以能夠總結整體的內容結束（儀表板、設定、結果）
- 在錄製中跳過登入畫面、載入旋轉器和錯誤狀態—在
screencast_start之前的設定階段處理這些
階段 2：錄製
設定輸出目錄並開始錄製：
輸出目錄：screencast-output/<name>/
錄製檔：screencast-output/<name>/recording.mp4
- 選取唯一的輸出目錄。 在建立目錄之前，檢查
screencast-output/<name>/是否已存在。如果是，則附加遞增的後綴：<name>-v2、<name>-v3等。使用第一個可用的名稱。例如：# 檢查並找到下一個可用的名稱 NAME="trafficstores" DIR="screencast-output/$NAME" if [ -d "$DIR" ]; then V=2; while [ -d "screencast-output/${NAME}-v${V}" ]; do V=$((V+1)); done NAME="${NAME}-v${V}" DIR="screencast-output/$NAME" fi mkdir -p "$DIR"<name>（如果需要，含後綴）— 錄製檔、narration.json、合成、渲染輸出等。 - 建立輸出目錄
- 使用路徑
screencast-output/<name>/recording.mp4呼叫screencast_start - 自然地與應用程式互動——點擊您規劃好的功能
- 在每個重要畫面上短暫暫停 1-2 秒，讓觀眾可以閱讀
- 點擊按鈕、用逼真的資料填寫表單、在各個區塊之間導航
- MCP 分支會自動處理游標動畫和分段
- 完成時呼叫
screencast_stop
錄製技巧：
- 不要急——管線會自動加快無聊的部分
- 在視覺上吸引人的畫面上 DO 暫停（管線會減慢這些部分以配合旁白）
- 避免在跨源 iframe 內滾動——直接導航
- 如果某個東西載入時間很長，自動分段器會剪掉等待時間
階段 3：撰寫旁白
根據您剛剛錄製的內容撰寫 screencast-output/<name>/narration.json。您確切知道發生了什麼，因為是您做的。
{
"introTagline": "短小精悍的標題",
"introSubtitle": "產品或公司名稱",
"outroHeading": "行動呼籲問題",
"outroUrl": "website.com",
"outroCtaText": "立即開始",
"accentColor": "rgba(59, 130, 246, 1)",
"captionStyle": "pop",
"voice": "en-US-AndrewNeural",
"introLogoSrc": "screencast-output/<name>/logo.png",
"segments": [
{
"text": "此段落的旁白。像人類展示一樣對話性地撰寫。",
"sceneIndex": 0,
"sceneLabel": "功能名稱"
}
],
"fullText": "所有段落文字以空格連接。"
}
旁白指南：
- 像從他人背後指著螢幕展示那樣撰寫，而不是閱讀文件
- 使用現在式：「這裡我們看到...」而不是「這裡我們看到了...」
- 指出觀眾應該注意的特定 UI 元素
- 保持總旁白時間約在
--duration目標 - 每個段落應有 5-20 秒的語音（約 15-50 個字）
accentColor應與應用程式的品牌色彩匹配（從您看到的內容中選取）- 每個段落的
sceneLabel在影片中會變成一個動態的下方三分之一標籤——保持簡短（最多 2-3 個字）：「註冊」、「AI 建構器」、「線上網站」 - 將
introLogoSrc設定為您在階段 1 下載的標誌檔案——它會在介紹卡中以彈簧動畫顯示 - 將
captionStyle設為符合應用程式風格："pop"（活潑有趣）、"clean"（磨砂玻璃質感、優雅）、"bold"（大字體、強烈）、"minimal"（低調）、"karaoke"（無背景）或"outline"（發光陰影） - 選擇與應用程式調性匹配的
voice：en-US-AndrewNeural— 溫暖、自信（良好的預設）en-US-BrianNeural— 平易近人、隨意（新創公司、友善的應用程式）en-US-ChristopherNeural— 可靠、權威（企業級、金融科技）en-US-AriaNeural— 積極、自信（行銷、消費者應用程式）en-US-EmmaNeural— 開朗、清晰（電子商務、社交）en-US-AvaNeural— 富表現力、關懷（健康、保健、社群）en-US-JennyNeural— 友好、體貼（教育、支援）en-US-EricNeural— 理性（分析、資料工具）en-US-GuyNeural— 熱情（創意工具、媒體）en-GB-RyanNeural/en-GB-SoniaNeural— 英國腔（國際化、奢侈品）
階段 3.5：設計自訂影片合成
為此特定影片撰寫一個自訂的 Remotion 合成。將其儲存為 screencast-output/<name>/composition.tsx。管線會使用它而不是預設的 MarketingDemo 模板。
先載入 Remotion 技能： 閱讀 demo-render/.agents/skills/remotion-best-practices/rules/ 中的規則 — 特別是 animations.md、timing.md、text-animations.md、transitions.md 和 sequencing.md。
您的合成必須：
- 匯出
VideoComposition（React 元件）和calculateMarketingDemoDuration（時長函式） - 匯出
MarketingDemoProps型別（從./MarketingDemo重新匯出） - 接受與 MarketingDemo 相同的 props——管線會傳遞相同的 JSON
可用的建構區塊（從 ./components/ 匯入）：
DeviceMockup— 瀏覽器 chrome 中的螢幕錄製（videoSrc、accentColor、displayUrl、zoomRegions、layout）IntroCard/OutroCard— 預設的介紹/結尾模板（tagline、subtitle、accentColor、logoSrc）WordHighlightCaptions— 逐字字幕（wordTimings、style、accentColor）LowerThird— 場景標籤覆層（label、accentColor、leftOffset）ProgressBar— 進度指示器（accentColor）AudioWaveform— 音訊反應式視覺化工具（variant、accentColor、samples）FeatureCallout— 註解標註（label、side、y、accentColor）ChapterCard— 場景分隔卡（chapterNumber、title、accentColor）Presenter— 2D 角色含嘴型同步（mouthCues、side）AvatarPip— 大頭貼畫中畫SceneBreak— 場景邊界處的簡短視覺閃爍
您也可以在合成檔案中內聯撰寫自訂元件。
每個影片的設計決策：
- 介紹風格： 撰寫自訂介紹或使用 IntroCard。匹配應用程式的個性——樸實/有機、科技感/簡潔、溫暖/吸引人、大膽/強烈。
- 結尾風格： 撰寫自訂結尾或使用 OutroCard。同樣的個性匹配。
- 要包含哪些覆層： 並非每個影片都需要所有覆層。對於簡潔的 SaaS 示範，跳過 AudioWaveform。對於短影片，跳過 ProgressBar。如果段落很明顯，跳過 LowerThird。
- 覆層位置： LowerThird 不一定在左上角。字幕不一定在底部中間。選擇不會與錄製中重要 UI 元素重疊的位置。
- 動畫多樣性： 不要總是使用相同的彈入效果。混合淡入、滑入、擦除、打字機效果、錯開效果。Remotion 技能展示了模式。
- 介紹 → 內容 → 結尾之間的轉場： 淡入、滑入、擦除或光漏效果。選擇適合的。
樣板文字範例 用於 composition.tsx：
import React from "react";
import { AbsoluteFill, Audio, Sequence, interpolate, staticFile } from "remotion";
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
// 匯入建構區塊
import { DeviceMockup } from "./components/DeviceMockup";
import { WordHighlightCaptions } from "./components/WordHighlightCaptions";
import { ProgressBar } from "./components/ProgressBar";
// 匯入您的自訂介紹/結尾（內聯撰寫或作為獨立元件）
// 匯入型別
import type { MarketingDemoProps } from "./MarketingDemo";
export type { MarketingDemoProps };
export function calculateMarketingDemoDuration(props: MarketingDemoProps) {
return props.introDurationFrames + props.videoDurationFrames + props.outroDurationFrames - 20;
}
// 您的自訂介紹元件（內聯）
const MyIntro: React.FC<{...}> = (...) => { ... };
export const VideoComposition: React.FC<MarketingDemoProps> = (props) => {
// 您獨特的合成佈局這裡
};
要遵循的 Remotion 規則：
- 所有動畫由
useCurrentFrame()驅動——不