19 Oct Cómo crear una web con IA: tutorial con ChatGPT y Claude

Última revisión: octubre de 2026. Las funciones, límites y opciones de publicación de ChatGPT y Claude pueden cambiar. Verifica las condiciones actuales de tu cuenta antes de seguir el tutorial.

Imagina que mañana tienes que presentar la web de un pequeño negocio. Hay que decidir qué decir, organizar sus servicios, diseñar una portada convincente, preparar la versión móvil y conseguir que el formulario de contacto funcione. La promesa de la inteligencia artificial es tentadora: escribes unas instrucciones y aparece una página en pocos minutos.

El problema es que generar una web no significa terminarla. Una portada bonita puede contener textos genéricos, botones que no hacen nada, imágenes inventadas y un formulario que nunca enviará ningún mensaje. Publicar algo así para un cliente no es lo mismo que enseñar un prototipo.

En esta guía vamos a aprender cómo crear una web con IA paso a paso usando ChatGPT y Claude, con un mismo briefing y una metodología que podrás reproducir. Veremos cómo pedir el código, cómo revisarlo, qué opciones gratuitas existen, cómo publicarlo y qué comprobaciones hacen falta antes de llamar «profesional» al resultado.

El enfoque es el de un proyecto real de diseño web: primero la estrategia, después la herramienta. No vamos a presentar una comparativa basada en supuestos resultados de pruebas que no se han realizado. Los ejemplos son instrucciones reproducibles; las conclusiones sobre rendimiento y calidad deben comprobarse en cada proyecto.

¿Se puede crear una página web profesional con inteligencia artificial?

Sí, siempre que entendamos qué trabajo estamos delegando. La IA puede producir una arquitectura inicial, redactar una propuesta de textos, generar componentes y sugerir estilos. También puede detectar errores o ayudarte a traducir un cambio de diseño a código. Lo que no puede garantizar sin revisión es que el conjunto responda a las necesidades de una empresa.

Cuatro niveles que conviene distinguir

1. Idea: descripción del negocio, mapa de contenidos y referencias visuales. Todavía no existe una página funcional.
2. Prototipo: propuesta navegable o vista previa útil para comentar el diseño. Puede utilizar contenido ficticio y botones sin conexión a servicios reales.
3. Web implementada: archivos, estilos, navegación y componentes integrados en un entorno que podemos probar. Aquí empiezan los controles de calidad.
4. Web publicada y mantenida: dominio, HTTPS, analítica consentida cuando proceda, formularios entregando mensajes, protección de datos, copias de seguridad y responsable del mantenimiento.

Una demostración que solo cubre los dos primeros niveles puede ser valiosísima para validar una idea. Pero hay que presentarla como lo que es. Esto resulta todavía más importante cuando alguien busca crear una web con IA gratis: la generación inicial puede costar cero euros y la explotación posterior, no.

¿En qué proyectos tiene sentido?

Una landing para validar un servicio, una página informativa, un portfolio sencillo o la primera versión de un micrositio son buenos escenarios de aprendizaje. Si necesitas reservas, pagos, cuentas de usuario, inventario, integraciones complejas o datos sensibles, el esfuerzo de validación aumenta mucho. El tiempo ahorrado generando una portada puede desaparecer si luego hay que rehacer toda la lógica del negocio.

Si quieres profundizar en la metodología de crear productos describiendo su comportamiento en lenguaje natural, te recomiendo mi artículo sobre qué es el vibe coding. Aquí nos centraremos en algo más concreto: una web empresarial que debe resultar clara para sus visitantes.

Qué necesitas antes de empezar a crear una web con IA

El error más frecuente es abrir el chat y escribir «hazme una web moderna». Sin contexto, el asistente tiende a decidir por ti quién es el cliente, qué vende, qué tono utiliza y cómo convierte visitas en oportunidades. Es mucho mejor dedicar diez o quince minutos a preparar un briefing, aunque sea breve.

Un briefing mínimo que sí resulta útil

