Ir al contenido principal

Vídeos demo para desarrolladores de apps, desde tu URL

Por Gauthier Bros, fundador de PageToVidActualizado el 6 min de lectura

Con una app web publicada, o con la página de presentación de una app móvil, ya tienes lo necesario para sacar una demo locutada a partir de su URL, sin abrir un editor de vídeo. Así entendemos los vídeos demo para desarrolladores de apps: la página que ya desplegaste es el material, y el 9:16 graba su versión móvil en una pantalla de teléfono.

Esta guía es para el desarrollador independiente que prefiere escribir código a montar vídeo. Repasa qué se puede grabar según lo que has construido, una demo vertical real de un juego en el navegador, dónde va cada vídeo (con los límites honestos de las vistas previas de App Store y Google Play) y cómo renderizar desde Cursor o VS Code.

Jam3a: una demo vertical (9:16) de 50 segundos de una app de noches de juegos en el navegador, 92 palabras locutadas, grabada sobre la versión móvil de la web. Salas privadas, de dos a doce jugadores, sin descargas ni registros.

Hecho a partir de helpful-hotteok-c43edb.netlify.app con PageToVid y publicado por su autor. Verlo en su página → · Ver todos los vídeos públicos →

Qué puedes grabar, según lo que has construido

Grabamos páginas web en un navegador real en la nube. Así que la primera pregunta no es el formato, sino qué tiene URL.

Qué se graba, según el tipo de app
Lo que tienesLo que grabamosMejor formatoLo que conviene saber

Una app web adaptable

La propia app, sin sesión o con una sesión de captura (desde Scale)

9:16 para uso en móvil, 16:9 para herramientas de escritorio

Lo más parecido a una demo de producto de verdad

Una página de presentación de una app móvil

La página: capturas, funciones, marcas de agua de las tiendas

9:16 y 16:9

Enseña tu marketing, no imágenes de la app funcionando

Una app nativa sin presencia web

Nada por ahora

—

Grábala en el dispositivo o en el simulador

Una API, un SDK o una CLI

Tu documentación o tu página, o un guion gráfico que escribas tú

16:9

Una animación a partir de un guion escrito suele explicarlo mejor

Para una app web tras un inicio de sesión, usa una ruta de demo pública con datos de ejemplo, en cualquier plan, o una sesión de captura desde el plan Scale: la extensión del navegador pasa tu sesión iniciada al grabador.

Una demo vertical real: Jam3a, 50 segundos

Jam3a es una app de navegador para noches de juegos con amigos: abres una sala privada y tus amigos entran, sin instalar nada. Hicimos su demo de 50 segundos en 9:16, 1080×1920, con 92 palabras locutadas en inglés. Al ser vertical, se grabó sobre la versión móvil de la web en una pantalla de teléfono, la que ve quien la abre en el móvil.

La narración empieza por la noche de juegos, no por el producto: «Tired of complicated game setups for game night?». Nombra los roces que conoce cualquier anfitrión (descargas, inicios de sesión) y luego enseña el recorrido en el orden en que lo vive quien organiza: crear una sala privada en segundos, invitar de dos a doce jugadores, elegir un juego de rondas rápidas. Termina con la acción que ofrece la página, «Create your private room now», y repite la promesa que más importa a un grupo: sin descargas ni registros.

Por qué es una buena demo de desarrollador: cada frase es un paso o una condición de la app real, y los datos más fuertes, el número de jugadores y que no hay que instalar nada, se pueden comprobar en la página. Ese es el trabajo de la demo de una app: responder a «¿qué pasa cuando la abro?» antes de que quien la ve tenga que preguntarlo.

Dónde va tu demo y qué acepta cada sitio

Un vídeo hecho desde tu web rinde mejor en los espacios que controlas. Las tiendas de aplicaciones son la excepción: piden imágenes de la propia app.

Dónde publicar la demo de una app y sus reglas
DóndeQué usarReglas que conviene conocer

Tu página de presentación

Un vídeo 16:9 arriba del todo y uno 9:16 para las visitas desde el móvil

Escribe para verlo sin sonido: los subtítulos cuentan la historia

Publicaciones y galerías de lanzamiento

El vídeo 16:9, de 45 a 60 segundos

Una tarea, de principio a fin

README o página de GitHub

Una imagen de portada enlazada a la página del vídeo

Deja la primera pantalla del README para el comando de instalación

Redes sociales

El vídeo 9:16

Lo importante, en los primeros segundos

Vista previa de App Store

Imágenes capturadas de la propia app

Hasta 30 segundos, hasta tres vistas previas por idioma, solo contenido de la app, se reproduce sin sonido por defecto

Vídeo de vista previa de Google Play

Un enlace de YouTube a imágenes de la app

Solo los primeros 30 segundos se reproducen solos (sin sonido); al menos el 80 % del vídeo debe mostrar la experiencia real dentro de la app; anuncios desactivados

Por tanto, para una app nativa, un vídeo de tu página de presentación no sirve como vista previa en las tiendas: Apple solo admite contenido de la propia app y Google Play quiere que casi todo el vídeo sea la experiencia real (consulta las fuentes). Sigue siendo útil en la página que lleva a la gente a la tienda. Para una app web sin ficha en tiendas, es la demo. Para hacer bien un montaje vertical, lee cómo hacer vídeos verticales para TikTok y Reels.

