Intel·ligència artificial Higgsfield Claude Fable 5 MCP desenvolupament web disseny web

Fable 5 i Higgsfield: com creen una web cinematogràfica amb un sol briefing

Claude Fable 5 orquestra el codi i Higgsfield genera els vídeos d’una landing page submarina. La prova impressiona, però no acredita el reclam dels 10.000 dòlars.

Un sol encàrrec escrit, Claude Fable 5 com a agent de programació i Higgsfield com a generador d’imatges i vídeo. Aquesta és la recepta que Zubair Trabzada utilitza per crear webs promocionals amb animacions cinematogràfiques, des d’una marca fictícia de rellotges fins a una expedició submarina.

La demostració és visualment potent, però el titular del vídeo —una web de 10.000 dòlars en minuts— no és una taxació demostrada. No hi ha pressupost d’un estudi, comparació de costos, mesura del temps total ni auditoria del codi. El que sí que mostra el vídeo és un flux de prototipatge ràpid capaç d’unir codi, recursos generats i iteracions dins d’una mateixa conversa.

1. Què construeix realment la IA

El resultat inicial, visible a 00:00, és una landing page d’una marca suïssa fictícia de rellotges. Quan l’usuari es desplaça, el producte sembla moure’s i canviar de perspectiva. El creador ensenya després un portafolis personal amb el mateix tipus de transicions.

No és un model 3D interactiu tradicional. Trabzada explica a 02:30 que bona part de l’efecte prové d’un vídeo dividit en fotogrames, combinat amb imatges i activat segons la posició de l’scroll. Aquesta distinció importa: l’acabat pot semblar tridimensional, però la tècnica s’assembla més a reproduir una seqüència controlada que a renderitzar una escena 3D en temps real.

Fable 5 assumeix el paper d’orquestrador. Interpreta el briefing, escriu la web, decideix quins recursos necessita i crida Higgsfield per generar-los. La documentació oficial d’Anthropic presenta Fable 5 com un model per a projectes llargs, agents i implementacions visuals d’alta fidelitat. Higgsfield, per la seva banda, confirma que el seu connector MCP permet generar imatges i vídeos des de Claude Code i que cada generació consumeix crèdits.

2. Connectar Higgsfield mitjançant MCP

El tutorial comença a 03:12. A Claude cal obrir la gestió de connectors, afegir-ne un de personalitzat, enganxar l’adreça del servidor MCP de Higgsfield i autoritzar el compte. Després, el connector ha de quedar activat en la sessió.

MCP, o Model Context Protocol, és la capa que permet a l’agent invocar una eina externa. En aquest cas, Claude no genera directament el vídeo: redacta la petició, Higgsfield executa el model audiovisual i retorna el recurs. El vídeo menciona Seedance 2.0, Kling, Nano Banana i GPT Image com a opcions disponibles a través del servei.

El procés requereix un compte autenticat i saldo. Això desmenteix una possible lectura de “web en un sol prompt” com a feina gratuïta: al consum de Claude s’hi afegeixen els crèdits d’imatge i vídeo. També convé revisar quines dades s’envien al connector abans d’incloure fotografies personals, material de clients o informació confidencial.

3. De la inspiració a un briefing prou concret

A 05:36, el creador recomana mirar webs premiades per identificar composicions, tipografia i ritme visual. Mostra que es podria donar una web existent com a referència, però decideix construir una idea original.

La part decisiva no és una frase vaga com “fes-me una web bonica”. El seu encàrrec descriu:

  • una empresa fictícia d’expedicions al fons marí;
  • el nom del submarí i la capacitat de vuit passatgers;
  • el recorregut narratiu des de la superfície fins a la foscor;
  • tipografia gran i sensació cinematogràfica;
  • imatges i clips generats amb un model concret de Higgsfield;
  • seccions, dades i comportament del desplaçament.

Per tant, “un sol prompt” significa un briefing extens i preparat, no absència de direcció creativa. La qualitat depèn de convertir la idea en restriccions, escenes i criteris verificables.

4. La web submarina: el millor moment de la prova

Fable 5 comença la construcció a 07:23. Detecta el connector, demana els recursos visuals, escriu el projecte i l’obre en un servidor local. El vídeo retalla l’espera, de manera que no permet calcular amb precisió quant triga tot el procés.

