altacrest/motion-how-to-video

Video tutorial narrado con Claude Motion

Así es como el equipo de marketing de Novacrest crea videos tutoriales y de documentación: las pantallas reales de la aplicación, un cursor deslizante, un título corto por paso, una voz en inglés que lee cada título, un solo MP4 final. Comenzó con los films de inicio rápido de OmniOrders (octubre de 2026).

Todo lo que necesita la película viene incluido con esta habilidad (las rutas son relativas a este archivo):

• engine/shared.js y engine/base.css: el motor de capturas de pantalla (SS) y su apariencia. Nunca los reconstruyas desde la memoria.
• examples/how-to-film/: cada módulo de escena de la película de referencia, "Crea un video tutorial con Claude Motion" (27 de octubre de 2026), con sus lines.json, scenes.json y shots.json. Léelos antes de escribir escenas: muestran cada opción de SS.def en uso.
• scripts/voice.py: la narración. API de ElevenLabs, un MP3 por título, verificado con Whisper cuando está instalado. Se ejecuta en la propia Terminal del usuario.
• scripts/mix.py: coloca cada clip bajo su título y escribe el MP4 final (necesita ffmpeg).

Reglas estrictas

• Solo pantallas reales, capturadas desde la aplicación. Nunca redibujes la interfaz de usuario de la aplicación: las pantallas dibujadas se detectaron en los primeros films de inicio rápido. Una tarjeta simple que muestra un comando está bien; una copia dibujada de una aplicación o una ventana de Terminal no lo está.
• Usa la cuenta de prueba. Sin datos reales de clientes, claves, tokens o contraseñas en pantalla: cúbrelos con un parche o usa los valores ficticios de la cuenta de prueba. Nunca inicies sesión por el usuario; pídele que lo haga.
• La narración es en inglés (EE. UU.), y los títulos son el guion: uno por paso, palabras simples que cualquiera entendería, de menos de unas 12 palabras, sin guiones largos. La voz lee cada título palabra por palabra. Cuando la voz dice una palabra incorrectamente, pon una reescritura oral en say.json; el título se queda como está escrito.
• Nunca estires el video para que coincida con la voz. Los títulos se sincronizan con sus clips (Paso 4). Un clip que aún sea demasiado largo se acelera un poco (mix.py permite máximo 1.15x), o su línea se acorta y se vuelve a poner voz.
• Prueba primero: pon voz a las líneas de la primera escena y verifícalas antes del resto, y de nuevo después de cualquier cambio de voz o guion.
• Ningún LLM juzga la voz. voice.py puntúa cada clip con Whisper (tasa de error de palabras) cuando faster-whisper está instalado; de lo contrario, el usuario escucha.
• Nunca pidas, imprimas ni pegues una clave API en el chat. La clave de ElevenLabs vive solo en un archivo en la computadora del usuario.
• Pide permiso antes de descargar archivos, nombrarlos y saber de dónde vienen.

