Videos de capacitación del sistema
Graba el uso real de un sistema web y lo convierte en videos de capacitación terminados: un video corto por capítulo y un video completo con marcadores de capítulo. No hay voz. Pequeñas llamadas explican lo que está sucediendo y por qué.
El método es fijo porque cada parte resuelve un problema real de grabación. Solo el aspecto cambia de un sistema a otro.
| Se mantiene igual en cada sistema | Proviene del propio sistema |
|---|---|
| Video 1920 × 1080, 30 fotogramas por segundo, MP4 | Colores de tarjetas y llamadas, leídos de sus páginas |
| Tarjeta de título: logotipo, subtítulo, título, una línea, banda de color | Color de resaltado, flecha y anillo de clic |
| Cuadro de llamada con flecha y un resaltado en el elemento | Fuentes de encabezado y cuerpo, incluidas fuentes web |
| Contador "Paso n de N" en una esquina | Redondez de las esquinas, desde sus botones |
| Cursor lento, anillos de clic, zooms suaves, cortes por saltos sobre la carga | Logotipo |
| Efectos de sonido, hechos en código | Llamadas claras u oscuras, según su fondo |
| Tarjetas de capítulo negras y marcadores en el video completo | Idioma y texto de derecha a izquierda |
Reglas y por qué existen
- Una copia local solo con datos ficticios. Los scripts hacen clic y guardan de verdad, y un video se puede compartir con cualquiera. El motor rechaza direcciones que no sean locales. Solo el propietario del sistema puede establecer
allowRemote: true, y solo para un servidor de prueba que no contenga datos reales. Nunca lo apuntes a un sistema en vivo y nunca muestres nombres, correos electrónicos o documentos de personas reales. - La aplicación no se modifica. Todo reside en la carpeta
video-tour/del proyecto, que tiene sus propios paquetes. Si un trabajo no se puede mostrar sin cambiar la aplicación, déjalo fuera e infórmalo. - Los videos permanecen fuera del repositorio. Van a una carpeta fuera de él.
- Sigue las reglas del propio proyecto. Lee primero su
CLAUDE.mdo similar. Si dice que el propietario ejecuta git, no ejecutes git. En una máquina pequeña, ejecuta un trabajo pesado a la vez. - No finjas lo que el sistema no puede hacer. Un trabajo que depende de la fecha actual, un servicio externo o una función con respuestas cambiantes (un chatbot) se deja fuera y se informa. Cualquier dato preparado antes de la grabación se divulga en el informe.
Paso 1: Reúne lo que necesitas, una vez
Primero busca en el proyecto: README, package.json, docs, datos semilla, cuentas de prueba. Luego pregunta todo lo que falte en una sola lista, y no te detengas a preguntar de nuevo hasta el primer paso.
- Cómo iniciar el sistema localmente y su dirección.
- Cómo restablecer los datos de prueba. Sin un restablecimiento, los capítulos chocan con los datos de los demás.
- Cuentas de prueba, una para cada rol que necesiten los videos.
- Para quién son los videos. Esto establece qué trabajos importan y las palabras en las tarjetas.
- El idioma de las llamadas. Predeterminado: el idioma de las pantallas del sistema.
- Dónde deben ir los videos. Predeterminado: una carpeta junto al proyecto.
Paso 2: Aprende el sistema y planifica los capítulos
Lee sus rutas, menú y cualquier documentación de usuario, y abre las páginas en el sistema en ejecución. Luego escribe un plan de capítulos: un capítulo para cada área en la que una persona realmente trabaja, cada uno construido alrededor de tareas ("crear un pedido y enviarlo para aprobación"), no un recorrido por las pantallas. Un capítulo suele tener de 2 a 6 pasos y dura de 1 a 4 minutos. Comienza con un capítulo "Primeros pasos". Enumera lo que planeas dejar fuera, con el motivo.
Paso 3: Configura y lee el aspecto del sistema
node ~/.claude/skills/system-training-videos/scripts/init.mjs <carpeta del proyecto> --out "<carpeta de videos>"
cd <carpeta del proyecto>/video-tour && npm install && npx playwright install chromium
Completa cada TODO en video-tour/tour.config.mjs. Verifica que el inicio de sesión funcione ejecutando el siguiente comando, que lo usa:
node video-tour/tour.mjs brand
Esto visita el sistema, lee su aspecto, escribe theme.json y el logotipo, y guarda cuatro vistas previas en <carpeta de videos>/_work/brand/: title-card.png, chapter-card.png, callout.png y counter.png. Mira las cuatro. La detección de color es una buena suposición, no un hecho, así que evalúalas como lo haría un espectador: ¿esto se parece al sistema? ¿Está el logotipo correcto? ¿Está el encabezado en su fuente real? Corrige cualquier cosa con theme en la configuración, luego ejecuta brand de nuevo. Consulta references/theme-and-config.md.
Paso 4: Capítulo 1, luego una aprobación
Escribe el capítulo 1 (lee primero references/writing-chapters.md), luego:
node video-tour/tour.mjs make 1
make restablece los datos, realiza un ensayo rápido, vuelve a restablecer, graba, construye y verifica. Mira la imagen fija y la hoja de contactos que imprime.
Luego detente y muéstrale al propietario el plan de capítulos, los trabajos omitidos y la imagen fija. Esta es la única aprobación. Es barato cambiar el aspecto o el plan ahora, y caro después de una serie completa. Después de la aprobación, termina la serie sin detenerte.
Paso 5: Los otros capítulos
Para cada capítulo: escríbelo, ejecuta make y mira su hoja de contactos. check detecta lo que se puede medir: llamadas en pantalla por menos de 2.5 s, pantallas de carga en cámara, errores del navegador, niveles de sonido. No puede ver el significado, así que lee los fotogramas tú mismo para detectar:
- una llamada en el elemento incorrecto, o cortada en el borde de la pantalla;
- una llamada, contador o ventana emergente que cubre lo que el espectador necesita ver;
- un mensaje de error, una página vacía o cualquier cosa que no sea ficticia;
- un zoom que corta lo que debería mostrar.
Si algo es dudoso en la hoja, extrae un fotograma completo: ffmpeg -ss 20 -i chapter.mp4 -frames:v 1 frame.png.
Si un capítulo aún falla después de dos rondas de correcciones, omítelo, infórmalo y continúa. Los problemas vistos antes están en references/troubleshooting.md.
Paso 6: El video completo
Con todos los capítulos construidos y el sistema en ejecución:
node video-tour/tour.mjs join
Esto escribe <nombre>-training.mp4 con una tarjeta de apertura, una tarjeta negra antes de cada capítulo, una tarjeta de cierre, marcadores de capítulo y chapters.txt (líneas "00:00 Título", listas para YouTube). Verifica la duración y los marcadores:
ffprobe -v error -show_entries chapter=start_time:chapter_tags=title -of csv=p=0 <video completo>
Paso 7: Informe
Escribe para alguien que no sea técnico, en oraciones cortas:
- La ruta y duración de cada capítulo y del video completo, en una tabla.
- La carpeta con una imagen fija por capítulo.
- La lista de capítulos con horas de inicio.
- Lo que se omitió o saltó, y por qué.
- Datos preparados antes de la grabación, que el video no muestra.
- Pequeños defectos visuales que viste y aceptaste.
- Que verificaste el sonido midiéndolo, no escuchándolo, por lo que una persona debe escuchar un capítulo antes de compartirlo.
Luego detén los servidores que iniciaste.
Archivos de referencia
references/writing-chapters.md: léelo antes de escribir un capítulo. Cada acción, los patrones que mantienen un video limpio y cómo escribir llamadas.references/theme-and-config.md: la configuración, qué leebrandy cómo corregir el aspecto.references/troubleshooting.md: léelo cuando una grabación falle o un fotograma se vea mal.