Cómo crear una web profesional con Claude Code, Nano Banana y Kling

Una vez tienes clara la idea de la web (porque te la pide un cliente o porque es la tuya), el flujo tiene tres piezas:

1. Nano Banana, el generador de imágenes de Gemini: dos imágenes, un fotograma inicial y uno final. En la web de ejemplo, el inicial es un espacio vacío y el final el mismo espacio ya amueblado.
2. Kling 3.0: anima el paso de una imagen a otra. Se puede usar desde la web de Kling, donde una cuenta gratuita trae algunos vídeos de prueba, o desde una suite visual como Freepik, que es lo que uso yo porque ya tengo cuenta.
3. Claude Code como extensión de Visual Studio Code, con una skill de diseño que está en GitHub. No es mía: su autor la ha publicado de forma desinteresada.
4. Por último, publicar la web gratis en Vercel o en Netlify.

Necesitas Visual Studio Code con Claude Code instalado como extensión. Empecé por la web y, mientras Claude Code trabajaba, generé las imágenes. En un proyecto vacío, le pegué a Claude Code el enlace de la skill de diseño en GitHub y le pedí que la usara para diseñar una web de alta gama para una tienda de relojes analógicos. La skill son documentos Markdown con pautas y ejemplos de webs modernas; Claude Code se los descarga y sigue ese diseño.

A lo que ya trae la skill le añadí lo que quería para esta web en concreto:

• Una cabecera grande (hero header) con espacio para un vídeo de fondo, que añadiría después.
• Secciones con scroll suave y animaciones de entrada.
• Diseño minimalista y premium, con tipografías elegantes y grandes.
• Paleta de colores oscura con acentos sutiles.

Los prompts exactos que usé están en el recurso gratuito que enlazo más abajo.

En Gemini pegué el primer prompt y obtuve la imagen inicial; con el segundo, la final, con el reloj ya montado. Descargué las dos.

En Freepik elegí el modelo Kling 3.0 Omni, subí la imagen inicial y la final y pegué el prompt de la animación. Lo dejé en calidad superior, 10 segundos de duración y formato 16:9, que no se puede cambiar. En unos 3 minutos tenía el vídeo: el reloj se va ensamblando poco a poco hasta quedar completo, en horizontal, a 1080 y 24 fotogramas por segundo.

Si algo no sale bien, se puede repetir con otro prompt o con mejores imágenes de partida. Ten en cuenta que cada generación gasta créditos si tienes cuenta de pago; con la cuenta gratuita de Kling tienes pocos vídeos.

Claude Code terminó con un resumen de lo que había construido siguiendo la skill: el index.html, los estilos, el scroll, la navegación flotante y la móvil, y los principios de diseño aplicados (paleta, tipografía, botones). Le pedí un enlace para verla en local y ahí estaba: efectos al pasar el ratón, un carrusel, testimonios, un formulario de contacto y el pie de página. Las fotos eran de stock, provisionales.

Arrastré el vídeo de Kling al proyecto y se lo pedí así:

Te acabo de proporcionar el vídeo que queremos que tenga el banner principal. Por favor, ponlo de fondo para que quede lo más estético posible.

Lo integró en el fondo de la cabecera y, al recargar, el paso entre el vídeo y el resto de la web apenas se notaba. Lo único que cambié fueron las fotos de la sección de colección:

Quiero que cambiéis las imágenes que están en la sección de colección por imágenes de relojes analógicos.

Hasta aquí la web solo existe en tu ordenador. Para publicarla hay dos opciones con plan gratuito: Netlify, donde puedes subir tus proyectos (por ejemplo desde Git) y añadir un dominio propio, y Vercel, cuyo plan gratuito también admite dominios personalizados. El dominio, eso sí, hay que comprarlo aparte.

Como yo tengo Vercel conectado a Claude Code, solo le escribí «Ahora quiero que publiques la web en Vercel». Si prefieres Netlify, pídeselo igual; probablemente tengas que crearte una cuenta, y del resto se encarga Claude Code. En unos 15 segundos la web estaba en línea.

Todo el proceso me llevó unos 15-20 minutos, aunque depende de lo que tarde Claude Code y de cuántas correcciones quieras hacer. Yo solo hice una, le di el vídeo y cambié algunas imágenes. Un detalle que me gustó: la web añadió un difuminado negro para que no se viera el final del vídeo.

• Kling
• Freepik (suite visual con Kling 3.0)
• Descargar Claude
• Skill de diseño web taste-skill (GitHub)