O que demo-maker faz?
🎬 Criador de vídeos de demonstração de produtos open-source para websites. Crie vídeos de demonstração de sites consistentes a partir de configuração YAML com Playwright — sem cliques manuais ou regravações.
Transforme configurações versionadas de cenários em vídeos consistentes de funcionalidades do produto — reconfigurar, reexecutar, sem regravação manual.
Por quê?
As UIs dos produtos mudam constantemente, e os vídeos de demonstração ficam desatualizados. Regravar manualmente (ou pedir para um agente “apenas fazer um vídeo”) é lento, caro e ainda precisa de verificação humana.
Com o demo-maker você versiona o passo a passo como YAML: edite etapas, reexecute, obtenha o mesmo MP4. Fragmentos e importações tornam fluxos reutilizáveis; você ou um agente podem manter os scripts como código.
Efeito colateral: escrever localizadores estáveis revela lacunas reais na interface — rótulos ausentes, nomes acessíveis duplicados, linhas de lista difíceis de segmentar — então, frequentemente, você corrige a acessibilidade enquanto constrói a demonstração.
Requisitos
- Node.js 20+
- Playwright Chromium (
npx playwright install chromium) - ffmpeg no
PATH(recompactação MP4, corte comcut_video, áudio de fundo)
Instalação
Publicado no npm como @a1knowhow/demo-maker:
npm install -D @a1knowhow/demo-maker
npx playwright install chromium
Ou a partir de um clone:
npm install
npx playwright install chromium
O pacote fornece código-fonte TypeScript e é executado via tsx. Importações de biblioteca (import … from "@a1knowhow/demo-maker") precisam de uma toolchain compatível com TypeScript (tsx, Vitest ou um bundler). Consulte Segurança para capacidades em tempo de execução.
Início rápido
npx demo-maker run examples/smoke.yaml --headless --fast
Passo a passo (instalar → primeiro MP4 → gravar → fragmentos): Primeiros passos · docs no GitHub
Exemplo de passo a passo
Tour de introdução: abra este repositório no GitHub e percorra primeiros-passos → ações → localizadores (importações, cartões de título, legendas, ritmo):
npx demo-maker run examples/demo1-introduction.yaml
Passo a passo mais rico de CI (Actions → execução verde → job de teste):
npx demo-maker run examples/demo2-github-actions.yaml
(examples/demo1-introduction.yaml · examples/demo2-github-actions.yaml · examples/smoke.yaml para uma verificação mínima)
Documentação
Site: https://a1knowhow.github.io/demo-maker/
| Tópico | Site de docs | Fonte |
|---|---|---|
| Índice | site de docs | docs/index.md |
| Primeiros passos | primeiros passos | docs/getting-started.md |
| CLI | CLI | docs/cli.md |
| Ações | ações | docs/actions.md |
| Localizadores | localizadores | docs/locators.md |
| Vídeo e ritmo | vídeo e ritmo | docs/video-and-pacing.md |
| Gravação | gravação | docs/recording.md |
| Reparo após mudanças na UI | reparando | docs/repairing-scenarios.md |
Esquema tipado: src/types.ts.
Comandos
| Comando | Propósito |
|---|---|
demo-maker run <scenario.yaml> | Executar cenário (vídeo opcional) |
demo-maker check <scenario.yaml> | run com --fail-fast --fast |
demo-maker record | Gravar ações ao vivo em YAML |
demo-maker import | Converter JSON do DevTools/gravador → YAML |
demo-maker export-chapters | JSON de temporização → linhas de capítulo do YouTube |
Segurança
Relate vulnerabilidades em privado — consulte SECURITY.md. Não abra issues públicas para bugs de segurança.
Licença
Apache License 2.0 — consulte LICENSE.
Sobre A1KnowHow
demo-maker foi criado originalmente para construir vídeos de demonstração para A1KnowHow — fluxos de trabalho de IA, organização de documentos, bate-papo, busca e agentes de IA com habilidades e integração de ferramentas MCP.