Una landing page con IA, online en una tarde

El plan es sencillo: Astro crea el esqueleto de la web, Claude Code escribe el contenido y el diseño mientras tú le explicas qué quieres, y Vercel la pone online con una URL. Tres herramientas, una tarde, y nada de plantillas de pago.

Lo que conviene ver: no estás programando la página, la estás dirigiendo. Astro le da a Claude un proyecto limpio donde trabajar, el servidor de desarrollo muestra cada cambio en el instante en que ocurre, y ese bucle mirar-decir-mirar es lo que te deja dar forma a una web entera hablando. La habilidad que importa deja de ser la sintaxis. Pasa a ser decir lo que quieres con la claridad suficiente para que el resultado se parezca a lo que tienes en la cabeza.

1. Crea el proyecto con Astro

Astro es un framework para hacer webs rápidas. No necesitas saber cómo funciona por dentro: una sola línea te monta el proyecto entero. En la Terminal:

npm create astro@latest mi-landing

Te hará un par de preguntas. Para empezar, elige la plantilla vacía (Empty), y di que sí a instalar las dependencias y a inicializar git. Cuando termine, entra en la carpeta:

cd mi-landing

2. Ábrela con Claude Code y descríbele la página

Aquí está el truco de todo esto. Abre Claude Code en la carpeta y, en lugar de programar, le cuentas en lenguaje normal qué web quieres:

claude

Y le escribes algo concreto. Cuanto más detalle, mejor sale. Por ejemplo:

> Hazme una landing para un estudio de fotografía.
  Un hero con titular grande y un botón "Reservar sesión",
  una sección con tres servicios, una galería de 6 fotos,
  y un pie con el correo de contacto. Estética limpia,
  fondo claro, tipografía elegante.

Claude crea y edita los archivos del proyecto por su cuenta. Tú no tocas el código: revisas lo que propone y le das el visto bueno.

3. Míralo en tu navegador

Para ver la web mientras la construyes, arranca el servidor de desarrollo:

npm run dev

Astro te dice dónde está corriendo:

  astro  v6.1  ready in 412 ms
  ┃ Local    http://localhost:4321/

Abre http://localhost:4321 en el navegador. Ahí está tu página, en vivo. Cada cambio que haga Claude se actualiza solo, sin recargar. Ten esta pestaña al lado de la terminal: es el bucle de feedback sobre el que va todo el build.

4. Ve afinándola hablando

Construir aquí es conversar. Miras la página, algo no te convence, se lo dices, y lo cambia. Una cosa por mensaje funciona mejor que diez:

• "El hero es muy pequeño, hazlo a pantalla completa."
• "Cambia el color de acento a un verde oliva."
• "Añade una sección de precios con tres planes."

A veces se pasa o rompe algo. No es drama: le dices qué quedó mal y lo arregla. Así, en un par de horas, tienes una página que se parece a lo que tenías en la cabeza.

5. Súbela a GitHub

Cuando te guste, guárdala y súbela. Astro ya inició git al crear el proyecto, así que solo tienes que guardar la primera versión y crear el repositorio en GitHub. Si nunca lo has hecho, está paso a paso en Git y GitHub desde cero:

git add .
git commit -m "primera versión"
gh repo create mi-landing --source=. --public --push

6. Ponla online con Vercel

Vercel coge tu repositorio de GitHub y lo publica en internet, gratis. Entra en vercel.com, crea una cuenta con tu GitHub, y dale a Add New → Project. Elige tu repositorio mi-landing de la lista.

Vercel reconoce solo que es un proyecto Astro, así que no tienes que configurar nada: pulsa Deploy. En cerca de un minuto te da una URL pública y tu web está online. A partir de ahí, cada git push la actualiza sola.

Cuando algo se rompe

Va a pasar, un poco. Los cuatro tropiezos más probables, y el arreglo de cada uno:

• "command not found: npm". Node no está instalado, o hay que reabrir la terminal tras instalarlo. Lo resuelves en instala Node, y vuelves a lanzar el comando.
• Claude rompió el diseño. Se pasó. Esto no lo arreglas a mano: dile "eso rompió el header, deshazlo y prueba otra vez", o vuelve a la última versión buena con git restore ..
• "Port 4321 is in use". Hay un servidor de desarrollo corriendo en otra pestaña. Ciérralo, o lanza npm run dev -- --port 4322.
• Falló el build en Vercel. Abre el log del deploy en Vercel. Casi siempre es una dependencia que falta o la versión de Node equivocada. Pega el error en Claude Code y te da la línea exacta que cambiar.

Ahora prueba esto

La página está online. Unas formas de llevarla más lejos, cada una a un prompt o un clic:

• Ponla en tu propio dominio. Compra uno, añádelo en la pestaña Domains del proyecto en Vercel, y apunta el DNS a donde Vercel te diga.
• Captura correos. Añade un formulario que de verdad guarde la dirección, como hace este sitio: conecta el formulario a n8n.
• Hazla bilingüe. Pídele a Claude una versión /es de la página y un cambio de idioma en la cabecera.
• Mantenla fresca. Cada cambio posterior sigue siendo una frase y un git push; la web se actualiza sola.

Lo que acabas de hacer

Una web real, en una URL real, en una tarde. Lo importante no es Astro ni Vercel: es que no escribiste la página, la describiste. La herramienta dejó de ser la barrera. Lo que marca la diferencia ahora es saber pedir bien lo que quieres.