Página web con animaciones al hacer scroll, con Claude Code

En Visual Studio Code, Juan Pe abre la carpeta del kit de la skill, que trae una carpeta de recursos (assets) para fotos y vídeos, el archivo CLAUDE.md y las instrucciones. Al pedirle una web con efecto scroll para un negocio, la skill pregunta el nombre y a qué se dedica. Hay dos caminos: crearla desde cero con tus datos o partir de la web de un negocio que se puede mejorar. Este segundo camino sirve para enseñarle al dueño una propuesta ya hecha. Para trabajar sin interrupciones activa el modo que no pide permiso, que se habilita en los ajustes de la extensión de Claude Code.

Ver la respuesta en el vídeo · 39:40

La animación necesita un vídeo. Juan Pe lo crea en Higgsfield, una plataforma que reúne modelos de IA para imagen y vídeo, y lo explica primero con una foto de un mono:

• Claude Code descarga la imagen de la cabecera de la web original.
• Con Nano Banana 2 edita esa imagen: la fachada con café saliendo por la puerta.
• Un modelo de vídeo une la imagen inicial y la final en una transición de unos 6 segundos.
• Descarga el vídeo; también vale un vídeo grabado sin IA.

Ver la respuesta en el vídeo · 43:20

Con el vídeo en la carpeta de descargas, Claude Code lo encuentra y monta la web. En la nueva versión, el vídeo de la cabecera avanza al bajar y retrocede al subir, y el efecto se puede aplicar a otras secciones. La skill está preparada para no inventar datos: usa la carta, las fotos y los precios reales de la web original, y no añade testimonios que no existen. Si prefieres controlarlo tú, mete fotos y vídeos en la carpeta assets. El kit también tiene carpetas ocultas con más ajustes, que en Mac se muestran con un atajo de teclado.

Ver la respuesta en el vídeo · 51:20