• Negocio y público: qué ofreces, a quién y qué problema resuelves.
• Objetivo prioritario: solicitar presupuesto, reservar, comprar, descargar un documento o llamar. Elige uno como principal.
• Contenido disponible: servicios, precios si procede, fotografías con derechos, preguntas frecuentes, casos verificables y datos de contacto.
• Estructura: qué secciones necesitas realmente y qué debe encontrar primero quien llega desde Google.
• Identidad visual: personalidad de marca, colores, tipografías, referencias y decisiones que quieres evitar.
• Condiciones técnicas: idiomas, responsive, accesibilidad, CMS, integraciones, hosting y mantenimiento.

Cuando el cliente no tiene preparados los textos, pedir a la IA que los redacte puede ayudar a construir la maqueta. Pero hay que marcar claramente qué es provisional: nunca deberían quedar publicados testimonios, cifras de experiencia, clientes o proyectos inventados.

Define cómo sabrás si el resultado es bueno

«Me gusta» es un criterio insuficiente. Antes de generar nada, establece qué tiene que ser capaz de hacer el visitante. Por ejemplo: comprender la propuesta en cinco segundos, localizar un servicio, navegar con el teclado, abrir la página en un móvil y enviar una consulta que llegue correctamente.

Qué IA utilizar para crear una página web: ChatGPT, Claude y otras opciones

No todas las herramientas generan lo mismo. Algunas parten de plantillas y publican dentro de su plataforma; otras son asistentes capaces de escribir código; y otras se especializan en construir aplicaciones a partir de instrucciones. Elegir depende de qué quieras controlar y dónde deseas alojar la web.

Aquí desarrollaremos la ruta con ChatGPT y Claude porque nos interesa entender el proceso, no solo pulsar «publicar». Si buscas un constructor orientado específicamente a proyectos generados con prompts, puedes consultar mi guía sobre Lovable. Para aplicar IA dentro de una web existente, tienes también IA en WordPress.

El criterio para elegir no es cuál genera la portada más espectacular

Una web de empresa necesita poder evolucionar. Valora si puedes editar los textos sin romper el diseño, controlar las URLs, conectar el formulario, sustituir imágenes, realizar copias y cambiar de alojamiento si el proyecto crece. Antes de valorar precios de lanzamiento, comprueba límites de uso, alojamiento, funcionalidades e importes de renovación en las webs oficiales.

Caso práctico: vamos a construir la web de Norte Estudio

Para que puedas seguir el proceso sin necesitar un cliente real, utilizaremos Norte Estudio, un negocio ficticio de diseño web e identidad visual para autónomos y pequeñas empresas. La empresa, sus proyectos y su actividad son inventados exclusivamente para este ejercicio. No los presentaremos como un negocio existente.

No intentaremos que el asistente invente imágenes de trabajos reales. La sección de proyectos podrá mostrar fichas tipográficas de ejemplo, señaladas como ficticias. El formulario de contacto tendrá diseño y validación de campos, pero no se considerará funcional hasta conectarlo a un servicio que reciba y procese los mensajes.

Prompt maestro para empezar con las dos herramientas

Actúa como un equipo de diseño web formado por una persona especialista en UX/UI, una desarrolladora frontend y una redactora UX.

Crea una web de una sola página para «Norte Estudio», empresa ficticia de diseño web, identidad visual y comunicación para pequeños negocios. El objetivo es conseguir solicitudes de presupuesto.

Incluye: cabecera con navegación, portada con propuesta de valor y llamada a la acción, servicios, proyectos ficticios claramente identificados, proceso, preguntas frecuentes, contacto y pie de página.

Diseño: estilo editorial contemporáneo, tipografía con personalidad, jerarquía clara, buen espacio en blanco y aspecto profesional. Evita degradados decorativos, iconos innecesarios y frases vacías.

Requisitos: HTML semántico, CSS responsive, JavaScript mínimo, navegación por teclado, contraste legible, accesibilidad básica y metadatos iniciales. No uses React, Tailwind ni librerías externas. No inventes premios, clientes, cifras o testimonios.

