app-preview-video

Vídeo de Vista Previa de la App

Genera un vídeo de vista previa para la tienda de aplicaciones de un teléfono móvil. Se obtienen dos resultados:

1. Un proyecto Remotion (el vídeo en sí es código React, que se puede modificar y exportar repetidamente).
2. Un panel de control web en español para que usuarios sin conocimientos técnicos puedan ajustar: texto, recursos, orden de páginas, transiciones, efectos, volumen y exportación.

Normalmente, el usuario de este skill no sabe programar. Por lo tanto, el objetivo no es "que tú termines el vídeo", sino "que montes la estructura y el contenido, y le entregues el panel de control al usuario". Habla con el usuario en lenguaje sencillo y evita que tenga que ver código o ejecutar comandos.

Estructura del Vídeo

Apertura (icono de la App) → N páginas cualesquiera → Cierre (logo + eslogan)

Hay dos tipos de página:

• Página de funcionalidad: Dos líneas de texto grande + un teléfono que muestra una captura o grabación de la pantalla de la App. Puedes dibujar en la captura varias "zonas de explicación"; en el vídeo, un dedo tocará esa zona, que se ampliará y mostrará una descripción.
• Página de tarjetas: Dos líneas de texto grande + un conjunto de tarjetas, ideal para mostrar varios puntos de venta a la vez.

Todo el contenido ajustable se almacena en src/settings.json del proyecto, que es lo que lee y escribe el panel de control. Consulta la descripción de los campos en references/settings.md; lee esto antes de modificar el JSON.

Flujo de trabajo

1. Pregunta primero, actúa después

Pregunta todo lo que falte de una sola vez:

• ¿Qué app es? Enlace a su sitio web o tienda (si lo tienes, léelo tú mismo para conocer las funcionalidades y puntos de venta; no le pidas al usuario que los repita).
• ¿Qué funcionalidades quieres mostrar? ¿A qué mercado va dirigido? ¿En qué idioma?
• Recursos: icono de la App, logo con texto, capturas o grabaciones de cada funcionalidad.
• ¿Tienes algún vídeo de referencia? Si lo hay, mira primero su ritmo y transiciones.

Aunque los recursos no estén disponibles, puedes montar la estructura; las páginas de funcionalidad se dejan con marcadores de posición.

2. Planifica las páginas

Proporciona primero al usuario un guion gráfico (storyboard) con cada página: duración, qué se ve en el teléfono, texto de las dos líneas, transición. Solo después de que el usuario dé el visto bueno, crea el proyecto. Algunos consejos:

• Los vídeos en las tiendas se reproducen automáticamente sin sonido; la información se transmite con letras grandes. En los primeros 3 segundos debe aparecer la imagen del producto.
• Cada página un punto de venta. Dos líneas de texto, cada una con un máximo de 4 palabras en español (para evitar que se salga del ancho).
• Utiliza cifras concretas en lugar de términos superlativos como "#1" o "el mejor", ya que Apple es sensible a estos en la revisión.
• Duración total: 15–30 segundos. Una página de funcionalidad con explicación dura aproximadamente 4–5.5 segundos; una página normal, 3–4 segundos.

3. Crea el proyecto

Mac / Linux:

<directorio del skill>/scripts/create_project.sh <carpeta_destino>

Windows:

powershell -ExecutionPolicy Bypass -File <directorio del skill>\scripts\create_project.ps1 -Target <carpeta_destino>

El script copia la plantilla e instala las dependencias (primera vez requiere conexión a internet, uno o dos minutos). La carpeta destino debe ser un lugar que el usuario pueda encontrar; si la sesión no tiene una carpeta de proyecto, se crea en el directorio de trabajo actual. No modifiques directamente la plantilla dentro del directorio del skill.

Si no hay Node.js en el ordenador (se necesita la versión 18 o superior), el script no actúa por sí mismo, sino que imprime NEED_NODE, finaliza con código de salida 3 y explica qué debe descargarse. En ese caso:

1. Explica al usuario en lenguaje sencillo: se necesita un entorno de ejecución llamado Node.js, que se puede descargar automáticamente desde su sitio oficial (versión portátil, Mac ~45 MB, Windows ~30 MB). Se colocará en su propia carpeta, solo para esta herramienta, sin modificar el sistema ni requerir contraseña de administrador.
2. Si el usuario acepta, vuelve a ejecutar el script añadiendo --install-node (Windows: -InstallNode).
3. Si el usuario no acepta, o la descarga está bloqueada por la red corporativa, pídele que (o al departamento de TI) instale Node.js desde https://nodejs.org y vuelva a intentarlo.

