Graba una demo de aplicación web automáticamente con IA

Ahora puedes grabar una demo de aplicación web automáticamente escribiendo lo que quieres mostrar y entregándoselo a un agente de IA que hace clic en tu producto en un navegador en la nube mientras graba. Que la toma sea utilizable depende de lo que configures antes de empezar: la cuenta en la que inicia sesión, los datos en pantalla y las instrucciones que escribas. Esta guía cubre cada punto, qué hacer cuando el agente se queda atascado y cuándo un script de Playwright o Puppeteer es la mejor herramienta.

También es la forma más directa de obtener una demostración de producto sin tener que grabar la pantalla tú mismo. Si tu producto no es una aplicación web pública, o solo tienes una presentación o una URL, los otros métodos sin grabación al final cubren esas opciones.

Cómo funciona la grabación automática de sitios web#

En Clevera, el grabador de IA toma 2 entradas: una página de inicio y una instrucción escrita que describe qué mostrar. Un agente de IA abre la página de inicio en un navegador en la nube, realiza los pasos y graba la sesión. Tú observas cómo se ejecuta, puedes tomar el control del navegador en cualquier momento y devolver el control cuando hayas terminado.

Por defecto, el agente es de solo lectura. Puede navegar, abrir menús y leer pantallas, pero no creará ni editará nada a menos que se lo permitas. La grabación final llega a tu biblioteca como cualquier otra grabación, y puedes convertirla en un video instructivo narrado, una demo de producto o un artículo.

Paso 1: Prepara una cuenta de demostración y datos de prueba#

Todo lo que el agente ve termina en el video. Configura la cuenta antes de escribir una sola instrucción.

• Usa una cuenta de demostración dedicada. Nunca dirijas al agente a una cuenta de administrador en producción. Un espacio de trabajo de demostración con su propio inicio de sesión mantiene los datos reales de los clientes fuera de la pantalla y limita lo que cualquier error puede afectar.
• Incluye datos realistas. Un panel vacío hace una mala demo. Agrega de 10 a 20 registros con nombres, cantidades y fechas creíbles, para que las tablas, los gráficos y los resultados de búsqueda parezcan que un equipo realmente usa el producto. Evita "Test 1", "asdf" y nombres de clientes reales.
• Establece el estado desde el que comienza el flujo. Si la demo muestra "crea tu primer proyecto", asegúrate de que aún no exista ningún proyecto. Si muestra cómo editar una factura, asegúrate de que la factura esté allí y tenga un nombre claro al que la instrucción pueda apuntar.
• Elimina las interrupciones únicas. Descarta recorridos de incorporación, modales de "novedades" y banners de prueba en esa cuenta primero. Cualquier cosa que aparezca una vez por usuario aparecerá en tu grabación.
• Comprueba que la aplicación sea accesible desde Internet. El agente se ejecuta en un navegador en la nube, por lo que no puede abrir localhost, un servidor de ensayo detrás de tu VPN o cualquier cosa con IP permitida solo para tu oficina. Usa una demo pública o un entorno de pruebas.

Paso 2: Escribe una instrucción que el agente pueda seguir#

La mayoría de las malas grabaciones de IA provienen de instrucciones vagas. El agente hace lo que escribiste, en el orden en que lo escribiste, y llena los vacíos con suposiciones. Las buenas instrucciones se leen como un script de prueba corto escrito para una persona que nunca ha visto tu producto.

Sigue 4 reglas:

1. Nombra las pantallas. Usa las etiquetas que aparecen en la interfaz: "Abre Facturación desde la barra lateral izquierda", no "ve a la sección de dinero".
2. Indica el orden. Numera los pasos. Si el orden es importante para la historia (configurar, luego usar, luego ver el resultado), indícalo.
3. Señala elementos exactos. Nombra el botón, la pestaña, el campo o el registro: "Haz clic en la factura INV-1042", "Abre el menú desplegable Filtros y elige Vencidas".
4. Indica dónde detenerse. Termina en la pantalla de resultado que el espectador debe recordar y dile al agente que se quede ahí un momento.

Aquí está la diferencia en la práctica.

Instrucción mala:

Muestra cómo funciona nuestra facturación.

El agente tiene que decidir qué pantallas importan, qué registro abrir y cuándo ha terminado. Obtendrás un recorrido de lo que encuentre primero.

Mejor, pero aún imprecisa:

Muestra cómo crear una factura y enviarla a un cliente.

Objetivo claro, pero sin punto de partida, sin cliente, sin partidas individuales. Con un agente de solo lectura, esto tampoco puede tener éxito, porque crear una factura es una acción de escritura.

Buena instrucción:

