Video Demo de Producto SaaS

Flujo de trabajo integral para producir un film de producto SaaS sincronizado con el ritmo en Remotion. Cubre films cinematográficos silenciosos, demos horizontales bloqueados al ritmo, reels verticales y films con capas de collage B-roll.

La habilidad se basa en tres aspectos clave: activos, atmósfera, ritmos. Saltarse cualquiera de ellos produce un reel de gráficos animados genérico al estilo Canva, similar a cualquier otra demo SaaS. La disciplina marca la diferencia.

Estas son recomendaciones sólidas, no reglas estrictas. La mayoría de las producciones las siguen; algunas las rompen intencionadamente (por ejemplo, films con voz en off donde la sincronización con el ritmo interferiría). Cuando rompas una regla, hazlo con conocimiento de causa.

Prerrequisitos

Antes de comenzar, verifica que todo esto esté en su lugar. El primero es realmente necesario; los demás son recomendaciones sólidas con alternativas documentadas.

Remotion instalado (requerido). @remotion/cli 4.0.x + @remotion/google-fonts + React 19. Consulta references/project-scaffold.md para el package.json / tsconfig.json / remotion.config.ts mínimo exacto. Nunca ejecutes npx create-video dentro de un repositorio git existente (se bloquea en un prompt de teclas de flecha).
Plugin Super Powers (muy recomendado, no requerido). Cuando esté disponible, esta habilidad orquesta superpowers:using-superpowers, superpowers:brainstorming (con acompañamiento visual), superpowers:writing-plans y superpowers:subagent-driven-development. Te proporcionan maquetas HTML en el navegador para decisiones de diseño, documentos de plan formales y el bucle de agente implementador + revisor.

Si Super Powers no está instalado, la habilidad sigue funcionando, pero el flujo de trabajo se vuelve más conversacional y un poco más lento. La lluvia de ideas se convierte en diálogo en línea (sin acompañamiento de navegador); los planes se escriben directamente en el chat; las escenas se implementan en línea en lugar de a través de subagentes. Los tres pilares (activos / atmósfera / ritmos), junto con el B-roll, la UI esquemática, el posicionamiento de clics, el estilo de escritura y los scripts en scripts/, funcionan igual. No rechaces el trabajo por falta de un plugin: adáptate y continúa.
Python 3 + librosa disponibles. La detección de ritmos ejecuta scripts/detect-beats.py, que importa librosa. Si no está instalado, ejecuta pip install --break-system-packages librosa numpy soundfile e informa al usuario; no lo hagas en silencio.
Para el análisis de video de referencia (Pilar 2): la habilidad admite tres rutas en orden de prioridad. Utiliza la más alta que esté disponible; consulta references/reference-video-vibe.md para la lógica de detección completa.
1. CLI de gemini en PATH (CLI oficial de Google o wrappers de la comunidad como gemini-yt). Ejecútalo con el prompt + la URL de YouTube como argumentos.
2. GEMINI_API_KEY establecida en el entorno o en .env. Utiliza el wrapper curl de la habilidad en scripts/analyze-reference-video.sh.
3. Ninguna de las anteriores: recurre a copiar y pegar manualmente en Google AI Studio. Incómodo pero siempre funciona; la calidad es comparable.

Ejecuta references/prereq-check.md como tu primer paso en una nueva sesión.

Los tres pilares

Estas son las actividades de alto impacto. Saltarse una para "ahorrar tiempo" casi siempre cuesta más tiempo después.

Pilar 1: Incorporación de activos

Antes de cualquier otra cosa, ejecuta el cuestionario estructurado en assets/prompt-templates/asset-intake-questionnaire.md. Solicita:

Relación de aspecto (horizontal 16:9, vertical 9:16 o ambas en paralelo; consulta references/vertical-port.md si son ambas)
Duración en segundos (se recomienda 20-45 s)
Logotipo: preferiblemente SVG. Si solo es PNG, captura las dimensiones nativas para evitar pixelación al ampliarlo.
Colores hexadecimales de la marca (acento principal + 3-6 pasteles de apoyo)
Pila de fuentes (todas deben estar en Google Fonts)
Texto/guion: prefiere un borrador proporcionado por el usuario en lugar de generar uno. Si no tiene guion, consulta references/script-development.md.
Voz en off (opcional)
Archivo de banda sonora: necesario para la sincronización con el ritmo. Si el usuario no tiene ninguno, elige uno de stock libre de derechos.

