Contenido verificado el 2026-05-07 · experimento de Eggthropic
Una landing page completa con Claude Code
Usar Claude Code para montar, diseñar e iterar una landing page de marketing completa desde un único prompt — layout con Tailwind, textos y diseño responsive incluidos.
Objetivo
Comprobar hasta dónde llega una sola sesión de Claude Code desde el lienzo en blanco hasta una landing desplegable, sin cambiar de herramienta ni salir del terminal.
Contexto
Claude Code es el CLI de programación agéntica de Anthropic: lee tu base de código, propone cambios en varios archivos, ejecuta tests y hace commits. Este experimento lo trata como pair programmer para un flujo completo de diseño a código — sin Figma, sin scaffolding manual. La sesión arrancó con un brief de una línea: construir la landing de un producto SaaS ficticio para desarrolladores llamado «Stackr».
Prompt utilizado
Build a production-ready Next.js landing page for a developer tool called "Stackr" — a CLI that auto-generates API documentation from TypeScript source. Include a hero, features grid, pricing table (3 tiers), and a footer. Use Tailwind CSS, dark mode by default, and add subtle Framer Motion entrance animations. Keep the copy technical but accessible. No placeholder images.
Notas de implementación
Claude Code creó 14 archivos en una sola sesión: el scaffold de Next.js, la configuración de Tailwind, 6 componentes reutilizables y todas las secciones de la página. Instaló Framer Motion por su cuenta, escribió un hook propio para animaciones al hacer scroll y validó el layout responsive listando todos los breakpoints. La sesión completa: 23 turnos y unos 4 minutos de generación activa.
Resultado
Una landing completamente funcional y visualmente terminada con todas las secciones pedidas. Las animaciones de Framer Motion quedaron correctamente condicionadas a prefers-reduced-motion sin pedirlo. La tabla de precios incluyó el destacado del plan recomendado. Tiempo equivalente estimado a mano: 2-4 horas.
Qué funcionó
- Un solo prompt generó una estructura multi-archivo coherente
- Claude añadió mejoras de accesibilidad por iniciativa propia (aria-label, reduced-motion)
- Los nombres de componentes fueron consistentes durante toda la sesión
- Los textos generados sonaban a producto developer sin darle ningún ejemplo
Qué falló
- La navegación móvil inicial necesitó dos prompts de revisión
- El timing del stagger de Framer Motion en la grid de features hubo que ajustarlo a mano
- Claude no añadió og:image ni meta tags de Twitter sin pedírselo
Próxima iteración
Probar el mismo prompt con el flag --plan de Claude Code para comparar generación planificada vs. reactiva. Explorar también un brief de proyecto en CLAUDE.md para reducir ciclos de revisión.
Reprodúcelo tú
Este experimento es un playbook: con las herramientas de arriba y el prompt exacto de esta página puedes repetirlo en tu propio entorno. Si lo haces — funcione o no — cuéntanoslo en GitHub: las réplicas con resultados distintos son tan valiosas como el experimento original.