Cómo crear una página web con IA en 7 pasos, sin programar

Tres formas de crear una página web con IA

Las herramientas se diferencian menos en lo lista que es su IA y más en dónde acaba viviendo tu web. Eso decide cuánto pagas cada mes y lo fácil que te resulta irte.

Wix ya puede preparar un borrador de web a partir de un solo prompt, y Squarespace y Framer ofrecen constructores con IA parecidos, pero la web vive en su plataforma mientras pagues. Los constructores de apps en el navegador escriben código real y lo alojan por ti, normalmente cobrando en créditos. Tanto ellos como el camino del agente son formas de vibe coding: describes lo que quieres y juzgas el resultado en lugar de escribir el código.

¿Quieres ver un diseño antes de construir nada? Claude Design, la herramienta de diseño visual de Anthropic (una versión preliminar de investigación para los planes de pago de Claude), prepara prototipos como una landing page que puedes exportar como HTML independiente o pasarle a Claude Code para que la construya (anuncio de Anthropic).

Los pros y contras en detalle están en nuestra comparativa Claude Code vs Lovable, y los precios actuales de cada herramienta, en las mejores herramientas de vibe coding.

¿Cuál es la mejor IA para crear una página web?

La mejor IA para crear una página web es aquella cuyo camino encaja con cómo quieres tener y editar tu web:

• Elige un constructor de webs con IA si quieres una sola factura y un editor de arrastrar y soltar, y casi no vas a cambiar la web.
• Elige un constructor de apps en el navegador si quieres algo funcionando en menos de una hora y no te importa pagar en créditos.
• Elige un agente de IA si quieres un diseño a medida, que todo sea tuyo y margen para añadir más adelante páginas, un blog o pequeñas herramientas.

Cuando hago webs para clientes, mi opción por defecto es el agente, porque el cliente se queda con archivos que puede llevarse a cualquier parte. El resto de esta guía sigue ese camino, desde una carpeta vacía hasta una web publicada.

Lo que necesitas para crear una página web con Claude Code

Paso 1: escribe un encargo de una página

El encargo decide la mayor parte de la calidad. La IA es muy buena convirtiendo instrucciones claras en páginas, y muy mala adivinando qué hace diferente a tu negocio.

Rellena esto y guárdalo como brief.md dentro de una carpeta de proyecto vacía:

NEGOCIO: [NOMBRE], [QUÉ VENDES], [ZONA EN LA QUE TRABAJAS]
PÚBLICO: [QUIÉN COMPRA Y QUÉ LE PREOCUPA ANTES DE COMPRAR]
ACCIÓN PRINCIPAL: [RESERVAR UNA LLAMADA, PEDIR UN PRESUPUESTO, LLAMAR O COMPRAR]
PÁGINAS: Inicio, Servicios, Sobre nosotros, Contacto
PRUEBAS: [RESEÑAS REALES, AÑOS EN EL NEGOCIO, CERTIFICACIONES]
DATOS QUE DEBEN SER EXACTOS: [TELÉFONO, DIRECCIÓN, HORARIO, PRECIOS]
TONO: [TRES PALABRAS, POR EJEMPLO CERCANO, EXPERTO, SENCILLO]
ASPECTO: [COLORES DE MARCA EN CÓDIGO HEX, TIPOGRAFÍAS SI LAS TIENES]
WEBS QUE ME GUSTAN: [2 O 3 ENLACES, Y QUÉ TE GUSTA DE CADA UNA]
NUNCA: Inventar reseñas, cifras ni premios. Nada de clichés de fotos de stock.

Paso 2: prepara la carpeta y una red de seguridad

1. Abre el proyecto. En la app de escritorio de Claude, haz clic en la pestaña Code. En la fila que hay debajo del cuadro de texto, elige la primera opción bajo Local en el selector de entorno, luego haz clic en el control de carpeta que tiene al lado, elige Open folder… y selecciona la carpeta de tu proyecto.
2. Activa el historial de versiones. Pídele a Claude que configure Git y que haga un commit después de cada versión que funcione. Git es una herramienta gratuita que guarda instantáneas de tu proyecto, así que puedes volver a cualquier versión anterior.
3. Guarda tus reglas. Pídele que cree un archivo CLAUDE.md con el tono, el aspecto, los datos exactos y la lista de "nunca" de tu encargo. Claude Code lee ese archivo al inicio de cada sesión, y nuestra guía del archivo CLAUDE.md tiene plantillas listas para usar.

Paso 3: genera la primera versión

Elige la tecnología más sencilla que sirva. Para una web de una a cinco páginas basta con HTML y CSS: no hay paso de compilación ni ningún framework que mantener al día. Si piensas tener un blog con muchos artículos, pide Next.js, y Claude Code te dirá si antes necesita instalar algo.