Consulta references/asset-intake.md para el flujo de incorporación completo, incluido el conjunto mínimo viable de activos parciales, la higiene de nombres en la copia y la comprobación de pixelación al ampliar activos.

Pilar 2: Flujo de trabajo de atmósfera con video de referencia

Antes de escribir escenas, pide al usuario 2-3 videos de referencia de YouTube cuya atmósfera quiera emular. Luego, produce un desglose de dirección para cada uno.

Dos rutas admitidas (consulta references/reference-video-vibe.md):

Automatizada (preferida cuando esté disponible): si el usuario tiene configurada GEMINI_API_KEY, ejecuta scripts/analyze-reference-video.sh <youtube-url> <slug> para cada video. Utiliza Gemini Pro Preview a través de curl. Tarda ~30 segundos por video. Los resultados se guardan en references/gemini-<slug>.md.
Manual (siempre funciona): abre aistudio.google.com, pega el prompt de scripts/reference-video-prompt.md junto con la URL de YouTube, copia el resultado en un archivo. Incómodo, pero produce resultados igualmente utilizables. Úsalo cuando la API no esté disponible.

El vocabulario de verbos de dirección (empujar, barrido panorámico, zoom de retroceso en V, máscara de tinta, zoom de coincidencia de corte) es el resultado más valioso: te proporciona primitivas de movimiento específicas sobre las que construir.

Pilar 3: Sincronización de la banda sonora con el ritmo

Los límites de las escenas deben caer en redobles (la sensación retórica de "golpe de tambor"). Los eventos internos (clics, llegada de tarjetas, inicio de contadores) deben caer en bombos o redobles dentro de la escena.

El proceso:

Ejecuta scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json. Emite BPM, fotograma del primer bombo, marcas de tiempo de redobles y fotogramas.
Incorpóralo en un único objeto de constantes de tiempo (consulta assets/code-templates/theme-v2.ts). Cada escena <Sequence from={...} durationInFrames={...}> lo utiliza.
Después de la Fase 6 (escenas construidas), ejecuta scripts/align-internal-events.py contra beats.json más una lista de eventos dentro de la escena para ajustarlos a los ritmos más cercanos dentro de ±6 fotogramas. Esta es la segunda iteración de mayor impacto después del renderizado inicial: el público percibe los eventos internos fuera de ritmo como "el ritmo a veces falla" sin poder señalar el motivo.
Utiliza los ayudantes isSnare(n) / isKick(n) para afirmar en modo de desarrollo.
Ejecuta scripts/check-typing-budget.py contra cualquier TypedText/TypedChars para verificar que quepa dentro de la duración de la escena. Corta la escritura fuera de pantalla antes de enviarla.

Matemáticas completas, ayudantes, alineación de eventos internos y comprobación del presupuesto de escritura en references/beat-sync.md.

Capacidades adyacentes: cuando lo básico no es suficiente

Estas cubren situaciones más allá de la demo SaaS estándar de "solo gráficos animados, solo graba una captura de pantalla". Lee la referencia correspondiente cuando la situación del usuario lo requiera.

Desarrollo de guion: cuando el usuario no tiene guion

La mayoría de los usuarios llegan con una idea vaga del producto, no con una pantalla por pantalla terminada. references/script-development.md guía un flujo de diálogo estructurado que produce un esquema de 4 actos + una pantalla por pantalla bloqueada + una página de referencia de texto bloqueado, listos para alimentar el documento de especificaciones.

Integración de B-roll: cuando el film utiliza capas de acción real o collage

