Tu página web que avanza como una película
Se llama web-cinematica y es gratis. Es una skill para Claude Code que te arma una página donde el visitante baja y el video avanza al ritmo de su dedo, como las páginas de producto de Apple. Los videos los generas con IA en Higgsfield y no necesitas saber programar: la skill te guía de a una pregunta, desde crear tu cuenta hasta tener la página publicada.
Mira la demo y baja despacio ↓
Qué es
Una skill es como el manual que le pasas a un trabajador nuevo antes de que empiece. Se lo das a Claude y, en vez de improvisar, trabaja con un método probado.
Esta skill enseña a Claude a hacer páginas de scrollytelling, que es contar una historia con el scroll. En la demo, la cámara parte dentro de un auto, sale, la puerta se cierra, el auto gira y arranca hacia la costa, todo en un solo plano que avanza y retrocede con tu dedo. Son cinco videos de cinco segundos, empalmados para que se vean como uno solo.
El auto es solo el ejemplo. Tú eliges qué mostrar: la skill arma la historia, los videos y la página con tu producto, tu lugar o tu marca.
Qué puedes crear
Funciona con cualquier cosa que tenga un protagonista que se vea en todas las escenas.
Un producto
Una botella de perfume que gira bajo la luz, una zapatilla que se ve por dentro, un reloj que se acerca hasta el último detalle.
Una casa o un departamento
La cámara entra por la puerta, recorre el living y termina en la terraza con la vista. Ideal para una inmobiliaria o un arriendo.
Un restaurante o una cafetería
Del grano al café servido, o del ingrediente al plato terminado, con la carta y el botón de reservar al final.
Un auto o una moto
Como la demo: desde el tablero hasta la carretera, con las cifras y los modelos al final.
Un lugar o un viaje
Un hotel, una viña, una cabaña en el sur. La cámara llega desde lejos y termina en el detalle que enamora.
El lanzamiento de una marca
Para presentar algo nuevo con impacto, o para mostrarle a un cliente lo que eres capaz de hacer.
Cómo trabaja contigo
Claude hace el trabajo técnico. Tú decides la historia, apruebas cada gasto y miras el resultado.
- La idea
Te pregunta qué quieres mostrar, qué tiene que sentir quien la vea y qué tiene que hacer al final, como escribirte por WhatsApp o reservar.
- La historia
Te propone la historia en 4 a 6 momentos, como un solo plano de cámara. No gasta nada hasta que la apruebes.
- La imagen principal
Genera la foto del protagonista, de la que nacen todos los videos. Si tienes fotos reales de tu producto, las usa de referencia.
- Los videos
Escribe cada prompt, te muestra cuánto cuesta y genera recién con tu sí. Cada video parte del último cuadro del anterior, para que no se note el corte.
- La música
Te ayuda a elegir una pista gratis y libre de derechos en Pixabay. Si no quieres música, se salta este paso.
- La página
Arma todo con una plantilla lista: los videos que avanzan con el scroll, tus textos, tus colores y el botón final.
- La revisión
Te deja la página funcionando en tu computador para que la mires en el escritorio y en el celular antes de publicarla.
- La publicación
La sube a Vercel, que es gratis, y te entrega el link.
Qué necesitas y cuánto cuesta
Claude Code
Es el Claude que trabaja directo en tu computador. En el chat normal no funciona, porque necesita correr programas. Viene con tu plan de Claude. Si no lo tienes, en esta guía te explico cómo instalarlo.
Saldo en Higgsfield
Es donde se generan las imágenes y los videos. Cargas saldo una vez, desde US$5, y se descuenta solo lo que generas. Una página completa cuesta entre US$3 y US$5.
Node.js y Vercel
Node.js es un programa gratis que usan las herramientas de la skill, y Vercel es donde se publica la página, también gratis. Si te falta alguno, la skill te guía.
La skill usa la API de Higgsfield, que es una cuenta aparte de los planes de su página. No pagas mensualidad: cargas saldo y pagas solo lo que generas. Aunque ya tengas cuenta en higgsfield.ai, para esto tienes que crear la de API.
Tu cuenta de Higgsfield, paso a paso
La skill te lleva por esto cuando lo necesites, pero si quieres dejarlo listo antes, son cinco minutos.
- Crea la cuenta
Entra a open.higgsfield.ai ↗ y regístrate. Puedes usar tu cuenta de Google. Si te pregunta, elige cuenta personal.
- Carga saldo
Entra a Billing, agrega tu tarjeta y carga US$10. Alcanza para la página y para repetir los videos que no te gusten. No actives la recarga automática: así nunca se cobra más de lo que cargaste.
- Crea tu clave
Entra a API Keys y crea una clave nueva. Higgsfield te la muestra una sola vez, así que no cierres esa ventana hasta que la skill te pida pegarla.
- Pégala donde te diga la skill
La skill te abre un archivo de texto en tu computador. Pegas la clave ahí, guardas y listo. Queda guardada fuera de la página, así que nunca se publica por error.
Nunca la pegues en el chat ni se la mandes a nadie: con ella se puede gastar tu saldo. Si alguna vez se te escapa, bórrala en API Keys y crea otra.
Cómo se instala, con un solo mensaje
Con Claude Code abierto, copia este mensaje y pégalo. Después solo sigue lo que te diga.
Instala la skill web-cinematica en mi computador: https://github.com/Thealvarro/web-cinematica Descárgala en la carpeta de skills de Claude Code: en Mac o Linux es ~/.claude/skills/web-cinematica y en Windows es %USERPROFILE%\.claude\skills\web-cinematica. Si no tengo git, bájala como ZIP y descomprímela ahí. Hazlo tú de principio a fin, yo no sé de programación. Revisa también que tenga Node.js versión 20.12 o más nueva; si no lo tengo, dime exactamente cómo instalarlo, de a un paso. Cuando termines, avísame si tengo que cerrar y volver a abrir Claude.
Cierra y vuelve a abrir Claude Code y escribe /web-cinematica. Si Claude te saluda y te empieza a preguntar por tu página, está lista.
Úsala con estos mensajes
Copia uno y cambia lo que está entre corchetes por lo tuyo.
/web-cinematica Quiero una página para [lo que quieres mostrar]. Al final quiero que la gente [me escriba por WhatsApp, reserve, compre]. Guíame paso a paso, de a una pregunta.
/web-cinematica Quiero una página para mi producto [nombre]. Tengo fotos reales en [arrastra las fotos o dime la carpeta]. Úsalas de referencia para que los videos se parezcan a mi producto de verdad.
/web-cinematica Quiero una demo para mostrarle a un cliente que tiene [tipo de negocio]. Invéntale una historia que lo enamore, con su rubro como protagonista, y mantén el gasto bajo US$4.
/web-cinematica En mi página [nombre de la carpeta] quiero [cambiar un texto, cambiar los colores, que un video vaya más lento]. Antes de generar algo nuevo, dime si se puede resolver sin gastar.
Consejos para que quede bien
Un solo protagonista
La magia está en que el mismo objeto se vea en todas las escenas. Si cambias de protagonista a la mitad, se rompe la ilusión.
La historia siempre avanza
Si la cámara gira a un lado, que no se devuelva al otro. Eso se ve raro, y la skill ya sabe evitarlo.
Antes de repetir, recorta
Si un video sale bien a la mitad y mal al final, se usa solo la parte buena. Recortar es gratis; volver a generar no.
De quién es
La hice yo, a partir de la demo del Halcón, con todo lo que aprendí armándola: qué prompts funcionan, cómo empalmar los videos y qué errores evitar. Tiene licencia MIT, o sea que la puedes usar libremente, también para tu negocio o el de tus clientes. Ver el repositorio ↗
Si te sirvió esto, en recursos tengo más cosas del mismo estilo, todas gratis y explicadas para gente que no programa.