El recorregut complet apareix a 10:22. La pàgina fa baixar l’usuari per diferents profunditats: desapareix la llum solar, apareixen meduses bioluminescents, s’encenen els focus del submarí i finalment es presenta el vehicle, l’autonomia i una reserva fictícia.

La coherència entre text, animació i ambient és el punt fort. L’agent no es limita a col·locar una imatge de capçalera, sinó que converteix la navegació en una història. També respecta detalls del briefing, com les vuit places. En canvi, el vídeo només comprova l’aparença en l’ordinador del creador: no ensenya rendiment mòbil, accessibilitat, pes dels recursos, compatibilitat entre navegadors ni una revisió de seguretat.

5. Un portafolis a partir d’una fotografia

A 13:15, Trabzada ensenya un segon cas: aporta una fotografia pròpia i demana un portafolis amb tipografia contundent, vídeo i desplaçament cinematogràfic. Claude i Higgsfield generen les variacions visuals i les integren a la pàgina.

El resultat il·lustra bé el valor del sistema per a una primera proposta comercial. Un autònom o una agència poden produir una maqueta que el client entengui immediatament, i després demanar canvis a l’agent en llenguatge natural. Tanmateix, el vídeo no prova que la web estigui preparada per cobrar, recollir dades, posicionar-se a cercadors o mantenir-se durant anys.

Per passar de demostració a producció encara caldria revisar drets dels recursos, consentiment sobre les imatges, responsive, contrast, navegació amb teclat, textos alternatius, compressió, analítica, formularis, SEO i desplegament. Una web espectacular que carrega lentament o no és accessible pot perjudicar el negoci.

6. El reclam dels 10.000 dòlars

La xifra del títol funciona com una valoració de màrqueting, no com una dada acreditada. El vídeo no ven aquesta web per 10.000 dòlars ni presenta un client que n’hagi pagat el preu. A 13:05, l’autor sí que proposa oferir el servei a clients, però no calcula hores de direcció, revisions, generacions fallides, crèdits, desplegament ni manteniment.

El valor professional no prové només de produir fitxers. També inclou entendre el negoci, evitar còpies, comprovar continguts, provar dispositius, protegir dades i respondre quan alguna cosa falla. La IA redueix molt el cost d’arribar a una maqueta convincent; no elimina aquestes responsabilitats.

Conclusions

La demostració mostra un flux útil: Fable 5 planifica i programa, Higgsfield produeix els recursos audiovisuals i MCP connecta tots dos serveis. Amb un briefing detallat, el sistema crea en una sola sessió una experiència narrativa que abans hauria exigit diverses eines i especialitats.

El millor ús és el prototipatge: explorar una direcció visual, presentar una idea i iterar de pressa. El vídeo no demostra una web “de 10.000 dòlars” acabada ni llesta per a producció. La diferència entre una demo sorprenent i un producte professional continua sent la revisió humana del codi, el contingut, els drets, el rendiment i l’experiència de tots els usuaris.

Contrast i context

Fonts consultades

3 fonts
  1. 01
  2. 02
  3. 03

Font de treball

Transcripció amb marques de temps

