Vollständiges Transkript anzeigen (1.519 Wörter)
And here we go, oh, that's a nice little lan- 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 landing page for a fictional UI/UX designer portfolio. You can use GSAP or Three.js to create a visually captivating experience. Be sure to check your work with 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 lan- oh, oh, okay. Okay, this is nice. Oh my god. Alrighty. This section right here kind of reminds me of the little you know, Claude Baho kind of graphic or whatever, but I, this is nice from what I see so far. Very nice, kind of like scroll-based animations. Kind of like a gallery section, going back and forth. I love the subtle animations. It's nailing the timing and the easing. What happens when I click view? Nothing. Okay, let me scroll down, try again. Continue on. Very nice so far. Oh, that's nice. I like the the text-based, I think it's 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 UI/UX one to see how good they are and this is but this is probably by far the single best UI generation that I've got from one-shotting and this is this is this is so freaking cool. Alright, let's continue on with number two.
For this one, I'm not going to read this entire 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 it to see if it can actually recreate this, not this part but this part. Alright, this is clearly a 3JS with some shaders worked in here, scene, I'm assuming at least. 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, you know, do some type of interesting, you know, get like transfer animation for the page based on what you click. Here we go. Oh, okay, look, we're at localhost. 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. Oh, okay. Very, very nice. I mean this is sick. Oh 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. Alright, next up.
This next one, design an objectively better landing page hero section than the one attached. This one is actually for the project-based course I literally just finished two days ago called Landscap, where I show you over the course of 5 hours how to use Claude Code to make this SaaS which is an AI landscape visualization app, and so I'm asking it, I can you actually improve the hero section, and this time I 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 is in the description. Shameless plug, alright. 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.
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 it'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 whitespace, 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 it it nailed it, you know, this is a more modern approach of Craigslist. Awesome. Alright, so that's four for four, let's check out the last one. The last one's pretty crazy.
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, that's V E C T R F L dot com. So this this UI has won awards, it's it's amazing, it's GSAP I think uh and definitely Three.js 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 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 scroll. Alright, oh, 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 one-shotting 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, 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. I, 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 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 can produce stuff better than you, faster than you, etc. But if you're an optimist, then you look at this a- 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 T. I 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 I 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 percent produce the 10 percent 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, I that is released, you can take today, and I will see you all very soon. Goodbye.
Video
Video