Entrega el código completo y explica cómo previsualizarlo. Identifica cualquier elemento que sea solamente una demostración, especialmente el formulario. Antes de empezar, indica brevemente las decisiones de diseño y la estructura propuesta.

Guarda exactamente este prompt. Si queremos comparar dos herramientas, debemos partir del mismo encargo. Cambiar las instrucciones en cada prueba haría mucho más difícil atribuir cualquier diferencia al sistema utilizado.

Un segundo prompt para evitar el típico diseño genérico

Revisa la propuesta como si fueras director de arte. Reduce los elementos superfluos, mejora la jerarquía tipográfica, consigue que la llamada a la acción destaque sin parecer un anuncio y da más aire entre secciones. Justifica tres decisiones de diseño que hayas tomado y señala dos partes que todavía podrían mejorarse.

No busques que el segundo mensaje añada efectos por añadirlos. El objetivo es que la web resulte más comprensible y coherente. Un buen resultado suele necesitar menos elementos, no más.

Cómo crear una web con ChatGPT paso a paso

La forma más universal de trabajar con ChatGPT consiste en pedir una arquitectura, generar el código y comprobarlo en un navegador. Si tu cuenta incluye herramientas específicas de creación web, como Sites dentro de Work, también puedes utilizarlas para construir y previsualizar el sitio. La disponibilidad, las opciones de publicación y los límites dependen del plan, el entorno y la región: comprueba siempre la documentación de ChatGPT Sites que corresponda a tu cuenta.

Paso 1. Abre un proyecto y explica el contexto

Empieza una conversación específica para esta web y pega el briefing completo. Si tienes logotipo, textos aprobados, paleta de colores o un documento de contenidos, puedes facilitarlos. No adjuntes datos privados de clientes si no tienes autorización para tratarlos en la herramienta.

La primera respuesta debería confirmar la estructura y las decisiones principales, no escribir inmediatamente cientos de líneas. Si el asistente propone una página de reservas, un blog o funcionalidades que no figuran en el briefing, reconduce la propuesta: cada añadido tendrá un coste de desarrollo y revisión.

Paso 2. Pide una estructura antes que los estilos

Antes de generar el código, enumera las secciones en su orden de lectura. Para cada sección, indica qué necesidad del visitante resuelve, cuál será su mensaje principal y qué acción podrá realizar. Propón un H1 único, H2 coherentes y textos breves de muestra identificados como provisionales. Evita repeticiones.

Este paso permite corregir errores baratos: si la propuesta de valor está enterrada al final, cambiarla ahora es mucho más sencillo que hacerlo cuando ya hay un diseño completo. También ayuda a no confundir arquitectura visual con arquitectura de información.

Paso 3. Genera el HTML, CSS y JavaScript

Pide tres archivos separados —index.html, styles.css y script.js— para que sea sencillo mantener el proyecto. Si la herramienta entrega un único HTML con estilos embebidos, puedes pedir después que los separe. En un ejercicio de aprendizaje, la versión sin frameworks facilita identificar qué hace cada parte.

Desarrolla la estructura aprobada como una página responsive. Entrega el contenido íntegro de index.html, styles.css y script.js, indicando en qué carpeta colocar cada archivo. Usa enlaces de ancla internos que funcionen, estados de foco visibles y un menú móvil accesible. No incluyas llamadas a APIs ficticias ni funciones que parezcan operativas si no lo son. Al final, enumera qué queda por conectar o validar.

Comprueba que el código incluye <meta name="viewport">, estructura semántica, títulos descriptivos, formularios con etiquetas visibles y botones con una finalidad comprensible. Si te entrega solo fragmentos y una instrucción del tipo «resto del código aquí», exige la versión completa.

Paso 4. Previsualiza la web en un navegador

Para la ruta basada en archivos, crea una carpeta, guarda los tres documentos y abre index.html en el navegador. Si los estilos o el menú no funcionan, comprueba nombres de archivos y rutas. Algunas funcionalidades que dependen de peticiones de red o de módulos JavaScript necesitan un servidor local, no solo abrir un archivo desde el explorador.