Preguntar antes de instalar es intencionado: descargar y ejecutar un programa desde internet no debe hacerse en secreto. El script tiene un código de verificación oficial fijo; si el archivo descargado no coincide, se elimina y se muestra un error. En ese caso, no omitas la verificación; pide al usuario que reintente o instale manualmente.

A partir de aquí, todos los comandos se ejecutan a través del lanzador del proyecto: Mac / Linux con ./run.sh <comando>, Windows con run.cmd <comando>. Esto incluye automáticamente la copia de Node.js descargada; si se usa Node.js del sistema, no se modifica nada. Así se unifica la escritura de todos los comandos. En lo que sigue, se omite este prefijo.

4. Rellena el contenido

• Copia los recursos a la carpeta public/ del proyecto y escribe los nombres de los archivos en src/settings.json.
• Modifica el array páginas según el storyboard: texto de cada página, duración, transición, colores.
• Extrae el color de marca del logo y asígnalo a marca.color_principal / marca.color_oscuro. Indica al usuario que "esto lo estimé a partir del logo".
• Después de rellenar, copia el mismo contenido a src/settings.default.json, para que la opción "Restaurar valores predeterminados" en el panel de control vuelva a la versión que creaste, no a la plantilla vacía.

5. Revisa el vídeo

Antes de exportar, extrae algunos fotogramas para ver cómo queda. No te limites a comprobar que los tipos pasan:

npx remotion still src/index.ts AppPreview /tmp/f.jpg --frame=<número_de_fotograma> --scale=0.3 --image-format=jpeg

Revisa al menos un fotograma de cada página (30 fotogramas = 1 segundo). Presta atención a: si el texto grande se sale del ancho, si la explicación de las zonas de explicación está pegada al borde, y si en el límite entre dos páginas aparece un destello blanco.

6. Inicia el panel de control y entrégaselo al usuario

Ejecuta ./run.sh npm run panel (Windows: run.cmd npm run panel) dentro de la carpeta del proyecto. Es un servicio Vite, por defecto en http://127.0.0.1:5173. En la versión de escritorio de Claude, configúralo en el archivo .claude/launch.json de la raíz de la sesión para abrir el panel de vista previa y que el usuario pueda operar directamente a la derecha:

{"name": "control-panel", "runtimeExecutable": "<carpeta_del_proyecto>/run.sh", "runtimeArgs": ["npm", "run", "panel"], "port": 5173}

En Windows, sustituye runtimeExecutable por <carpeta_del_proyecto>\run.cmd. En entornos sin panel de vista previa, indica al usuario la dirección y que la abra en el navegador.

Luego explica al usuario en pocas palabras cómo usar el panel:

• Haz clic en una pestaña superior y el vídeo de la izquierda saltará a esa página; a la derecha aparecerán los ajustes de esa página.
• "+ Añadir página" permite añadir una página de funcionalidad o de tarjetas; dentro de cada página se puede renombrar, mover, copiar y eliminar.
• Arrastra capturas o grabaciones directamente al recuadro punteado. Mantén presionado y arrastra para dibujar un recuadro sobre la captura; eso crea una zona de explicación.
• Los cambios se guardan automáticamente. Al hacer clic en una opción de efecto, el vídeo se reproduce de nuevo automáticamente en esa página.
• "Exportar vídeo" tarda aproximadamente un minuto; el archivo final se coloca en el escritorio.

El panel de control solo funciona mientras este servicio esté activo. Si el usuario vuelve y no lo encuentra, debe reiniciarlo.

7. Exporta

El usuario puede hacer clic en "Exportar vídeo" desde el panel. Para exportar tú mismo, usa:

npx remotion render src/index.ts AppPreview out/preview.mp4 --props=src/settings.json

Después de la exportación, especifica: dimensiones (886×1920, 30 fps, duración), qué páginas aún son marcadores de posición y cuáles has revisado visualmente. El sonido no lo puedes oír; pide al usuario que lo escuche.

Reglas que debes cumplir obligatoriamente

Estas reglas se basan en errores ya cometidos; las razones se explican a continuación.