Si el usuario tiene material de archivo, clips de collage o cualquier video que quiera como capa de fondo, utiliza references/b-roll-integration.md y la plantilla BRollLayer. El B-roll puede ser un fondo de opacidad total o una textura de baja opacidad; la primitiva maneja recorte, fundido, modos de fusión y temporización corregida por FPS.

(Las versiones anteriores de esta habilidad recomendaban enviar el trabajo de acción real a Premiere/DaVinci. Eso es incorrecto cuando el B-roll se utiliza como capa debajo de los gráficos animados: Remotion lo maneja bien y mantener la producción en una sola herramienta es una ganancia de productividad).

Fidelidad de UI esquemática: cuando el producto no tiene interfaz real para grabar

Si el producto es una extensión de Chrome, una API o está en una etapa temprana y no tiene una interfaz de usuario real para capturar, references/schematic-ui-fidelity.md cubre cómo inventar UIs esquemáticas que se vean pulidas sin infringir plataformas reales (LinkedIn, Gmail, Slack). Tres patrones de referencia: tarjeta de perfil, compositor de correo electrónico, panel de API; plantillas de código en assets/code-templates/Schematic*.tsx.

Posicionamiento de clics: el principal punto de dolor en la iteración

Los clics del cursor que no aciertan a los botones es la queja más común entre las producciones. references/click-positioning.md cubre tres enfoques (refs, constantes de posición calculadas, superposición de depuración): elige uno desde el principio. El costo de hacerlo mal son múltiples ciclos completos de renderizado por escena.

Estilo de escritura: mantén las marcas de IA fuera del texto visible para el usuario

Guiones largos, comillas rizadas y ciertos tics de fraseo delatan "generado por IA". references/writing-style.md es la guía de estilo predeterminada con una comprobación grep previa al renderizado que detecta estos elementos. Si el usuario tiene su propia guía de voz de marca, prefiera esa.

Secuencia ideal

El flujo completo de principio a fin. Consulta references/ideal-sequence.md para la versión anotada con la justificación.

Recopila las entradas primero, escribe el código al final. Ejecuta el cuestionario de incorporación de activos.
Desarrolla el guion si el usuario no tiene uno: references/script-development.md.
Produce desgloses de videos de referencia: automatizados mediante scripts/analyze-reference-video.sh o manualmente mediante AI Studio.
Detecta los ritmos y escribe el objeto de constantes de tiempo. scripts/detect-beats.py → theme-v2.ts. Cada inicio de escena deriva de los ritmos.
Prepara Remotion manualmente. package.json / tsconfig.json / remotion.config.ts mínimos. Nunca npx create-video dentro de un repositorio git.
Registra composiciones de depuración por escena en Root.tsx. Aceleración esencial. Recorrer una escena de 5 segundos es 30 veces más rápido que la composición maestra completa.
Carga cada fuente en el nivel superior de Root.tsx con subsets: ["latin"].
Usa guiones en los IDs de composición (v2-Scene06, nunca v2_Scene06).
Invoca superpowers:brainstorming con acompañamiento visual para decisiones de estilo/diseño. Las maquetas HTML superan a la prosa.
Escribe el documento de especificaciones. docs/superpowers/specs/YYYY-MM-DD-<name>-design.md. Incluye una sección de fidelidad de UI esquemática si se necesita alguna.
Revisa las especificaciones tú mismo, luego el usuario las aprueba. No escribas código hasta que haya luz verde.
Invoca superpowers:writing-plans. Verifica la higiene de la plantilla del plan antes de enviarlo (consulta references/project-scaffold.md).
Construye primero las primitivas de animación (TypedText, MaskReveal, PopIn, Cursor, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack según sea necesario). Luego, las tarjetas de UI esquemática. Luego, las escenas. Luego, la composición maestra.
Invoca superpowers:subagent-driven-development. Limita los lotes de subagentes a 3-4 archivos por envío; los lotes más grandes a veces se quedan sin contexto a medio camino. Consulta references/iteration-playbook.md.
Renderiza solo la Escena 1 como prueba. Establece el estilo. Obtén la aprobación del usuario antes del resto.
Itera en oleadas. Limita cada oleada a 5-8 correcciones. Ejecuta la pasada de alineación de eventos internos una vez después del renderizado base; esa sola pasada ajusta el ritmo notablemente.
Renderizado maestro con calidad de publicación. --crf=14 --image-format=png (HD) o --crf=15 --image-format=png --scale=2 (4K). Consulta references/render-export.md.
Verifica puntualmente contra el mapa de ritmos a velocidad 0.5x.