Cuando exista una vista previa dentro de ChatGPT o un Site creado en Work, úsala para iterar sobre el diseño. Ten en cuenta que la vista previa no demuestra por sí sola que se hayan configurado dominio, indexación, recepción de formularios o analítica. La documentación oficial explica las opciones actuales de creación, revisión y publicación de Sites.

Paso 5. Revisa móvil, navegación y contenido

Reduce el ancho de la ventana o utiliza las herramientas de desarrollo del navegador para simular tamaños pequeños. Prueba el menú con el teclado, los botones con enlaces internos, el contraste de los textos y los bloques largos. No des por bueno el resultado solo por una vista de escritorio.

1. Portada: ¿entiendes qué ofrece Norte Estudio sin bajar la página?
2. Navegación: ¿el menú funciona con ratón, teclado y pantalla táctil?
3. CTA: ¿el botón lleva al contacto y mantiene una etiqueta coherente?
4. Contenido: ¿hay textos genéricos como «soluciones innovadoras» que no explican nada?
5. Formulario: ¿está marcado como demostrativo si aún no envía los datos?

Paso 6. Pide una revisión técnica, no otra versión desde cero

Audita el código actual sin rediseñar la página. Prioriza errores reales de HTML semántico, accesibilidad, navegación móvil, JavaScript, posibles problemas de SEO técnico y mantenibilidad. Devuélveme una lista de problemas con gravedad alta, media o baja; explica la causa y aporta únicamente los cambios necesarios para corregirlos.

Una buena práctica es aplicar los cambios por bloques y volver a probar. Pedir que rehaga toda la página para arreglar un detalle puede introducir nuevas regresiones. Guarda una copia antes de cada iteración importante.

Cómo crear la misma página web con Claude paso a paso

Claude también permite trabajar a partir de instrucciones y crear contenido que puede visualizarse y revisarse en forma de Artifacts. Según la ayuda oficial de Claude, estos elementos pueden incluir páginas web de una sola página, código, diseños y pequeñas herramientas interactivas. La experiencia concreta y el modo de compartirlos dependen de las funciones habilitadas en la cuenta.

Paso 1. Utiliza exactamente el mismo briefing

Abre una conversación nueva y pega el prompt maestro de Norte Estudio sin modificarlo. Esta igualdad inicial importa: si a ChatGPT le pides una página editorial y a Claude un diseño experimental, la posterior comparación no tendrá ningún valor.

Si Claude propone trabajar con tecnologías distintas a HTML, CSS y JavaScript, recuerda la restricción. Para este ejercicio queremos evaluar una web ligera y sencilla de desplegar. En otro proyecto sería perfectamente válido escoger un framework, pero aquí complicaría innecesariamente la comparación.

Paso 2. Pide una propuesta de estructura y un artefacto editable

Con el briefing anterior, prepara primero la estructura y las decisiones de diseño. Después construye la página como un artefacto web que pueda revisar visualmente, manteniendo HTML, CSS y JavaScript sencillos. Identifica contenidos de ejemplo y funcionalidades pendientes. No supongas que una vista previa equivale a una web publicada.

Si la herramienta muestra el resultado junto a la conversación, aprovecha para detectar a simple vista proporciones, jerarquías y problemas de legibilidad. Si no aparece una previsualización, pide que facilite los archivos completos para abrirlos en local, igual que en el proceso con ChatGPT.

Paso 3. Evalúa el diseño sin mezclar cambios

En lugar de pedir cinco cambios a la vez, corrige uno por iteración. Por ejemplo: primero el tamaño de los titulares, después el ancho de los párrafos y finalmente el tratamiento de los botones. Así podrás identificar qué modificación mejora realmente la composición.

Quiero una revisión centrada solo en legibilidad y ritmo vertical. Mantén la identidad general, pero aumenta la separación entre bloques, limita la longitud de las líneas de lectura y mejora el contraste y los estados de foco. No añadas animaciones, iconos ni imágenes decorativas.

La facilidad con la que se genera una variante puede llevarnos a producir veinte versiones sin llegar a tomar ninguna decisión. Mantén un criterio claro: cada modificación debe resolver un problema concreto de contenido, interacción o diseño.