• Interfaz real. Apple exige que el vídeo de vista previa muestre principalmente la interfaz real de la App. Las páginas de funcionalidad sin captura solo deben mostrar un marcador de posición. No dibujes tú mismo una interfaz que "parezca una App" y la entregues como resultado final. La plantilla incluye un punto de entrada para animaciones ilustrativas (MOCKS) que solo se puede usar si el usuario solicita explícitamente un marcador de posición temporal, y en cada caso debes aclarar que "esto no es la interfaz real de la App y no se puede usar para la presentación".
• Usa solo los efectos de sonido incluidos. Los 8 efectos de sonido en public/sfx/ se generan con tools/make_sfx.py usando ondas sinusoidales y ruido; no hay recursos de terceros y no hay problemas de licencia para uso comercial. Si se quiere cambiar el tono, modifica este script y vuelve a generarlos. Para usar efectos de sonido o música externos, confirma primero con el usuario el origen y la licencia.
• No modifiques los ajustes que el usuario ya ha configurado. El usuario modificará src/settings.json desde el panel de control. Cuando modifiques código o añadas campos, solo completa los campos faltantes en este archivo; no lo sobrescribas por completo. Durante las pruebas, no realices operaciones como eliminar o restaurar valores predeterminados sobre la configuración real del usuario; si necesitas probar, primero haz una copia de seguridad o usa un archivo --props temporal.
• Dimensiones y duración. La plantilla tiene 886×1920 (iPhone 6.9 pulgadas), 30 fps. App Store exige 15–30 segundos; el panel de control se pondrá rojo en la parte superior si se supera el límite. Los requisitos de dimensiones para otros modelos o Google Play son diferentes; antes de enviar, pide al usuario que consulte las especificaciones oficiales.
• Indica honestamente qué has verificado. Si has revisado algunos fotogramas, dilo; si no has probado todas las opciones, dilo también.

Funcionalidades no incluidas en el panel de control

El panel de control cubre los ajustes más comunes. Si el usuario desea un efecto que no está disponible (nuevas transiciones, nuevos diseños de página, otros efectos), modifica src/AppPreview.tsx. Este archivo está organizado en secciones, cada una con comentarios en español al inicio. El método para añadir un efecto opcional sigue tres pasos:

1. Añade una opción en el z.enum([...]) correspondiente al inicio del archivo.
2. Implementa el efecto en el componente correspondiente (las transiciones en useEnterStyle, la animación del título en Title, la entrada del teléfono y sus movimientos en Phone, los efectos de explicación en SpotPop / SpotRing / Phone con el zoom de la cámara).
3. Los botones de opciones en el panel se generan automáticamente desde OPTIONS; generalmente no es necesario modificar control/main.tsx. Solo debes añadir controles allí si introduces un nuevo campo, y también completar los valores predeterminados en settings.json y settings.default.json.

Después de modificar, ejecuta npx tsc --noEmit -p . y extrae algunos fotogramas para comprobar el resultado.

Preguntas frecuentes

• El vídeo se vuelve negro o aparece un icono de advertencia en el panel de control: generalmente se debe a que hay demasiados audios montados simultáneamente. Cada Sequence de un efecto de sonido debe tener durationInFrames, y el Player debe tener numberOfSharedAudioTags suficientemente grande (en la plantilla es 16).
• Las imágenes recién subidas no se muestran: los archivos subidos se leen directamente desde el disco mediante el middleware /uploads en control/vite.config.mts. No lo elimines (Vite solo reconoce los archivos públicos que existen al iniciar).
• Las zonas de explicación no se alinean correctamente: la relación de aspecto de la pantalla dentro del marco del teléfono está definida para capturas de iPhone (aproximadamente 1:2.17). Las capturas con otras relaciones de aspecto se recortarán, lo que desplazará el marco de explicación. Pide al usuario que use capturas verticales de iPhone.
• "Hacer que el coche avance" (recortar un icono de vehículo de la captura y moverlo a lo largo de una ruta) solo funciona en tramos rectos; el marco debe ajustarse al vehículo. Está pensado para capturas de apps de navegación; no lo uses para otras apps.
• No se encuentra el vídeo después de exportar: al finalizar la exportación, el panel de control muestra la ubicación completa del archivo. Si hay escritorio, se coloca allí (incluido el escritorio gestionado por OneDrive en Windows); si no, se queda en la carpeta out del proyecto.
• Windows: el script de instalación y el lanzador están escritos según las reglas de Windows, pero este skill se desarrolló y probó en Mac; aún no se ha ejecutado realmente en Windows. La primera vez que se use en Windows, revisa cada paso de la salida; si hay problemas, corrige el script antes de continuar e informa al usuario. Las fuentes predeterminadas difieren entre sistemas (Mac: SF, Windows: Segoe UI), por lo que el mismo archivo de configuración puede producir un vídeo con ligeras diferencias tipográficas.
• El puerto 5173 está ocupado: Vite cambiará automáticamente al siguiente puerto; usa la dirección que aparezca en el registro de inicio.