Índice de referencias

El directorio references/ contiene la profundidad. Carga solo lo que necesites para la fase actual.

ideal-sequence.md: el flujo anotado completo, con justificación
prereq-check.md: qué verificar antes de comenzar
asset-intake.md: flujo de incorporación completo, alternativa de activos parciales, comprobación de ampliación de activos, higiene de nombres
script-development.md: metodología pantalla por pantalla cuando el usuario no tiene guion
reference-video-vibe.md: protocolo de análisis de Gemini (rutas API / CLI / AI Studio)
beat-sync.md: matemáticas de la cuadrícula de ritmos, regla de límites de escena, alineación de eventos internos, comprobación de presupuesto de escritura
project-scaffold.md: configuración mínima de Remotion, lista de verificación de commits, higiene de plantillas de planes, elementos esenciales de .gitignore
animation-patterns.md: TypedText, MaskReveal, PopIn, ZoomPunch, FloatingElements, más extensiones
b-roll-integration.md: patrones de BRollLayer, tratamientos de opacidad/mezcla, rendimiento de renderizado
schematic-ui-fidelity.md: diseño de UIs falsas que se vean pulidas
click-positioning.md: tres enfoques para que los clics del cursor acierten a los objetivos correctos
writing-style.md: guiones largos y otras marcas de IA que evitar en el texto en pantalla
cursor-math.md: desplazamiento de punto caliente, puntos clave, transformación de escala-relación
iteration-playbook.md: estructura de oleadas, revisiones por lotes, agrupación de subagentes, reinicios de recarga en caliente de Studio
render-export.md: comandos de renderizado HD/4K, justificación de CRF
gotchas.md: guiones bajos en IDs de composición, advertencias de fuentes, carga de cursivas, error común de escala en MaskReveal
vertical-port.md: disciplina de adaptación de reel 9:16

Activos

assets/prompt-templates/: plantillas para completar para incorporación de activos, documentos de especificaciones, hojas de ritmos
assets/code-templates/: componentes probados en batalla (constantes de tema, easing, Cursor, MaskReveal, TypedText, PopIn, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack, SchematicProfileCard, SchematicEmailComposer, SchematicApiPanel, Act2Master, Act2MasterVertical)

Scripts

scripts/detect-beats.py: seguimiento de ritmos basado en librosa. Emite BPM, primer bombo, fotogramas de redoble/bombo a los FPS objetivo.
scripts/analyze-reference-video.sh + scripts/reference-video-prompt.md: wrapper de Gemini Pro para desgloses de dirección de YouTube.
scripts/align-internal-events.py: alinea con el ritmo los eventos dentro de la escena dentro de ± fotogramas de tolerancia.
scripts/check-typing-budget.py: verifica que TypedText/TypedChars quepa en la duración de la escena antes del renderizado.

Cuándo NO se debe usar la habilidad

Iteración profunda en un proyecto Remotion existente. Si el usuario tiene más de 20 commits en un film y solicita ajustes de la oleada N+1, no vuelvas a ejecutar la incorporación. Carga references/iteration-playbook.md y references/beat-sync.md y continúa.
Demos que no sean SaaS. Resumen de eventos, montaje de testimonios, screencast de tutoriales: los patrones de sincronización con el ritmo + tarjetas de UI de producto no se aplican correctamente.
Metraje documental o de entrevistas como sujeto principal. Esta habilidad maneja el B-roll como capa debajo de los gráficos animados. Si la acción real es el sujeto del film (entrevistas, unboxing, tutoriales), usa un editor no lineal como Premiere, DaVinci o ...

noamdorr/saas-product-demo-video

¿Qué es saas-product-demo-video?

Preguntar en tu IA favorita

Documentación