Renderizar demos desde tu IDE o tu cadena de despliegue

Un desarrollador rara vez quiere otro panel más. Dos formas de quedarte donde trabajas:

  1. Conecta el servidor MCP

    Añade PageToVid a Cursor o VS Code (o a Claude o ChatGPT) como servidor MCP; la configuración está en la página de MCP y en hacer vídeos con Claude por MCP. Funciona en todos los planes.

  2. Pide el vídeo con palabras normales

    «Una demo 9:16 de 45 segundos de https://tu-app.example, centrada en crear una sala, que termine con “Empieza gratis”.» El asistente puede inspeccionar antes la página en el formato que vas a grabar, para que los planos apunten al producto y no solo a la cabecera.

  3. Revisa el guion gráfico y renderiza

    Lee las escenas, corrige una frase o reorienta un plano y renderiza: 40 créditos por vídeo, unos 10 minutos. El primer vídeo de cualquier web es gratis, con una pequeña marca de agua.

  4. Vuelve a renderizar en cada versión

    Cuando un despliegue cambie una pantalla que sale en la demo, llama a la API desde tu CI y recibe un webhook cuando el nuevo vídeo esté listo. El patrón está en automatizar vídeos con la API.

Un consejo sacado de nuestros propios renders: apunta el vídeo a una ruta pública estable, no a un despliegue de vista previa que desaparece al fusionar la rama.

Errores que vemos en las demos de apps

  • Un panel de escritorio grabado en 9:16. El vertical graba tu versión móvil. Si la tienes descuidada, arréglala o haz la demo en 16:9.
  • Una app vacía. Una cuenta nueva sin salas, sin proyectos y sin datos es la demo de una pantalla en blanco. Rellénala.
  • Grabar la página de presentación y llamarlo partida. En una ficha de tienda incumple las reglas de arriba; en tu web, di «esto es lo que hace», no «mírame jugar».
  • Todas las funciones a la vez. Un solo recorrido: abrir, hacer lo principal, ver el resultado.

Tienes más vídeos verticales y el flujo de trabajo en el caso de uso de vídeos para TikTok; para una herramienta de escritorio encaja mejor el caso de uso de vídeo demo SaaS.

Lo que le cuesta a un desarrollador independiente

Tu primer vídeo de cualquier web es gratis y sin tarjeta; los vídeos gratis llevan una pequeña marca de agua y una pantalla final. Un vídeo sin suscripción y sin marca de agua cuesta 3,90 $. El plan Creator a 19 $ al mes cubre 25 vídeos, suficiente para una versión 16:9 y otra 9:16 de cada lanzamiento. Volver a renderizar tras un cambio de interfaz cuesta un render. Los clips generados con IA, para planos que tu web no puede enseñar, son solo para planes de pago, a 311 créditos por clip de 8 segundos. Tienes el detalle en precios y, si comparas con herramientas de avatares o de imágenes de archivo, las páginas de comparación dicen con honestidad dónde gana cada una.

Cuándo no

Cuándo un desarrollador no debería usar PageToVid

Las vistas previas de tienda de una app nativa. Graba la propia app: el simulador de iOS o QuickTime con tu iPhone conectado, la grabación del emulador de Android Studio, y después recorta en CapCut o iMovie. Es lo que piden Apple y Google.

Un juego cuya gracia está en las sensaciones. La fluidez, los controles y el sonido necesitan una captura de juego real, por ejemplo con OBS.

Un recorrido técnico largo. Un paseo de 15 minutos por tu SDK es una grabación de pantalla con tu voz, en Loom u OBS.

Una charla o la historia del fundador. Usa una cámara y tu propia cara.

Convierte tu sitio web en un vídeo — gratis

Pega la página que quieres filmar. PageToVid escribe el guion, graba el sitio real, pone la voz y entrega el MP4.

Primer vídeo gratis · sin tarjeta · listo en minutos

Preguntas frecuentes

¿Puedo usar un vídeo de PageToVid como vista previa en App Store?

No para una app nativa. Apple indica que las vistas previas solo deben mostrar contenido de la propia app, y Google Play pide que al menos el 80 por ciento del vídeo sea la experiencia real dentro de la app. Un vídeo de tu página de presentación va en esa página, en tus publicaciones de lanzamiento y en tus redes.

¿El 9:16 recorta mi web de escritorio?

No. El 9:16 carga tu web en una pantalla de teléfono y graba su versión móvil, la misma versión adaptable que ven tus usuarios en el móvil. El 16:9 y el 1:1 graban la versión de escritorio.

¿Puedo hacer vídeos demo desde Cursor o VS Code?

Sí. Añade el servidor MCP de PageToVid a tu editor y pide con palabras normales un vídeo de una URL. El asistente puede inspeccionar la página, redactar el guion gráfico y lanzar el render, en todos los planes.

¿Se puede volver a renderizar una demo automáticamente en cada versión?

Sí, con la API: lanza un render desde tu CI cuando una versión cambie una pantalla que sale en la demo y recibe un webhook cuando el vídeo nuevo esté listo. Cada render cuesta 40 créditos.