demo-maker 是做什麼的？
🎬 開源的網站產品示範影片製作工具。 透過 YAML 配置與 Playwright，建立一致的網站示範影片 — 無需手動點擊或重新錄製。
將版本化的場景配置轉化為一致的產品功能影片 — 重新配置、重新執行，無需手動重新錄製。
為什麼？
產品 UI 不斷變更，導致示範影片過時。手動重新錄製（或要求 AI 代理「直接製作影片」）既慢又昂貴，而且仍需要人工檢查。
使用 demo-maker，您可以將逐步操作流程版本化為 YAML：編輯步驟、重新執行，即可獲得相同的 MP4。片段 (Fragments) 和匯入 (Imports) 功能讓流程可重複使用；您或 AI 代理可以像維護程式碼一樣維護腳本。
副作用： 編寫穩定的定位器 (locators) 會暴露真實的 UI 缺口 — 遺失的標籤、重複的可訪問名稱、難以定位的列表列 — 因此在建立示範的同時，您也常能修復可訪問性問題。
需求
- Node.js 20+
- Playwright Chromium (
npx playwright install chromium) - ffmpeg 需在
PATH環境變數中（MP4 重新編碼、cut_video剪輯、背景音訊）
安裝
已發佈至 npm，套件名為 @a1knowhow/demo-maker：
npm install -D @a1knowhow/demo-maker
npx playwright install chromium
或從專案克隆安裝：
npm install
npx playwright install chromium
此套件包含 TypeScript 原始碼，並透過 tsx 執行。程式庫匯入 (import … from "@a1knowhow/demo-maker") 需要支援 TypeScript 的工具鏈（tsx、Vitest 或 bundler）。安全性相關資訊請參閱 Security。
快速開始
npx demo-maker run examples/smoke.yaml --headless --fast
逐步教學（安裝 → 第一個 MP4 → 錄製 → 片段）：Getting started · GitHub 上的文件
範例操作說明
入門導覽：開啟此 GitHub 儲存庫，依序瀏覽 getting-started → actions → locators（匯入、標題卡、字幕、節奏控制）：
npx demo-maker run examples/demo1-introduction.yaml
更豐富的 CI 導覽（Actions → 綠色執行 → 測試工作）：
npx demo-maker run examples/demo2-github-actions.yaml
(examples/demo1-introduction.yaml · examples/demo2-github-actions.yaml · examples/smoke.yaml 為最小化檢查範例)
文件
網站：https://a1knowhow.github.io/demo-maker/
| 主題 | 文件網站 | 原始碼 |
|---|---|---|
| 首頁 | docs site | docs/index.md |
| 入門指南 | getting started | docs/getting-started.md |
| CLI | CLI | docs/cli.md |
| 動作 (Actions) | actions | docs/actions.md |
| 定位器 (Locators) | locators | docs/locators.md |
| 影片與節奏控制 | video & pacing | docs/video-and-pacing.md |
| 錄製 | recording | docs/recording.md |
| UI 變更後修復 | repairing | docs/repairing-scenarios.md |
型別定義：src/types.ts。
指令
| 指令 | 用途 |
|---|---|
demo-maker run <scenario.yaml> | 執行場景（可選輸出影片） |
demo-maker check <scenario.yaml> | 以 --fail-fast --fast 模式執行 run |
demo-maker record | 即時錄製動作至 YAML |
demo-maker import | 將 DevTools / 錄製器 JSON 轉換為 YAML |
demo-maker export-chapters | 將時間戳 JSON 轉換為 YouTube 章節行 |
安全性
請私下回報漏洞 — 請參閱 SECURITY.md。請勿為安全性問題開啟公開議題。
授權條款
Apache License 2.0 — 請參閱 LICENSE。
關於 A1KnowHow
demo-maker 最初是為了為 A1KnowHow 建立示範影片而開發的 — A1KnowHow 是一個整合 AI 工作流程、文件組織、聊天、搜尋，以及具備技能和 MCP 工具整合的 AI 代理平台。