Genera sitios web con assets de IA realistas usando Higgsfield MCP y Claude Code

Si estás generando muchos proyectos con IA, ya sea con editores de código o agentes de terminal, seguramente ya te diste cuenta de que una parte importante del proceso es generar los assets. Y dependiendo del proveedor de IA que uses, el resultado puede verse realista o no.

En este artículo te muestro cómo generar un sitio web completo usando Higgsfield, una plataforma que permite crear contenido audiovisual de todo tipo: imágenes, videos, fotos de productos, anuncios y mucho más, utilizando múltiples modelos de IA. Vamos a probar su MCP y su herramienta de consola (CLI) para integrarlo con cualquier agente de IA, y con todo esto vamos a construir un sitio con:

• Un hero con video animado generado por IA
• Imágenes de productos que combinan con la temática del sitio (se analizan los colores y la distribución del contenido, no son imágenes al azar)
• Un layout poco común, nada de las típicas tarjetas y formularios de los sitios generados con IA
• Una sección administrativa funcional con Supabase como backend
• Todo desplegado en una dirección de internet

¿Qué es Higgsfield?

Higgsfield es una plataforma bastante popular para generar contenido audiovisual de todo tipo: imágenes de productos, diseños publicitarios, videos e incluso cinemáticas. Puedes usarla directamente desde su interfaz web con múltiples modelos de IA, pero hoy vamos a usarla de una forma más automatizada: a través de un agente de código usando un MCP (Model Context Protocol).

El MCP nos permite conectar nuestras herramientas de IA a la plataforma. Esto significa que si estamos creando, por ejemplo, una tienda virtual, podemos pedirle a Higgsfield la generación de videos e imágenes, y no lo va a hacer al azar: entiende el contexto de nuestro sitio y genera assets acordes a lo que necesitamos.

Higgsfield ofrece tres formas de conexión:

1. MCP: para conectar desde agentes como Claude, ChatGPT, Cursor, OpenClaw o Hermes
2. CLI: una herramienta de consola, ideal para agentes de terminal
3. Skills: se unen al CLI y le indican al agente qué comandos tiene disponibles, ahorrándole trabajo

Conectando el MCP con Claude

El proceso es muy simple. Desde la página de Higgsfield copiamos la URL del MCP y en Claude vamos a la sección de conectores. Solo hay que añadir dos cosas: el nombre de la integración (por ejemplo, "Higgsfield") y la URL que acabamos de copiar. Le damos en agregar, luego en conectar, aceptamos los permisos y listo.

Para comprobar que funciona, en el chat de Claude, dentro de la sección de conectores, ya debería aparecer Higgsfield como uno de los MCPs habilitados.

Primer test: un video publicitario

Vamos a pedir algo como:

Crea un video publicitario de un Mac Mini

Lo primero que pasa es que Claude busca entre sus herramientas, sabe que él no puede generar videos y pregunta si queremos usar Higgsfield. Le indicamos el formato (horizontal, en este caso) y permitimos la llamada a la herramienta.

Aquí aparece una interfaz donde podemos seleccionar una imagen de referencia. En lugar de continuar con la sugerida, podemos pausar la ejecución y subir nuestra propia imagen usando el widget de carga (lo recomendable cuando usamos el MCP). El archivo se sube a la plataforma y se usa para generar el video.

Mientras se genera, el agente puede seguir trabajando: incluso le pedí una segunda versión en formato vertical y ambas generaciones corrieron en paralelo desde la propia plataforma. No necesitamos esperar; podemos avanzar en otras actividades mientras se generan los assets.

El resultado: un video realista promocionando el dispositivo, con opciones para descargarlo, regenerarlo desde cero o analizarlo con la herramienta de predicción de viralidad.

Predicción de viralidad

Esta herramienta analiza el video reproduciéndolo y evalúa qué tan viral puede ser en redes sociales, entregando un reporte con métricas que van variando a lo largo de la duración, además de un puntaje total. En mi caso, el video obtuvo 50 de 100 puntos, con un gancho inicial de apenas 33. Con esto podemos comparar entre los videos que generamos y decidir cuál subir o cuál tendría mejor enganche.

