Cuando tu proyecto contiene una app montada con /app-builder, el siguiente paso natural es mostrarla en movimiento. Eso es justo lo que hace /app-walkthrough: no toca los diseños de tus pantallas — toma las que ya existen y produce un breve vídeo walkthrough narrado. Por dentro captura cada pantalla desde la vista previa en vivo, las ordena según el grafo de navegación de la app, un cursor animado pulsa el botón de navegación, las pantallas se funden una en otra, se escribe y narra una frase para cada una, y todo se renderiza en un MP4 que aparece en el lienzo como tarjeta de vídeo. En esta guía recorremos todo el proceso, clic a clic.
Qué necesitarás
- Una app ya montada con /app-builder en el mismo proyecto (al menos una pantalla).
- La navegación conectada entre las pantallas para que el cursor las recorra en orden.
- Un proveedor de voz en off (TTS) configurado en Ajustes si quieres narración.
Paso a paso
- 1
Abre el proyecto con tus pantallas de App Builder
Abre el proyecto donde vive tu app. En el lienzo verás las tarjetas de pantalla que montaste con /app-builder. /app-walkthrough solo graba lo que ya existe — nunca diseña ni edita pantallas.
Film Movie StudioRenderizarInfinite Photo VaultNuevo proyectoArchivos
frame_1.png
frame_2.png
frame_3.png
frame_4.png60%promptframe_01.png
Remezclarframe_02.png
Remezclarframe_03.png
Remezclarframe_04.png
Generando… 80%Remezclaroutput - 2
Comprueba las pantallas con la vista previa
En cualquier tarjeta de pantalla haz clic en «Preview» y recorre la vista previa en vivo en el dispositivo. Confirma que la navegación (barra inferior, botones, enlaces) lleva a las pantallas correctas — ese grafo de navegación es justo lo que ordena el vídeo.
Film Movie StudioRenderizarFood Delivery App UINuevo proyectoArchivos
frame_1.png
frame_2.png
frame_3.png
frame_4.png
frame_5.png60%promptframe_01.png
Generando… 42%Remezclarframe_02.png
Generando… 68%Remezclarframe_03.png
Generando… 55%Remezclarframe_04.png
Generando… 80%RemezclaroutputConsejo: Cuanto más rica sea la app (títulos, etiquetas y contenido reales), mejor la voz en off — el guion se deriva de lo que se ve en cada pantalla. - 3
Ejecuta /app-walkthrough en el chat
En el campo de chat escribe /app-walkthrough (o elige el skill del menú). Puedes añadir brevemente una dirección, p. ej. «tono cálido y amigable». No necesitas detallar los pasos — el skill conoce todo el flujo.
Film Movie StudioRenderizarFood Delivery App UINuevo proyectoBuscar skills…TodosWorkflowsRápidosvideoShort DramaViral vertical mini-series, end to end.imageImage CreatorGenerate single images from a prompt.audioAudio StudioVoiceover, SFX and music tracks.copyApp BuilderMulti-screen apps with live preview.imageE-commerce DesignPro product shots for any platform.videoMusic VideoBeat-synced clips cut to your track. - 4
Deja que la app confirme que hay algo que grabar
El skill llama primero a list_app para revisar las pantallas. Si no encuentra ninguna, se detiene y te dice que construyas una app con /app-builder primero. Si hay pantallas, continúa.
Film Movie StudioRenderizarFood Delivery App UINuevo proyectoArchivos
frame_1.png
frame_2.png
frame_3.png60%promptframe_01.png
Remezclarframe_02.png
Remezclarframe_03.png
Generando… 55%Remezclaroutput - 5
Elige una voz de narración (opcional)
Si no diste un tono, la app puede ofrecer un estilo una vez — p. ej. «Cálida y amigable», «Nítida y profesional» o «Sin narración / solo subtítulos». Elige uno y continúa.
Film Movie StudioRenderizarFood Delivery App UINuevo proyectoArchivos
frame_1.png
frame_2.png
frame_3.png
frame_4.png60%promptframe_01.png
Generando… 42%Remezclarframe_02.png
Generando… 68%Remezclarframe_03.png
Generando… 55%Remezclarframe_04.png
Generando… 80%RemezclaroutputConsejo: Los subtítulos están desactivados por defecto — la voz en off ya dice las palabras y el texto incrustado satura una pantalla de móvil. Actívalos solo si los quieres expresamente. - 6
Graba el walkthrough
La app llama a generate_walkthrough — en un paso captura cada pantalla desde la vista previa en vivo, las ordena por navegación, un cursor animado pulsa el botón de navegación y las pantallas se funden, y se escribe y narra una frase para cada una. Es el paso final; se ejecuta una vez.
Film Movie StudioRenderizarFood Delivery App UINuevo proyectoArchivos
frame_1.png
frame_2.png
frame_3.png
frame_4.png
frame_5.png60%promptframe_01.png
Generando… 42%Remezclarframe_02.png
Generando… 68%Remezclarframe_03.png
Generando… 55%Remezclarframe_04.png
Generando… 80%Remezclaroutput - 7
Elige dónde guardar el MP4
La app te pide elegir una ubicación para el .mp4 terminado. Elige una carpeta y confirma. Si cancelas el diálogo obtienes un error «cancelled» — solo tómalo en cuenta; la grabación no se reintenta.
Film Movie StudioRenderizarFood Delivery App UINuevo proyectoSkills/app-walkthrough/short-drama/image-creator/audio-studio/app-builder/app-walkthrough Están hablando entre ellos
SkillsModelosEscribe / en cualquier momento para cambiar de skill
- 8
Reproduce el walkthrough en el lienzo
El vídeo terminado aparece en el lienzo como tarjeta de vídeo. Dale a reproducir y mira el recorrido por tu app. El resultado incluye su duración (duration_sec) y cuántas pantallas cubrió; puedes añadir la tarjeta a la línea de tiempo o compartirla como cualquier otro vídeo.
Film Movie StudioRenderizarFood Delivery App UINuevo proyectoArchivos
frame_1.png
frame_2.png
frame_3.png
Línea de tiempoRenderizarVídeoVoz en offMúsicaSubtítulosConsejo: Si la narración es escasa, enriquece el contenido de las pantallas en /app-builder y vuelve a grabar — el guion se deriva del contenido visible.
Qué obtienes
Tienes un vídeo walkthrough pulido en el lienzo que recorre cada pantalla de tu app — con cursor animado, fundidos y una voz en off de una línea por pantalla — guardado como MP4 en tu disco. Es la forma ideal de mostrar un prototipo de /app-builder a clientes, en redes o en un deck para inversores, sin grabar la pantalla a mano.
Consejos de expertos
- generate_walkthrough es el paso final — se ejecuta una vez por ejecución; no lo llames repetidamente ni ejecutes otras herramientas después.
- Deja los subtítulos desactivados para una demo de móvil limpia; actívalos solo si el vídeo se verá en silencio.
- Pantallas más ricas = mejor guion: añade títulos y contenido reales en /app-builder y la narración mejora sola.
Pruébalo tú mismo
FilmMovie Studio es una app de escritorio que te acompaña desde la idea hasta la exportación final. Descárgala y empieza a crear.
Obtener FilmMovie Studio