Design BEAUTIFUL Apps with NEW Opus 4.6 (crazy new model / full guide)

What's going on, guys? This is Oliver, formerly from Response and a few other software tools that I've exited and now running roseell.dev, where I teach people how to vibe code and make money with software, and papers.com, which is my newest software that I'm running myself. Today, it's very exciting, right? Something crazy is happening this week. GPT codeex 5.3 was released and Claude Opus 4.6. Now, there's a load of videos that I'm going to be doing, right? I've been a bit quiet on YouTube. I'm going to be running videos on on on basic comparisons between the two because they're both competing with each other right now. And in this video, I'm going to be making from scratch a uh landing page with claudopus 4.6 um hopefully, you know, oneot um from firecrol.dev. So, in other words, I'm going to try and copy this website pixel for pixel with claudopus 4.6 six and um in another video currently cursor and at least when I checked it in my region it doesn't have access to codeex 5.3 yet so I'm going to be making a video on how to build landing pages with 5.3 and I'll be comparing the two etc and codeex have actually released their own new app soc um by GPT is a brand new app something like it's kind of like cursor and I'll be showing you guys how to use that as well now I'm going to give you um the full prompt of how I did this. Um, and we're going to just go from here, right? So, I'm going to give you screenshots of the Firecrol website. This is what I'm giving to Claude. And I want you to create an absolutely intensive PRD for copying the design pixel for pixel, which we will then feed to Claude Opus 4.6 to oneshot a landing page. And I just go over, you know, we need to cover design, layout, animation, etc. What I've done then is there's two ways you can do this. You can go to screenshot um go full page which is a screenshot thing where all you have to do is go into the um extensions and you just click go full page and it will take screenshots all the way down the page for the actual app itself. Right? So, I don't recommend this because when I did this um it actually uh it completely like made a giant one that just wasn't very useful because fire crawls page is so long. Right? So, I've only given Claude a handful of screenshots the main post um like main sort of header some sort of like features sections etc. Right? And basically what I'm going to do is I'm going to ask it now to give us the PRD. And as you can see, all of these um landing page screenshots um are going to be turned into a PRD to create our design. So I'm just going to skip ahead to when this is done, guys. Okay guys, so an absolutely enormous PRD um that Claude has made for us. Um, I know that in the past a few people have commented like, "Why are you using X or Y or Zed for making PRDS? I was originally [snorts] using Perplexity just because I had a pro plan on Perplexity um, from a past project and I thought I'd use that. Gemini is really good, but Claude seems to be the one that just spits out like the most insane PRDs, right? So, and this this I've done it for free. I don't have a paid plan on um on Claude, which is cool, right? So, I'm going to copy this now when it's done. So, summary. Um, it's all done now. It's absolutely huge, guys. You can see here it's even gone through how animations work, things like that. I'm going to assume that this is going to work really well. And I'm going to now head over into cursor. Right. So, final paper. So, I've created a new public um page at test. So this is obviously my my actual app itself um is obviously is paper but I've just for the sake of this video I've just created a new video like landing page called let's build a landing page. So if we go to uh cursor now I'm going to go to opus 4.6 6 max. And I feel like this is actually going to cost me like [laughter] like a fair bit of money because um apparently Opus 4.6 is like really hungry for tokens. But who cares, man? This is what I'm here for. I'm here to here to show you guys how the tools work, if they're worth the money, right? So um okay in the slash test page please can you um follow this PRD to replicate the fire crawl landing page. So what I'm also going to do guys um I've also added the images. I am also going to add the images um because sometimes I mean sometimes Claude is just better when it understands what it's looking at. So I'm gonna it's it's pretty it's pretty boring, but I'm just going to really quickly copy all of the images over that I gave to um Claude for the actual PRD itself. And again guys, just to remind you, I'm using um Claude Opus 4.6, six, which is Claude's newest model to design this landing page. So, let's go here. Let's go here. Um, core principles, proven performance, whatever it may be. And then this. So, this is an absolutely insane test, guys. I'm not going to go into plan mode because this is the plan itself. It would only waste a lot of tokens and just like kind of regurgitate the plan that I've already given it into a plan document. So, I'm actually just going to go ahead and just just start this. And I'm going to um skip to when it's done. And it's already started here. So, it's going through the navbar, etc., etc. And let's just go from here. And I'll see you in a minute. Okay guys, so um we are done. So, if we really really go up, um I'm just going to read through exactly what happened. So, we sent this over. Um it created a to-do list of nine to-dos. So expand the feature cards, add LLM um section with demo scraping, etc. And what it seemed to do um which isn't ideal. Uh this is just a bit of feedback about Claude Opus 4.6 because I know people said how token hungry it was. It appeared to do the landing page and then it said, "Right, okay, I've got a good grasp of the landing page now. I'm going to build it." Right? But it had already been built. I checked in local host. I checked on the test and it was already like done, right? So, what what it seemed to do [laughter] is create the page and eat all those tokens. It was like $2 in tokens and then it said, "Right, I'm ready now." And it just did it again. And it [laughter] just it just wasted the credits. I don't know why. You can see it by here. So, um, now, oh, I have a clear picture. The existing page has a solid foundation, right? But it it was done like nothing nothing is different. Now let me write uh the comprehensive fire crawl landing page and it just wrote another [laughter] like 600 lines of code um and deleted loads which just it just didn't really do anything. So navigation hero section company main features code integrations etc. Right. So let's go. Right. So this is looking good. This is looking quite good. Right. So I presume you can enter stuff into that field. Yes, you can. Two months free annually. Turn websites into LLM ready data. So, you've got this thing which like is like this code box, which is cool. Um, I tell you what, just so there's no um like additional things. So, I just refresh the page and we come down. So, scrape completed. That's not really animated, which it could be. Got this animation in. These are pretty like they're not very inspiring these. They just look pretty like anyone could build these. you [snorts] if you scroll down you've got the um the different like code snippets which is quite cool. There's some jankiness here which I don't like. Um from here then that looks really nice. Um so let's see that again actually. So extract structured data. So we go down um and it just says it goes down like that. So that's really really nice actually. So the input is this and the output is that and it's actually like accurate data which is cool like it actually pairs up. Now we got down here integrations and open source work with the tools you already use well-known tools whatever it may be. Um code you can trust core principles performance going down. Wow I like that. I really really like that these bars um with the different uh response times built to scale batch endpoints async. I do like that as well. Are you ready to build with fire crawl? And then we've got the bottom. Wow. I really like I actually really really like the um the backgrounds. No, the footer. Sorry. So, I suppose I don't mind it. If we actually open the fire landing page, you can see that it's just immediately 10 times better. Um you've got this grid in the background. And let's actually give this feedback. So, um I'm going to say if we go to this um the I'm just going to start giving it a few examples of the background and the and the layout because the main thing that I wanted it to do was mimic this like beautiful textured layout and design and background. So, see how all of this works? like you can see all of these like beautiful like um ASCI is it like as A asci like like designs and like um things like that. Um if I go down to like here there's like nice little grids and stuff. I just want to tell it like okay it's a good first run but I don't like how you didn't include the textures. So, let's say great first run, but you missed a lot of these textures in the background. The landing page is beautiful. Some of the text actually and font could be uh font could be a bit thinner and more tasteful like the original firecrawl font and also you are missing elements from the firecraw page textures grid layout pretty background design, grided, textured, um, sections, etc. I added examples of the uplose grided layouts and beautiful, tasteful designs that are in the back of the page. So, I'm just going to say, look, I really like this. I do really like it. [laughter] I thought that was ours then. So, I do really like it. Obviously, this is like pretty like it's not very inspiring. Like, it's not very I'm not worried about like the the logo because we haven't given it assets. I just mean like things like this. I think there's a way that it can like programmatically create what we want. I do like up close. I do like the shadows and stuff like that. Wait, you can see really really up close that there is a grid. So, there is a grid in the background. It's just very very faint. Um, and it's it like it isn't like you kind of see that the grid layout and stuff is part of the personality of the Fire Crawl landing page. So, I'm just going to skip ahead and see what it says um about that like additional feedback I've given it. Okay, so something has happened here. So, it did write something ridiculous like 700 lines of new code. Um, but it's just been stuck on planning next moves um, for probably 5 10 minutes now. So, I think what I'm going to do is I'm going to stop and I'm going to uh, basically sort of like I suppose just say look like it stopped. So, I mean this is the thing. I can't say whether we go here. So, this does look better, right? I mean, there's not really much going on here. I'm probably going to prompt it to say um finish off the work and see what it says because it got to the very end. Uh if I let me check for the linting errors page renders correctly. What I've noticed is while it's working on that, I've noticed that it still hasn't like actually added the the grid background layout. Um, it just kind of added these like really like tasteless like grid things here because obviously what I'm trying to do is I'm trying to get this I'm trying to get these like beautiful textures by here and like the grided layout. It's just not really happening. It's not really doing it. Um, so it's going to open this in the local host. And as you can see again, there's just like there's no grid in the layout. And we're gonna keep we're gonna keep asking it to do it until it actually does it. Rendering with all sections. I might even just finish it off with composer and say like the grids are not visible though. Haven't got a nice grid background. So make it visible. Um screenshot shows no grid. so if this was its like idea of a grid, then it's just really like it's really bad. Um, but if I just pop it in there, we'll just do this final push and see if it actually listens and then we'll end the video because this is obviously a really good start considering it one shoted it. Um uh for transparency, I think this whole thing has costing me like four or five maybe $6 in um cursor tokens, which is expensive honestly for what other tools can do and what other models can do. If only we can get this the opacity up of the of the grids they supposedly added in the background. That would be useful. That would be useful. Right, let's see what composer has done. [laughter] Oh no, that looks awful. Oh god, look at that, man. Let's have a little look at this. Oh my good god. Right, I think we're going to call it a day [laughter] on however the website looked like 20 minutes ago. Uh, if we go back, grids are not visible. We haven't got finish off the work. Okay, we're going to go back to this because that has just not worked. There we are. [laughter] So, what is my what is my final view on Opus 4.6? Right, [snorts] I honestly can't see a massive difference in what 4.5 would have done. It's just costing me a lot of tokens and it's made me laugh. Um, obviously the last couple of like mistakes there were done by Composer because Composer is a cheaper model. It's faster. It's cheaper. It's like not as sort of like it's not as it's not as expensive and not as powerful. Um, I think I'm going to test out codeex 5.3 with the same thing and make a video. Um, because I think Codeex 5.3 is better at design. But we'll see. Um, and obviously any problems at all, any questions you guys have, give me a shout. I'll put all the prompts in the description and I'll see you in the next video. Take care.