El CLI y los skills para agentes de terminal

Si usas herramientas que funcionan principalmente en terminal, como OpenClaw, Hermes, Claude Code o Codex, puedes usar el CLI de Higgsfield, que se complementa con los skills.

Instalación

El CLI se instala con un comando de npm (necesitas Node instalado; si no lo tienes, descárgalo desde nodejs.org):

npx higgsfield-cli

Luego nos autenticamos:

higgsfield auth login

Esto abre el navegador para dar permisos, igual que con el MCP.

Instalando los skills

Después del login, la propia herramienta sugiere instalar los skills. Al ejecutar el instalador aparece un menú donde seleccionamos qué características queremos habilitar:

• Higgsfield Generate: para generar imágenes, videos, archivos 3D, audio y prácticamente cualquier contenido
• Higgsfield Websites: para que genere sitios web completos (frontend, backend, e incluso usa Generate para las imágenes)

Hay más skills disponibles (personajes con IA, imágenes de productos, videos promocionales), pero estos dos son los que usaremos.

Luego elegimos para qué agentes instalarlos. Por defecto está la opción universal (disponible para todos los agentes), o puedes buscar uno específico como Claude Code. Finalmente escogemos si instalarlo a nivel de proyecto o nivel global. Yo recomiendo global: quedará disponible en todo tu computador, así que si abres VS Code, OpenCode, Codex o cualquier otra herramienta, podrá llamar al skill.

Generando contenido desde Claude Code

Con los skills instalados, en Claude Code basta con escribir /higgsfield para ver los dos skills disponibles: generate y websites.

Con generate incluso podemos indicar qué modelo de IA usar, si queremos imagen o video, o simplemente lanzar un prompt:

Crea una imagen de un iPhone 16 de color negro y rojo

Lo interesante es que el agente llama los comandos por nosotros: no tenemos que ejecutar manualmente los comandos de Higgsfield, él ya sabe cuáles lanzar. Después de un momento obtenemos una URL con la imagen generada, que podemos abrir en el navegador y a partir de ahí convertirla en video o crear contenido promocional inspirado en el producto.

Supercomputer: generando un sitio web completo

Higgsfield tiene una sección llamada Supercomputer con la que puedes crear diseños de sitios web, generar el código de aplicaciones web e incluso juegos que funcionan en el navegador.

Vamos a probarlo con este prompt:

Crea un landing page acerca de productos de ropa y accesorios de verano.
Solo crea la UI de momento, conformada por:
- Un hero section
- Un grid de seis productos
- Completa el resto del diseño tú mismo

Como estamos generando un sitio, nos da algunas opciones: si queremos publicarlo (le dije que no por ahora, solo la URL), si compartirlo en su sección de comunidad, y el nombre de la marca (le pedí que lo inventara).

La generación se organiza por fases (fase 0, 1, 2...) y toma su tiempo: en mi caso, unos 42 minutos. Pero el resultado vale la pena:

• Un sitio completo con tema consistente
• Imágenes de productos y accesorios que coinciden con la temática
• Un diseño peculiar, nada de la típica estructura de recuadros con grillas

Y todo esto dejándole el trabajo completo a la IA; podríamos haberle dado más indicaciones como colores o dirección de diseño.

Iterando sobre el sitio

Supongamos que en el hero no queremos una imagen sino un video. Se lo pedimos con el skill de generate:

Crea un video a partir de la imagen del hero y luego actualiza el sitio

El agente confirma que el video encaja con la estética del sitio, lanza los comandos de Higgsfield y lo genera en background. El resultado no es solo un video puesto al azar: añade un efecto donde la imagen se va extendiendo a medida que hacemos scroll.

También le pedí que colocara el nombre de la marca en la parte izquierda del hero, y lo hizo manteniendo la estética del sitio.

Secciones dinámicas

