Cómo ejecutar el código HTML de ChatGPT o Gemini y ver la página en vivo

La forma más rápida de ejecutar el código HTML de ChatGPT o Gemini es pulsar Mostrar en la extensión gratuita AI Code Harvester: tu página se abre en vivo en una pestaña nueva, con botones para verla con tamaño de ordenador, tableta y móvil, y nunca tienes que guardar un archivo. Sin la extensión copias el código en un archivo llamado index.html y le haces doble clic, como se explica más abajo.

Por qué el código de un chat todavía no es una página web

Cuando ChatGPT o Gemini “hacen una web”, en realidad te dan texto: un bloque de HTML (el esqueleto de la página), a menudo un bloque de CSS (colores y disposición) y un bloque de JavaScript (botones y acciones). Piensa en una receta. Están todas las palabras, pero nadie ha cocinado el plato todavía. El navegador web es el horno que convierte la receta en algo que puedes mirar.

Algunos chats muestran una pequeña vista previa propia, pero no siempre, no para todo tipo de código, y desaparece cuando sales del chat. Si quieres ver bien la página, en distintos tamaños de pantalla, y volver a ella después, tienes que ejecutarla tú.

La forma fácil: pulsa Mostrar

AI Code Harvester es una extensión gratuita de Chrome (un pequeño complemento que le da al navegador una función nueva). Se queda en las páginas de ChatGPT y Gemini, encuentra los bloques de código de la respuesta y, cuando uno de ellos es una página web, te la muestra. Aquí tienes un vídeo corto y luego los pasos.

1. Instala la extensión. Añádela desde Chrome Web Store. Es gratis y no pide registrarse.
2. Pídele una página a la IA. Por ejemplo: “Hazme una web de una sola página para una panadería pequeña con un botón de pedido. Dame index.html, style.css y app.js.” Ayuda ponerles nombre a los archivos.
3. Espera a que termine la respuesta. El pequeño panel de Code Harvester en la página enumera los archivos que ha encontrado.
4. Pulsa Mostrar. Tu página se abre en una pestaña nueva. Si aparcaste el panel en el borde de la pantalla como un cajón estrecho, el botón Mostrar está en el cajón.
5. Prueba los tres botones de tamaño: Ordenador, Tableta y Móvil. Enseñan cómo encaja la página en la pantalla de un ordenador, de una tableta y de un móvil.
6. ¿No te convence? Pide un cambio a la IA. Cuando responda, la vista previa se actualiza sola, así que puedes seguir pidiendo y mirando.
7. ¿Quieres más espacio? Pulsa Abrir ⤢ en el panel. Se abre el Workspace con una pestaña Vista previa, un botón Recargar y una lista para elegir qué archivo miras.

¿Cómo junta las piezas? Una página web suele pedir sus otros archivos por nombre, por ejemplo style.css y app.js. La extensión los encuentra en la misma respuesta y los mete en la página, así que se ve y funciona como si estuvieran guardados uno junto al otro. Si la respuesta tiene más de una página HTML, un desplegable te deja elegir cuál mirar.

¿Es seguro ejecutar código que escribió una IA?

La vista previa se ejecuta en una habitación cerrada, lo que los programadores llaman sandbox. La página puede dibujarse y ejecutar sus propios botones, pero no tiene acceso a la extensión, a tu navegador ni a tus datos. Si la página carga una biblioteca de internet, eso también ocurre solo dentro de esa habitación cerrada. Aun así, código es código, así que trata una página que no has leído como cualquier archivo de un desconocido. La vista previa se crea en tu ordenador y no se sube nada a nosotros.

¿Sin extensión? La forma manual

Funciona sin ninguna herramienta. Solo tiene algunos pasos más, y los repites después de cada cambio.

1. Copia el bloque de HTML del chat.
2. Pégalo en el Bloc de notas (o en cualquier editor de texto plano) y guárdalo como index.html. En la ventana de guardar elige “Todos los archivos”, para que no acabe como index.html.txt.
3. Haz lo mismo con los bloques de CSS y JavaScript, con los nombres que pide el HTML (por ejemplo style.css y app.js), en la misma carpeta.
4. Haz doble clic en index.html. Se abre en tu navegador como una página de verdad.
5. ¿Cambiaste algo? Guarda el código nuevo sobre el archivo viejo y pulsa actualizar en el navegador.

El tropiezo habitual es una página que se ve desnuda o con botones que no hacen nada. La mayoría de las veces el nombre de un archivo no coincide con el que pide el HTML. En la vista previa de la extensión, si los nombres difieren, usa el siguiente archivo sin usar del tipo correcto, así que lo perdona. A mano, tienes que corregir el nombre tú.

Cuando la vista previa se ve mal

• Se ve vacía o a medias. La última respuesta puede tener solo parte del código, por ejemplo un archivo modificado. Pídele a la IA que “me dé otra vez los archivos completos”.
• Faltan imágenes. Un chat no puede enviar archivos de imagen. Usa imágenes con direcciones web o añade las tuyas después.
• Los botones no hacen nada. Busca un archivo JavaScript en la lista del panel. Si la IA lo puso en otra respuesta, pide todos los archivos en una sola respuesta.
• Bien en el ordenador, rota en el móvil. Pulsa Móvil, mira qué falla y pídele a la IA que “lo adapte a pantallas pequeñas”.
• Páginas que necesitan inicio de sesión o una base de datos. Aquí solo verás cómo se ven, no cómo se comportan. Necesitan un servidor de verdad.

Pídele a la IA páginas que se vean bien en la vista previa

• Pide todos los archivos en una sola respuesta, con el nombre del archivo escrito encima de cada bloque.
• Para una página sencilla, pide un solo archivo: “pon el CSS y el JavaScript dentro del HTML”.
• Di para quién es: “tiene que verse bien en el móvil”.
• Cambia una cosa cada vez. Así es más fácil ver qué salió mal.

Cuando la página se ve bien, la siguiente pregunta es cómo ponerla en internet para que la vean otros. Nuestra guía Dónde publicar la página web que hizo tu IA repasa con palabras sencillas las opciones gratuitas y de pago. AI Code Harvester hace más que la vista previa: puede descargar todo como ZIP (con tus propias carpetas si quieres), exportar una sola página o llevar el chat a otra IA. Lee chats de ChatGPT y Gemini y funciona en tu ordenador. Añádela desde Chrome Web Store.

Conviene saber antes de empezar

Preguntas frecuentes