使用 bueno-demo 製作示範影片
bueno-demo 可錄製腳本化的網頁操作流程，並將其渲染成類似 Screen Studio 風格的影片剪輯。分為兩個步驟：capture 驅動真實的 Chromium 視窗進行錄製，render 則加入鏡頭、游標與標題效果。
設定（每台機器僅需一次）
npm i -D bueno-demo # 或使用 npx bueno-demo 執行所有指令
npx playwright install chromium
brew install ffmpeg # 必要；若需 WebP 海報則另需 imagemagick
工作流程
- 編寫腳本：一個 JSON 檔案（詳見下方）。每個片段專注於單一功能，長度 10 到 15 秒。
- 錄製：
npx bueno-demo capture demos/<name>.json out/<name> - 選擇性剪輯（如載入過慢）：
npx bueno-demo cut out/<name> <from-s> <to-s> - 渲染：
npx bueno-demo render out/<name> out/<name>/<name> --gif - 使用前請先檢查。 製作聯絡表並檢查每一幀：
ffmpeg -i out/<name>/<name>.mp4 -vf "fps=1,scale=640:-1,tile=3x4" -frames:v 1 sheet.png如果畫面中出現錯誤或私人資料，請修正腳本或剪輯掉，然後重新渲染。
腳本
{
"url": "http://localhost:3000/settings",
"viewport": [1440, 900],
"storage": "auth.json",
"keep": "document.querySelectorAll('[data-user-email]').forEach(e => e.textContent = '[email protected]')",
"steps": [
{ "scroll": "[data-testid=billing]" },
{ "click": "[data-testid=plan-toggle]", "after": 1200 },
{ "type": "[data-testid=team-name]", "text": "Northwind", "clear": true },
{ "hover": "[data-testid=save]", "zoom": true },
{ "click": "[data-testid=save]", "zoom": false },
{ "wait": 800 }
]
}
步驟，每個可選 after（暫停毫秒數）：
click：滑行至元素並點擊。zoom: false可跳過鏡頭縮放；用於會導航的點擊。type：點擊後輸入text（delay為每個按鍵的延遲毫秒數，預設 55；clear: true會清除原有內容）。fill：點擊後立即設定text，用於無法透過打字驅動的輸入框（如日期選擇器）。hover：滑行至該處。zoom: true會同時移動鏡頭。upload：滑行至拖放區域，並將file（相對於腳本的路徑）附加到input。press：按壓某個按鍵，例如"Escape"。scroll：平滑滾動將元素帶入視野。wait：暫停，單位毫秒。eval：在頁面中執行 JavaScript，並且在鏡頭下進行。
選項：
- 登入：
storage指向 Playwright 的儲存狀態檔案（可使用npx playwright codegen --save-storage=auth.json <url>儲存一個）。或者使用"cookiesFrom": "agent-browser"借用以 agent-browser 登入的工作階段。Cookie 絕不會被印出。 - 隱私：
keep是在錄製前以及錄製期間每 250ms 執行的 JavaScript，用於將真實姓名與 email 替換為預設值，確保重新渲染時不會恢復。hide可新增 CSS 選擇器來隱藏（Next.js 與 Vercel 的開發覆蓋層已預設隱藏；設定"hide": false則會顯示）。 - 鏡頭外：
setup是在錄製前執行一次的 JavaScript（例如關閉橫幅）。 - 手感：
travelMs（游標移動時間，預設 700）、settle（載入後等待時間，預設 1500）、tail（結尾停留時間，預設 1200）、cursorStart（[x, y]起始位置）、reducedMotion: true。 - 載入：
waitUntil（預設networkidle）。如果頁面串流影片或持續輪詢，將永遠不會進入閒置狀態，導致錄製超時；此時請設定"load"並讓settle負責其餘等待。 - 其他伺服器： 在錄製時使用
--base http://localhost:3001可記錄相同路徑的內容。
選擇器： 建議優先使用 data-testid 或結構（#title、input[name=amount]），而非可見文字，以避免文案變更導致腳本失效。
渲染標記
--zoom 1.6設定點擊時鏡頭縮放倍數（1.3 用於同時強調兩個元素）。--speed 0.9播放速度減慢 10%；--speed 2.5用於快速蒙太奇。--end 9.8將影片裁剪至該秒數；--hold 1.2凍結最後一幀。--matte '#fdfaf1'將網頁以圓角視窗形式顯示在該顏色背景上（預設為無邊框）。--title 'Moving an event' --kicker 'Events'加入開場標題；--end-cap加入結尾卡片。--brand brand.json設定標題與卡片外觀：ink、paper、accent、displayFont/monoFont（{ "family", "file", "weight" }）、logo、footer、kicker。路徑相對於品牌檔案。--fit以頁面原始比例渲染（例如直式手機畫面）。--gif同時輸出 960px 寬、15fps 的 GIF。
規則
- 絕不錄製真實客戶資料。 使用測試帳號，並針對任何個人資訊使用
keep鉤子；分享前請先檢查聯絡表。 - 簡短且單一功能。 每個片段專注於一個功能；使用
cut剪掉等待時間。 - 將影片存放於儲存庫之外。 提交腳本（以及文件需要的海報）；將 MP4 與 GIF 放置於您的儲存空間或 CDN。