No solo podemos generar el landing, también partes dinámicas:

Crea una sección de galería de productos como página dedicada,
con posibilidad de filtrar y buscar productos,
además de páginas dedicadas por cada producto.
Genera también las imágenes.

El resultado: una sección "Ver la colección" con su página dedicada, filtros funcionales, buscador, y páginas individuales por producto. Y aquí es donde se nota la importancia de generar las imágenes con IA: cada imagen coincide con el tema del resto del sitio, hasta el punto de parecer imágenes editadas profesionalmente. Todo generado con un prompt.

Acceso al código: es un proyecto de React real

El sitio ya está desplegado en un dominio y podríamos compartirlo, pero además tenemos acceso al código. Aunque parezca un simple landing con HTML, en realidad es un proyecto de React con lógica de frontend real, lo que significa que podemos abrirlo desde Cursor o cualquier editor y conectarlo con Supabase o servicios similares.

Para probarlo, abrí el proyecto en Cursor y pedí:

Crea una sección de login y register para los usuarios,
de momento solo en UI, usando el mismo tema de la aplicación

Como los skills están instalados a nivel global, también desde Cursor podemos llamar el skill de Higgsfield Websites para continuar el desarrollo. El resultado fue aceptable (siguió la idea del diseño), aunque los inputs no lucían del todo bien. Esto se explica en parte por el modelo: mientras que en Claude estaba usando Opus, en Cursor estaba con Composer. Tengan en cuenta el modelo que usan para obtener el mejor resultado, aunque gran parte del trabajo de diseño lo hace Higgsfield.

Integrando Supabase: de landing a sitio dinámico

Para el paso final, volvemos a Claude Code con un prompt más pesado:

Mejora el diseño del login y register.
Crea un dashboard interno de administración del sitio.
Integra Supabase y haz un seed de datos de prueba.

Aquí el agente arma sus fases porque son modificaciones grandes. En mi proyecto ya tenía instalado el CLI de Supabase para conectarse a la plataforma, pero también puedes usar su MCP; el proceso es muy similar a lo que hicimos con Higgsfield.

La reescritura tomó alrededor de 26 minutos, y el resultado con Opus 4.8 más las imágenes de Higgsfield luce bastante bien; no parece una aplicación generada con IA:

• El login y register quedaron rediseñados con la estética del sitio
• Al registrarme como usuario normal, me envía directo a la tienda (no tengo acceso al panel)
• Le pedí "dame las credenciales del admin" y el agente hizo una migración en la base de datos para asignarle el rol de administrador a mi usuario
• Con el nuevo rol, ya tengo acceso a un panel de administración que combina con el diseño, incluso con detalles como un seguidor de scroll en el lateral

Para comprobar que todo es dinámico, oculté un producto desde el panel, refresqué el sitio y efectivamente desapareció. Pasamos de un simple landing page a una página donde podemos administrar los productos.

Y si entramos a la cuenta de Supabase, ahí están las tablas: los datos del administrador, los productos registrados y las referencias de las imágenes. De momento se leen desde el frontend, pero también podríamos pedirle que las guarde en el storage de Supabase. Al final, depende de lo que le pidas a la IA.

Conclusión

Como pueden ver, es bastante sencillo generar un sitio único usando el MCP de Higgsfield. Terminamos con un sitio dinámico, con secciones funcionales conectadas a una base de datos, y un diseño que podemos seguir iterando con más prompts.

Lo más destacable es la calidad de los assets: las imágenes y fotos no parecen generadas con IA y mantienen coherencia con todo el sitio. Y esto es solo uno de los usos del MCP, porque desde la plataforma también puedes:

• Generar un nuevo video a partir de un video de YouTube
• Convertir fotos de tus productos en videos promocionales
• Crear personajes con IA
• Hacer presentaciones de productos con animaciones

Higgsfield es una plataforma que genera todo tipo de contenido audiovisual, y a través del MCP simplemente le damos a nuestros agentes una forma más fácil de aprovechar todos sus modelos de IA.