Paso 4. Solicita una versión exportable

Pide que el código se entregue completo y que las dependencias estén documentadas. Algunos artefactos pueden funcionar dentro del entorno de la plataforma con capacidades que no existirán cuando copies el código a un alojamiento independiente. Por eso hay que separar lo que depende de la herramienta de lo que funcionará en cualquier servidor web.

Si compartes el prototipo mediante las opciones de Artifacts, revisa los permisos y el modo de acceso. Un enlace compartido sirve para enseñar un resultado, pero no sustituye necesariamente una estrategia de dominio, SEO, backups y propiedad de los archivos. La documentación de Anthropic explica las diferencias según el tipo de artefacto y la cuenta.

Paso 5. Repite la misma auditoría

Prueba los mismos puntos que en ChatGPT: menú, teclado, tamaños móviles, textos, contraste y formularios. No cambies los criterios para favorecer el resultado que más te gusta. Si detectas un problema, anota si aparece en el primer intento o después de una iteración.

De esta manera obtendrás material útil para decidir y, si más adelante preparas una charla, podrás mostrar no solo cuál era la primera apariencia de cada propuesta, sino cuánto trabajo de revisión necesitó cada una.

ChatGPT vs. Claude: cómo comparar los resultados sin quedarte en la apariencia

No tendría sentido adjudicar un ganador sin generar y revisar las dos versiones con condiciones equivalentes. Lo que sí podemos establecer ahora es una matriz de evaluación para que la comparación tenga una base técnica y editorial. La tabla siguiente contiene criterios, no resultados medidos.

La comparación también debería recoger cuánto tardas en resolver errores y cuánto control tienes sobre el resultado final. Una herramienta que genera algo visualmente impactante al primer intento puede resultar menos adecuada si después cuesta editar el código, asegurar el formulario o trasladarla a tu alojamiento.

Cómo documentar las pruebas de forma útil

Trabaja con el mismo prompt, registra las versiones y anota cualquier intervención manual. Si empleas diferentes modelos, planes o funciones, indícalo expresamente. No sería riguroso presentar como comparación directa una web generada con un asistente básico y otra con un agente capaz de revisar archivos, ejecutar código y desplegar un sitio.

También es importante evaluar contenido, no solo diseño. Una web técnicamente correcta puede fallar por titulares ambiguos, preguntas frecuentes genéricas, una propuesta comercial débil o un exceso de secciones que no responden a ninguna necesidad.

¿Cómo crear una página web con IA gratis?

La palabra gratis concentra una parte importante de las búsquedas sobre este tema. Pero hay que distinguir al menos tres costes: crear el prototipo, alojar y publicar la web y mantenerla. No tienen por qué contratarse en el mismo proveedor ni ser gratuitos al mismo tiempo.

Qué puedes hacer sin pagar necesariamente

• Preparar el briefing, los textos provisionales y el mapa de secciones con una herramienta que ofrezca acceso gratuito suficiente.
• Solicitar HTML y CSS para una web de demostración, dentro de los límites de uso del plan disponible.
• Abrir los archivos localmente en tu equipo y corregir estilos, estructura y contenido.
• Utilizar plataformas de despliegue estático con planes gratuitos, siempre que sus condiciones admitan tu uso y los recursos necesarios.

Que una plataforma tenga modalidad gratuita no significa que ofrezca uso ilimitado, dominio personalizado, exportación, formularios con envío real o publicación pública en las mismas condiciones. Conviene revisar la página de precios y los límites de cada producto el día que lo utilices.

Dónde suele aparecer el gasto

El dominio propio tiene un coste de registro y renovación. El alojamiento puede ser gratuito para una web estática pequeña, pero cambiar si necesitas más tráfico, procesamiento del lado del servidor, bases de datos o soporte. También pueden aparecer cuotas por envío de formularios, APIs, generación con IA, almacenamiento y servicios de correo.

Mi criterio sería utilizar la opción gratuita para aprender, prototipar y validar. En una web comercial, decidiría el alojamiento y las integraciones por fiabilidad, necesidades reales y capacidad de mantenimiento, no únicamente por el precio inicial.