Empieza en el Panel de control. 1) Haz clic en Facturas en la barra lateral izquierda. 2) Haz clic en el botón Nueva factura en la parte superior derecha. 3) En Cliente, elige "Northwind Studio". 4) Añade una partida: "Retención por diseño", cantidad 1, precio 2.400. 5) Haz clic en Guardar borrador. 6) Abre el borrador y haz clic en Vista previa, luego detente en la pantalla de vista previa durante 3 segundos. No hagas clic en Enviar.

Esto nombra cada pantalla y elemento, usa el cliente exacto de tus datos de prueba y traza una línea clara en la única acción que no quieres que se realice. También te indica, antes de comenzar, que esta ejecución necesita permiso de creación (ver Paso 4).

Algunos hábitos más ayudan:

• Un flujo por grabación. "Crea una factura, luego configura un programa recurrente, luego exporta un informe" son 3 videos. Las ejecuciones más cortas son más fáciles de corregir y más fáciles de reutilizar.
• Deletrea los valores a escribir. Si el agente tiene que inventar texto, podría inventar algo extraño en cámara.
• Menciona peculiaridades conocidas. "El botón Guardar está deshabilitado hasta que el campo de precio pierde el foco" le ahorra al agente algunos clics confusos.

Paso 3: Elige una opción de inicio de sesión#

La mayoría de las demos de aplicaciones web están detrás de un inicio de sesión. Tienes 3 opciones:

La cuenta de demostración del Paso 1 vale la pena aquí. Una contraseña solo para demostración con acceso a datos solo para demostración es la opción de bajo riesgo cuando proporcionas un inicio de sesión. Si tu empresa inicia sesión a través de SSO con 2FA, escribirlo tú mismo suele ser más rápido que intentar que el agente lo haga.

Paso 4: Decide entre solo lectura o crear/editar#

Solo lectura es el valor predeterminado y cubre más demos de las que esperarías (los riesgos de permitir que un agente escriba están en seguridad del agente de grabación de pantalla de IA): navegar, filtrar, buscar, abrir registros, cambiar de pestaña y mostrar informes.

Permite crear o editar solo cuando el flujo realmente lo necesite (crear un registro, cambiar una configuración, enviar un formulario) y solo en una cuenta de demostración. Luego haz 2 cosas:

• Escribe el punto de parada en la instrucción, como en "No hagas clic en Enviar" arriba. Las acciones que envían correos electrónicos a personas, cargan tarjetas o publican en integraciones deben mantenerse fuera de la ejecución, o desconectarse en el espacio de trabajo de demostración.
• Restablece los datos de la demo después, para que la siguiente ejecución comience desde el mismo estado.

Paso 5: Toma el control cuando el agente se quede atascado#

Algunas pantallas bloquean cualquier navegador automatizado. Planifica para ellas en lugar de volver a ejecutar todo el flujo:

• Banners de cookies y ventanas emergentes de consentimiento. Toma el control, acepta o descarta, devuelve el control.
• Selectores de fecha personalizados y arrastrar y soltar. Los widgets inusuales son donde los agentes pierden más tiempo. Elige la fecha tú mismo y devuelve el control.
• Captchas. Estos existen para detener la automatización. Resuélvelos tú mismo.
• Códigos 2FA. Escribe el código de tu teléfono, luego devuelve el control.

Cuando devuelves el control, el agente continúa desde la pantalla en la que lo dejaste. Si la transferencia se muestra en la toma, recórtala en el editor.

Paso 6: Mantén las ejecuciones cortas para mantener los créditos bajos#

El grabador de IA utiliza créditos según el tiempo que la IA trabaja, en todos los planes. Eso hace que la instrucción sea una palanca de costos. Una instrucción precisa en una cuenta preparada termina rápido. Una vaga en una cuenta llena de ventanas emergentes consume tiempo explorando, reintentando y esperando. Las cantidades de créditos del plan están en la página de precios.

En qué se convierte la grabación#

La toma sin editar es la entrada, no el entregable. A partir de la misma grabación de IA puedes generar:

• Un vídeo instructivo. Clevera cubre cada acción necesaria en orden, redacta el guion y añade una voz en off con IA, por lo que nadie tiene que narrar en directo. Es el formato ideal para centros de ayuda y procesos de incorporación. Mira cómo funciona en el creador de tutoriales con IA.
• Una demo de producto. La IA es selectiva aquí: puede omitir metraje de poco valor, reordenar clips y narrar resultados en lugar de cada clic. Es el formato para páginas de ventas y lanzamientos. Nuestro generador de demos de producto cubre los formatos de demo.
• Un artículo. Un tutorial escrito con capturas de pantalla seleccionadas y subtituladas automáticamente, para documentación y SEO.

