Crear página web con IA Claude: del chat a tu dominio

Para crear una página web con IA usando Claude, le describes tu página en el chat de claude.ai, Claude genera el código (HTML, CSS y JavaScript) y te muestra una vista previa. Después guardas ese código como archivo index.html y lo publicas en un hosting gratuito como Netlify, GitHub Pages o Vercel. Para apps más complejas, con base de datos y usuarios, conviene usar Claude Code, el agente de programación de Anthropic.

Opción 1: página web hecha con Claude en el chat

Ideal para una landing page o sitio de una sola página.

1. Entra a claude.ai y abre un chat nuevo.
2. Describe tu página con detalle:

Hazme una página web de una sola página, en un solo archivo HTML con CSS y JavaScript incluidos, para “Dulces Lupita”, repostería en Saltillo. Secciones: portada con frase y botón de WhatsApp, catálogo con 6 pasteles (nombre y descripción), cómo hacer pedidos, horario y ubicación. Español de México, colores pastel, que se vea perfecto en celular. No inventes reseñas ni cifras.

3. Revisa la vista previa. Claude muestra el resultado en un panel aparte (Artifacts).
4. Pide ajustes uno por uno.
5. Copia o descarga el código y guárdalo como index.html en una carpeta.

Tip: pedir “un solo archivo HTML” hace muy fácil publicarlo.

Cómo publicar tu página hecha con Claude

La forma más sencilla:

1. Crea una cuenta en Netlify.
2. Arrastra la carpeta con tu index.html a la sección de despliegue manual (Netlify Drop).
3. Netlify te da una URL pública al instante.

Paso a paso: subir mi página web a Netlify. Alternativas: GitHub Pages o Vercel.

Después, conecta tu dominio y da de alta tu página en Google.

Opción 2: app hecha con Claude (Claude Code)

Si lo que quieres es una app (con login, base de datos, panel de administración), el chat se queda corto: tendrías que copiar y pegar decenas de archivos. Para eso existe Claude Code, que trabaja directamente en una carpeta de tu computadora:

mkdir mi-app && cd mi-app
claude

Luego le pides: “Crea una app con Vite y React para registrar pedidos de una repostería, con login usando Supabase.” Claude Code crea los archivos, instala lo necesario y lo prueba.

Requisitos: un plan de pago de Claude (Pro desde $20 USD al mes a noviembre de 2026, según claude.com/pricing) y algo de soltura con la terminal. Detalle e instalación: Claude Code precios.

Claude vs herramientas como Lovable

Concepto	Chat de Claude	Claude Code	Lovable
Página sencilla	Muy bien	Bien	Muy bien
App con base de datos	Difícil	Muy bien	Muy bien
Publicación incluida	No	No	Sí
Para no técnicos	Sí	Con práctica	Sí

Más detalle: Lovable vs Claude Code.

Qué revisar antes de publicar

• Contenido inventado: borra cualquier reseña, cifra o premio que no sea real.
• Enlaces: que el botón de WhatsApp tenga tu número correcto.
• Imágenes: usa tus fotos; si Claude dejó imágenes de ejemplo, reemplázalas.
• Formularios: una página HTML sola no puede “enviar” un formulario a tu correo; necesitas un servicio de formularios o un backend.
• Llaves secretas: nunca pegues llaves de API en un HTML público.

Errores comunes

1. Pedir muchos archivos en el chat y perder cuál es la versión buena.
2. Publicar con datos de ejemplo.
3. Esperar que el formulario funcione sin backend.
4. Usar el chat para algo que ya es una app y terminar con código desordenado.

Cómo hacer que el formulario de contacto funcione

Una página HTML publicada en un hosting estático no puede enviar correos por sí sola. Tienes tres opciones:

1. Botón directo a WhatsApp o correo. Lo más simple: un enlace que abre WhatsApp con un mensaje prellenado o el correo del visitante. No necesitas backend.
2. Servicio de formularios. Algunos hostings, como Netlify, tienen manejo de formularios integrado; otros servicios externos reciben el formulario y te lo reenvían por correo. Revisa sus límites gratuitos.
3. Backend propio. Una función en el servidor (por ejemplo, en Supabase o Vercel) que guarda el mensaje en una base de datos y te avisa. Es lo más flexible y lo que haría Claude Code en un proyecto completo.

Pídele a Claude que adapte el formulario a la opción que elijas. Por ejemplo:

Cambia el formulario de contacto para que, al enviarlo, abra WhatsApp con un mensaje que incluya nombre, teléfono y servicio que eligió el visitante.

Prueba siempre enviando un mensaje real antes de compartir la página.

Cierre

Claude es una excelente herramienta para crear tu página web y, con Claude Code, apps completas. Si ya tienes el código y no logras publicarlo o conectarlo a una base de datos, en Black Engine te ayudamos por WhatsApp. Si prefieres el camino de Google, lee crear app con Gemini.