Cómo publicar una web creada con IA: dominio, hosting y formularios

Llegamos al punto donde muchos tutoriales se detienen demasiado pronto. Que una página funcione dentro del chat o al abrir un archivo no implica que esté disponible bajo un dominio propio ni que pueda recibir solicitudes. Publicar consiste en elegir dónde vivirá el sitio, configurar su dirección y comprobar todo el recorrido del visitante.

Opción A. Publicación dentro de la herramienta

Si has generado un Site en ChatGPT Work y tu cuenta dispone de publicación, revisa antes de desplegar la vista previa, los permisos de acceso y las opciones que ofrece tu entorno. La documentación oficial de Sites explica cómo crear, revisar, compartir y publicar. No todas las cuentas, regiones o espacios de trabajo tienen necesariamente la misma disponibilidad.

En Claude, compartir o publicar un Artifact puede facilitar una demostración interactiva. Sin embargo, un artefacto no equivale automáticamente a una web corporativa con dominio propio, SEO controlado y una infraestructura de producción independiente. Valora el tipo de enlace, las condiciones de acceso y las capacidades disponibles antes de entregar esa solución como definitiva.

Opción B. Despliegue de una web estática

Si tienes index.html, styles.css y script.js sin backend, puedes desplegarlos en un servicio compatible con sitios estáticos o en un alojamiento web tradicional. Comprueba que se mantienen las rutas, que los archivos cargan por HTTPS y que las páginas de error se gestionan correctamente.

1. Organiza los archivos: elimina versiones de prueba y comprueba rutas relativas, fuentes y recursos externos.
2. Configura un destino: elige alojamiento o servicio de despliegue que admita tus archivos y condiciones de uso.
3. Conecta el dominio: actualiza los registros DNS siguiendo las instrucciones del proveedor. La propagación no es necesariamente inmediata.
4. Comprueba HTTPS: abre la web desde móvil y ordenador y verifica que no hay recursos bloqueados por contenido mixto.
5. Revisa todas las funciones: menú, enlaces, formulario, páginas legales, enlaces de correo y estados de error.
6. Prepara el mantenimiento: conserva una copia del código y anota dónde se modifican los archivos o cómo volver a desplegarlos.

Para Norte Estudio, un alojamiento estático puede ser suficiente mientras solo exista una landing informativa y el contacto dependa de una integración fiable. En cuanto añadimos autenticación, pagos o datos persistentes, tenemos que diseñar una arquitectura más completa.

Opción C. Utilizar WordPress

WordPress puede ser una buena decisión si el cliente quiere gestionar páginas, artículos, usuarios, menús y contenidos sin editar código. La IA puede ayudarte a preparar textos, estructura, CSS y componentes, pero pegar cualquier HTML generado en un constructor no garantiza que se adapte sin ajustes. Hay que revisar estilos globales, compatibilidad con el tema, carga de scripts y responsive.

Si te interesa esta vía, consulta mi tutorial sobre cómo implementar IA en WordPress de forma útil. Y antes de contratar alojamiento, compara recursos y condiciones en esta guía de hosting WordPress.

El formulario: el detalle que puede convertir una demo en un problema

Un formulario construido únicamente con HTML y un poco de JavaScript puede validar que el email tenga formato correcto o que el campo de mensaje no esté vacío. Eso no significa que envíe nada. Para recibir mensajes necesitas un servicio, endpoint o backend que procese la solicitud y la entregue al destinatario.

Además de conectar el envío, comprueba validación del lado del servidor, protección antispam proporcional, consentimiento informado cuando corresponda, política de privacidad y manejo de errores. Jamás pongas claves secretas de un servicio de correo o una API en un archivo JavaScript accesible desde el navegador.

Cómo mejorar el diseño, la accesibilidad, el SEO y la velocidad

Aquí es donde un diseñador web o un equipo digital puede aportar más valor. La IA acelera la primera versión; después tenemos que convertir una estructura prometedora en una experiencia coherente. Para evitar eternizarnos con cambios subjetivos, recomiendo revisar el proyecto en cuatro rondas.

