a1knowhow/demo-maker

demo-maker 是做什么的？

🎬 开源产品演示视频制作工具，专为网站设计。 通过 YAML 配置和 Playwright 创建一致的网站演示视频——无需手动点击或重新录制。

将版本化的场景配置转化为一致的产品功能视频——重新配置、重新运行，无需手动重新录制。

为什么？

产品 UI 不断变化，演示视频很快就会过时。手动重新录制（或要求 AI 代理“直接制作视频”）速度慢、成本高，并且仍然需要人工检查。

使用 demo-maker，您可以将操作流程作为 YAML 进行版本化：编辑步骤、重新运行，获得相同的 MP4。片段和导入功能使流程可复用；您或 AI 代理可以像维护代码一样维护脚本。

附带收益： 编写稳定的定位符会暴露出真实的 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 或打包工具）。有关运行时能力，请参见 安全。

快速开始

npx demo-maker run examples/smoke.yaml --headless --fast

分步指南（安装 → 首个 MP4 → 录制 → 片段）：入门 · GitHub 上的文档

示例操作流程

简介导览：打开此 GitHub 仓库并浏览入门 → 操作 → 定位符（导入、标题卡片、字幕、节奏控制）：

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/index.md
入门	入门	docs/getting-started.md
命令行接口	CLI	docs/cli.md
操作	操作	docs/actions.md
定位符	定位符	docs/locators.md
视频与节奏控制	视频与节奏	docs/video-and-pacing.md
录制	录制	docs/recording.md
UI 变更后的修复	修复	docs/repairing-scenarios.md

类型化模式：src/types.ts。

命令

命令	目的
demo-maker run <scenario.yaml>	执行场景（可选生成视频）
demo-maker check <scenario.yaml>	run 加上了 --fail-fast --fast 参数
demo-maker record	实时录制操作并输出 YAML
demo-maker import	将 DevTools / 录制器 JSON 转换为 YAML
demo-maker export-chapters	将时间 JSON 转换为 YouTube 章节行

安全

私下报告漏洞——请参见 SECURITY.md。请勿针对安全漏洞公开提交 issue。

许可证

Apache License 2.0——请参见 LICENSE。

关于 A1KnowHow

demo-maker 最初是为构建 A1KnowHow 的演示视频而创建的——A1KnowHow 专注于 AI 工作流、文档组织、聊天、搜索以及配备技能和 MCP 工具集成的 AI 代理。