Objetivos de aprendizaje
- Qué debe tener una landing que convierte visitas en clientes.
- Crear una con Claude Code describiéndola en lenguaje normal.
- Prepararla para publicarla (capítulo siguiente).
Conceptos clave
En cristiano: landing page. Es la web-escaparate: lo primero que ve alguien que llega desde un anuncio, un enlace de LinkedIn o una tarjeta. Su único trabajo es que el visitante entienda qué ofreces y haga una acción (escribirte, comprar, reservar).
Idea clave. Una buena landing tiene: un titular claro (qué haces y para quién), tres beneficios, una prueba (testimonio o dato), y un botón de acción visible. Si le das esto a Claude Code, tendrás una base sólida.
Requisitos
Solo Claude Code y Node.js. No necesita IA local: es una web estática y rápida.
Paso a paso
cd ~/proyectos-ia mkdir mi-landing cd mi-landing claude
Escribe esto a Claude Code
Crea una landing page moderna y rápida para mi servicio. Datos:
- Servicio: [describe qué ofreces y a quién].
- Titular potente y subtítulo.
- Sección de 3 beneficios con iconos.
- Un testimonio y una sección de precios (o "contáctame").
- Formulario de contacto y botón de acción destacado.
- Diseño responsive (se ve bien en móvil).
- README con instrucciones.
En cristiano: responsive. Que la web se adapta al tamaño de la pantalla: se ve bien tanto en el ordenador como en el móvil. Es imprescindible hoy: la mayoría de visitas llegan desde el teléfono.
Ejecutar en tu ordenador
npm install npm run dev
Abre la dirección local y revisa la página. Achica la ventana del navegador para comprobar que se ve bien en pantallas pequeñas.
Comprueba que funciona. La página debería verse profesional, con tu titular arriba y un botón de acción claro. Redúcela a tamaño móvil: los elementos deben reordenarse sin romperse.
Guardar y reabrir el proyecto.
Proyecto: carpeta
mi-landing. Cerrar: Ctrl + C. Reabrir: cd ~/proyectos-ia/mi-landing y npm run dev. En el próximo capítulo la publicas en internet gratis y con tu propio enlace.Si algo falla
- El formulario no envía — una landing local no manda correos por sí sola; en el capítulo de publicar conectamos un servicio de formularios gratuito.
- Se ve mal en móvil — pide a Claude Code que “mejore el responsive” de la sección concreta.
Reto para practicar
Crea dos versiones del titular y pide a Claude Code que prepare la web para probar cuál funciona mejor (un test A/B sencillo). Aprender qué convence a tus visitantes es oro.
Siguiente misión recomendada
Si has guardado la evidencia de esta lección, continúa con «Asistente para autónomos». Si no, repite la comprobación antes de avanzar.