Primera ronda: diseño y experiencia de usuario

Empieza por la jerarquía visual: título, subtítulo, llamada a la acción y servicios. La página no necesita quince estilos de botones ni una animación distinta en cada sección. Necesita claridad. Comprueba tamaños de texto cómodos, anchura de línea razonable, separación entre bloques y consistencia de colores.

• Evita párrafos excesivamente anchos y bloques de texto demasiado compactos.
• Comprueba que los elementos clicables tienen un tamaño adecuado para móvil.
• Haz que el enlace o botón principal destaque por contraste y posición, no solo por un efecto llamativo.
• Muestra ejemplos y proyectos reales cuando existan; no rellenes el portfolio con afirmaciones ficticias.

Si quieres profundizar en interacción y botones, tienes una guía específica sobre diseño de botones web, UX, accesibilidad y CSS.

Segunda ronda: accesibilidad

Navega toda la página sin ratón. Debes poder identificar dónde está el foco, abrir y cerrar el menú, activar controles y llegar al formulario. Verifica las etiquetas de los campos y que la información importante no dependa únicamente del color.

La herramienta de IA puede sugerir correcciones, pero conviene comprobarlas. Un elemento puede tener un atributo aria-label y seguir siendo difícil de utilizar. Del mismo modo, un validador automático no sustituye la prueba con teclado ni una revisión humana de los textos.

Tercera ronda: SEO básico sin fórmulas mágicas

Google necesita entender a quién ayuda tu página y qué puede encontrar en ella. Antes de pensar en schema o plugins, revisa el contenido visible, el title, la metadescripción, los encabezados, los enlaces y las URLs. La guía de SEO de Google recuerda que no existe ningún truco que garantice alcanzar el primer puesto.

1. Title: descriptivo y particular de la página, no «Home» o «Página de inicio».
2. H1: una propuesta principal clara; los H2 organizan las secciones.
3. Textos: hablar de servicios concretos y necesidades de clientes, sin repetir palabras clave mecánicamente.
4. Enlaces: textos que anticipen el destino y ninguna ruta rota.
5. Indexación: confirmar que la página pública no está bloqueada por noindex, configuración o autenticación cuando quieras que aparezca en Google.
6. Search Console: verificar la propiedad y comprobar indexación y rendimiento después de publicar.

La IA puede ayudar con borradores, pero no sustituye el conocimiento de la empresa ni la revisión de calidad. Google pone el foco en la utilidad, la exactitud y el valor añadido del contenido, independientemente de cómo se haya redactado.

Cuarta ronda: rendimiento y mantenimiento

Antes de añadir vídeos de fondo, animaciones o nuevas dependencias, carga la web desde una conexión normal y revisa el peso de sus recursos. Optimiza imágenes reales cuando las incorpores, evita librerías innecesarias y reserva dimensiones para elementos que puedan desplazar el contenido.

No prometas una puntuación concreta de PageSpeed por el simple hecho de haber utilizado HTML estático. La velocidad final depende del código, los recursos, el servidor y la red. Comprueba la página pública con herramientas de medición y combina resultados de laboratorio con datos reales cuando estén disponibles.

Errores frecuentes al crear una web con IA y preguntas habituales

Hay algunos fallos que se repiten independientemente de la herramienta utilizada. Conviene detectarlos antes de que formen parte del diseño definitivo.

Error 1. Dar por real lo que la IA ha inventado

Si el modelo crea un premio, una reseña, una historia de marca o un caso de éxito, debes borrarlo o sustituirlo por información comprobada. Lo mismo ocurre con direcciones, teléfonos y estadísticas. Un buen diseño no justifica publicar datos falsos.

Error 2. Confundir un botón visible con una funcionalidad

«Contactar» puede ser solo un enlace sin destino. «Enviar» puede mostrar un mensaje de éxito aunque no llegue ningún correo. Haz pruebas extremo a extremo y comprueba los mensajes recibidos; no te quedes en la apariencia del formulario.