Empieza en modo plan para que Claude proponga antes de escribir. En la app de escritorio, elige Plan en el selector de modo que hay debajo del cuadro de texto; en la terminal, presiona Shift+Tab hasta que veas plan mode.

Lee brief.md y CLAUDE.md. Planifica una web de [NÚMERO] páginas para este
negocio en HTML y CSS, pensada primero para el móvil. Para cada página, haz una lista
de las secciones, un titular provisional para cada sección y todo lo que necesites
de mí. No escribas código hasta que apruebe el plan.

Probamos este prompt con el encargo que ves al principio de esta página, para un taller de bicicletas de demostración. Antes de escribir código, Claude Code repitió el objetivo con sus propias palabras, encontró las dos fotos de la carpeta y enumeró los cinco archivos que iba a crear. Más abajo, el plan tenía un titular provisional para cada sección, que es el momento más barato para cambiar de opinión.

Responde sus preguntas y aprueba el plan. Después cambia al modo Manual para aprobar cada cambio, o a Accept edits para revisar al final, y deja que construya.

Para ver el resultado, haz clic en la ruta index.html en el chat y la página se abre en el panel Browser. También puedes hacer clic en Browser en la barra de título de la sesión.

La construcción tardó menos de tres minutos. Vale la pena leer su informe línea por línea: comprobó cada dato con el encargo, probó el diseño con el ancho de un teléfono y de un escritorio, oscureció el texto del botón porque el blanco sobre ese naranja no pasaba una prueba de contraste y enumeró los textos provisionales que usó donde el encargo no decía nada. Esa lista es tu lista de tareas para el paso 4.

Paso 4: ajústala sección por sección

Aquí es donde la web se vuelve tuya, con un mensaje corto y concreto cada vez.

• Un cambio por mensaje. Los pasos pequeños mantienen los errores pequeños y fáciles de deshacer.
• Muestra, no describas. Arrastra una captura de pantalla al cuadro de texto y di qué cambiar.
• Revisa a menudo el ancho de teléfono. Muchos de tus visitantes llegarán desde un teléfono.
• Usa solo contenido real. Nunca publiques reseñas, logos de clientes ni estadísticas inventados por la IA: engaña a los clientes y puede infringir las normas de protección al consumidor.
• Deshaz y luego reduce la petición. Si un cambio rompe algo, pídele a Claude que lo deshaga, o ejecuta /rewind en la terminal, y luego prueba con un paso más pequeño.

Formularios de contacto y reservas sin backend

Una web en HTML sencillo no tiene un servidor detrás, así que un formulario de contacto que Claude escriba desde cero no tiene adónde enviar el mensaje. En su lugar, inserta un formulario o un widget de reservas de una herramienta que ya uses, como Google Forms, Calendly o tu plataforma de email: pega su código de inserción en el chat y dile a Claude que lo use y que no guarde ningún dato en el proyecto. Después envía una prueba desde tu teléfono y comprueba que llega.

Paso 5: publica tu página web en Vercel

Vercel es un servicio de hosting: mantiene tu web en línea y le da a cada publicación una dirección gratuita vercel.app que puedes compartir antes de tener un dominio.

¿Se puede crear una página web con IA gratis?

Puedes construirla y verla en vista previa gratis, pero no puedes tener la web de un negocio solo con planes gratuitos. Claude Code necesita un plan de pago de Claude, y el plan gratuito Hobby de Vercel es solo para webs personales y no comerciales. Las normas de uso justo de Vercel consideran uso comercial anunciar un producto o servicio, cobrar pagos y mostrar anuncios, así que la web de un negocio va en Pro.

Netlify y Cloudflare Pages también alojan webs estáticas y tienen planes gratuitos. Lee las condiciones de cada uno sobre el uso comercial antes de confiarles la web de un negocio.

Opción A: arrastrar y soltar, sin terminal

1. Abre Vercel Drop. Entra en vercel.com/drop con tu sesión iniciada (cómo funciona Vercel Drop).
2. Suelta la carpeta. Arrastra la carpeta de tu proyecto a la página, o haz clic en folder para elegirla.
3. Publica. Elige tu equipo, ponle nombre al proyecto y haz clic en Deploy. Cuando termine, tendrás una URL en vivo.
4. Actualiza más adelante. Suelta la carpeta sobre el proyecto en tu panel de Vercel, y Vercel publica una nueva versión de producción.

vercel.com/drop

Suelta la carpeta que tiene index.html en su primer nivel. Si no hay ninguno, Vercel te pregunta qué página mostrar en la dirección raíz.

Opción B: deja que Claude Code la publique

Pídele: "Publica esta web en producción en Vercel con la CLI de Vercel y guíame para iniciar sesión". La CLI (la herramienta de línea de comandos) necesita Node.js, y Claude te dirá si falta. Estos son los comandos que ejecuta, y en Windows son los mismos en PowerShell:

