Crear una página web con IA: del encargo a la web publicada

Para crear una página web con IA, describes la web con tus propias palabras, dejas que una herramienta de IA genere las páginas y luego las revisas, las corriges y las publicas. Puedes hacerlo dentro de un constructor de webs con IA que aloja el sitio por ti, o con un agente de IA como Claude Code, que escribe archivos reales que son tuyos y que puedes subir a cualquier hosting, como Vercel.

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.

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.

Una forma rápida de decidir

• Elige un constructor de webs 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 antes de empezar

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 encargo.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, elige Local, haz clic en Select folder (elegir carpeta) y escoge la carpeta de tu proyecto.
2. Activa el historial de versiones. Pídele a Claude que configure Git y que haga un commit (que guarde una instantánea) cada vez que tengas una 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 de CLAUDE.md tiene plantillas listas para usar.

Claude Code también guarda sus propios puntos de control (checkpoints), a los que puedes volver con /rewind. Git es la red de seguridad permanente, así que mantén las dos.

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 junto al botón de enviar; en la terminal, presiona Shift+Tab hasta que veas plan mode.

Lee encargo.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.

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, abre el panel del navegador (Browser) con Cmd+Shift+B en Mac o Ctrl+Shift+B en Windows, y pídele a Claude que abra ahí index.html.

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

Aquí es donde la web se vuelve tuya. Los mensajes cortos y concretos funcionan mucho mejor que las parrafadas, y cada uno es fácil de deshacer.

• 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, y luego prueba con un paso más pequeño.

Paso 5: publícala 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.

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.
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.

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.

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.

Dos cosas que puedes saltarte: Google dice que no usa la etiqueta meta keywords, y la longitud por sí sola no ayuda a que una página posicione.

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 encargo.md.
   Si falta un valor, pregúntame en lugar de inventarlo.
5. Haz una lista de lo que no pudiste hacer y por qué.

Dile a Google que la web existe

1. Añade una propiedad. En Google Search Console, añade una propiedad de tipo Dominio. Google la verifica con un registro DNS en tu registrador, y cubre tanto la versión con www como la versión sin www.
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 Solicitar indexación (Request indexing).

Google trata el sitemap como una sugerencia, y solicitar la indexación no garantiza que una página se indexe. A menudo tarda más o menos un día, y a veces una o dos semanas.

¿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.