Sitio Web Premiado Con Un Solo Prompt: Higgsfield MCP
La página cargó en localhost y realmente me recliné en mi silla.
Un plano hero cinematográfico — una lenta panorámica de cámara sobre un paisaje urbano oscuro, iluminado por niebla — reproduciéndose como video real, no como un GIF de stock en bucle. Al hacer scroll hacia abajo, las imágenes no simplemente pasaban; avanzaban, fotograma a fotograma, sincronizadas con mi trackpad como si la página fuera un rollo de película que yo estuviera rebobinando. Tarjetas de cristal flotaban hacia dentro. El grano de película cubría todo como si un colorista lo hubiera tratado. El tipo de sitio que gana una insignia de Site of the Day y termina en capturas de pantalla en hilos de inspiración de diseño.
Construí ese sitio web premiado con un solo prompt a la vez — bueno, un verdadero prompt, seguido de un puñado de refinamientos — usando Claude Fable 5 dentro de Claude Code, conectado al Higgsfield MCP. Sin diseñador. Sin editor de video. Sin licencia de After Effects que tuviera que aprender. Gasto total para el borrador funcional: menos de tres dólares en créditos de generación y unos veinte minutos de tiempo real.
Voy a mostrarte el stack exacto, la configuración que toma menos de cinco minutos, y la estructura de prompt que te da un sitio cinematográfico en lugar de uno mediocre. Pero también voy a mostrarte la parte que nadie publica: el momento en que las matemáticas del scroll me pelearon, el video placeholder que parecía un salvapantallas, y la línea honesta entre "parece que lo construyó una agencia" y "funciona como si lo hubiera construido una agencia." No son lo mismo, y pretender que sí lo son es como la gente pierde clientes.
Primero, la pregunta que tuve que responder antes de que todo esto valiera la pena: ¿por qué ahora? Este stack exacto no existía hace ocho semanas.
Por Qué Este Stack Funciona De Repente En Junio 2026
Dos cosas llegaron con semanas de diferencia, y juntas cruzaron un umbral.
El 9 de junio de 2026, Anthropic lanzó Claude Fable 5, un modelo de clase Mythos y el más potente que la compañía ha puesto a disposición general. Es estado del arte en casi todos los benchmarks de capacidad que Anthropic probó — ingeniería de software, visión, razonamiento a largo plazo — y está un nivel por encima de Opus 4.8. Esa combinación de visión más razonamiento es todo el juego aquí. Fable puede mirar una captura de pantalla de un sitio ganador de Awwwards, entender por qué funciona el diseño, y escribir el HTML, CSS y la lógica de scroll para reproducir la sensación. Mantiene toda la página — DOM, estilos, matemáticas de scroll, intención de diseño — en contexto a la vez y la mantiene consistente entre secciones.
Luego, el 30 de abril de 2026, Higgsfield lanzó su servidor MCP oficial: un único endpoint alojado que expone más de 30 modelos de imagen y video a través de una conexión. Sora 2, Veo 3.1, Kling 3.0, Seedance 2.0 para video; Nano Banana Pro, Soul 2.0, Seedream 4.0, GPT Image 2 para imágenes. Sin claves API que gestionar, sin SDKs por modelo. Te conectas una vez, y Claude Code puede pedirle a cualquiera de esos modelos que genere un clip cinematográfico o una imagen hero directamente dentro de tu build.
Aquí está la parte que la mayoría pasa por alto. El MCP no es solo "Claude ahora puede hacer imágenes." Es que el mismo agente que escribe tu sitio también puede producir los assets que ese sitio necesita, en la misma sesión, sin que abras nunca una pestaña del navegador. El video que hace scroll en tu hero se genera, se descarga en tu carpeta del proyecto, y se conecta a la página — todo por Fable, todo en un flujo de trabajo continuo. Ese ciclo cerrado es lo que comprime una línea de tiempo de agencia de varias semanas en una tarde.
He construido pipelines creativos sobre esta base antes — documenté una versión temprana en mi build de agencia creativa automatizada con Claude y Higgsfield. Lo que es diferente ahora es el nivel del modelo y el conector oficial. La cinta adhesiva desapareció.
Entonces, ¿qué te compra realmente "un solo prompt"? Déjame establecer la expectativa realista antes de que te emociones y decepciones en la misma tarde.
Qué Significa Realmente "Un Solo Prompt" (Y Qué No)
La versión del titular es una mentira de compresión, así que déjame ser preciso.
Un solo prompt bien estructurado te da un borrador completo y visualmente terminado — diseño, secciones, un hero cinematográfico, video e imágenes placeholder, comportamiento de scroll, tipografía, sistema de colores, todo el paquete. Funciona en localhost y se ve legítimamente impresionante en el primer intento. Esa parte es real. He visto a Fable producir un sitio de múltiples secciones desde un prompt cuidadosamente escrito que parecía que un estudio lo hubiera entregado.
Lo que "un solo prompt" no significa: que hayas terminado. La primera generación usa placeholders — metraje cinematográfico genérico, imágenes hero con aire de stock, texto con sabor a lorem. El oficio está en los prompts de seguimiento que reemplazan placeholders por los assets reales de tu marca, regeneran el video para que coincida con tu historia, y arreglan las tres cosas que siempre se ven ligeramente mal en el primer intento. Llámalo un prompt para empezar y cinco para terminar.
El encuadre honesto es este: un prompt te da el 80% de un sitio digno de premio en veinte minutos. El último 20% — la parte que separa "impresionante" de "ganador" — es iteración. Eso sigue siendo un trato asombroso. Una agencia te cotizaría semanas solo por el 80%. Pero cualquiera que te venda un flujo de trabajo literal de un-prompt-y-te-vas te está vendiendo la demo, no el producto.
Con expectativas establecidas honestamente, aquí está el stack que realmente necesitas.
El Stack De Cuatro Piezas Que Necesitas Antes De Hacer Tu Prompt
Necesitas exactamente cuatro cosas en su lugar. Falta una y el flujo de trabajo se detiene.
- Claude Code en un plan de pago con acceso a Fable 5. Fable se ejecuta a través del Claude Code basado en terminal, apuntado a una carpeta de proyecto real para que pueda leer y escribir archivos e iterar en un servidor de desarrollo en ejecución. Un chat en el navegador no es suficiente — necesitas la memoria de proyecto persistente.
- Una cuenta de Higgsfield para autenticación MCP. El conector se autentica contra tu login de Higgsfield, y las generaciones consumen créditos de tu plan. Sin gestión de claves API separada.
- El conector MCP de Higgsfield instalado en Claude Code. Este es el puente a los más de 30 modelos.
- Los archivos de skill de scroll 3D importados. Un pequeño conjunto de archivos skill en markdown que enseñan a Claude cómo construir efectos de scroll cinematográfico sincronizados por fotogramas — la técnica que hace que el video avance con la barra de desplazamiento en lugar de simplemente reproducirse.
Dos de esos son cuentas para las que te registras. Los otros dos son una configuración de cinco minutos que repasaré a continuación.
Una nota sobre el plan de pago. Fable cobra $10 por millón de tokens de entrada y $50 por millón de tokens de salida — el doble de Opus 4.8, el modelo más caro que Anthropic había lanzado antes. Ese coste determina cómo trabajas: quieres que Fable edite archivos quirúrgicamente, no que regenere páginas enteras porque un chat perdió contexto. Cubrí esa disciplina de economía de tokens en profundidad en mi build de Claude Fable AIOS, y aplica directamente aquí.
Déjame activar el conector.
¿Cómo Configuras El Higgsfield MCP En Claude Code?
Configurar el Higgsfield MCP en Claude Code requiere un comando y menos de cinco minutos: ejecuta el comando de añadir MCP apuntando a la URL remota de Higgsfield, autentícate con tu cuenta de Higgsfield, y los más de 30 modelos estarán disponibles para Claude en tu próxima sesión.
Aquí está el camino exacto. Desde tu terminal, dentro de Claude Code, ejecuta:
# Añadir Higgsfield como conector MCP remoto HTTP, vinculado a tu usuario
claude mcp add --transport http --scope user higgsfield https://mcp.higgsfield.ai/mcp
Esto registra el endpoint alojado de Higgsfield como un conector personalizado. La primera vez que Claude intente usarlo, se te pedirá que te autentiques a través de tu cuenta de Higgsfield en el navegador — un handshake OAuth estándar. Apruébalo una vez y la sesión estará activa.
Si prefieres la ruta GUI en un cliente de Claude que lo soporte, el equivalente manual es: abre la configuración de conectores, haz clic en Añadir conector personalizado, nómbralo Higgsfield, y pega la URL del servidor https://mcp.higgsfield.ai (según la documentación MCP de Higgsfield). Mismo resultado.
Para confirmar que funcionó, lista tus servidores MCP:
claude mcp list
Deberías ver higgsfield con estado conectado. Ahora Fable puede llamar a cualquier modelo del catálogo — pídele "un plano aéreo cinematográfico de 6 segundos sobre un puerto con niebla al atardecer, Seedance 2.0, 16:9" y generará el archivo y lo colocará en tu proyecto.
Consejo pro: configura el conector con --scope user, no --scope project, para que te siga en cada sitio que construyas. Lo configuras una vez y no piensas en ello nunca más. Si lo limitas a un solo proyecto, lo estarás re-añadiendo constantemente y preguntándote por qué desaparecieron los modelos.
Un comando listo. Ahora los archivos de skill — la pieza que hace que el scroll sea cinematográfico en lugar de estático.
Los Archivos De Skill Que Enseñan A Claude Scroll Cinematográfico
Aquí está la cosa sobre el scroll sincronizado por fotogramas: Fable es lo suficientemente inteligente para escribirlo, pero no buscará la técnica a menos que le digas que el patrón existe. Eso es lo que hacen los archivos de skill.
La técnica en sí es conceptualmente simple y visualmente costosa. Tomas un video corto — digamos un clip de 6 segundos — y lo descompones en una secuencia de fotogramas fijos. Luego mapeas la posición de scroll del usuario a un índice de fotograma: desplázate 10% hacia abajo en la página, estás en el fotograma 12; desplázate 50%, estás en el fotograma 60. El video no se reproduce en una línea de tiempo. Avanza con la barra de desplazamiento. El efecto es esa sensación cinematográfica, bloqueada al scroll que has visto en las páginas de productos de Apple — los AirPods explotando en componentes mientras haces scroll, el reloj girando.
El skill Motion Website Generator de Higgsfield automatiza exactamente esto: extrae todos los fotogramas de un clip generado, construye el andamiaje HTML/CSS, y añade seis efectos cinematográficos — grano de película, partículas, viñeta, tarjetas de cristal, tintes de color y ritmo de scroll. Importas esos archivos skill en markdown a Claude Code (normalmente un zip que descomprimes en el directorio de skills de tu proyecto), y desde ese punto Fable conoce la receta.
Construí una versión desde cero de esta técnica de scroll antes de que existiera el skill — los detalles completos de CSS y canvas están en mi artículo animaciones de scroll 3D estilo Apple con IA. Los archivos de skill te ahorran esa arqueología. Le dan a Fable el modelo mental terminado para que produzca el efecto al primer intento en lugar de después de que expliques las matemáticas del mapeo de fotogramas tres veces.
Con el conector activo y los skills importados, el entorno está finalmente listo. Ahora la construcción real — y el prompt que lo hace o lo rompe todo.
La Estructura De Prompt Que Consigue Cinematográfico, No Mediocre
Aprendí esto por las malas: los prompts vagos te dan la media de todo lo que Fable ha visto, y la media es una landing page SaaS olvidable en índigo. Para obtener un resultado digno de premio, haces prompts en capas.
Anclo el build en una referencia. No "constrúyeme un sitio cool de agencia" — así obtienes la media. En su lugar, hago una captura de pantalla de un sitio cuya interacción admiro (mantengo un tablero de Pinterest para esto), y hago el prompt sobre el mecanismo, no el tema. Algo como:
"Construye un sitio de página única para un estudio de arquitectura de alta gama. Hero: video cinematográfico a sangre completa que avanza fotograma a fotograma mientras el usuario hace scroll, usando el skill de motion-scroll — genera un plano aéreo lento de 6 segundos sobre un edificio de hormigón envuelto en niebla al atardecer vía Seedance 2.0, 16:9, luego sincronízalo fotograma a fotograma con el scroll. Fondo oscuro casi negro. Debajo del hero: tres tarjetas de cristal que flotan hacia arriba al hacer scroll, superposición de grano de película, generoso espacio negativo, un solo color de acento (ámbar profundo). Tipografía: una serif display alta para títulos, sans limpia para cuerpo de texto. Genera imágenes hero placeholder con Nano Banana Pro donde van las fotos."
Observa la estructura: propósito, luego la interacción distintiva, luego las instrucciones de generación de assets, luego el sistema visual. Fable lee eso y orquesta — llama a Seedance 2.0 para el video, Nano Banana Pro para las imágenes fijas, conecta el skill de sincronización de fotogramas al scroll, y ensambla la página.
¿Por qué esos dos modelos específicamente? Seedance 2.0 está ajustado para movimiento creíble — las trayectorias de cámara se mantienen fluidas y los sujetos no derivan a través del clip, lo que importa enormemente cuando cada fotograma se convierte en una posición de scroll y cualquier temblor se amplifica. Nano Banana Pro, construido sobre la arquitectura Gemini 3 Pro Image de Google, maneja prompts densos e intensivos en razonamiento a hasta 2K de resolución con renderizado de texto genuinamente usable — así que tus imágenes hero fijas se ven intencionales, no difuminadas por IA. Para iteración rápida de conceptos, Nano Banana 2 (la variante Gemini 3.1 Flash) genera una docena de opciones en segundos; lo uso para explorar, luego cambio a Pro para el resultado final.
Si prefieres que alguien construya esta configuración exacta para tu marca desde cero — conector, skills, sistema de prompts, todo — acepto encargos de construcción de IA a través de mi Fiverr. Pero honestamente, la configuración es lo suficientemente accesible como para que la mayoría de personas que lean esto puedan hacerlo en una tarde.
Ahora la parte que las demos se saltan — qué fue lo que realmente salió mal.
Dónde Falló: El Hero-Salvapantallas Y El Scroll Que Me Peleó
La primera generación se veía genial en una captura de pantalla y se sentía mal en movimiento. Dos fallos específicos, ambos solucionables, ambos vale la pena conocer antes de que te cuesten una demo con un cliente.
El video placeholder parecía un salvapantallas. Seedance me dio un clip técnicamente hermoso, pero mi prompt fue perezoso — "paisaje urbano cinematográfico" — así que produjo metraje de dron genérico sin narrativa. Hacía scroll bien y no significaba nada. La solución no fue técnica; fue de dirección. Re-prompteé con intención: "empuje lento desde nivel de calle subiendo por la fachada de una única torre brutalista, niebla despejándose mientras ascendemos, hora dorada, el edificio debe sentirse como el héroe de la toma." De repente el scroll contaba una historia. Lección: el modelo de video es un director de fotografía, no una biblioteca de stock. Dirígelo como tal.
Las matemáticas del scroll me pelearon en móvil. La sincronización de fotogramas se sentía suave como mantequilla en mi trackpad y brusca en mi teléfono, porque la velocidad de scroll es radicalmente diferente entre dispositivos y dejé que Fable hardcodeara una relación fotograma-a-scroll optimizada para escritorio. Los fotogramas avanzaban demasiado rápido en táctil, pasando por todo el clip en un gesto. La solución: le dije a Fable que hiciera el mapeo relativo a la altura total desplazable en lugar de píxeles absolutos, y que precargara la secuencia de fotogramas para que el scroll táctil no tartamudeara con fotogramas no cacheados. Un prompt de seguimiento, problema resuelto — pero habría entregado una experiencia móvil rota si no hubiera probado en un teléfono real.
El patrón detrás de ambos fallos es el mismo: la primera generación es un borrador que parece terminado. Se fotografía bien y se comporta de manera imperfecta. El ciclo de iteración — regenerar el asset con dirección real, arreglar la interacción en dispositivos reales — es donde realmente se crea la versión digna de premio. Planifícalo. Es barato (una regeneración cuesta aproximadamente $1–$2 en créditos y un par de minutos), pero no es opcional.
Hablando de barato — déjame poner números reales sobre lo que cuesta esto, porque esa es la parte que cambia las cuentas para un negocio.
Lo Que Realmente Cuesta vs. Contratar Una Agencia
Aquí es donde la comparación deja de ser una pelea justa.
Un sitio de marketing personalizado, animado y cinematográfico de una agencia de diseño cuesta entre $8.000 en el extremo bajo hasta bastante más de $40.000 por el tipo de trabajo interactivo caza-premios que estoy describiendo — y eso es antes de contar las semanas de línea de tiempo, las rondas de revisión, y la partida de producción de video. Escribí sobre por qué esas grandes tarifas de proyecto están colapsando en mi análisis del modelo de retainer de agencia IA, y este flujo de trabajo es una gran parte del motivo.
En este stack, los costes se desglosan así, con todo basado en precios actuales a junio 2026:
- Suscripción Higgsfield: el plan Plus es $39/mes con facturación anual — 1.000 créditos al mes más pases ilimitados de 365 días para una amplia gama de modelos. Los usuarios intensivos van Ultra a $99/mes por 3.000+ créditos. Hay un nivel gratuito de 150 créditos/mes para probar antes de comprometerse.
- Coste por iteración: aproximadamente $1–$2 en créditos por regeneración — un nuevo video hero o un lote fresco de stills — y minutos, no horas, por ronda.
- Uso de Claude Fable 5: a $10/$50 por millón de tokens de entrada/salida, una construcción completa de sitio son unos pocos dólares en tokens si trabajas quirúrgicamente. Regenerar la página entera repetidamente es cómo quemas eso — exactamente por qué la disciplina de editar-no-re-emitir importa.
Súmalo y un borrador pulido y cinematográfico te cuesta dólares de un solo dígito y una tarde. Incluso la versión completamente iterada y lista para el cliente aterriza en las decenas de dólares, no decenas de miles. Eso no es un descuento sobre el precio de agencia. Es una categoría diferente de coste.
Pero — y esta es la línea que te mantiene honesto — el coste no es el único eje. Déjame decirte exactamente dónde este stack deja de ser un sustituto de la ingeniería real.
El Límite Honesto: Apariencia No Es Funcionalidad
Clonar la apariencia de un sitio no es lo mismo que clonar lo que hace. Este es el matiz que tatuaría en cada hilo de "construí X con un prompt."
Cuando capturas la pantalla de un sitio premiado y le pides a Fable que lo reconstruya, obtienes una reproducción fiel de la apariencia y sensación — el diseño, el movimiento, el sistema visual. Lo que no obtienes automáticamente es la funcionalidad debajo: el checkout de e-commerce, la lógica de reservas, el dashboard autenticado, el CMS que permite a un cliente no técnico editar texto, el formulario que realmente enruta a un CRM, el presupuesto de rendimiento que evita que una página pesada en video se cuelgue en un Android de gama media. La versión clonada se ve como el original y puede comportarse completamente diferente donde importa.
Para un portfolio, una página de lanzamiento, un micrositio de campaña, un pitch deck hecho interactivo — la capa visual es el producto, y este flujo de trabajo es genuinamente transformador. Para un producto transaccional donde la lógica es el valor, esto te da un front-end impresionante que todavía necesita ingeniería real detrás. Profundicé en dónde los sitios construidos con IA necesitan supervisión humana en mi artículo diseño web con IA y supervisión humana, y la versión corta se mantiene: la IA maneja la superficie brillantemente y la sustancia parcialmente.
Conocer esa línea es lo que separa a alguien que puede ejecutar silenciosamente un servicio de diseño web con IA de alguien que promete de más y recibe un contracargo. Vendes el front-end cinematográfico honestamente — rápido, hermoso, barato — y eres transparente sobre que la lógica backend compleja es un alcance separado. Haz eso, y la economía de la sección anterior se convierte en un negocio real. Esbocé ese modelo exacto en mi análisis de clonación de sitios web con IA e ingresos recurrentes.
Entonces, ¿dónde te deja esto esta noche?
Construye Uno Esta Noche — Luego Decide Para Qué Es
Ve a configurar el conector. Un comando, cinco minutos, una cuenta que probablemente deberías haber tenido de todos modos. Importa los archivos de skill. Luego apunta a Fable a un sitio que siempre hayas admirado y pídele que te construya algo en ese espíritu — hero cinematográfico, scroll sincronizado por fotogramas, todo el paquete.
Tendrás un borrador en localhost antes de que tu café se enfríe. Se verá como si una agencia lo hubiera entregado y se comportará como un primer borrador, porque lo es. Luego haz la parte que importa: regenera el video hero con dirección real, prueba el scroll en tu teléfono, reemplaza los placeholders por assets reales. Esa iteración es el oficio. El titular de un solo prompt simplemente te lleva a la línea de salida más rápido de lo que creías posible.
Aquí está el replanteamiento con el que te dejo. La pregunta interesante dejó de ser si un no-diseñador puede construir un sitio web digno de premio — la respuesta es claramente sí ahora. La pregunta interesante es qué haces con el hecho de que la capa visual acaba de volverse casi gratuita. Las agencias que cobran $40K por la apariencia están a punto de descubrir que la apariencia nunca fue el foso. El foso es el gusto, la dirección, y saber exactamente dónde termina la magia barata y comienza la ingeniería real.
Esa línea — entre la superficie cinematográfica y la sustancia debajo — es toda la habilidad ahora. Todo lo que está delante de ella acaba de ser entregado por menos de tres dólares. ¿Qué vas a construir al otro lado?
Preguntas Frecuentes
¿Se puede realmente construir un sitio web premiado con un solo prompt?
Un prompt bien estructurado te da un borrador completo y visualmente terminado — hero cinematográfico, scroll sincronizado por fotogramas, diseño y assets placeholder — en unos veinte minutos. La versión final digna de premio necesita un puñado de prompts de seguimiento para reemplazar placeholders por assets reales y arreglar problemas específicos de dispositivos. Consulta "Qué Significa Realmente Un Solo Prompt" arriba para el desglose realista.
¿Cuánto cuesta usar el Higgsfield MCP con Claude Code?
El plan Higgsfield Plus es $39/mes con facturación anual (1.000 créditos más pases ilimitados de modelos por 365 días), con un nivel gratuito de 150 créditos/mes para probar. Cada iteración de generación cuesta aproximadamente $1–$2 en créditos. Los precios son actuales a junio 2026 y están sujetos a cambios.
¿Cuál es la diferencia entre Seedance 2.0 y Nano Banana Pro?
Seedance 2.0 es un modelo de video ajustado para movimiento creíble y sin deriva — ideal para metraje cinematográfico de scroll. Nano Banana Pro es el modelo Gemini 3 Pro Image de Google para stills de alta calidad hasta 2K con fuerte renderizado de texto. Usas Seedance para el hero en movimiento y Nano Banana Pro para imágenes estáticas.
¿Clonar un sitio premiado copia también su funcionalidad?
No. La clonación reproduce la apariencia y sensación — diseño, movimiento, sistema visual — pero no la funcionalidad subyacente como checkout, reservas, autenticación o lógica CMS. La versión clonada puede comportarse muy diferente del original donde reside la lógica. Consulta "Apariencia No Es Funcionalidad" arriba.
¿Necesito saber programar para usar este flujo de trabajo?
No se requieren conocimientos de programación para producir un borrador visualmente impresionante, ya que Claude Fable 5 escribe el HTML, CSS y la lógica de scroll por ti. Pero saber lo suficiente para probar en dispositivos reales y dirigir la iteración de manera significativa es lo que separa un borrador impresionante de un sitio listo para cliente y digno de premio.
Trabajemos Juntos
¿Buscas construir sistemas de IA, automatizar flujos de trabajo o escalar tu infraestructura tecnológica? Me encantaría ayudar.
- Fiverr (builds personalizados e integraciones): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (soluciones empresariales): ramlit.com
- ColorPark (diseño y branding): colorpark.io
- xCyberSecurity (servicios de seguridad): xcybersecurity.io
