Lo que me hizo prestar atención no fue el neón. Fue el casco.
Imagina una sección hero oscura, envuelta en niebla — una figura solitaria en un exotraje cromado, con el aliento visible, un planeta colgando bajo en el fondo. Debajo, una fila de productos: tres tomas aisladas de cascos, cada una sobre un fondo transparente limpio, flotando en sus tarjetas como si hubieran sido fotografiadas en un estudio real. Y el mismo rostro del personaje, reconocible, presente en cada sección. Sin diseñador. Sin fotógrafo. Sin maratón de pluma de Photoshop para recortar fondos. Todo se ensambló solo en una única ventana de terminal mientras un archivo de diseño estaba abierto en otra pestaña.
Ese es el flujo de trabajo que quiero mostrarte: construir una landing page sci-fi con Figma, Claude Code y Higgsfield como un pipeline conectado, donde el diseño comienza en Figma, el desarrollo ocurre en Claude Code, y cada imagen y video se genera y se conecta sin salir nunca del editor. Al final serás capaz de entregar un diseño de Figma a Claude Code, generar personajes consistentes y fotos de producto aisladas bajo demanda, convertir una imagen fija en un video activado por scroll, hacer todo responsive, y publicarlo gratis en Cloudflare Pages.
Seré directo contigo sobre qué es práctico y qué es el flujo documentado, porque la segunda mitad de esto — los trucos de generación de assets y la automatización del deploy — es donde la mayoría de tutoriales se ponen vagos y te quedas atascado. Eso no va a pasar aquí. Déjame mostrarte por qué esta combinación específica de tres herramientas cruzó una línea en 2026 que antes no había cruzado.
Por Qué Este Pipeline de Figma-a-Producción Funciona de Repente en 2026
Tres piezas llegaron lo suficientemente cerca unas de otras como para que las costuras entre ellas básicamente desaparecieran.
Primero, el servidor MCP de Dev Mode de Figma maduró hasta convertirse en algo que Claude Code puede leer de verdad. Expone contexto de diseño estructurado — componentes, variables, datos de layout, incluso contenido de FigJam — directamente a una herramienta de codificación agéntica en lugar de forzarla a adivinar a partir de una captura de pantalla plana. La demanda pasó de esencialmente cero a aproximadamente 2.400 búsquedas mensuales en febrero de 2026, lo que te dice lo rápido que se está extendiendo este patrón de handoff. El 24 de marzo de 2026, Figma lo amplió aún más para que los agentes puedan trabajar directamente en el canvas, y la función es gratuita durante la beta (pasará a precios basados en uso después).
Segundo, el 30 de abril de 2026, Higgsfield lanzó su servidor MCP oficial — un endpoint alojado que expone más de 30 modelos de imagen y video a través de una única conexión. Seedance 2.0, Sora 2, Veo 3.1, Kling 3.0 para video; Nano Banana Pro, Soul 2.0, Flux 2, GPT Image 2 para imágenes. Sin API keys que gestionar, sin SDKs por modelo. Te autentificas una vez con OAuth en el navegador, y Claude Code puede pedirle a cualquiera de esos modelos una imagen hero o un clip cinematográfico desde la misma sesión en la que está escribiendo tu CSS.
Aquí está la conexión que la mayoría pasa por alto. El agente que escribe tu markup es el mismo agente que genera los assets que ese markup necesita. La foto del casco se genera, se descarga en tu carpeta public/, y se referencia en el componente — todo en un bucle continuo, todo sin abrir una segunda aplicación. Eso es lo que comprime una línea de tiempo de varias semanas de diseño-desarrollo-sesión-de-fotos en una tarde.
He construido pipelines creativos sobre esta base antes, y documenté una versión temprana en mi build de agencia creativa automatizada con Claude y Higgsfield. Lo nuevo aquí no son las herramientas individualmente — es que Figma ahora alimenta el diseño limpiamente en la parte superior, y Cloudflare captura el deploy en la parte inferior, así que toda la cadena funciona sin salir del terminal.
Una corrección de nombre antes de continuar, porque las transcripciones automáticas destrozan esto constantemente: MCP significa Model Context Protocol. Es el estándar abierto que permite a un agente de IA comunicarse con herramientas externas y fuentes de datos a través de una interfaz consistente. No es una "plataforma de contenido multimodal." Tanto Figma como Higgsfield exponen sus capacidades a Claude Code a través de MCP — ese protocolo compartido es la razón por la que este pipeline funciona como un todo.
Entonces, ¿dónde empieza realmente el diseño? En Figma — y cómo lo llevas a Claude Code es la primera decisión real.
Diseñando el Layout Sci-Fi Primero en Figma
Todo comienza con un layout, no con un prompt. Ese orden importa más de lo que parece.
Cuando dejas que Claude Code invente un layout desde cero, obtienes algo plausible — un hero, algunas tarjetas, un footer — pero deriva hacia lo genérico. Una landing page sci-fi futurista vive o muere por la composición intencional: dónde está el espacio negativo, cómo viaja el ojo desde el titular hasta la fila de productos, dónde pertenece un video y dónde sería solo ruido. Esa es una decisión de diseño, y las decisiones de diseño pertenecen a una herramienta de diseño.
Así que el flujo de trabajo abre en Figma con un layout completo de la landing page sci-fi ficticia:
- Una sección hero con un fondo oscuro y atmosférico y un único punto focal fuerte
- Un titular y subtitular con jerarquía tipográfica deliberada
- Una fila de productos — tarjetas con objetos aislados (en el build fuente, cascos sci-fi)
- Una o más secciones construidas para contener video corto en bucle o activado por scroll
- Una barra de navegación que necesita colapsar elegantemente en pantallas más pequeñas
No estás terminando el diseño visual aquí. Estás fijando la estructura e intención — lo que Claude Code es genuinamente malo inventando y genuinamente bueno ejecutando una vez que se le da. Piensa en Figma como donde tomas las decisiones difíciles de gusto, y Claude Code como el ingeniero que construye exactamente lo que especificaste.
Una nota de honestidad: no necesitas ser un maestro de Figma para esto. Incluso un layout tosco pero deliberado supera la ausencia de layout. El objetivo es darle al agente un plano claro, no una obra maestra pixel-perfect.
Ahora la decisión que hace tropezar a la gente — meter ese diseño en Claude Code. Hay dos caminos, y no son iguales.
Exportación JPEG vs Figma MCP: Qué Handoff Usar
Hay dos formas de llevar un diseño de Figma a Claude Code, y elegir la correcta depende enteramente de si pagas por Figma.
Camino uno — exportar todo el diseño como un único JPEG. Aplanas todo el layout en una imagen, la sueltas en tu sesión de Claude Code, y le dices al agente que construya un sitio web que lo replique. Esta es la opción básica, más barata, y funciona. Los modelos de clase Claude Fable tienen suficiente visión para mirar una captura de página completa, entender el layout, y reproducir la estructura en HTML y CSS. Si estás en un plan gratuito de Figma o solo estás bocetando, esta es tu ruta.
La contrapartida: un JPEG es plano. El agente ve píxeles, no estructura. No puede leer tus tokens exactos de spacing, tus variables de color, ni qué elementos son componentes versus piezas únicas. Infiere todo eso — generalmente bien, a veces no. Gastarás más prompts de seguimiento corrigiendo spacing y color que con el camino más rico.
Camino dos — el servidor MCP de Figma Dev Mode. Esta es la ruta recomendada si tienes una suscripción a Figma que incluye Dev Mode. En lugar de una imagen plana, Claude Code lee el contexto de diseño estructurado directamente del archivo: componentes, variables, datos de layout, todo. El MCP de Figma "convierte diseños de Figma en código preciso llevando el contexto de Figma directamente a herramientas de codificación agénticas," que es exactamente lo que quieres — el agente no adivina tu spacing, lo lee.
La configuración es breve. Según la propia guía de setup de Figma:
- Abre tu archivo de Figma Design sin nada seleccionado en el canvas.
- Cambia a Dev Mode usando el toggle en la barra de herramientas.
- Habilita el servidor MCP desde la barra lateral derecha.
- En Claude Code, añade la conexión MCP de Figma y apunta al agente al frame que quieres construir.
Luego le dices a Claude Code algo como: "Lee el frame seleccionado de Figma vía el MCP y constrúyelo como una landing page responsive. Usa las variables de diseño para color y spacing — no inventes valores." Esa última frase importa. Sin instrucción, el agente a veces redondeará tu spacing a números "bonitos". Dile que respete los tokens.
Profundicé más en hacer que Claude realmente respete un design system — tokens, componentes y todo — en mi flujo de trabajo de design system con IA, Claude y Figma. Si te importa un output que no lea como basura genérica de IA, ese artículo complementa directamente este.
Mi recomendación honesta: si pagas por Figma, usa el camino MCP. La diferencia de fidelidad en spacing y color es real, y te ahorra una docena de prompts de corrección más adelante. Si no pagas, el camino JPEG es completamente viable — simplemente cuenta con unas cuantas rondas extra de refinamiento. De cualquier forma, el diseño está ahora en Claude Code. Ahora le damos una forma de hacer los assets.
Conectando el MCP de Higgsfield a Claude Code
Este es el puente que transforma "un esqueleto codificado" en "una página terminada y rica en imágenes." Y la configuración es genuinamente de una sola línea.
El conector de Higgsfield es un servidor MCP alojado, así que no alojas nada tú mismo ni gestionas API keys. Abre tu terminal y ejecuta:
# Añadir el servidor MCP de Higgsfield a Claude Code a nivel de usuario
claude mcp add --transport http --scope user higgsfield https://mcp.higgsfield.ai/mcp
Claude Code maneja la autenticación a través de un flujo OAuth en el navegador — sin API keys que pegar, sin archivo .env que mantener. Las generaciones consumen créditos de tu plan de Higgsfield. Una vez conectado, el agente puede alcanzar cada modelo en la plataforma Higgsfield desde tu sesión de build: más de 30 generadores de imagen y video, output hasta 4K, clips hasta 15 segundos en cualquier relación de aspecto.
Un par de realidades de configuración que vale la pena mencionar honestamente, porque el walkthrough fuente las pasa por alto:
- Los pasos exactos del conector más allá de este comando no están profundamente documentados en cada tutorial. Los docs oficiales de Higgsfield y el comando de arriba son tu fuente de verdad; trata los pasos de terceros como una verificación de cordura, no como evangelio.
- Verifica la conexión antes de construir. Después de añadirlo, ejecuta
claude mcp listen tu terminal para confirmar quehiggsfieldaparece como conectado. Si OAuth no se completó, arréglalo ahora — depurar un MCP medio conectado en medio de un build es miserable.
Una vez que eso está en vivo, aquí está el modelo mental que hace que el resto encaje: ya no "vas a hacer una imagen y vuelves." Te quedas en la conversación de build y pides la imagen. "Genera un fondo hero: paisaje urbano alienígena oscuro y neblinoso, luz de borde azul fría, cinematográfico, 16:9." Claude Code lo enruta al modelo Higgsfield correcto, recibe el asset de vuelta, y tú le dices dónde conectarlo. El cambio de plataforma que solía romper tu concentración simplemente... desaparece.
Si prefieres que alguien construya exactamente este setup de Figma-a-Higgsfield-a-Cloudflare por ti, acepto encargos de desarrollo de IA y automatización — puedes ver lo que he construido en fiverr.com/s/EgxYmWD.
Ahora la parte divertida: generar realmente los assets sci-fi, y el truco de consistencia que separa una página real de un moodboard.
Generando Assets Sci-Fi Consistentes con Nano Banana Pro
La diferencia entre un sitio de IA amateur y uno convincente es la consistencia. Aquí es donde la elección de modelo deja de ser trivia y se convierte en todo el juego.
Nano Banana Pro — el modelo de imagen potenciado por Gemini de Google, al que la comunidad apodó "Nano Banana" — es al que recurrir cuando los assets necesitan relacionarse entre sí. Está especializado en continuidad y consistencia de personajes: el mismo rostro, el mismo lenguaje de iluminación, la misma sensación de material a través de todo un conjunto de imágenes. Para una landing page donde un personaje aparece en el hero y un producto aparece en tres tarjetas, esa coherencia es lo que vende la ilusión de que un solo director de arte hizo todo.
Aquí está la secuencia realista de assets para una página sci-fi, en el orden en que realmente sucede:
- Fondo hero. Un plano general atmosférico amplio — el paisaje urbano, el planeta, la niebla. Genéralo en 16:9 y sobredimensionado para tener margen de recorte.
- El personaje. Una figura consistente que puedes reutilizar. Nano Banana Pro mantiene la identidad entre generaciones, así que la persona en tu hero puede reaparecer en un testimonial o una sección secundaria sin parecer un modelo diferente.
- Fotos de producto aisladas. Los cascos, los gadgets — generados como objetos limpios estilo estudio. Estos van en las tarjetas de producto.
- Acentos de sección. Visuales de apoyo más pequeños, iconos con profundidad, texturas de fondo.
Un consejo práctico de consistencia extraído directamente de cómo se comporta el modelo: aliméntalo con imágenes de referencia fuertes (alta resolución, múltiples ángulos) y usa lenguaje explícito de preservación de identidad en el prompt — literalmente dile que "mantenga el rostro y el exotraje del personaje exactamente igual que la referencia." La generación de un solo intento deriva; el refinamiento iterativo con una referencia fija mantiene. Eso no es un prompt mágico, es simplemente respetar cómo el modelo mantiene la continuidad.
Una limitación honesta: la consistencia es fuerte, no perfecta. A lo largo de una serie larga de generaciones aún obtendrás el fotograma ocasional donde la mandíbula está ligeramente desviada o el panel del traje cambia. Cuenta con una o dos regeneraciones por asset crítico. Sigue siendo minutos de trabajo versus medio día de sesión fotográfica — pero "configúralo y olvídate" lo exagera.
Tienes imágenes ahora. Pero un casco con fondo blanco no encaja limpiamente en una tarjeta sci-fi oscura. Ese es el siguiente problema, y tiene una solución limpia.
Convirtiendo Fondos Blancos en PNGs Transparentes para Layering
Aquí hay algo pequeño que hace una diferencia desproporcionada: una foto de producto aislada generada sobre fondo blanco se ve mal en una página oscura. El recuadro blanco alrededor del casco mata el efecto de flotar en el espacio al instante.
La solución es convertir esos assets a PNGs transparentes para que el objeto se superponga limpiamente sobre lo que haya detrás. Dentro de este pipeline no sales del editor para hacerlo — le pides al MCP de Higgsfield que procese la imagen, eliminando el fondo blanco y exportando un PNG transparente. El casco ahora se asienta en su tarjeta con la página oscura mostrándose alrededor de sus bordes, exactamente como una foto de producto recortada real.
Por qué esto importa más allá de la estética: los assets transparentes son componibles. El mismo PNG del casco puede sentarse en una tarjeta, flotar en una capa de parallax, o recibir un brillo detrás en CSS — porque no hay fondo peleando con tus efectos. Los JPEGs planos te encierran en el fondo con el que vinieron. Los PNGs con alfa te dan espacio para diseñar.
Una nota práctica sobre peso de archivo: los PNGs transparentes de objetos hero grandes pueden ser pesados. Una vez que estés contento con la composición, haz que Claude Code los optimice — redimensiona a las dimensiones reales de visualización y comprime — para que tu hermosa página no cargue como si fuera 2014. Bonito y lento sigue rebotando visitantes.
Las imágenes estáticas llevan una página bastante lejos. Pero una landing page sci-fi que se mueve es una categoría diferente de impresionante — así que hagamos que una imagen fija cobre vida.
Creando Video Activado por Scroll desde una Imagen Fija
Este es el movimiento que empuja la página de "bonita" a "¿cómo construyeron esto?"
Usando un modelo de video — Seedance es el que se menciona en el flujo de trabajo fuente para esto — tomas una imagen estática y generas un clip corto a partir de ella. Diez segundos, 16:9, en el estilo cinematográfico que especifiques. La imagen fija hero que ya hiciste se convierte en un lento empuje de cámara sobre el paisaje urbano; el exotraje del personaje capta un parpadeo de luz; la niebla se desplaza. Luego conectas ese clip en la página como una animación activada por scroll, de modo que el metraje avanza según el lector hace scroll en lugar de reproducirse automáticamente en bucle.
La cadena completa, dentro de Claude Code:
- Genera o elige la imagen fija que quieres animar (tu imagen hero).
- Pide al MCP de Higgsfield que la pase por el modelo de video Seedance — especifica duración (10s), relación de aspecto (16:9), y el movimiento que quieres ("dolly lento hacia adelante, deriva atmosférica sutil").
- Descarga el clip en tu proyecto.
- Dile a Claude Code que lo conecte como hero activado por scroll — la posición de scroll controla el cabezal de reproducción.
Una verificación de realidad sobre costos y calidad: la generación de video consume más créditos que las imágenes, y no todos los clips salen bien al primer intento. El movimiento puede salir demasiado rápido, demasiado tembloroso, o extrañamente literal. Genera, mira, regenera el prompt — el mismo bucle iterativo que las imágenes. Y las matemáticas de video sincronizado con scroll son genuinamente complicadas; si el clip tartamudea contra la barra de scroll, generalmente es la lógica de mapeo de frames, no el video. Profundicé exactamente en ese tipo de efecto cinematográfico sincronizado con scroll en mi análisis de animaciones 3D con scroll, IA y Claude Code — la técnica se transfiere directamente.
El resultado, cuando funciona, es lo que la gente captura en pantalla: un hero donde la película responde al lector. Ese es el momento en que la página deja de sentirse como una plantilla.
Ahora la parte que todos olvidan hasta que su teléfono rompe la página: responsive.
Haciendo la Landing Page Sci-Fi Responsive
Un hero de escritorio cinematográfico que se convierte en un desastre ilegible en un teléfono es un fracaso, punto — y más del 60% de tus visitantes están en móvil. Así que responsive no es un paso de pulido, es un requisito.
La buena noticia: esto es una de las cosas que Claude Code maneja bien con una instrucción directa. Dile explícitamente lo que quieres:
"Haz toda la página responsive. El menú de navegación debe colapsar a un icono de hamburguesa en tablet y móvil. Apila las tarjetas de producto verticalmente en pantallas pequeñas. Mantén el video hero, pero restringe su altura en móvil para que no domine el fold. Mantén la escala de spacing del diseño de Figma en todos los breakpoints."
Esa última cláusula se gana su lugar — sin ella, el agente tiende a "arreglar" el móvil aplastando todo, y tu cuidadoso ritmo de spacing se derrumba. Nombra los breakpoints y nombra el comportamiento.
Aquí está la parte honesta. Responsive es la fase donde harás más ajustes manuales. Claude Code te lleva al 90% — el menú hamburguesa funciona, las tarjetas se apilan — pero captarás las cosas pequeñas a ojo:
- Un titular que se corta torpemente exactamente a 768px de ancho
- Una tarjeta de producto con padding inconsistente respecto a sus vecinas
- Un video que técnicamente está restringido pero sigue sentándose demasiado alto sobre el fold
- Objetivos táctiles que son un pelo demasiado pequeños para un pulgar
Ninguno de estos es un arreglo difícil. Son arreglos de "abre las dev tools, arrastra el viewport, apunta a Claude Code al elemento específico." Cuenta con veinte minutos para esta pasada y estarás bien. Sáltalo y tu sitio de escritorio digno de premio te avergonzará en el dispositivo en que la mayoría de la gente realmente lo abrirá.
Cubrí el principio más amplio — donde la IA maneja el grueso y un humano maneja las decisiones de juicio — en mi artículo sobre diseño web con IA y supervisión humana. Esta pasada responsive es ese principio en miniatura.
La página funciona en cada pantalla ahora. Es hora de ponerla en algún lugar real, gratis.
Desplegando Gratis en Cloudflare Pages desde Claude Code
El deploy es la parte más limpia de todo el pipeline, y es donde la promesa de "quédate en el terminal" rinde completamente.
Le pides a Claude Code que maneje la cadena de publicación, y automatiza los pasos que solían ser una tediosa checklist manual:
- Sube el código a GitHub. El agente inicializa el repo (si es necesario), hace commit y push.
- Conecta el repo a Cloudflare Pages. Cloudflare ofrece auto-deploy desde GitHub con CI/CD integrado.
- Conecta el dominio. Añade un dominio personalizado en la configuración del proyecto de Pages; puedes adjuntar hasta 100 dominios personalizados por proyecto en el plan gratuito.
- Publica. Cloudflare construye y sirve el sitio.
¿Por qué Cloudflare Pages específicamente? Porque el tier gratuito es genuinamente generoso, no una versión de prueba recortada. Obtienes un CDN global, HTTPS automático, ancho de banda ilimitado en el tier gratuito, y 500 builds por mes sin techo de tiempo de cómputo. Para una landing page — incluso una sci-fi con muchos medios — no alcanzarás esos límites. El hosting, CDN, CI/CD y SSL son todos gratuitos; el único dinero en juego es el dominio en sí, alrededor de $10 al año por un .com.
Algunas notas honestas de deploy:
- DNS y SSL no son instantáneos. Después de apuntar tus nameservers a Cloudflare, la propagación DNS y la provisión de SSL ocurren automáticamente, pero dale tiempo — minutos a un par de horas. No entres en pánico depurando un sitio que simplemente no ha propagado aún.
- Las páginas con muchos medios necesitan una pasada de optimización antes del deploy. Ese video hero y esos PNGs transparentes son el grueso del peso de tu página. Optimízalos (el paso que señalé antes) antes de desplegar, o tu hermosa página puntuará mal en carga del mundo real.
- El tier gratuito es real, pero lee los límites. Para una landing page estás lejos de alcanzarlos. Si estás desplegando veinte sitios de clientes, relee los límites actuales de Cloudflare — evolucionan.
Ese es el pipeline completo: diseño en Figma → build en Claude Code → assets de Higgsfield → pasada responsive → en vivo en Cloudflare. Ahora déjame contarte las partes que las demos pulidas omiten en silencio.
Lo Que las Demos No Te Dicen
Quiero darte la verdad poco glamorosa, porque la versión de highlights de este flujo de trabajo te prepara para sentirte un fracaso cuando en realidad no lo eres.
"Un prompt" es marketing. Verás este stack promocionado como casi instantáneo. La realidad es más bien: un prompt de configuración fuerte te da un borrador completo, y luego pasas una hora iterando — intercambiando assets placeholder por reales, regenerando los dos cascos que salieron un poco mal, arreglando el titular que se corta raro en un breakpoint. Esa hora sigue siendo absurdamente rápida comparada con las semanas que cotiza una agencia. Pero cualquiera que te venda un flujo literal de configúralo-y-vete te está mostrando la demo, no el trabajo.
La consistencia de assets es fuerte, no impecable. Nano Banana Pro genuinamente mantiene un personaje a través de un conjunto — mejor que cualquier cosa que existiera hace dieciocho meses. Pero a lo largo de una serie larga de generaciones aún obtendrás deriva. Planifica regeneraciones para tu hero y tus fotos de producto clave. El modelo te da una enorme ventaja; no te da un pase libre de juicio.
El costo es real y vale la pena vigilarlo. El build fuente se demostró en aproximadamente un plan de $20/mes con una ventana de uso de unas cinco horas — y eso es un setup genuinamente cost-effective. Pero la generación de video consume créditos más rápido que las imágenes, y si regeneras descuidadamente quemarás tu ventana. Sé deliberado. Genera con intención, no disparando prompts al azar.
Esto es para proyectos reales, no solo demos. La parte genuinamente emocionante no es la novedad sci-fi — es que el mismo pipeline construye una landing page real para un negocio local o una startup. Cambia el paisaje urbano alienígena por un hero de producto limpio y los cascos por SKUs reales, y tienes un entregable legítimo para un cliente. El tema sci-fi es solo una prueba de estrés que demuestra que el pipeline puede manejar casos difíciles.
Ese último punto es el que tatuaría en una nota adhesiva. Déjame cerrar con por qué.
El Verdadero Cambio Aquí No Es la Velocidad — Es Quién Puede Construir
Vuelve al casco por un segundo.
Hace un año, esa única foto de producto transparente — generada, fondo eliminado, color consistente con un personaje en el hero — habría significado un fotógrafo, un estudio, una sesión de Photoshop, y un diseñador para colocarla. Cuatro personas, o un generalista muy cansado y una semana larga. ¿La landing page sci-fi encima de eso? Añade un desarrollador y un editor de video. Eso es un equipo y un presupuesto y una línea de tiempo medida en semanas.
El cambio que este pipeline de Figma-más-Claude-Code-más-Higgsfield representa no es que hace a ese equipo más rápido. Es que permite a una persona con buen gusto hacer todo en una tarde — y el cuello de botella se mueve de "¿puedes ejecutar?" a "¿sabes cómo se ve algo bueno?" Las herramientas manejan la ejecución. Tu juicio sobre composición, sobre cuál generación es la definitiva, sobre dónde pertenece un video y dónde es ruido — esa es la parte que ahora es todo el trabajo.
Así que aquí está tu desafío para las próximas 24 horas: abre Figma, esboza una sección hero deliberada — solo el hero — para cualquier idea que tengas guardada en una app de notas. Luego conecta el MCP de Higgsfield a Claude Code con ese único comando, genera una sola imagen hero, y conéctala. No construyas toda la página. Construye la prueba de que el bucle funciona en tus propias manos. Todo después de eso es solo repetición.
La primera vez que veas un asset que describiste en español simple aparecer en tu carpeta de proyecto y encajar en un layout que tú diseñaste — ese es el momento en que esto deja de ser un tutorial que leíste y empieza a ser algo que puedes hacer.
Preguntas Frecuentes
¿Cómo conecto el MCP de Higgsfield a Claude Code?
Ejecuta claude mcp add --transport http --scope user higgsfield https://mcp.higgsfield.ai/mcp en tu terminal, luego completa el flujo OAuth en el navegador cuando se te solicite. No se necesitan API keys — Claude Code maneja la autenticación, y las generaciones consumen créditos de tu plan de Higgsfield. Confirma que funciona con claude mcp list.
¿Debo usar una exportación JPEG o el MCP de Figma para enviar mi diseño a Claude Code?
Usa el MCP de Figma Dev Mode si tienes una suscripción a Figma — pasa contexto de diseño estructurado (componentes, variables, spacing) para que el código coincida con mayor precisión. Usa la exportación de un solo JPEG si estás en un plan gratuito; funciona a través de la visión del modelo pero necesita más prompts de corrección para spacing y color. Consulta la sección de handoff arriba para ambas configuraciones.
¿Qué es MCP en este flujo de trabajo?
MCP significa Model Context Protocol — el estándar abierto que permite a un agente de IA como Claude Code conectarse con herramientas externas a través de una interfaz consistente. Tanto Figma como Higgsfield exponen sus capacidades a Claude Code a través de MCP, lo que permite que un agente lea tu diseño y genere tus assets en una sola sesión.
¿Qué modelo de IA mantiene los personajes sci-fi consistentes en una landing page?
Nano Banana Pro, el modelo de imagen de Google potenciado por Gemini, está construido para continuidad y consistencia de personajes a través de un conjunto de imágenes. Aliméntalo con imágenes de referencia de alta resolución y prompts explícitos de preservación de identidad ("mantener el rostro exactamente igual que la referencia"), e itera en lugar de confiar en la generación de un solo intento. Para la secuencia completa de assets, consulta la sección de consistencia arriba.
¿Es Cloudflare Pages realmente gratis para este tipo de sitio con muchos medios?
Sí — el tier gratuito de Cloudflare Pages incluye un CDN global, HTTPS automático, ancho de banda ilimitado, y 500 builds por mes sin techo de tiempo de cómputo, lo que cubre cómodamente una sola landing page. El único costo es el dominio en sí, alrededor de $10/año por un .com. Optimiza tu video y PNGs antes del deploy para una carga rápida en el mundo real.
Trabajemos Juntos
¿Buscas construir sistemas de IA, automatizar flujos de trabajo o escalar tu infraestructura tecnológica? Me encantaría ayudar.
- Fiverr (builds e integraciones personalizadas): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (soluciones enterprise): ramlit.com
- ColorPark (diseño y branding): colorpark.io
- xCyberSecurity (servicios de seguridad): xcybersecurity.io
