Tu primer proyecto con Claude Code: una landing page en una tarde
El flujo exacto para construir una landing page funcional con Claude Code — sin memorizar comandos ni elegir frameworks. Describes lo que quieres, revisas, iteras y despliegas.
El primer proyecto siempre cuesta más de lo que debería
La mayoría de los tutoriales de desarrollo empiezan igual: instala Node, configura el bundler, elige entre diez frameworks, resuelve los errores de dependencias. Para cuando llegas a escribir código que hace algo visible, ya pasaron dos horas y la motivación se fue con ellas.
Claude Code corta todo eso. No necesitas saber de memoria qué librería usar ni cómo se estructura un proyecto moderno. Describes lo que quieres construir y Claude Code genera el código, crea los archivos y te dice exactamente cómo ejecutarlo.
Esto no es una demo de juguete
El output de Claude Code es código real, que corre en producción. La diferencia es que tú lo describes y lo revisas — Claude lo escribe.
Por qué una landing page es el proyecto perfecto para empezar
Una landing page tiene todo lo que necesitas para aprender el flujo de Claude Code, sin nada que lo complique. Sin base de datos, sin autenticación, sin estado complejo — solo HTML, CSS, algo de JavaScript y un resultado visible en segundos.
Al terminar este proceso vas a entender cómo funciona Claude Code en la práctica: cómo describes lo que quieres, cómo revisas el output, cómo das feedback específico para acercarte al resultado que necesitas. Ese flujo es exactamente el mismo que usarás en proyectos de cualquier escala.
Resultado inmediato
Abre el navegador y ves el sitio funcionando
Sin setup complejo
No necesitas configurar servidores ni bases de datos
Iterable
Fácil de ajustar con prompts de refinamiento
Desplegable
En Vercel o Netlify en menos de 5 minutos
Lo que necesitas antes de escribir el primer prompt
El único prerequisito técnico es tener Claude Code instalado. Si no lo tienes, abre la terminal y ejecuta:
npm install -g @anthropic-ai/claude-codeNecesitas Node.js 18 o superior y una cuenta en claude.ai. Después de instalar, autentícate con claude login.
Antes de escribir el primer prompt, responde estas tres preguntas. Son las mismas que hago antes de arrancar cualquier proyecto web:
¿Para qué es la landing?
Producto, servicio, captación de leads, portfolio. Sé específico — "agencia de marketing" no es lo mismo que "agencia de marketing de contenido para e-commerce".
¿A quién va dirigida?
Quién la va a ver, qué problema tiene esa persona y por qué debería quedarse en la página.
¿Qué acción quieres que tome el visitante?
Una sola acción clara: agendar una llamada, dejar su correo, comprar, contactar por WhatsApp.
Con estas tres respuestas, tu primer prompt ya está en el top 10%
Claude Code no adivina intenciones — ejecuta descripciones. Mientras más claro seas, menos iteraciones necesitas.
El proceso, paso a paso
Crea una carpeta para el proyecto y ábrela en la terminal
Ejecuta mkdir mi-landing && cd mi-landing. Esa carpeta es donde Claude Code va a crear todos los archivos.
Abre Claude Code en esa carpeta
Ejecuta claude. Claude Code analizará la carpeta (vacía por ahora) y quedará listo para recibir instrucciones.
Escribe el prompt inicial con el contexto completo
Usa la plantilla de la siguiente sección. No escatimes en contexto — más información aquí significa menos correcciones después.
Revisa los archivos generados y ábrelos en el navegador
Si es HTML puro, abre el index.html directamente. Si Claude Code generó un proyecto con servidor de desarrollo, pídele el comando para arrancarlo.
Da feedback específico para cada ajuste
No digas "está mal". Di exactamente qué sección quieres cambiar, qué no te gusta y cómo debería verse. Claude Code responde al detalle.
Despliega cuando estés conforme con el resultado
Vercel y Netlify tienen CLI. Pídele a Claude Code el comando exacto para desplegar desde la terminal.
Revisa antes de aprobar cada cambio
Claude Code es rápido, pero el juicio es tuyo. Los mejores resultados se logran revisando el output en el navegador antes de pasar al siguiente prompt.
Prompts listos para copiar
Estos tres prompts cubren el flujo completo de principio a fin. Adapta los valores entre corchetes con el contexto de tu proyecto.
Vamos a construir una landing page profesional. Aquí está el contexto: - Producto/servicio: [describe en 2 líneas qué ofreces] - Audiencia: [quién es tu cliente ideal y qué problema tiene] - Objetivo de la página: [qué acción debe tomar el visitante] - Estilo visual: [colores, referencias de diseño si tienes] Crea la estructura completa con HTML semántico, CSS moderno sin frameworks externos y estas secciones: hero con propuesta de valor clara, problema que resuelves, beneficios concretos (no características), prueba social y CTA principal. El código debe estar listo para abrir en el navegador sin instalar nada.
Revisa el [nombre de la sección: hero / beneficios / CTA]. El problema es que [describe exactamente qué no funciona]. Quiero que [describe el cambio específico que necesitas]. Mantén el resto del diseño y el código igual — solo modifica esa sección.
Quiero desplegar esta landing en Vercel desde la terminal. Verifica que todos los archivos estén en orden para producción, dame el comando exacto para instalar la CLI de Vercel y los pasos para hacer el deploy. Incluye cómo configurar el dominio personalizado si ya tengo uno.
Para cada sección nueva, un prompt nuevo
Si quieres agregar una sección de precios, un FAQ o un formulario, es mejor hacer un prompt por sección que pedirlo todo junto. Claude Code produce resultados más limpios cuando el alcance está bien delimitado.
El flujo que ya tienes
Al terminar tu primera landing con Claude Code, completaste el ciclo que vas a repetir en cada proyecto, sin importar la complejidad:
Dar contexto completo
El input más valioso que le das a Claude Code
Generar y revisar
Nunca aprobar un output sin verlo en el navegador
Iterar con precisión
Feedback específico = resultados predecibles
Desplegar
Del localhost al mundo real en minutos
La landing page es solo el punto de entrada. El mismo flujo funciona para agregar un formulario de contacto, conectar una API, construir un panel de administración o cualquier proyecto que siga. La herramienta no cambia — cambia lo que le describes.
¿Prefieres que construya la landing por ti?
Puedo diseñar y desarrollar la landing page de tu negocio: con el copy, el diseño y la estructura que convierte visitantes en clientes — lista para desplegar.
Hablemos por WhatsApp