Cómo crear una web con ChatGPT: tres formas que funcionan

Para crear una web con ChatGPT puedes pedirle que escriba el HTML y el CSS del sitio y luego subir esos archivos a un servicio de alojamiento por tu cuenta; usarlo para planificar las páginas y redactar los textos antes de montarlas en un constructor web; o conectar un constructor con IA, como Mythex, dentro de ChatGPT para que construya, aloje y publique el sitio desde la misma conversación. La primera opción es gratuita y sirve para una web de una sola página; la tercera es la que necesitas cuando el sitio requiere formularios que guardan datos, inicios de sesión o actualizaciones frecuentes. Esta guía muestra cada método con prompts y deja claro dónde se queda corto cada uno.

Lo que ChatGPT puede y no puede hacer por sí solo

ChatGPT es muy bueno escribiendo: código, titulares, textos de página y planes. Por defecto no es una empresa de alojamiento. No da a tu web una dirección pública, no ejecuta una base de datos y no conserva los archivos de tu sitio entre proyectos como sí hace un constructor. Cada método de abajo es una respuesta distinta a esa carencia.

Método 1: ChatGPT escribe el código, tú lo alojas

Es el enfoque clásico y funciona bien para un sitio sencillo y estático: un portafolio, una landing page, una página de boda.

Paso 1: Pide una página completa en un solo archivo

Sé específico con el contenido y el diseño:

Escribe un sitio web completo de una sola página en un archivo HTML, con el CSS dentro de una etiqueta style. Es para Maya Haddad, una ilustradora freelance de Amán. Secciones: un encabezado con su nombre y «Ilustración para libros y marcas», una cuadrícula de seis imágenes de portafolio (usa rutas de imagen de marcador que pueda reemplazar), un párrafo breve sobre ella, una lista de tres servicios con precio de inicio y una sección de contacto con su correo como enlace mailto. Limpio, moderno, con mucho espacio en blanco, que funcione en el móvil. Sin frameworks de JavaScript.

Pedir un solo archivo hace más sencillo guardarlo y subirlo.

Paso 2: Guarda el archivo y ábrelo

Copia el código en un editor de texto, guárdalo como index.html y ábrelo en tu navegador. Si algo no se ve bien, descríbeselo a ChatGPT: «la cuadrícula de imágenes es una sola columna en escritorio; hazla de tres columnas por encima de 900 px de ancho».

Paso 3: Reemplaza los marcadores

Cambia las imágenes de marcador por las tuyas y sustituye los textos que ChatGPT haya inventado. Revisa con cuidado precios, correos y nombres: la IA rellena los huecos con mucha seguridad.

Paso 4: Ponla en línea

Sube el archivo a un hosting estático gratuito como GitHub Pages, o a cualquier hosting web que ya pagues. Obtendrás una dirección pública. Para usar tu propio dominio, sigue las instrucciones de tu proveedor; nuestra guía sobre cómo conectar un dominio personalizado explica la parte del DNS.

Dónde se queda corto el Método 1

• Formularios que guardan datos. Un formulario de contacto necesita un lugar donde enviar las respuestas: un servicio de formularios o un servidor.
• Inicios de sesión y áreas de miembros. Necesitan un backend y una base de datos.
• Muchas páginas. Mantener cabeceras y menús coherentes en diez archivos pegados a mano se vuelve tedioso.
• Actualizaciones. Cada cambio implica pedir código nuevo, pegarlo y volver a subirlo.

Método 2: ChatGPT planifica, un constructor construye

Aquí ChatGPT se encarga de pensar y redactar, y un constructor web se encarga de montar y alojar.

Paso 1: Planifica el sitio con ChatGPT

Tengo una pequeña panadería familiar en Manchester que acepta encargos de tartas. Sugiere las páginas que necesita mi web, qué debe decir cada página y la única acción que quiero que haga el visitante en cada una. Que sean cinco páginas como máximo.

Paso 2: Escribe los textos

Pide el texto de cada página y luego reescríbelo con tu propia voz. Añade los datos reales que ChatGPT no puede conocer: horario, precios, zonas de reparto, lo que hace diferentes a tus tartas.