# Instala la herramienta de línea de comandos de Vercel (necesita Node.js)
$ npm i -g vercel
# Inicia sesión: se abre una ventana del navegador
$ vercel login
# Crea una publicación de vista previa para revisarla primero
$ vercel
# Publica en producción
$ vercel deploy --prod
$ 

Cuando ya edites la web a menudo, conecta mejor el proyecto a un repositorio de GitHub. Así Vercel publica automáticamente cada push (cada envío de cambios), con vistas previas para las ramas secundarias y producción para tu rama principal.

Paso 6: conecta tu dominio

1. Añade el dominio. En tu proyecto de Vercel, abre Settings > Domains y haz clic en Add Domain.
2. Acepta la versión con www. Si añades example.com, Vercel te sugiere añadir también www.example.com y recomienda la versión con www como dirección principal.
3. Añade los registros DNS que te muestra Vercel en tu registrador (la empresa donde compraste el dominio).
4. Espera la marca de verificación. Los cambios de DNS pueden tardar un rato en propagarse, y el certificado HTTPS (el candado) se configura solo.

Copia los valores de tu propio proyecto y no de un tutorial, porque cambian de un proyecto a otro. Hasta que los registros de tu registrador coincidan, la tarjeta del dominio dice Invalid Configuration:

Paso 7: SEO básico para que Google te encuentre

El SEO (optimización para buscadores) consiste en hacer que los buscadores entiendan fácilmente tus páginas y consideren que vale la pena mostrarlas. La propia guía de SEO para principiantes de Google es corta y se lee bien, y estas son las partes que más importan para una web pequeña.

Haz una revisión de SEO de toda la web:
1. Escribe un título único (menos de 60 caracteres) y una meta descripción
   (menos de 155 caracteres) para cada página, con el nombre del negocio y la zona.
2. Añade texto alternativo descriptivo a cada imagen que aporte algo.
3. Crea sitemap.xml y robots.txt para https://www.[TU DOMINIO].com
4. Añade JSON-LD de LocalBusiness usando solo datos de brief.md.
   Si falta un valor, pregúntame en lugar de inventarlo.
5. Haz una lista de lo que no pudiste hacer y por qué.

Antes de publicar, pega el bloque LocalBusiness que añade Claude en el Schema Markup Validator gratuito y comprueba que no da errores:

Dile a Google que la web existe

1. Añade una propiedad. En Google Search Console, añade una propiedad de tipo Dominio y no una de prefijo de URL. Google la verifica con un registro DNS en tu registrador, y cubre la versión con www y la versión sin www, tanto con http como con https.
2. Envía el sitemap. En el informe Sitemaps, escribe la URL de tu sitemap.
3. Solicita la indexación. Inspecciona la URL de tu página de inicio y haz clic en Request indexing (Solicitar indexación).

Google trata el sitemap como una sugerencia, y solicitar la indexación no garantiza que una página se indexe. Google dice que el rastreo "puede tardar desde unos días hasta unas semanas" (Pedir a Google que vuelva a rastrear tus URL).

Mide qué pasa después del lanzamiento

El informe Rendimiento de Search Console muestra qué búsquedas hicieron aparecer tus páginas y cuántas veces la gente hizo clic. Para las visitas, abre Analytics en tu proyecto de Vercel, haz clic en Enable y pídele a Claude Code que añada el script que Vercel muestra para webs en HTML sencillo. En Pro cuesta 0.03 USD por cada 1,000 páginas vistas y otros eventos, y se paga con el crédito de uso mensual (precios de analytics de Vercel).

Problemas habituales después de publicar

Las soluciones del dominio siguen la sección de resolución de problemas de la guía para añadir un dominio de Vercel, y la del sitemap sigue la ayuda del informe Sitemaps de Google.

¿Se puede crear una app con IA de la misma forma?

Sí, si es una app sencilla. Una herramienta de reservas, una calculadora de presupuestos o un pequeño portal para clientes siguen los mismos pasos, pero el riesgo cambia en cuanto hay cuentas de usuario, pagos o datos de clientes guardados.

Usa servicios conocidos para los inicios de sesión y los pagos en lugar de código hecho a medida, separa los datos de prueba de los datos reales y haz que un programador revise la app antes del lanzamiento. Lee ¿es malo el vibe coding? para conocer los riesgos reales y una lista de seguridad.

Qué hacer ahora

Escribe tu encargo esta noche con la plantilla de arriba, aunque no vayas a construir hasta el fin de semana, porque es el paso que más decide la calidad. Después construye solo la página de inicio, publícala con Vercel Drop en una dirección gratuita vercel.app y mírala en tu teléfono antes de añadir más páginas.

Si prefieres empezar con una sola landing page, sigue cómo hacer una página web con vibe coding prompt a prompt. El curso Builders profundiza en la planificación, la psicología del cliente y la configuración de SEO que hay detrás de una web que genera consultas.