Crea una Landing ESPECTACULAR con Claude Code
midudev • 146.0K views • 1d ago
Description
Convierto 6 fotos de un restaurante real en una landing que se recorre como una película, con Claude Code y el MCP de Higgsfield.
Conecta Higgsfield MCP a tu agente: https://midu.link/higgsfield
Vídeo patrocinado por Higgsfield.
Arko es un restaurante nikkei de Barcelona. Tenía seis fotos del local y con ellas hemos montado un paseo continuo: no hay cámara, son las fotos unidas con IA, y es el scroll el que la mueve. Bajas y avanzas; subes y vuelves a la puerta.
Qué vas a ver:
Qué es el MCP de Higgsfield: una sola conexión, más de 30 modelos de imagen y vídeo, y sin API keys
Cómo Claude Code sube las fotos, te dice el coste antes de generar y lanza los clips en lote, sin salir del terminal
El truco del primer y último fotograma con Kling 3.0 y MiniMax H3 para unir tramos sin que se note el corte
Vídeo controlado por el scroll con Astro, GSAP y Lenis
El skill de diseño de Elaya para que la landing no parezca hecha por una IA
Cómo pulirla en móvil y arreglar el rendimiento con Lighthouse
Enlaces:
Higgsfield MCP: https://midu.link/higgsfield
Código del proyecto: https://github.com/midudev/mcp-higgsfield-landing
Skill landing-page-design de Elaya: https://github.com/elayadesign/ai-design-skills
Skill scroll-world: https://github.com/oso95/scroll-world
El recorrido está animado con IA a partir de fotos reales del restaurante Arko de Barcelona.
Capítulos:
00:00 – Introducción
01:40 – Configurando el proyecto
05:18 – Instalando skill de landing Page
07:18 – Generando vídeo con IA a partir de imágenes
08:53 – Comparativa de modelos y precios
14:34 – Resultados de los modelos
15:47 – Generando el vídeo completo con MiniMax
18:50 – Resultado de los clips
20:20 – Coste final
22:14 – Resultado final de la web
23:19 – Scroll interactivo con vídeo
24:58 – Conclusiones
ClaudeCode Higgsfield MCP