¿Te imaginas describir tu página web en un chat y tenerla lista en minutos? Eso es lo que permite hoy la inteligencia artificial. En esta guía te enseño cómo crear una página web con ChatGPT de dos formas: generando una web completa en HTML que puedes publicar gratis, y usando ChatGPT como asistente para crear y llenar de contenido una web en WordPress. Te dejo los prompts que uso y los errores que debes evitar para que tu web, además de bonita, aparezca en Google.
¿Se puede crear una página web solo con ChatGPT?
Sí. ChatGPT puede escribir el código HTML, CSS y JavaScript de una página completa: estructura, diseño, textos y efectos. Tú solo tienes que guardarlo en un archivo y subirlo a internet. Funciona muy bien para:
- Páginas de presentación de un negocio o de un profesional.
- Portafolios de diseñadores, fotógrafos o editores de video.
- Páginas de aterrizaje para un producto, un curso o un evento.
- Invitaciones digitales (bodas, cumpleaños, XV años).
- Currículum en línea.
Para un blog con muchos artículos, una tienda online o una web que vas a actualizar a menudo, es mejor usar WordPress y apoyarte en ChatGPT para el contenido. Veremos las dos opciones.
Método 1: crear una página web completa con código de ChatGPT
Paso 1: Define tu página
Antes de escribir el prompt, ten claro: el objetivo de la web, el público, las secciones (inicio, servicios, sobre mí, testimonios, contacto), los colores de tu marca y los textos principales. Si no tienes los textos, ChatGPT puede proponerlos, pero dale datos reales de tu negocio.
Paso 2: Escribe el prompt
Actúa como diseñador web experto. Crea una página web de una sola página (landing page) en un único archivo HTML con CSS dentro, moderna y adaptada al celular, para un estudio de edición de video llamado «Corte Final» en Monterrey. Secciones: cabecera con menú fijo, portada con titular y botón de WhatsApp, servicios (edición para YouTube, videos para empresas, reels), portafolio con 6 espacios para videos de YouTube, proceso de trabajo en 4 pasos, testimonios, preguntas frecuentes y contacto con formulario y mapa. Colores negro, blanco y naranja. Tipografía moderna. Textos persuasivos en español. Optimiza las etiquetas para SEO: título, meta descripción, encabezados H1 y H2 y textos alternativos.
Paso 3: Guarda y abre la página
- Copia el código completo.
- Pégalo en Visual Studio Code o en el Bloc de notas.
- Guárdalo como index.html.
- Ábrelo con doble clic en tu navegador.
Paso 4: Ajusta el diseño con peticiones concretas
- «Haz el titular más grande y añade una animación suave al entrar».
- «Cambia la sección de servicios a tarjetas con iconos».
- «Añade un botón flotante de WhatsApp que lleve al número 52…».
- «Mejora el contraste para que se lea bien en celular».
Pide siempre el archivo completo actualizado para reemplazarlo directamente.
Paso 5: Añade tus imágenes
Crea una carpeta img junto a tu index.html, guarda allí tus fotos (en formato WebP o JPG optimizado) y pídele a ChatGPT que cambie las imágenes de ejemplo por las tuyas indicándole los nombres de archivo.
Paso 6: Haz que el formulario funcione
Una página HTML no puede enviar correos por sí sola. Pídele a ChatGPT que conecte el formulario con un servicio gratuito como Formspree o similar, o sustitúyelo por un botón de WhatsApp o un enlace de correo.
Paso 7: Publica tu página
- Netlify Drop o GitHub Pages: gratis, con dirección del tipo tuproyecto.netlify.app.
- Tu propio hosting y dominio: subes la carpeta por el administrador de archivos y la web queda en tunegocio.com. Es lo más profesional.
Método 2: crear tu web en WordPress con ayuda de ChatGPT
Si quieres un sitio que crezca, con blog y fácil de actualizar, combina WordPress con ChatGPT:
- Instala WordPress en tu hosting (te lo explico en cómo crear una página web en WordPress desde cero).
- Pide a ChatGPT la estructura del sitio: «Propón la arquitectura de una web para [tu negocio]: páginas, categorías del blog y 20 ideas de artículos con su palabra clave».
- Genera los textos de cada página con tus datos reales y revísalos para que suenen a ti.
- Pide fragmentos de código para personalizar: «Dame el CSS para que los botones de mi tema sean redondeados y naranjas».
- Usa ChatGPT para el SEO: títulos, meta descripciones, preguntas frecuentes y textos alternativos.
Prompts útiles para crear webs con ChatGPT
- «Escribe 5 titulares para la portada de mi web de [negocio] dirigidos a [público]».
- «Revisa este código HTML y mejóralo para SEO y accesibilidad».
- «Haz que esta página cargue más rápido: optimiza el CSS y las imágenes».
- «Crea la política de privacidad para una web que usa Google Analytics y AdSense», y revísala después.
- «Propón una paleta de colores y tipografías para una marca [estilo]».
Cómo hacer que tu web creada con ChatGPT aparezca en Google
- Textos propios: Google premia el contenido útil y original. Usa ChatGPT como borrador, pero añade tu experiencia, tus datos y tus fotos.
- Una palabra clave por página en el título, la URL, el H1 y el primer párrafo.
- Velocidad: imágenes comprimidas y código limpio.
- Versión móvil impecable.
- Google Search Console: verifica tu dominio y envía tu sitemap.
- Perfil de empresa en Google si es un negocio local.
Errores comunes
- Publicar los textos de ChatGPT sin revisarlos: pueden tener datos inventados.
- Usar imágenes de internet sin permiso.
- Olvidar las páginas legales (privacidad, cookies, aviso legal).
- No probar la web en el celular antes de publicarla.
- Poner datos privados o claves en el código.
Qué método elegir: HTML generado o WordPress
| Criterio | Web en HTML con ChatGPT | WordPress con ayuda de ChatGPT |
|---|---|---|
| Tiempo para publicar | Minutos u horas | Uno o dos días |
| Costo | Puede ser gratis | Hosting y dominio |
| Actualizar contenido | Editando el código (con ayuda de la IA) | Desde un panel, sin tocar código |
| Blog con muchos artículos | Poco práctico | Ideal |
| Velocidad | Muy rápida | Rápida con buen hosting y caché |
| Monetizar con AdSense | Posible | Muy sencillo |
Mi recomendación: para una página de presentación o una landing, el método 1. Para un proyecto de contenido que quieres hacer crecer y monetizar, el método 2.
Ejemplo: la web de un editor de video freelance en una tarde
- Primera hora: le pido a ChatGPT la estructura y los textos a partir de mis datos reales: servicios, precios orientativos, ciudad, años editando y clientes.
- Segunda hora: genero la landing page en HTML con el prompt del paso 2, la reviso en el navegador y pido tres o cuatro ajustes de diseño.
- Tercera hora: sustituyo las imágenes por capturas de mis proyectos, incrusto tres videos de mi portafolio de YouTube y conecto el botón de WhatsApp.
- Cuarta hora: compro el dominio, subo la carpeta al hosting, activo el SSL y doy de alta la web en Search Console.
Al final del día tienes una web profesional con tu dominio, rápida y lista para compartir con clientes.
Cómo mantener tu web actualizada con ChatGPT
Una web no se termina nunca. Cada mes puedes pedirle a ChatGPT ideas para nuevas secciones, revisar que los textos sigan vigentes, actualizar precios y añadir preguntas frecuentes según lo que te preguntan tus clientes. Guarda en un documento el prompt original y las decisiones de diseño (colores, tipografías, tono), así cada cambio mantendrá el mismo estilo.
Checklist antes de publicar tu web
- El título de la pestaña y la meta descripción describen tu negocio y tu ciudad.
- Solo hay un H1 por página y los subtítulos siguen un orden lógico.
- Todas las imágenes tienen texto alternativo y pesan menos de 200 KB.
- Los botones de WhatsApp, teléfono y correo funcionan desde el celular.
- El formulario envía los mensajes a tu correo.
- La web se ve bien en celular, tableta y computadora.
- Tienes enlaces a la política de privacidad y de cookies en el pie.
- El sitio carga con https y el candado aparece en el navegador.
- Has revisado la ortografía y que no queden textos de ejemplo de la IA.
Preguntas frecuentes
¿Es gratis crear una página web con ChatGPT?
Puedes hacerlo con la versión gratuita y publicarla gratis en Netlify o GitHub Pages. Si quieres dominio propio, pagarás el dominio y el hosting.
¿Google penaliza las webs hechas con IA?
Google no penaliza el uso de IA en sí, sino el contenido de poca calidad o creado solo para manipular los resultados. Si tu web es útil y original, no hay problema.
¿Puedo editar la web después?
Sí. Pega el código en ChatGPT y pide los cambios, o edítalo tú en el archivo.
Si prefieres probar con otra IA, mira también cómo crear una aplicación con Claude, porque el proceso para webs es muy parecido. Soy Estutos y hasta luego.