10 fragments
Consulta la transcripció
  1. 0:00 , obre el vídeo en una pestanya nova

    kind of cool already, but oh wow, I like that. That is beautiful. Look at this. Honestly, I'm shocked that this is made with one prom. This is incredible. Now let's look at a portfolio website. Nice. That is cool. Man, this is very nice. Wow. So Claude Fable 5 is back, and it is absolutely incredible at building websites. I've been testing this non-stop since yesterday. So in this video, I'm going to show you step by step how to do this, but on top of that, I'm going to give you this one prompt website pack that you can basically just copy, paste, depending on whatever niche or whatever you want to build there. You can build portfolio websites, you can build like e-commerce, map, site, whatever you need. I'm going to give you guys this completely for free in the description of video, so that we can just follow me along. We're going to be using this all-inside our cloud code, and we're gonna connect this to a model like Cdance 2.0 and Nano Banana or GP2 image so that we can create everything within Cloud Code. I'm gonna use the X-VDMCP but if you guys want to use something else feel free to do whatever you want but I'm gonna show you all of this step by steps all you have to do is just follow me along. So obviously, Fable 5 is back until July 7th and then after it's gonna be kind of on a usage based limit so go ahead and explore this is as much as possible. So I'm inside my cloud code. If you don't have cloud code, just go ahead and install the cloud app that stop app, that's what I'm using. And then come to your cloud code brand new session. Make sure you're at Fable 5 right there. It says included until July 7. So once you select that, I'm using the effort level at extra. So keep it between extra and max. Obviously the more you go on the smarter side,

  2. 1:44 , obre el vídeo en una pestanya nova

    the more it's gonna use your tokens. So kind of play around with different ones. But I think Max extra is the one that works pretty well. So in order to create these websites that have these 3D scrolling effects, so right here as you can see, I mean this is mind-blowing, right? Like how it's able to do this, it's the accuracy is amazing. And by the way, this is just like a fictitious watch brand. It just created from scratch. So as you can see, this is basically scrolling to the different aspects of the video, the different frames. Therefore, it's very important for you to use a model that has a 4K image quality. And see that in a 2.0, that we're going to use inside Hicksfield does that, right? But like I said, you can use cling or some other model in there as well. That's completely up to you. But this scrolling effect that you're seeing here, this is technically a video that's separated in multiple frames and then also images as well. So same thing with the portfolio website here, right? I uploaded my image and it's able to create all of this on its own. I didn't do anything else. I just gave it a one prompt and was able to do that. So that's why if you're lazy like me, you want to be able to attach an MCP so that way it takes care of all of that itself. Of course, it's going to cost you a bit of money, but that's kind of the difference between kind of creating it with one shot prompt or doing things multiple and multiple different tools. But I'm going to show you obviously through just creating this with one single prompt from Cloudcode. So the first thing we need to do is we need to add an MCP, our Hicksfield MCP so that way we can use models like Kling or C Dance 2.0 or Vio 3.1. So as you can see I've already added it, but it's pretty simple to add. So again once you're in your Cloudcode, you're going to press this or click on this Blast button, you're going to click on the connectors, you're going to head over to manage connectors,

  3. 3:34 , obre el vídeo en una pestanya nova

    And this is going to open up all of your connectors and MCPs. So the way to add this, you're going to click on the plus button. And instead of if you click on browse, connectors, it's going to show you all of the native ones that are here. But we're going to add a custom one. So you're going to click on the plus button and click on add a custom connector. And here, you're going to name this. So you can just name it something like Higgs Field, or whatever. And then for the remote MCP server URL, you're going to get this from the following link. Go ahead. I'm going to put this link in the description. You can click on this. It's going to bring you right here. So this basically awaited Connect Hicks field to your cloud code. So make sure you are in the MCP that tab here, and then you are also clicking on the cloud. Obviously if you click on the link in the description, it's going to bring it directly here. So you should be fine. So after you do that, you're just going to come to the bottom right here. It says copy the Hicks field URL. You're going to click on copy. This is going to copy it. And make sure you're logged in. Obviously you have to create a Hicks field account, because otherwise you won't be authenticated. So once you create your Hicks field account, since this is gonna be using these models.

  4. 4:35 , obre el vídeo en una pestanya nova

    You have to put a couple of dollars in there. Once you do that, then afterwards, we're gonna go back to our cloud code here and just paste this and then click on add. Obviously, it's not gonna let me add because this is a server with this URL already exists. But at this point, you're going to be redirected to your Hicksfield to authenticate to make sure that you're allowing cloud to have access to your Hicksfield there. And once you do that, once you give it confirmation and give it access, it's going to look something like this. Hick's field is going to show up here, and all of this is going to be, uh, Jen or, uh, enabled for you. So right here, it says disconnect because I've already disconnected it. So in order to confirm this before you do anything, you're going to make sure you come back to the plus button, click on connectors and make sure your Hick's field is toggle done. If you're right here, it's toggle done. Because we're going to be referencing this, uh, inside our cloud code. So you want to make sure that we're, uh, creating that, or that connection is already established. So once you do that now, you're ready to go. Right? So as far as website that you're planning to bid, so you can actually go to a website like awards.com and see actually award winning websites. And once you find something that you like,

  5. 5:46 , obre el vídeo en una pestanya nova

    again, this depends on what you're trying to build. So let's say you're building some kind of a portfolio website, you're building some kind of a product website, right? Or something completely original out of your imagination, you can actually get some inspiration from here. So let's say you want to build some kind of, I don't know what this is. Let's just click on it. Sire tone and right, I don't know what this is, but let's just check it. Click on visit site. This is going to bring you to this actual website. So, Sire tone and calm. I guess this is some kind of a fashion company or something. There you go, where your glam meets grunge. Okay? Yeah, yeah, so it's like an e-commerce website, right? So, same thing like if you're creating e-commerce website, you can just copy this and then you can take it to Cloud Code and say, hey, create something similar to this website. So that's kind of one way to kind of clone a website, right? So you can just give it a reference. So this is a good site to check out for a, or you can just Google award winning site that also works as well. But anyway, so let's go ahead and create something original of our own. I'm not going to copy any of these award winning websites or whatever. Because this was something, as you can see, since local hosts, I actually created this directly inside my Cloud. So if I open this up, you can see right here. This is this all called Orum and nor a clip swap site.

  6. 6:59 , obre el vídeo en una pestanya nova

    So I just gave it this one prompt. And they said, build me a one where a cinematic 3D school website for Orum and nor a fictional Swiss luxury watch brand. And I said to use the Hicksfield MCP to generate all of the different images and videos. And as you can see right here, it went ahead and created it. And it says it's live on local host 4888. So that's exactly how simple it is. And again, we're going to work on this step by step. So let's go ahead and open a new cloud code again. So make sure again, your X field is connected, right? X field is connected. So now I'm gonna go ahead and grab a prompt from this prompt pack that you guys have access to. So let me go ahead and paste this big prompt. So I'm just gonna build something completely new. So I said, build me in award winning cinematic 3D scroll website for a besso, a fictional deep sea expedition company that takes civilians, eight civilians per year to ocean floor aboard a submarine called the Aribas, right? something completely fictional and from the imagination. And by the way, so let me go ahead and actually enter this and then we're gonna talk about the rest. And right here, as you can see, I said visuals, generate everything with Cdance 2.0 model on the HX field mcp, right? And I'm giving it all of the instructions here. So I'm gonna go ahead and enter.

  7. 8:11 , obre el vídeo en una pestanya nova

    So now it's going to realize that the HX field mcp is attached and it's gonna go ahead and build this thing out. So as you can see right here, visuals is described, the surface, I'm giving it the sunlight zones all of these different instructions or giving this to Fable5 to make sure that it falls everything along. But like I said, all of this instruction is inside the prompt packs so you guys can just based on whatever nichers selecting you can just copy this prompt and make some changes to it. And as you can see right now it's starting to build everything. This is FFM Pegas, Radies and the bottom there you go. Use Hicksfield to check balance, cinematic hero shots and now it's generating image and everything else. So let's just go ahead and give this a couple of minutes. Now a quick reminder on Fable just like I mentioned in the beginning this is only available till July 7 on your plans on your Claude plans will go ahead and take advantage of that because after that it's gonna get pretty expensive and move to usage I've been building nonstop so I recently built my personal assistant and my second brain I updated with Claude Fable 5 and it's absolutely incredible. Let me show you guys a quick demo here. Hey Jarvis. How you doing? Working on it sir. Operational and quietly magnificent sir yourself. Good things. By the way, so a new model came out about to switch your brain. What do you think? A rival brain, sir. I shall try not to take it personally as you rummage for my replacement. No, as a matter of fact, right now you're using Opus 4.8 for your brain. Go ahead and switch to Fable 5. One moment, sir. Good evening, sir. The new brain is installed, calibrated, and already mildly concerned about your calendar. So there Here we go. This is obviously my second brain, my operating system, and I recently added Jarvis with it and I upgraded it with Fable 5, and it's been non-stop fun. If you're interested in checking this out, if you want your own operation system or if you want your own personal system like Jarvis, check out the community link is going to be a description where you can create your own. I'll show you exactly what to do, stop by a stop. But anyways, let's go back to our build here.

  8. 10:22 , obre el vídeo en una pestanya nova

    So it looks like you got done. Alright, so it says Abyssal is live at local host 4890. So let's go ahead and open this up. All right, cool. How deep will you go? So that's the, there you go, a vessel, it's that based on some just calling right now, right? Look at this. Oh wow, that is cool. That is nice. So like we mentioned, this underwater vehicle, right? So very nice. A 200 meters 99% of sunlight is gone, nice. And on the right hand side, I like that it has this little kind of scroll animation there as I scroll down, nice. Jellyfish is a very nice touch right there. A thousand meters pressure is 100 times the surface. Okay cool Oh nice look at this the light turns on so these are different frames obviously, but it's all the same Video does generated by our sea dance through MCP to our Hicksfield MCP so a re-bus that was the name of the vehicle right based on the prompt No sun has ever reached this water life makes its own light nice look at this beautiful Oh and it does showcase that different and almost that have their own light, right? Because it says the sun doesn't reach here, but very cool. Fewer people have stood here, then have walked on the moon. Very nice. That is really cool. So you can see how incredible this is. A ribos, two pilot, and it gives you like a product demo, 96 hour life support, 4,000 meter depraining, sold on board eight. Because we said that the product should have, or this this vehicle should have eight people capacity, right? And it says 8c's $250,000, the parting March 2020 sound. That's quite a bit of expensive ticket, but anyways, so you can see how amazing this thing is

  9. 12:06 , obre el vídeo en una pestanya nova

    as far as developing these 3D scrolling websites, right, to animation. And like I said, the reason why it's doing this is because it's capable of understanding that it has access to a video generation model, like CDN's 2.0 and image models like Nano Banana Pro or GP2 image, right? All of that is inside our MCP. And therefore, Fable5 is able to generate the knowledge, is able to generate the expertise. And then it reaches out to Higgs field to generate those clips and then kind of renders everything together and puts it on a cinematic website, right? This, and as you can see, it says local host 4890. So now you can imagine this is something that could be on a custom domain, right? So if you're creating a portfolio website for instance, like this one, you can certainly put this and have cloudfables say, hey, go ahead and now post this or publish this into a particular customer domain. So this is something that you can either do it for yourself and like I mentioned, if you are an AI agency owner, or somebody who's offering this as a service, this is an incredible opportunity to take advantage of this and sell these as services. So I mean, portfolio website is something that everybody needs, right? And now you can just upload one image of yourself. So if I go to my Clouds, let me show you. So this one's the cinematic website that I created.

  10. 13:26 , obre el vídeo en una pestanya nova

    So it built me in a more than an cinematic 3D scroll personal portfolio upside for me. But my name, study the style of a word side of the year. So I give it a couple of references. Huge bold typography, cinematic scroll. Visuals, I say generated everything with C-Dense 2.0 model on the HXGlMCP. And then basically similar to what we mentioned in that other one as well. And then I went ahead again, same thing used, Hicks field to generate my images. All I did was just upload an image of myself. And then I went ahead and created all of the videos and images that you're seeing right here. Right. And again, all of this is AI made. I didn't do anything manually. It was just one prompt. And it was able to generate all of this. So like I mentioned, go ahead and play around with the prompt back here. Right. Take a look at this. If you want to create your own portfolio personal portfolio apps, you can just copy this. Oops, I don't know, so many to much. You can just basically copy the portfolio one right here. There you go, it's right here, right? So, all I do is build me an award-winning cinematic treaty, and then you have to do just replaces with your name, right? And it will create something similar to that. And obviously, you can always go back and forth with cloud and ask, be able to change something if you don't like anything. It's really good at editing an existing website or whatever it builds for you. So, if you're building anything related to like a product or something like this for fun, right? You can certainly just kind of go back and forth and change everything. Anyways, well hopefully you guys found it helpful again. If you have any questions put them in the comments below, I'll try to get back to you guys. If not, again, you have access to the prompts and if you're interested in learning how to monetize these or if you're new to Cloud in Cloud Code, check out the community link is going to be description again. Hopefully I'll see you guys there. If not, thanks for watching and I'll see you on the next one.