Cada uno es un elemento de contenido independiente, y los vídeos y artículos se traducen a 74 idiomas. Cuando la interfaz cambia, las ediciones en la narración y el texto se actualizan en los enlaces alojados y los elementos incrustados, pero el metraje en sí no cambia. Vuelve a ejecutar la misma instrucción para obtener metraje nuevo; cómo actualizar vídeos tutoriales tras un cambio de interfaz cubre cuándo volver a grabar y cuándo basta con una edición.

Si no tienes claro qué formato necesita tu audiencia, nuestra comparativa de demos interactivas frente a vídeos de producto y la guía sobre cómo crear un vídeo tutorial cubren los pros y los contras.

Nuestra primera ejecución: 1 instrucción, 78 segundos, 9 créditos#

En octubre de 2026 ejecutamos la grabadora de IA en TodoMVC, una aplicación de demostración pública, con esta instrucción:

Añade tres tareas: 'Escribir publicación de lanzamiento', 'Grabar demo', 'Enviar boletín'. Marca 'Grabar demo' como completada. Luego haz clic en el filtro Activas para mostrar solo las tareas pendientes.

El inicio de sesión estaba en Ninguno. Activamos Permitir cambios, porque añadir y completar tareas son acciones de escritura, y solo lo hicimos porque es una aplicación de demostración pública sin datos reales detrás. En tu propio producto, sigue el Paso 4 en su lugar.

El agente hizo exactamente lo que escribimos, en orden, sin reintentos ni clics erróneos que detectáramos, y no tuvimos que intervenir. La ejecución tomó unos 78 segundos de tiempo real y dejó 58 segundos de metraje para una tarea que una persona hace en unos 20, porque el agente hace pausas entre pasos. Clevera lo recortó a un vídeo instructivo de 0:40 con 2 capítulos, 6 pasos y zooms automáticos a 1.5x y 1.8x, en unos 50 segundos. Créditos: 5 por el análisis de grabación y 4 por el instructivo, 9 en total.

El vídeo instructivo de 0:40 que Clevera hizo a partir de esa grabación con IA, sin editar.

Qué observar: el metraje salió descolorido y con poco contraste, así que revísalo antes de publicar. Y nuestra instrucción no estaba numerada. Funcionó en un flujo de 3 pasos porque detallaba cada valor a escribir y el filtro exacto en el que hacer clic. Para flujos más largos, numera los pasos.

La alternativa mediante scripts: Playwright y Puppeteer#

Los equipos de ingeniería han grabado navegadores con scripts de automatización durante años, y para algunos trabajos un script es la mejor herramienta.

Playwright graba vídeo de forma nativa. En Playwright Test configuras la opción video en 'on', 'retain-on-failure' o 'on-first-retry'; con la biblioteca pasas recordVideo a browser.newContext() con un dir y un size opcional. 2 detalles suelen confundir a la gente. Los vídeos se guardan solo cuando el contexto del navegador se cierra, así que debes await context.close(). Y el vídeo toma por defecto el viewport escalado para ajustarse a 800x800, así que configura el viewport y size tú mismo si quieres una toma nítida a 1080p. Tampoco tienes que escribir selectores a mano: npx playwright codegen genera el script mientras haces clic en la aplicación.

Puppeteer tiene page.screencast(), que graba WebM a 30 FPS por defecto y requiere ffmpeg en la máquina. Desde Puppeteer 25.13, la documentación lo marca como obsoleto en favor de page.record(), que genera MP4.

Un script es la mejor opción cuando:

• Quieres que el mismo flujo se grabe en cada lanzamiento, activado desde CI sin que nadie supervise.
• La grabación sirve también como prueba, y te importan tanto los fallos como el metraje.
• Tu aplicación vive donde un navegador en la nube no puede llegar, como una red de pruebas privada que tu ejecutor de CI sí puede ver.
• Tienes ingenieros que ya mantienen pruebas de extremo a extremo y los selectores son estables.

El agente es la mejor opción cuando:

• La persona que necesita el vídeo trabaja en marketing de producto, ventas o soporte y no escribe código.
• El flujo es único o cambia a menudo: una demo específica para un cliente potencial, una nueva funcionalidad, un artículo de ayuda.
• Necesitas un vídeo terminado y narrado, no metraje en bruto. Un script te da una captura de pantalla silenciosa; la narración, los zooms y la edición siguen dependiendo de ti.

Los 2 enfoques se combinan bien. Clevera acepta vídeos subidos, incluidas grabaciones silenciosas, por lo que un equipo puede grabar un flujo con Playwright en CI y subir el archivo para generar el vídeo instructivo o la demo narrada.

Otras formas de hacer una demostración de producto sin grabar la pantalla#

