AI-First
Claude Code + Nano Banana 2 + FireCrawl: el trío para crear sitios animados vendidos por miles de euros
- 🔑 El trío Claude Code + Nano Banana 2 + FireCrawl permite producir sitios animados vendidos por varios miles de euros sin programar.
- 🎯 FireCrawl rastrea 5 competidores y genera un informe estratégico completo: paletas, estructura, palabras clave SEO, señales de confianza.
- 💡 Nano Banana 2 crea animaciones scroll antes/después fotorrealistas, como una piscina sucia que queda impecable en 5 segundos.
- 🚀 La skill de auditoría UI/UX Pro aplica automáticamente 15 correcciones de accesibilidad WCAG y 8 mejoras SEO sin intervención manual.
- ⚠️ El verdadero valor no está en el sitio en sí, sino en el sistema Notion de gestión de feedback del cliente que fideliza a largo plazo.
FireCrawl analiza los 5 mejores competidores de cualquier sector y genera un informe completo en segundos
Nano Banana 2 genera animaciones 3D fotorrealistas directamente integrables en el código del sitio
El scroll animado (piscina sucia → piscina limpia): un efecto que se factura entre 2 000 y 5 000 euros y se construye en 20 minutos
Notion + Claude Code = sistema de gestión de feedback del cliente completamente automatizado
Todo el workflow no requiere experiencia en código, Claude gestiona la totalidad del desarrollo
Crear sitios web animados que se venden por varios miles de euros: eso es exactamente lo que permite ahora la combinación Claude Code + Nano Banana 2 + FireCrawl. Seguí este método de principio a fin. Esto es lo que encontré, lo que me sorprendió y cómo reproducir el resultado partiendo de cero.
El principio: en lugar de programar animaciones manualmente, se pilota Claude Code con skills preconstruidas. Claude se encarga del desarrollo. Nano Banana 2 genera los visuales 3D. FireCrawl aporta la inteligencia de mercado. Resultado: un sitio profesional, optimizado para SEO, con una animación scroll que normalmente cuesta una fortuna hacer a medida.
FireCrawl: inteligencia de mercado en 30 segundos
Antes de construir un solo archivo HTML, el método empieza por la investigación. FireCrawl es una API que rastrea los mejores sitios de un sector determinado y sintetiza lo que funciona.
En la práctica: se le da a Claude Code un sector (ejemplo: limpieza de piscinas en Texas) y una URL de referencia (diamondpools.com en el tutorial). FireCrawl identifica a los 5 competidores mejor posicionados en Google, rastrea su contenido y genera un informe estructurado que incluye:
las paletas de colores de cada competidor
su estructura de páginas y sus señales de confianza
las palabras clave SEO que trabajan y las oportunidades por explotar
lo que los líderes del mercado tienen en común
una recomendación de estructura de sitio basada en lo que convierte
Este informe se puede enviar al cliente antes de empezar a construir. Es consultoría estratégica ofrecida de forma automática, y justifica el precio de inmediato.
FireCrawl es gratuito para empezar. La API key se obtiene en segundos desde su sitio. Una vez proporcionada a Claude, todo funciona sin ninguna intervención adicional.
El sitio base: SEO-first, estructura inteligente
Una vez generado el informe, Claude Code construye el sitio. No una plantilla genérica, sino un sitio estructurado en torno a los datos recopilados: las secciones que convierten en ese mercado, las palabras clave que rankean, las señales de confianza que reducen la fricción.
El prompt es sencillo: construir el sitio dejando un espacio para la animación scroll. Claude gestiona el HTML, el CSS y el JavaScript. El resultado tras la primera generación ya es presentable: hero, servicios, galería, testimonios, formulario de contacto.
Lo más llamativo: Claude extrae las reseñas directamente del sitio de referencia rastreado. Las reviews que aparecen en el sitio son reales, sacadas de los datos de Google recuperados por FireCrawl. No es contenido inventado.
Nano Banana 2: la animación que lo cambia todo
Aquí es donde el proyecto se pone realmente interesante. Nano Banana 2, el modelo de generación de imágenes de Google (gemini-3.1-flash-image-preview), permite crear assets visuales 3D con coherencia fotográfica. Combinado con un generador de vídeo como Kling, se obtiene una animación de transición entre dos estados.
En el ejemplo del tutorial: una piscina sucia que se transforma en una piscina impecable a medida que se hace scroll hacia abajo en la página. La animación dura 5 segundos. El efecto es inmediato y memorable.
El workflow para crear esta animación:
La skill 3D Website Asset Generator genera 3 prompts optimizados: estado inicial (piscina sucia), estado final (piscina limpia), transición de vídeo
Se generan las dos imágenes en Kling (o Higgsfield) con Nano Banana 2 como modelo, fondo blanco para una integración limpia en el sitio
Se genera el vídeo de transición con el prompt proporcionado, 5 segundos, 1080p es suficiente
Se entrega el vídeo a Claude Code con la skill 3D Website Builder: integra la animación scroll automáticamente
El efecto scroll: el fondo del hero se vuelve blanco y el vídeo se reproduce al ritmo del desplazamiento. Cuanto más se hace scroll, más limpia queda la piscina. Es el tipo de interacción que se ve en sitios Awwwards de 100 000 euros.
Lo que se puede lograr con esta técnica va mucho más allá de las piscinas. Cualquier transformación antes/después es una oportunidad: renovación de interiores, transformación física, evolución de un producto, estado de una obra. El principio es siempre el mismo.
Sector | Animación posible | Valor percibido |
|---|---|---|
Piscinas / jardinería | Antes del tratamiento → después del tratamiento | Muy alto |
Renovación de interiores | Habitación deteriorada → habitación renovada | Muy alto |
Fitness / coaching | Silueta antes → después del programa | Alto |
Inmobiliario | Inmueble vacío → amueblado/decorado | Alto |
Automoción | Coche accidentado → restaurado | Alto |
E-commerce de producto | Producto en bruto → producto acabado/empaquetado | Medio |
La auditoría SEO y de accesibilidad automática
Una vez construido el sitio e integrada la animación, Claude Code pasa por una tercera skill: la auditoría UI/UX Pro. Esta herramienta evalúa el sitio según cientos de criterios: accesibilidad WCAG, meta tags, atributos alt, contraste, touch targets en móvil, estructura de encabezados.
El resultado en el sitio de prueba: 15 correcciones de accesibilidad aplicadas automáticamente, 8 mejoras SEO, optimizaciones del formulario y de las interacciones táctiles. Todo eso sin escribir una sola línea de código manualmente.
Lo que esto significa en la práctica: el sitio producido es técnicamente correcto desde el inicio. No hace falta pasar por una auditoría externa para validarlo antes de la entrega.
Gestionar el feedback del cliente sin email, sin Slack
La última pieza del sistema es a menudo la más subestimada: cómo comunica el cliente sus modificaciones tras la entrega. La solución que propone este método: un formulario de solicitud de cambios integrado directamente en el sitio, conectado a una base de datos en Notion.
El cliente tiene una interfaz clara: tipo de solicitud (corrección de bug, ajuste de texto, nueva funcionalidad), descripción, prioridad. Todo llega a un tablero Notion que tú o Claude consultáis a diario.
Claude Code puede configurarse para procesar automáticamente las solicitudes sencillas (correcciones de texto) y alertarte solo sobre las modificaciones estructurales. Es un sistema de ticketing disfrazado de interfaz premium para el cliente.
El valor no está en el sitio. Está en el sistema alrededor del sitio. Un cliente que puede reportar un bug sin enviar un WhatsApp a las 23h es una relación que dura.
Lo que realmente cuesta
FireCrawl: gratuito para empezar (plan Free disponible). Nano Banana 2 vía Kling o Higgsfield: unos pocos créditos, menos de 5 euros por un vídeo en 1080p. Claude Code: suscripción Max o Pro. Anti-Gravity (el IDE utilizado en el tutorial): gratuito.
Coste total para producir un sitio con animación scroll, informe competitivo y portal de cliente: menos de 10 euros en costes variables. El sitio puede venderse entre 2 000 y 8 000 euros según el sector y el cliente. El margen es estructuralmente muy alto.
Este workflow no reemplaza a un estudio de diseño que hace trabajos a medida de 50 000 euros. Permite entregar sitios que parecen costar 8 000 euros con un coste marginal cercano a cero. Es un reposicionamiento, no una guerra de precios.
Lo que queda por hacer
Este tutorial cubre la creación. El hosting, el despliegue, la puesta en producción en un dominio del cliente: ese es el siguiente paso. Vercel, Netlify o un VPS sencillo según las necesidades. Claude Code también gestiona esta parte con los prompts adecuados.
La verdadera competencia aquí no es técnica. Es la capacidad de elegir los sectores adecuados, identificar a los clientes que entienden el valor de un sitio animado y empaquetar todo en una oferta clara. El resto lo hace el workflow.
Nano Banana 2 + Claude Code + FireCrawl: no es un atajo para hacer sitios mediocres más rápido. Es un nuevo nivel de calidad accesible sin formación en desarrollo.