Por qué la voz se ejecuta en la Terminal del usuario: el espacio de trabajo de Claude y el shell de Claude en la computadora del usuario no pueden alcanzar ElevenLabs (la lista de permitidos de la red de Novacrest bloquea api.elevenlabs.io y elevenlabsusercontent.com; verificado el 12 de noviembre de 2026), y las claves nunca pasan por el chat. Claude prepara todo y el usuario pega un solo comando. El conector de ElevenLabs (conector personalizado, https://api.elevenlabs.io/v1/mcp) genera habla sin clave, pero su audio vuelve como enlaces de elevenlabsusercontent.com que el espacio de trabajo no puede descargar, por lo que no se usa aquí. Si un administrador permite esos dos dominios, revisa esto.

Paso 1: alcance y títulos

Obtén esto, preguntando solo lo que falta en una ronda: el flujo (por ejemplo "crear una transferencia en OmniOrders"), la aplicación y su cuenta de prueba, dónde va el video (una página de documentación, el inicio rápido, YouTube) y los colores del producto. Escribe la lista de pasos y un título por paso, más una línea de título inicial y una línea final, como lines.json ({"id": "caption"}, en orden de película; ids como open, ask-a, ask-b, end). Añade say.json ({"id": "spoken text"}) solo para líneas con una palabra que la voz pueda decir mal (OmniOrders como "Omni Orders", un nombre de repositorio con guiones). Muestra al usuario los títulos en el chat y continúa a menos que los cambien.

Paso 2: iniciar la narración

Iníciala tan pronto como los títulos estén definidos; captura y construye mientras se ejecuta.

1. Crea una carpeta de película en la computadora del usuario, ~/Downloads/<film-slug>/, con lines.json, say.json (si lo hay) y una copia de scripts/voice.py. Con una carpeta vinculada, escríbelos allí con device_bash. Sin una, envía los archivos con SendUserFile y pide al usuario que los ponga en una carpeta.
2. La primera vez, el usuario necesita una clave API de ElevenLabs con acceso de Texto a Voz (README, "ElevenLabs"). Verifica si ~/.config/elevenlabs/env existe (prueba el archivo; nunca lo leas). Si no existe, comienza el bloque a continuación con la línea de configuración.
3. Dale al usuario un bloque listo para pegar en la Terminal:

   cd ~/Downloads/<film-slug>
   python3 voice.py setup        # solo la primera vez: pega la clave cuando se pida (la escritura está oculta)
   python3 voice.py check        # la clave funciona, créditos restantes
   python3 voice.py --only open,<first scene's ids>
   

   Cuando la prueba suene bien (voice.json no muestra banderas, o el usuario escuchó), el resto es python3 voice.py.
4. La voz de la casa: Matilda (XrExE9yKIg1WjnnlVkGX), eleven_multilingual_v2, estabilidad 0.5, similitud 0.75, velocidad 1.0, MP3 44.1 kHz 128 kbps; cada línea se lee con los títulos anterior y posterior como contexto, para que la lectura fluya. Cambia la voz o la velocidad solo cuando el usuario lo pida. voice.py imprime los caracteres a usar (aproximadamente un crédito cada uno); si check muestra menos créditos restantes, detente y pregunta.
5. Los clips caen en voice/<id>.mp3; voice/voice.json lista la duración de cada clip y, con Whisper, lo que se escuchó y la tasa de error de palabras. Una línea por encima de 0.05 recibe una escucha, una reescritura en say.json o un nuevo redactado, luego python3 voice.py --only <id> --redo.

Paso 3: capturar las pantallas

1. Carga la habilidad claude-in-chrome. Abre la aplicación en una nueva pestaña del Chrome del usuario con sesión iniciada. Redimensiona la ventana hasta que el viewport de la página sea 1512 x 745 (verifica innerWidth y innerHeight): ese es el tamaño del mundo del motor, y las capturas de pantalla vuelven a 2x, 3024 x 1490.
2. Recorre el flujo en la cuenta de prueba. Captura cada estado que necesita la película con una captura de pantalla computer y save_to_disk: true: antes y después de cada clic; para escritura, el campo vacío y el campo lleno (la película revela las líneas escritas como parches recortados de la toma llena).
3. En el espacio de trabajo, convierte a webp (calidad alrededor de 90), nombrados <flow>_<step>.webp, más recortes a 2x de cada línea escrita. Registra la ruta URL de cada toma en shots.json y el rect de cada parche en píxeles de vista (el espacio 1512 x 745).
4. No envíes nada que cambie datos fuera de la cuenta de prueba. Detente y pregunta si un paso lo haría.

Paso 4: construir la película

1. Crea la película desde el tipo de artefacto Motion (encuéntralo en la lista de tipos de la herramienta Artifact), title = el nombre del video, y lee las instrucciones del tipo que vuelven: ellas gobiernan la película. Resuelve sus preguntas en la solicitud para que no se necesite ningún formulario. Estilo: cursor guiado sobre capturas reales, el aspecto de la película de referencia. Colores: la paleta del producto (OmniOrders: #16213E, #11ACE4, #F4F7FB, #2FD193). Duración: establecida por la voz (abajo), más una tarjeta de título de 5 segundos y una tarjeta final de 7 segundos.
2. Escribe engine/shared.js en la película como modules/shared.js sin cambios, y engine/base.css como modules/base.css, cambiando solo los cuatro colores en su primera línea. Sube las capturas de pantalla y recortes de esta película como sus activos; nunca copies referencias _blob de otra película.
3. Escribe lines.json (el archivo del Paso 1), shots.json (la ruta URL de cada toma; "host" es el dominio que muestra la barra del navegador antes de una ruta que comienza con /), un módulo de escena por paso construido con SS.def (la tarjeta de título usa SS.open; SS.end toma mark, next y url), y scenes.json con la dur y desc de cada escena. Declara los títulos como caps: [['<id>', tin, tout], ...] para que mix.py pueda encontrarlos; una línea con voz sin título (la de la tarjeta de título) se declara de la misma manera en su módulo, por ejemplo const voiceOnly = [['open', 0.4, 4.6]];. Sigue los ejemplos: el cursor se desliza hacia el control, un anillo y una onda de clic lo marcan, la cámara se aproxima suavemente, el título se sienta en la placa oscura.
4. Sincroniza los títulos con los clips en voice/voice.json: en cada escena el primer título aparece a los 0.3 s, cada título permanece durante la duración de su clip más 0.45 s, y el siguiente aparece 0.35 s después. La dur de una escena es el tiempo de salida de su último título más aproximadamente 0.4 s, o más larga cuando la acción en pantalla lo necesita. Ajusta el cursor, los anillos y la cámara dentro de esas ventanas. Si la voz aún no ha vuelto, da a cada título unos 5 s y reajusta cuando lo haga.
5. Mantén la banda sonora tranquila y moderna: las primeras bandas sonoras de inicio rápido fueron llamadas "órgano de iglesia de los 80s".
6. El usuario reproduce la película y pide cambios; aplícalos (un título cambiado se vuelve a poner voz). Cuando estén contentos, el MP4 se exporta con la flecha de descarga debajo del reproductor en la página de la película: el usuario hace clic, o Claude en Chrome lo hace una vez que ellos dicen que sí. Cae en su carpeta de Descargas.

Paso 5: mezclar

1. Pon el MP4 exportado, la carpeta voice/, scenes.json y los módulos de escena en un solo lugar: la carpeta de la película en la computadora del usuario (ejecuta mix.py allí con device_bash cuando ffmpeg esté instalado), o el espacio de trabajo en la nube (prepáralos). Los documentos guardados desde la película con ArtifactData (out_dir) funcionan tal cual.
2. python3 mix.py cues --scenes scenes.json --modules <folder with scene-*.js> --lines lines.json escribe cues.json: el inicio y fin de cada título en la película (el inicio de la escena, la suma de las dur de las escenas anteriores, más los tiempos del título).
3. python3 mix.py mix --film <exported>.mp4 --voice voice --cues cues.json --out <product>-<flow>.mp4 --web inicia cada clip en su título, mantiene la banda sonora de la película al 25% por debajo de la voz cuando la exportación tiene sonido, nivela la voz a -16 LUFS y copia la imagen. Se detiene en un clip que necesita más de 1.15x; acorta esa línea, ponle voz de nuevo y mezcla otra vez.
4. python3 mix.py frames --film <product>-<flow>.mp4 --cues cues.json --out frames guarda un fotograma en el punto medio de cada título. Mira cada uno: título visible, pantalla correcta, nada privado. Luego reproduce los segundos iniciales: la voz comienza con su título. Sigue las reglas de ffmpeg de la habilidad de creación de video para cualquier otra cosa.

Paso 6: entrega

• Envía el MP4 finalizado con SendUserFile y guárdalo en la carpeta conectada del usuario como <product>-<flow>.mp4.
• Para un sitio web: la copia -web.mp4 va en un PR al repositorio del sitio. Dale al usuario el enlace; ellos lo fusionan.
• Termina con una lista corta de lo que el usuario aún tiene que hacer: el comando de Terminal, la exportación, fusionar el PR.

Configuración, una vez por persona (el README del plugin tiene los detalles)

1. Instalar desde GitHub: Claude > Personalizar > Plugins > Añadir > Añadir del marketplace, escribe altacrest/novacrest-skills y elige Usar, deja Sincronización automática activada, Sincroniza, luego instala Video tutorial.
2. ElevenLabs: una clave API con acceso de Texto a Voz, guardada con python3 voice.py setup en cualquier carpeta de película.
3. Claude en Chrome, con sesión iniciada en la cuenta de prueba de la aplicación.