Una toma limpia normalmente requiere una cuenta ordenada, un guion que sigues mientras haces clic y sin errores, y cada cambio en la interfaz obliga a alguien a volver a hacerlo. La grabadora con IA elimina eso para las aplicaciones web. Cuando no encaja, todavía tienes opciones que no requieren grabación:

Desde una presentación, PDF o capturas de pantalla#

Usa esto cuando la función aún no se ha lanzado, la aplicación no es pública o no es una aplicación web en absoluto. Sube una presentación en PDF o capturas de pantalla, elige un tipo de demo como Nueva función y añade una línea de dirección ("La audiencia son administradores existentes, menos de 90 segundos"). El texto de la diapositiva guía la narración que Clevera escribe y pone voz sobre tus diapositivas, por lo que un texto específico ("Exporta cualquier informe a CSV en 1 clic") es mejor que los eslóganes. Para una aplicación de escritorio, de 8 a 10 capturas de pantalla bien elegidas pueden convertirse en un recorrido narrado claro. El límite: no hay clics ni cursor en vivo, por lo que se adapta mejor a una vista previa de lanzamiento que a un vídeo de formación de "haz clic exactamente aquí".

Desde una URL o unas pocas frases#

Para un clip corto para redes sociales, anuncios o la parte superior de una página de destino, los tipos sociales y promocionales de Clevera (Starter en adelante, en Beta) no necesitan metraje. Pega un enlace y Clevera extraerá los datos, capturas de pantalla y logotipo del producto de la página, o describe el producto en unas pocas frases; la IA escribe el clip como gráficos en movimiento con música y, donde el tipo lo incluya, una voz en off. El recorrido del producto, el enfoque de funciones y el anuncio de funciones son los tipos más cercanos a una demo, y el tipo de avatar con IA (también Starter en adelante, Beta) añade un presentador. Estos son promocionales, no de formación: muestran qué es el producto, no un flujo de trabajo real.

Herramientas de avatar y demostraciones interactivas#

Las herramientas de avatar como HeyGen convierten un guion o un enlace de producto en un vídeo dirigido por un presentador; para el software, el metraje de pantalla todavía tiene que venir de algún lugar. Las herramientas interactivas como Arcade y Supademo producen demostraciones interactivas en lugar de vídeo, pero alguien todavía tiene que hacer clic en el producto para capturarlas. Nuestra comparación de demos interactivas frente a vídeos de producto cubre cuándo cada una convierte mejor.

Qué método se adapta a cada trabajo#

En nuestras pruebas de octubre de 2026 la diferencia fue clara. La grabadora con IA utilizada anteriormente más una descripción general del producto de 0:55 costaron 11 créditos y mostraron clics reales. Un enfoque de funciones de 35 segundos generado desde clevera.ai con Investigar un sitio web costó 96 créditos, tomó unos 7 minutos y se abrió en una escena no relacionada que habríamos tenido que corregir antes de publicar. El metraje real era más barato y más cercano a una demo; el clip promocional es para alcance, no para recorridos.

Límites a conocer antes de empezar#

• Solo web. La grabadora con IA graba sitios web y aplicaciones web en un navegador en la nube. No graba software de escritorio ni aplicaciones móviles nativas. Para flujos de escritorio, o flujos web en los que prefieras hacer clic tú mismo, usa la aplicación de escritorio de Clevera (macOS o Windows).
• Solo aplicaciones accesibles. Nada de localhost, herramientas de entorno de pruebas solo con VPN o con IP permitida.

Empieza con un flujo que tu equipo de soporte explique cada semana, en una cuenta de demostración, con una instrucción numerada que nombre cada botón. Observa la primera ejecución, anota dónde tuviste que intervenir e incorpora esas notas en la instrucción para la siguiente.

Preguntas frecuentes#

¿Puedo crear una demostración de producto sin grabar mi pantalla en absoluto? Sí. La grabadora con IA graba una aplicación web pública por ti en un navegador en la nube, una presentación en PDF o capturas de pantalla no necesitan grabación, y una URL o instrucción se convierte en un clip de estilo promocional.

¿Cómo mantengo los datos reales de los clientes fuera de la demo? Dirige al agente a una cuenta de demostración dedicada con datos falsos realistas (Paso 1), nunca a una cuenta de administrador en producción.

¿La grabadora con IA funciona con software de escritorio? No. Solo graba sitios web y aplicaciones web. Para software de escritorio, graba con la aplicación de escritorio de Clevera o crea la demo a partir de capturas de pantalla.

¿Puedo hacer una demo gratis? El plan Gratuito incluye vídeos de instrucciones, demostraciones de producto y artículos de hasta 3 minutos, compartidos mediante enlace o incrustación (las descargas MP4 comienzan en Starter). La grabación con IA utiliza créditos en todos los planes; los clips sociales y promocionales y el avatar con IA requieren Starter o superior.