Paso 3: Constrúyela en un constructor

Pega el plan y los textos en un constructor web. En una herramienta de arrastrar y soltar, colocas el texto en una plantilla. En un constructor con IA puedes dar el plan completo en un solo mensaje y él construye las páginas; por ejemplo, en el constructor de webs de Mythex:

Construye una web para una panadería familiar en Manchester con este plan y estos textos: [pega aquí]. Incluye un formulario de solicitud de encargo que guarde cada pedido (nombre, teléfono, tipo de tarta, fecha necesaria, mensaje) para que pueda verlos en una página de administración a la que solo yo pueda acceder. Diseño cálido y hogareño, que funcione en el móvil.

El formulario de pedidos aquí guarda los datos en una base de datos real, algo que un archivo HTML pegado no puede hacer. Para más información sobre esta vía, consulta cómo crear una web con IA.

Método 3: Crea y publica desde dentro de ChatGPT

La opción más nueva es conectar un constructor a ChatGPT para que ChatGPT pueda usar directamente las herramientas del constructor. Te quedas en la conversación de ChatGPT; el constructor aporta el proyecto, la vista previa, la base de datos y el alojamiento.

Mythex funciona así a través de su aplicación para ChatGPT (un conector MCP). Lo conectas desde Ajustes de cuenta en Mythex; conectarlo funciona en cualquier plan, y las herramientas que ejecutan el entorno de tu proyecto requieren Pro. Una vez conectado, puedes pedirle a ChatGPT algo como:

Usando Mythex, crea una web nueva para mi panadería con una página de inicio, una página de menú con tartas y precios, y un formulario de solicitud de encargo que guarde los datos en una base de datos. Enséñame la vista previa y publícala cuando te diga que está bien.

ChatGPT entonces crea el proyecto, escribe el código, lo ejecuta y lo publica en una URL pública cuando lo apruebas. Los cambios son simplemente más mensajes en la misma conversación. El mismo enfoque de conector también funciona desde Claude, Cursor y Codex. Para más información sobre cómo funciona esto y qué constructores lo admiten, consulta constructores de apps con IA y MCP.

¿Qué método elegir?

Consejos de prompts que funcionan con cualquier método

• Da datos reales desde el principio. Nombre, ubicación, servicios, precios, datos de contacto. Cuantos menos detalles inventados, menos tendrás que corregir.
• Describe al visitante y el objetivo. «Un padre que busca una tarta de cumpleaños, que debería acabar enviando una solicitud de encargo».
• Pide diseños pensados para el móvil. La mayoría de los visitantes usan el teléfono.
• Cambia una cosa por mensaje una vez que exista la primera versión.
• Pide explícitamente lo básico del SEO: un título y una descripción únicos por página, encabezados reales, texto alternativo en las imágenes. Consulta SEO para webs creadas con IA.

Nuestra guía sobre cómo escribir prompts para constructores de apps con IA tiene más patrones.

Problemas comunes y soluciones

• El diseño parece genérico. Dale una referencia: «como una cafetería escandinava tranquila, mucho blanco y un verde apagado».
• El código se ha cortado. Pide a ChatGPT que continúe desde la última línea, o que divida la página en secciones y te las dé una por una.
• Ha inventado testimonios o estadísticas. Elimínalos. Las reseñas falsas dañan la confianza y, en muchos lugares, van contra las normas de protección al consumidor.
• La web se rompe después de un cambio. Guarda una copia de la última versión que funcionaba antes de pegar código nuevo. Los constructores como Mythex guardan puntos de restauración para que puedas volver atrás.

Antes de publicar

Lee cada palabra de cada página. Comprueba que los datos de contacto funcionan. Abre el sitio en un móvil. Asegúrate de que las imágenes son tuyas o tienen la licencia adecuada. Después publícala y compártela donde ya están tus visitantes. Si quieres que todo esto no cueste nada, cómo crear una web gratis explica con más detalle las opciones de alojamiento gratuito.

Preguntas