Landing Page con IA

¿Qué vas a construir?

Una landing page completa lista para producción: hero con CTA, sección de características, testimonios, formulario de contacto y footer. Diseño responsivo con Tailwind CSS.

Lo que aprenderás

• •Configurar un proyecto desde cero con Claude Code

• •Estructurar HTML semántico con IA

• •Generar y refinar CSS con Tailwind usando prompts

• •Optimizar para SEO y velocidad de carga

• •Desplegar en Vercel en menos de 5 minutos

Pasos principales

Paso 1 — Configuración del proyecto

Abre Claude Code y describe tu landing page. Incluye el sector (ej: "SaaS de productividad"), el público objetivo y los colores principales.

Paso 2 — Estructura HTML

Pide a Claude que genere la estructura completa. Revisa el código sección por sección.

Paso 3 — Estilos con Tailwind

Itera sobre el diseño con Claude. Describe qué cambiar: "hazlo más minimalista", "añade sombras más suaves", etc.

Paso 4 — Formulario funcional

Conecta el formulario con Formspree (gratuito) para recibir emails reales. Claude genera el JavaScript necesario.

Paso 5 — Deploy

Sube a GitHub y conecta con Vercel. Deploy automático en cada push.

Resultado esperado

Landing page con 95+ en Lighthouse, formulario funcional y dominio personalizado configurado.