¿Qué hace demo-maker?
🎬 Creador de videos de demostración de producto open source para sitios web. Crea videos de demostración consistentes a partir de configuraciones YAML con Playwright — sin clics manuales ni regrabaciones.
Convierte configuraciones de escenarios versionadas en videos de funciones de producto consistentes — reconfigura, vuelve a ejecutar, sin regrabación manual.
¿Por qué?
Las interfaces de usuario cambian constantemente, por lo que los videos de demostración se vuelven obsoletos. Regrabar a mano (o pedirle a un agente que "haga un video") es lento, costoso y aún requiere revisión humana.
Con demo-maker versionas el recorrido como YAML: edita pasos, vuelve a ejecutar, obtén el mismo MP4. Los fragmentos e importaciones hacen que los flujos sean reutilizables; tú o un agente pueden mantener los scripts como código.
Efecto secundario: escribir localizadores estables revela brechas reales en la UI — etiquetas faltantes, nombres accesibles duplicados, filas de lista difíciles de apuntar — por lo que a menudo corriges accesibilidad mientras construyes la demo.
Requisitos
- Node.js 20+
- Playwright Chromium (
npx playwright install chromium) - ffmpeg en el
PATH(recodificación MP4, empalmecut_video, audio de fondo)
Instalación
Publicado en npm como @a1knowhow/demo-maker:
npm install -D @a1knowhow/demo-maker
npx playwright install chromium
O desde un clon:
npm install
npx playwright install chromium
El paquete incluye código fuente TypeScript y se ejecuta mediante tsx. Las importaciones de biblioteca (import … from "@a1knowhow/demo-maker") necesitan una cadena de herramientas compatible con TypeScript (tsx, Vitest o un empaquetador). Consulta Seguridad para conocer las capacidades en tiempo de ejecución.
Inicio rápido
npx demo-maker run examples/smoke.yaml --headless --fast
Paso a paso (instalar → primer MP4 → grabar → fragmentos): Primeros pasos · documentación en GitHub
Ejemplo de recorrido
Tour de introducción: abre este repositorio en GitHub y recorre primeros pasos → acciones → localizadores (importaciones, tarjetas de título, subtítulos, ritmo):
npx demo-maker run examples/demo1-introduction.yaml
Recorrido CI más completo (Actions → ejecución verde → trabajo de prueba):
npx demo-maker run examples/demo2-github-actions.yaml
(examples/demo1-introduction.yaml · examples/demo2-github-actions.yaml · examples/smoke.yaml para una verificación mínima)
Documentación
Sitio: https://a1knowhow.github.io/demo-maker/
| Tema | Sitio de documentación | Fuente |
|---|---|---|
| Índice | sitio docs | docs/index.md |
| Primeros pasos | primeros pasos | docs/getting-started.md |
| CLI | CLI | docs/cli.md |
| Acciones | acciones | docs/actions.md |
| Localizadores | localizadores | docs/locators.md |
| Video y ritmo | video y ritmo | docs/video-and-pacing.md |
| Grabación | grabación | docs/recording.md |
| Reparación tras cambios UI | reparación | docs/repairing-scenarios.md |
Esquema tipado: src/types.ts.
Comandos
| Comando | Propósito |
|---|---|
demo-maker run <scenario.yaml> | Ejecuta escenario (video opcional) |
demo-maker check <scenario.yaml> | run con --fail-fast --fast |
demo-maker record | Graba acciones en vivo a YAML |
demo-maker import | Convierte JSON de DevTools / grabador → YAML |
demo-maker export-chapters | JSON de tiempos → líneas de capítulos de YouTube |
Seguridad
Reporta vulnerabilidades de forma privada — consulta SECURITY.md. No abras issues públicos para errores de seguridad.
Licencia
Licencia Apache 2.0 — consulta LICENSE.
Acerca de A1KnowHow
demo-maker fue creado originalmente para construir videos de demostración para A1KnowHow — flujos de trabajo con IA, organización de documentos, chat, búsqueda y agentes de IA con habilidades e integración de herramientas MCP.