Si ya probaste crear webs con inteligencia artificial, sabrás que el resultado depende mucho de la herramienta. Claude, la IA de Anthropic, es de mis favoritas para diseño web porque muestra la página en vivo mientras la creas y suele generar diseños limpios y modernos desde el primer intento. En esta guía te explico cómo crear una página web con Claude paso a paso, con los prompts que uso, cómo dejarla lista para Google y cómo publicarla con tu propio dominio.
Ventajas de usar Claude para crear páginas web
- Vista previa instantánea: con los Artifacts, la web aparece en un panel junto al chat y puedes navegarla, hacer clic y ver cómo responde.
- Buen gusto de diseño: espaciados, tipografías y colores equilibrados sin tener que explicarlo todo.
- Edición conversacional: pides cambios en español normal y la web se actualiza.
- Control de versiones: puedes volver a una versión anterior si un cambio no te convence.
- Proyectos: en un Proyecto de Claude guardas tu marca, tus textos y tus instrucciones para que todas las páginas mantengan el mismo estilo.
Qué tipo de webs puedes crear con Claude
- Landing pages para productos, cursos o eventos.
- Webs de presentación de negocios y profesionales.
- Portafolios con galería de imágenes y videos.
- Páginas de enlaces (estilo «link in bio») para redes sociales.
- Invitaciones digitales y páginas para eventos.
- Páginas interactivas: calculadoras, cotizadores, cuestionarios.
Cómo crear una página web con Claude paso a paso
Paso 1: Crea un Proyecto con la información de tu marca
En claude.ai, crea un Proyecto y añade en las instrucciones los datos clave: nombre del negocio, a qué te dedicas, a quién te diriges, tono de voz, colores y tipografías. Sube también documentos útiles, como tu lista de servicios o preguntas frecuentes. Así no tendrás que repetirlo en cada conversación.
Paso 2: Pide primero la estructura
Antes del diseño, pide la arquitectura: «Propón las secciones de la página de inicio para mi negocio, el objetivo de cada una y el texto principal. No escribas código todavía». Ajusta la propuesta hasta que te convenza.
Paso 3: Genera la página
Con la estructura aprobada, crea la página de inicio en un solo archivo HTML con CSS y JavaScript integrados, sin librerías externas. Diseño moderno, mucho espacio en blanco, adaptado al celular, con menú fijo que se convierte en menú hamburguesa en pantallas pequeñas. Usa la paleta de la marca. Incluye un H1 con la palabra clave «[tu palabra clave]», meta título, meta descripción, textos alternativos y datos estructurados de tipo LocalBusiness.
Claude mostrará la página en el panel de Artifacts. Revísala en vista de escritorio y reduce la ventana para ver cómo se comporta en el celular.
Paso 4: Ajusta el diseño
- «La portada se siente vacía: añade una imagen de fondo con una capa oscura y el titular en blanco».
- «Convierte la sección de servicios en tarjetas con icono, título y una línea de descripción».
- «Añade una sección de testimonios con estrellas».
- «Agrega animaciones sutiles al hacer scroll, sin exagerar».
Paso 5: Sustituye los textos de ejemplo por los tuyos
Claude escribe bien, pero solo tú conoces tu negocio. Revisa cada texto, añade datos reales (años de experiencia, zonas donde trabajas, casos de éxito) y elimina cualquier afirmación que no sea cierta. Los testimonios deben ser reales, de clientes reales.
Paso 6: Añade tus imágenes y videos
Pídele a Claude que deje espacios con nombres de archivo claros (por ejemplo img/portada.webp) y guarda tus imágenes con esos nombres en una carpeta junto al HTML. Para videos, pega los enlaces de YouTube y pide que los incruste de forma que no ralenticen la carga.
Paso 7: Publica la web
- Publicar el Artifact: la forma más rápida de compartir la página con un enlace.
- Netlify o GitHub Pages: gratis, ideal para probar.
- Tu hosting con dominio propio: la opción profesional. Subes la carpeta y activas el SSL.
Crear páginas para WordPress con Claude
Si tu web está en WordPress, Claude también te ayuda:
- Genera secciones en HTML que puedes pegar en un bloque «HTML personalizado».
- Escribe CSS adicional para personalizar tu tema desde Apariencia → Personalizar → CSS adicional.
- Crea fragmentos de código PHP para funciones concretas (revísalos con cuidado y prueba siempre en una copia de tu web).
- Redacta textos de páginas y artículos optimizados para SEO, que luego revisas y personalizas.
Si todavía no tienes WordPress, aquí está mi guía de cómo crear una página web en WordPress desde cero.
SEO para webs creadas con Claude
- Pide una investigación de palabras clave como punto de partida y confírmala con datos reales en Google Search Console o el Planificador de palabras clave.
- Una página por intención de búsqueda: si ofreces «edición de video para bodas» y «edición para YouTube», crea dos páginas.
- Revisa que el HTML tenga un solo H1, subtítulos jerárquicos y textos alternativos.
- Comprueba la velocidad en PageSpeed Insights y pide a Claude que corrija lo que salga en rojo.
- Añade datos estructurados (LocalBusiness, FAQ) para mejorar cómo apareces en Google.
Claude vs ChatGPT para crear páginas web
| Aspecto | Claude | ChatGPT |
|---|---|---|
| Vista previa | Artifacts con la web navegable | Canvas y vista previa de código |
| Diseño inicial | Muy cuidado | Bueno, a veces más genérico |
| Proyectos con contexto | Proyectos con instrucciones y archivos | Proyectos y GPTs personalizados |
| Generar imágenes | No genera imágenes | Sí, integrado |
Lo ideal es combinarlos según la tarea. Puedes comparar el proceso con cómo crear una página web con ChatGPT.
Errores comunes
- Dejar textos o testimonios de ejemplo inventados por la IA.
- No probar la web en un celular real.
- Subir imágenes enormes que hacen lenta la página.
- Olvidar las páginas legales y el aviso de cookies.
- No guardar una copia del código final fuera del chat.
Prompts de diseño que dan mejores resultados
Estas frases, añadidas a tus peticiones, mejoran mucho la calidad visual de lo que genera Claude:
- «Usa una jerarquía tipográfica clara: titulares grandes, subtítulos medianos y texto de 18 px con buen interlineado».
- «Deja al menos 80 px de espacio vertical entre secciones en escritorio».
- «Limita el ancho del texto a unos 70 caracteres por línea para que sea cómodo de leer».
- «Usa un solo color de acento para los botones y los enlaces importantes».
- «Diseña primero para celular y después adapta a pantallas grandes».
- «Asegura un contraste suficiente entre texto y fondo según las pautas de accesibilidad».
- «Añade un modo oscuro que respete la preferencia del sistema».
Ejemplo: página de enlaces para tu canal en 15 minutos
Una página tipo «link in bio» es el proyecto perfecto para empezar:
- Pide a Claude: «Crea una página de enlaces para mi canal de YouTube sobre edición de video: foto circular, nombre, una línea de descripción, botones a YouTube, TikTok, Instagram, mi web y mi último video, y un pie con mi correo. Estilo minimalista, fondo degradado oscuro, botones redondeados».
- Revisa la vista previa y pide uno o dos ajustes de color o tamaño.
- Sustituye los enlaces de ejemplo por los tuyos.
- Publica el Artifact o súbelo a Netlify.
- Pon el enlace en la biografía de tus redes.
Es una forma rápida de tener presencia propia sin depender de servicios de terceros y, de paso, aprendes cómo funciona todo el proceso.
Cómo mantener un estilo coherente en todas las páginas
Cuando tu web tenga varias páginas, pídele a Claude que cree primero una «guía de estilo» en CSS con variables para colores, tipografías, espaciados y botones. Guarda ese archivo y pide que todas las páginas lo usen. Así, si un día cambias el color principal, lo cambias en un solo lugar y se actualiza toda la web.
Checklist final antes de publicar
- Has sustituido todos los textos, nombres y testimonios de ejemplo por información real.
- El meta título y la meta descripción incluyen tu palabra clave y tu ciudad si eres un negocio local.
- Las imágenes están optimizadas y tienen texto alternativo descriptivo.
- Los enlaces y botones llevan a donde deben, también en el celular.
- El formulario o el botón de contacto funcionan.
- La web incluye enlaces a privacidad, cookies y aviso legal.
- Guardaste una copia del código final en tu computadora o en GitHub.
Preguntas frecuentes
¿Puedo crear una web con Claude gratis?
Sí, con el plan gratuito y publicando en un servicio gratuito. El dominio propio sí tiene costo.
¿Claude puede crear una web con varias páginas?
Sí. Pide cada página por separado manteniendo el mismo estilo, o usa Claude Code para generar el proyecto completo con todas sus páginas.
¿Puedo poner AdSense en una web hecha con Claude?
Sí. Pega el código de AdSense en el head de tus páginas y asegúrate de tener contenido original suficiente y las páginas legales.
Ahora te toca a ti: abre Claude, describe tu web y en una tarde tendrás tu primera versión. Soy Estutos y hasta luego.