Error 3. Publicar código sin revisar seguridad ni privacidad

No coloques claves API en archivos públicos, no expongas datos personales de clientes y no presupongas que el contenido generado cumple automáticamente con la normativa aplicable. Si recopilas datos mediante un formulario, revisa la información legal necesaria para tu caso y la gestión del proveedor que procesa esos datos.

Error 4. Cambiar de herramienta para evitar decisiones

A veces es tentador abandonar un diseño y empezar otra vez con un modelo nuevo. Pero si no está claro el público, el mensaje ni la conversión, cambiar de IA solo genera variantes del mismo problema. Detén la generación y vuelve al briefing.

¿Qué IA es mejor para crear páginas web?

Depende de si necesitas un prototipo, una web estática exportable, un CMS o una aplicación. ChatGPT y Claude pueden ayudarte a diseñar y programar; otras herramientas ofrecen un constructor más guiado. La mejor elección es la que cubre la necesidad y que puedes mantener. Sin pruebas equivalentes de un mismo proyecto, no adjudicaría un ganador universal.

¿Puedo hacer una web con ChatGPT sin saber programar?

Puedes obtener una primera versión y aprender a modificarla mediante instrucciones en lenguaje natural. Sin embargo, revisar el comportamiento de un formulario, desplegar el código, corregir errores y mantener la web requiere comprensión técnica o apoyo profesional, especialmente si el proyecto maneja datos o transacciones.

¿Claude puede crear una página web completa?

Puede ayudarte a estructurar y generar una web, y las funciones de Artifacts permiten revisar y compartir determinados resultados. Para hablar de «completa» tendrías que verificar también publicación, integraciones, contenido, accesibilidad y mantenimiento. Consulta las opciones actuales de tu cuenta antes de prometer una funcionalidad a un cliente.

¿Puedo crear una web gratis y ponerle mi dominio?

La generación y una primera previsualización pueden ser gratuitas dependiendo del proveedor, pero el dominio propio normalmente requiere registro y renovación. Algunos alojamientos estáticos tienen modalidades sin coste; comprueba los límites, las condiciones comerciales y cómo se configuran DNS y HTTPS.

¿Es mejor usar WordPress o generar todo el código con IA?

Si necesitas editar contenidos con frecuencia, gestionar varias personas, publicar un blog o ampliar funcionalidades con un ecosistema conocido, WordPress puede ser una opción más fácil de mantener. Una web estática generada con IA puede resultar más sencilla cuando el proyecto es pequeño y los cambios son escasos. La decisión debe tomarse según el ciclo de vida del negocio, no por entusiasmo tecnológico.

Crear una web con IA es el comienzo, no el final

Crear una página web con ChatGPT o Claude puede ahorrarte mucho trabajo en las primeras fases: organizar ideas, transformar un briefing en una estructura y producir una propuesta de diseño que antes requería empezar desde un lienzo en blanco. Y, para aprender, es una forma excelente de explorar cómo se relacionan diseño, contenido y desarrollo.

Lo que marca la diferencia aparece después. ¿La web explica bien el negocio? ¿Se entiende en móvil? ¿El contacto funciona? ¿Puedes cambiar los contenidos? ¿Sabes dónde está alojada y quién la mantendrá? Si no puedes responder a esas preguntas, todavía tienes un prototipo, aunque su aspecto sea espectacular.

Mi consejo es sencillo: usa la IA para avanzar más rápido, pero mantén el criterio sobre lo que estás construyendo. Empieza con una landing pequeña, aplica el briefing de Norte Estudio, compara tu propia versión con ChatGPT y Claude utilizando los mismos requisitos y revisa cada decisión importante antes de publicar. Así estarás aprendiendo a crear webs, no solo a pedirlas.

Escrito por Jurgen B

Profesor en Aula CM de Diseño Web con WordPress, Diseño Gráfico, Community Manager, IA, SEO y ecommerce. Moderador de la mesa de ecommerce en Reunión de Agencias (2024–2026) y ponente en ProMarketing Day.

Sobre mí · LinkedIn