Claude Fable 5 UI/UX One-Shots - 5 Tests

And here we go. Oh, that's a nice little L. Oh. Oh. Okay. Okay. This is nice. Oh my god. Fable 5 is here. And I have to say I just concluded and I watched all the demos that it just generated. These five demos I'm about to show you and it is I have to say insane. Okay, so for the very first prompt we have design and build a modern awards worthy winning landing page for a fictional UIUX designer portfolio. You can use GAP or 3JS to create a visually captivating experience. Be sure to check your work at Chrome DevTools and make sure it's mobile friendly. So that's it. That's the only prompt that I'm issuing this here for Fable 5 on high. And here we go. Oh, that's a nice little L. Oh. Oh, okay. Okay. This is nice. [laughter] Oh my god. Alrighty. This section right here kind of reminds me of the little, you know, Claude BO kind of graphic or whatever. But uh this is nice from what I see so far. Very nice kind of like scrollbased animations. Kind of like a gallery section. It's going back and forth. I love the subtle animations. It's nailing uh the timing and the easing. What happens when I click view? Nothing. Okay, let me scroll down. Let's try again. Continue on. Very nice so far. Oh, that's nice. I like the uh the text base. I think it's a the split char type of animation that came in there. Very subtle, very quick, but nice. Wow. Look at this. I have to say, you know, I've been doing these soda model previews. Every time they come out, I'll do like a UIUX one to see how good they are. Um, and this is this is probably by far the single best UI generation that I've got from oneshotting. And this is this is this is impressive. This is so freaking cool. All right, let's continue on with number two. All right. For this one, I'm not going to read this entire um prompt here. You can pause if you want, but this one I told it basically I gave it a screenshot. I gave the URL and I wanted to see if it can actually recreate this. Not this part, but this part. All right. This is clearly a 3JS uh with some shaders worked in here scene. I'm assuming at least. Um and it's really cool. It's like you're inside of a sphere almost and you're looking at this wall, this gallery wall. Plus, I told it to um you know do some type of interesting like transition animation for the page based on what you click. Here we go. Oh, okay. Look, we're at local host. It's not that same website. It's a little bit backwards the scroll, but look, it basically created recreated the gallery concept. Let me switch back here to reset. There we go. Um let's click on one of these. Okay. Very very nice. I mean, this is sick, man. Yeah. Okay. Well, that's two of two. Very nice execution. I mean, you could spend some time and make this your own. This is crazy. All right. Next up, this next one, design an objectively better landing page hero section than the one attached. This one is actually for the projectbased course I literally just finished two days ago called landscape where I show you over the course of five hours how to use cloud code to make this SAS which is a AI landscape visualization app. And so I'm asking it I can you actually improve the hero section and this time spawn a Figma MCP design agent and show me the results. So let's go ahead and check this one out. By the way, you can take that course right now. The link's in the description. Shameless plug. All right. So, okay, here is the before and after. I did actually check this one out beforehand. Um, this is the before. It's what I currently have. And then this is the after. Okay, I would say that yeah, maybe objectively one, this one is better. I would say just for the fact that it does have a little bit of additional context here in the hero section. I, you know, compared to this variation here. So, I would say, yeah, this is probably a better, you know, result that you would definitely want to at least AB split test and find out which one drives the most, you know, success essentially. So, we're three for three so far with Fable 5. This is pretty nuts. Let's continue on. So, for this next one, uh, Craigslist, all I did is give it a screenshot. I mentioned Craigslist.org. Modernize this Craigslist UI. Okay, this is the one we all know that's it's stayed the same for a million years essentially. And I basically I told it just to modernize it. Don't go crazy with a ton of white space or don't change it too much. It still needs to be type heavy. And maybe we'll have some subtle interactions. And that's it. So let's see what it actually came up with. Let's refresh. And there we go. Take a look at the very subtle animation. It's nothing too crazy on page load. Very nice. If I hover over these things, yeah, there's a nice little kind of hover animation. So again, like if you go back here and I go to Youngstown.craigslist.org, This is what we have typically, right? This and then this is what it updated it to. Yeah. I mean, I would say definitely this is it. It nailed it. You know, this is a more modern approach of Craigslist. Awesome. All right. So, that's four. Let's check out the last one. The last one's pretty crazy. So, for this last one, I actually attached a video. And this video here is of a UI. As you can see, you can use this now and try it out yourself in the browser at Vector. So that's vect.com. So this this UI has won awards. It's it's amazing. It's GSAP, I think, and definitely 3JS likely. And so all I did is ask it just to recreate it. Can it do it in one shot? Let's find out. Okay, so not too impressed with uh kind of how this looks here. It would be nicer if this this wasn't, you know, this background wasn't there, but that's not the point. Let's see what happens on squirrel. All right, we do have some Okay, that's interesting. It's coming from weird spots on those buildings, but it's doing this. Oh, okay. It's done a pretty decent job oneshotting the idea. Geez, this is crazy. Like, it even got that ending sequence correct. Look at this. Now, it's not as good as the original. like the original. If I go to VE right here, here's the original much better um intro. I and it definitely a much better interpretation of this part. This is actually a hover based effect. It was tying it and attributing it to the line path animation, but again, after a few prompts, you could probably just nail this. Uh again, this is definitely the better version. And a trained eye can definitely see what is a copy of a copy. And trust me people, I'm not advocating to be stealing stuff uh from from designers. This is purely just a test to see how well it can adhere to instructions. So here's the situation. If you're a designer, you are looking at this either from a pessimistic perspective or somebody who's an optimist. If you're pessimistic, you're probably worried about your job security. You're looking at what it can produce. It could produce stuff better than you, faster than you, etc. But if you're an optimist, then you look at this at a perspective as especially if you're a designer who's been relegated to just Figma, you know, for years. Um, you can now realize exactly what you want in the browser and pretty much to a tea. Uh, and you could do it through natural language instead of having to dedicate, you know, years upon years to learning code to be able to achieve this stuff. So, at the end of the day, the people who are most creative and are most passionate about what they do are going to rise to the top regardless of of the fact that everybody has access to this AI. I can guarantee you, we take 100 designers, right, and you put them in the same room, you put give them the same access to the same models, and you're going to find that just a few maybe 10% produce the 10% best work. You know, so it's not all going to be up to the AI. you're still a part of the process especially when it comes to creativity like this. So definitely check out designcourse.com along with that new course that I have uh that is released you can take today and I will see you all very soon. Goodbye.