Antes de Claude Code, crear una landing page era un proyecto. Briefing con un diseñador, 2-3 rondas de feedback, el desarrollador que la maqueta, el deploy, las correcciones responsive. Mínimo una semana. Mínimo 300 €. Y eso si tenías suerte con los plazos.
Ahora creo landing pages en 30 minutos. Sin abrir Figma, sin tocar WordPress, sin contratar a nadie. Le explico a Claude Code qué necesito en español y me genera el código completo — componente React, estilos, responsive, listo para hacer git push y que Vercel lo despliegue. He creado así las 5 landings principales de pabloypunto.com: directorio de agentes, automatizaciones, equipo IA, guía y colaboraciones. Cada una me habría costado 300-800 € con un freelance. Total pagado: 0 € extra sobre mi suscripción de Claude Max.
No exagero. Te cuento exactamente cómo lo hago.
Por qué Claude Code cambia el juego para crear landing pages
- Crear landing pages con Claude Code
- Proceso de diseñar y desarrollar páginas de aterrizaje web completas usando Claude Code como agente autónomo de desarrollo. Claude Code genera el código HTML/React/CSS a partir de instrucciones en lenguaje natural, produciendo páginas responsive listas para deploy sin que el usuario necesite conocimientos de programación.
Los constructores de landing pages existen desde hace años. Webflow, Carrd, Unbounce, Leadpages, WordPress con Elementor. Todos prometen "crear sin código". Y funcionan, para cierto tipo de usuario. Pero tienen tres problemas que a mí me quemaron.
El primero es la dependencia. Si tu landing está en Webflow y un día Webflow sube precios o cierra, tu página desaparece. Con Claude Code, el código es tuyo. Está en tu repositorio, en tu servidor, bajo tu control. Si mañana dejo de pagar Claude Max, las landings siguen vivas porque el código no depende de Anthropic.
El segundo es el coste acumulativo. Webflow son 14-39 € al mes por sitio. Carrd, 9-49 €. Si tienes 3-4 landings para distintos lead magnets, se acumula. Con Claude Code + Vercel free tier, el coste marginal de cada nueva landing es literalmente cero. Según un análisis de WebsiteBuilderExpert (2026), el coste medio de una landing page profesional oscila entre 200 € y 3.000 € dependiendo de la complejidad y la herramienta.
El tercero es la limitación creativa. En un constructor visual, puedes hacer lo que la plantilla permite. Si quieres un formulario interactivo que calcule algo, una animación específica o una integración custom con tu API, estás atado. Claude Code genera código — no hay límite más allá de lo que el código puede hacer. Y el código puede hacer cualquier cosa.
Eso no significa que Claude Code sea mejor para todo el mundo. Si llevas un negocio donde necesitas que 10 personas editen la web sin tocar código, Webflow tiene sentido. Pero si eres solopreneur o un equipo pequeño que quiere velocidad y control total, Claude Code es otra liga.
Lo que necesitas antes de empezar (setup de 3 minutos)
No necesitas ser programador. Lo digo en serio. Pero necesitas tres cosas configuradas:
Claude Max (~100 €/mes). Es la suscripción que te da acceso ilimitado a Claude Code. Si solo quieres probar, Claude Pro (20 €/mes) también funciona pero con límites de uso que te van a frenar si creas varias landings. Yo tengo Max y es la mejor inversión que hago cada mes, porque no solo lo uso para landings — lo uso para todo mi negocio.
Un proyecto base. Puede ser un repo vacío con un index.html, un proyecto Vite+React como el mío, o incluso un simple archivo HTML estático. Claude Code trabaja sobre tu proyecto — necesita un punto de partida. Si no tienes nada, le dices "crea un proyecto nuevo con Vite y React" y lo monta en 2 minutos.
Un sitio donde desplegarlo. Vercel (gratis), Netlify (gratis), GitHub Pages (gratis), o cualquier hosting. En mi caso uso Vercel porque el deploy es automático: hago git push y en 40 segundos la landing está online. La configuración inicial lleva 5 minutos una sola vez.
Con eso estás listo. Si ya tienes Claude Code funcionando para otras cosas — como yo, que tengo 6 agentes operando — no necesitas configurar nada extra.
Mi proceso real: de la idea a la landing publicada
Esto es lo que hago exactamente cada vez que necesito una nueva landing. Sin adornos, sin teoría — el proceso que uso.
Paso 1: Briefing mental (3 minutos). Antes de abrir Claude Code, tengo claro: qué vendo o qué ofrezco, quién es el público, y cuál es la acción que quiero que haga el visitante. No hace falta un documento de 10 páginas. Literalmente me basta con tres frases: "Quiero una landing para mi directorio de 51 agentes IA. El público son emprendedores hispanos. La acción es que se registren con su email para acceder."
Paso 2: El prompt (5 minutos). Esto es lo más importante. Le escribo a Claude Code un prompt con 6 bloques específicos que te explico en la siguiente sección. Cuanto más contexto le doy, menos vueltas hay que dar después. Un buen prompt = una landing en la primera iteración. Un mal prompt = 4-5 rondas de correcciones.
Paso 3: Claude Code genera (8-12 minutos). Claude Code lee mi proyecto, entiende la estructura, y genera el componente completo. Escribe el JSX, los estilos, la lógica del formulario si la hay, y actualiza las rutas para que la nueva landing sea accesible. En mi stack (React + Vite), genera un componente .jsx con Tailwind CSS y lo integra en el router.
Paso 4: Ajustes y revisión (5-10 minutos). Abro la landing en el navegador local (npm run dev), reviso en desktop y móvil, y le pido a Claude Code los ajustes. "El hero necesita más contraste." "El CTA debería ser más grande en móvil." "Añade un testimonio debajo de la tabla." Cada ajuste son 30 segundos.
Paso 5: Deploy (2-4 minutos). git add, git commit, git push. Vercel detecta el push y despliega automáticamente. En 40 segundos la landing está en producción con HTTPS, CDN global y la URL definitiva.
Total: 20-40 minutos dependiendo de la complejidad. Las landings simples (una página de captura con email) me llevan 20 minutos. Las complejas (directorio interactivo con filtros, como mi directorio de agentes IA) me llevan 40-50 minutos más iteraciones posteriores.
Los 6 bloques del prompt que funciona
Después de crear 5 landings, he destilado el prompt perfecto en 6 bloques. Si incluyes estos 6 elementos, Claude Code te genera algo usable a la primera.
El primer bloque es el contexto del negocio. Quién eres, qué vendes, a quién. Claude Code necesita entender tu mundo para generar copy que tenga sentido. Sin contexto, genera landing pages genéricas que suenan a plantilla. Con contexto, genera algo que parece tuyo.
El segundo es el objetivo de la landing. Parece obvio pero la mayoría de gente lo omite. ¿Quieres emails? ¿Quieres que compren? ¿Quieres que reserven una demo? El objetivo cambia radicalmente la estructura de la página. Una landing de captura tiene hero + formulario + social proof. Una landing de venta tiene secciones de objeciones, pricing y testimonios.
El tercero es el estilo visual. Colores, tipografía, tono. Si tienes una guía de marca, compártela. Si no, describe en 2 frases: "Diseño limpio y minimalista con azul y crema" o "Estilo bold con degradados y negritas". Claude Code interpreta instrucciones visuales con bastante precisión.
¿Quieres montar tu propio equipo de agentes de IA?
Cada semana comparto lo que funciona (y lo que no) montando agentes reales para mi negocio. Sin teoría, sin humo.
🎁 Al suscribirte recibes mi guía: cómo llegué a 500 subs en <1 mes con agentes IA.
El cuarto son las secciones obligatorias. Dile exactamente qué bloques quieres: hero, problema, solución, cómo funciona, testimonios, FAQ, CTA final. No le dejes decidir la estructura — tú sabes qué necesita tu público.
El quinto son las restricciones técnicas. Qué stack usas (React, HTML puro, Vue), qué framework CSS (Tailwind, CSS Modules), cómo se despliega. Esto evita que genere código incompatible con tu proyecto.
Y el sexto — este es el truco — es un ejemplo o referencia. Si tienes otra landing en tu proyecto que te gusta, dile "mira la landing de /agentes-ia como referencia de estilo y estructura". Claude Code la lee, entiende el patrón, y genera algo consistente. Este bloque solo ahorra 2-3 iteraciones de ajustes.
Ejemplo real: la landing de /agentes-ia
Mi directorio de 51 agentes IA es la landing más compleja que he creado con Claude Code. Tiene filtros interactivos, gate de email, categorías, y una base de datos de agentes que se muestra como grid de tarjetas. No es una landing estática — es una mini-app.
La primera versión me llevó unos 45 minutos. Le describí a Claude Code lo que necesitaba: un directorio de herramientas IA filtrable por categoría, con un formulario de email que desbloquea el acceso completo. Le di mi paleta de colores (azul #004B8D, crema #FDF9F3, verde #2D8E6F) y le dije que usara React con Tailwind, consistente con el resto de la web.
Claude Code generó el componente completo: la grilla de tarjetas, el filtro por categorías, el modal de email con integración a SendFox, y el estado que recuerda si el usuario ya se registró. No perfecta a la primera — el responsive del grid necesitó 2 ajustes y el modal tenía un z-index incorrecto. Pero de "nada" a "landing funcional en producción" fueron 45 minutos.
Un freelancer me habría cobrado entre 600 y 1.200 € por ese trabajo. Y habría tardado 1-2 semanas. No porque sea lento — sino porque el ciclo de briefing → diseño → feedback → desarrollo → correcciones → deploy es lento por naturaleza cuando hay dos personas comunicándose.
Claude Code vs constructores de landing pages
Aquí la comparativa honesta. No voy a decirte que Claude Code es mejor siempre, porque no lo es. Depende de tu situación.
| Criterio | Claude Code | Webflow | Carrd | WordPress |
|---|---|---|---|---|
| Coste mensual | 0 € extra* | 14-39 €/sitio | 9-49 € | 4-25 € + hosting |
| Tiempo por landing | 20-40 min | 2-6 horas | 1-3 horas | 4-12 horas |
| Personalización | Total | Alta (visual) | Limitada | Alta (con plugins) |
| Curva aprendizaje | Baja (hablas, genera) | Media (editor visual) | Baja | Alta (ecosistema) |
| Dependencia | Ninguna (tu código) | Alta (plataforma) | Alta (plataforma) | Media (hosting) |
| Responsive | Sí (con prompt) | Sí (nativo) | Sí (básico) | Varía (tema) |
| SEO/meta tags | Manual o por prompt | Integrado | Básico | Plugins (Yoast) |
*Ya incluido en Claude Max (~100 €/mes). Deploy en Vercel free tier.
Webflow es la mejor opción si necesitas un editor visual para un equipo no técnico. Carrd es ideal si solo necesitas una página minimalista con un formulario. WordPress es el estándar si ya tienes infraestructura montada.
Pero si eres emprendedor y ya usas Claude Code para automatizar tu negocio, crear landings es un bonus natural. No pagas nada extra, tardas menos, y el resultado es código limpio que puedes modificar cuando quieras sin pedir permiso a nadie.
Los errores que te van a pasar (para que los esquives)
Después de 5 landings, estos son los errores que cometí en las primeras y que ahora evito.
No especificar responsive. Si no le dices a Claude Code "tiene que funcionar perfecto en móvil", puede generar una landing que se ve brutal en desktop y se rompe en pantallas pequeñas. Siempre incluye esta instrucción y siempre revisa en un viewport de 375px antes de publicar. Según Statista (2025), el 62% del tráfico web global viene de móviles — si tu landing no es responsive, pierdes dos tercios de las visitas.
Dar un prompt demasiado vago. "Hazme una landing page bonita" produce algo genérico e inútil. "Hazme una landing para mi directorio de 51 agentes IA, dirigida a emprendedores hispanos, con gate de email, filtros por categoría, paleta azul/crema, en React+Tailwind" produce algo usable a la primera. La diferencia es el contexto.
No revisar el copy generado. Claude Code escribe copy decente, pero genérico. Los titulares tienden a sonar a "Descubre la solución perfecta para tu negocio". Eso no convierte. Siempre reviso el hero, los subtítulos y los CTAs, y le pido que los reescriba con el tono real de mi marca — directo, con números, sin florituras.
Ignorar la velocidad de carga. Si le pides a Claude Code que incluya animaciones complejas, librerías de terceros o imágenes pesadas, la landing puede tardar en cargar. Según Google (2023), el 53% de usuarios abandonan una web móvil que tarda más de 3 segundos en cargar. Pide siempre "landing ligera, sin dependencias innecesarias" y verifica con Lighthouse después.
No hacer deploy inmediato. La landing perfecta no existe. La primera versión publicada, sí. Publica en 30 minutos, mide durante una semana, y mejora con datos. Tener una landing en producción captando leads es infinitamente mejor que tener una landing "en progreso" en tu disco duro.
Cuándo NO usar Claude Code para tu landing
Siendo honesto: Claude Code no es la respuesta para todos los casos.
Si tu equipo tiene 5 personas que necesitan editar la landing sin tocar código, necesitas un CMS visual. Claude Code genera código — editarlo requiere volver a Claude Code o abrir un editor. Para equipos no técnicos con ediciones frecuentes, Webflow o WordPress son más prácticos.
Si necesitas una landing para esta tarde y nunca has usado Claude Code, la curva de setup inicial (instalar Claude Code, crear proyecto, configurar deploy) te va a llevar más de 30 minutos la primera vez. Para una emergencia puntual, Carrd te da una landing en 20 minutos sin setup.
Y si tu negocio depende de tests A/B intensivos con herramientas como Unbounce u Optimizely integradas, esas plataformas tienen la infraestructura de testing construida. Con Claude Code puedes montar A/B testing, pero es trabajo extra que en esas plataformas viene incluido.
Para todo lo demás — solopreneurs, emprendedores con stack de IA, equipos pequeños que priorizan velocidad y control — Claude Code es la herramienta que convierte "necesito una landing" en "tengo una landing" en media hora. Y eso, para un emprendedor que tiene 40 ideas al mes y necesita validarlas rápido, vale más que cualquier constructor visual del mercado.
La landing page perfecta no existe. Pero una landing publicada en 30 minutos que empieza a captar leads hoy es infinitamente mejor que la landing perfecta que llevas 3 meses diseñando en tu cabeza. Claude Code me quitó la excusa de no saber programar.