I Tested Claude Code vs. Codex on Design. It Wasn't Even Close.

0:00 So, I just had Claude Code and Codeex build me eight different websites. And they were given the same prompts and all the same data to start with. So, we're going to be going over all the outputs.

0:07 I'm going to be talking about which one I think is actually better when it comes to design so we can finally end the debate. And for each of the builds, we're going to talk about how many sub

0:13 agents were used, how much time it took, how much it costed, the output tokens, things like that, so that you can actually make a decision based on data rather than just like design vibes. So,

0:21 let's not waste any time and just get straight into today's video. Okay, so here's what we're going to do. For every single one of these builds, we're going to have Cloud Code on the left and

0:27 Codeex on the right. So this first one was called bowl and bloom. We can see that the brand guidelines were given, the logo was given the name. And basically my idea was let's remove as

0:35 much variability as possible and have cloud coding codeex build eight of the exact same businesses like eight of the exact same sites and that's how we can compare the outputs. So right away we

0:45 see the color scheme is consistent. We see over here we have like a bunch of text to start in the hero and then we have the image. Over here we have the image up top and then we have some

0:54 information about you know the meal train that keeps showing up. So far, I'm liking Codeex more because we also have this navbar up top. We have the call to action here. We have the call to action

1:03 here. This one just feels a little bit more clear as far as like you open up the website and you know exactly what you're in for. So, let's keep scrolling down here on codeex. We have a little

1:10 thing on this lefth hand side that shows us like how far along the site we are. We get this sideways scroll animation where we can see the first 14 days, the fourth trimester, build a care box, send

1:21 useful care. We see the four core flavors, chicken, red lentil, garden greens, miso, mushroom. Same thing I'm assuming over here. Okay, we get a bit of a story. We get chapter one. This is

1:30 a lot of words. So, it's very, very wordy. We get chapter two, what's actually in the bowl. We have more pictures here, more pictures here. And then down here, we finally get to like a

1:39 scroll section, but we don't see the flavors yet or we don't see how this works. We see one, it arrives frozen, and then we see we tip the block into the pan, 9 minutes, and that's when we

1:47 have our food. So, we're getting different vibes, different feels, but the information is the same. It's just being communicated very, very differently. Okay. So, anyways, for both

1:56 of these, let's go to the build your carebox section. So, I'm going click on it over here, and I'll click on it over here. Um, well, first of all, there's a little bug, and I think it's because I'm

2:03 doing this in like the claude code half screen. So, let me open this up full screen real quick to get that experience. And by the way, that is one thing that I think we should factor in a

2:10 little bit. It obviously looks different on mobile. It obviously looks different if you have it open full screen or if you shrink it down to half. Hopefully, the cloud code like or codecs when

2:18 they're going through, they should be testing it in different sizes like that. So, one thing I'll subtly keep in mind, here's the two ways to stock it. Anyways, what I wanted to do is go to

2:26 build your care box. So, this is cloud code. We can see that we can choose the items. We can then choose, you know, how many of each one we want. We can choose our delivery day. We can choose our

2:34 first delivery. And that's basically it when it comes to like choosing the actual items. We can see the price and then we go to checkout. But obviously, this is a fake site, so there's not

2:43 going to be any sort of checkout information. Now, codeexes, we can also keep just half screen. And this seems to look fine, right? We have eight items, 12 items, 16 items. We can change how

2:51 many of each item we have. Although, one thing I noticed is it doesn't change the color. Like, you would assume if you have five of these red lentils, you'd have five here. And we only have one

2:59 ginger chicken rice, but we still have four. So, that wasn't probably fully vetted out. But either way, this is a very nice overall. I think it's a cleaner experience on the codec side.

3:09 So, anyways, for round one, this was bowl and bloom. We could see the difference in the way that they actually designed even though we had the same pretty much the same copy, the same

3:16 story, the same info. But here's where it gets interesting. Cloud Code used four sub agents whereas Codex took one. Cloud Code took two hours whereas Codex took 50 minutes. Cloud Code used almost

3:26 500,000 output tokens and Codex used only 100,000 and Cloud Code cost 53 bucks while Codeex cost a little under 20 bucks. So obviously there's a clear winner here when it comes to the design,

3:37 the feel, and the cost and time which was CEX. And speaking of being efficient, let me take a quick pause to talk about today's sponsor. All right guys, real quick I need to take a second

3:45 to tell you about today's sponsor, Granola. So, I run a ton of different meetings with different teams and I don't want to focus on how to actually like take notes and track action items.

3:53 So, what I do is I have Granola do that for me. It's an AI notepad for meetings. But what's cool is that Nobot joins the call. It basically just listens to your computer's audio in the background,

4:02 whether you're on Zoom or Google Meet or whatever platform you're on. So, for example, this week I had a Q&A in my community. I had a sync across my AIS team and a sync with a different

4:10 certification team. And all within 3 hours, I didn't have to prep or reflect between any of those calls because Granola was able to not only grab all those transcripts for me, but then it

4:19 actually helped me synthesize all of it into my AI operating system, update my to-dos, and then send out any action items. So, Granola is completely free to start. Links also in the description.

4:27 Let's get back to the video. Okay, so here's number two. I don't exactly know what was fed in for this prompt. It's called Minutecraft. I first of all, both of these are very overwhelming when I

4:37 look at them. Right here we can see the hero text I read on this claude code side is your meeting ended the work is already organized. Over here I see client call over follow-up ready. So

4:46 this is some sort of AI notetaker that turns your meetings into decisions action steps things like that. But overall whatever the brand guidelines were that were fed into these prompts

4:56 not very good. Like this is very overwhelming. It more so feels like an interface and a dashboard rather than like a landing page that's built to convert. Either way let's go through. On

5:04 the lefth hand side we can see we've got six steps. We have a Northgate dental group needs review. And then we have Oh, that jumps us all the way down. Whoa, I don't know what just happened here. We

5:13 got to a 90 second tour. Let's go back to the home screen. Anyways, we'll keep going down. There's six different steps. Um, we have decisions to be made. We have what this workspace is. We have the

5:23 transcript. So, this is kind of like it's a demo. This is more of like showing a demo of what you would use this for than like features of the product. Overall, I don't like this flow

5:31 for a landing page at all. I think it's super confusing. Let's see if Codeex made it a little bit less intimidating. So, we've got sources captured. We have summary. We can look at the transcript.

5:41 We can look at the notes. It shows us down here that we have two action items. So, a draft supplier brief for Taylor and we can share the pilot score card that's on Mina. Okay. Anyways, don't

5:50 love this at all on either side. Let's see if we can compare other things. So, let's go to our pricing. We see here that we have monthly, annual, and meetings a month. If I go to plans on

5:59 the right side, this is the difference in the way that they structured out sort of like the pricing side. We have more information down here with seats, extra seats, solo practice, um, all that kind

6:09 of stuff. This is obviously just way more overwhelming. Cloud code was just like overbuilding here, I think. Let's see if we go to tour how this looks different. So on the tour side for

6:20 codeex, we have this UI picture down here. Cloud code once again, we have this UI picture. Let me open this one up full screen to see if it looks normal or if that's some sort of bug as well.

6:30 Okay, even full screen with cloud code that we got this bug. So, that is obviously an issue. Normally, Claude Code's pretty good at the vision loop and the verification, but I guess not

6:39 right here. And it's just so wordy. Like, I don't think anyone wants to come through and read this much. It's It's not very visual at all. So, once again, I think that Codeex is already winning

6:48 this one. Let's go to integrations and see the difference here. I mean, this is just not struct this feels like a super like technical software. No one's going to want to read this. Whereas over here,

6:59 there's less words. It's a little bit more column organized. It's a little bit cleaner. I mean, overall already Codex is winning this one. Again, let's click on the start a clean week on both of

7:07 these sides. See what we get over here. We basically just would put in a name. So, let's just put in like Upit AI. Hit start a clean week. This is a sample workspace created locally. Okay. And

7:16 over here, if we click on this button, it is just basically a trial. There's not really a call to action to put anything in. So yeah, anyways, Codex definitely wins this one from design and

7:26 UI thought. Now, let's take a look at the pricing of each. Once again, Codex is just crushing. Took an hour and 12 minutes, whereas Cloud Code took two and a half hours. It only cost 100,000

7:37 tokens and 20 bucks, whereas Cloud Code was almost again half a million tokens and 65 bucks. So, Codeex is 2 and0 right now. Okay, so build number three does not work half screen. It just doesn't

7:49 work. It wasn't built to be like that. That's fine. It doesn't work for either. So, this is Cloud Code. Let's just go through this one and then we'll go over and look at codec. So, we have a company

7:57 called Trail Latch. It seems like this is supposed to be something for camping. So, you're going camping and you want to be able to cook dinner. It looks like we have this like whole workstation that

8:05 unfolds so that you can cook your meals, carry everything. It's like a kitchen under 90 seconds from latched to cooking. Okay, cool. So, I don't mind this design right now. This is kind of

8:14 interactive. We scroll. We get the sideways scroll. It reveals itself. We have a prep deck that is, you know, this dimensions, 59 bucks, sold separately. We have a stove shelf. It's showing the

8:24 dimensions here. We have a utensil rail. It says four parts, one case. Then we have the price. Now we scroll down more. We see pull the latch. Drag the lever down. Arrow keys work too. And it

8:34 basically shows how this thing gets unlatched and unfolded. And now we have it looks like a grill almost. So that's pretty cool. It shows all the elements. I like that a lot. I like that a lot.

8:44 Um, that's actually the end of Okay. No, it's not. So, this is showing a picture down here of what that looks like. Then we have the wash basin. Okay, very cool. Once again, dry bin, lantern arm. It's

8:53 the same scroll sort of style. We've got a side deck. And then we get into some different ways you can buy this with the core, the bundle, family expansion, what it's made of, where it goes, different

9:03 pictures, and then we have the call to action down here where you can actually go ahead and build your own setup. You can add these different items, see how much it costs, and then you can go ahead

9:10 and order it. Okay. Honestly, I really like this. I like that feel. Let's go over to the Codeex version. Right off the bat, I do not like this. I'm like, what am I looking at? This text is hard

9:20 to read. This is confusing. I think that CEX here was going for like a really interesting sort of like scroll style. And by the way, if you guys are liking some of these scroll animations, then

9:29 check out this video. I'll tag it right up here. I did a full breakdown on the skill that I built that I use for all of my websites now. Whether you're using Cloud Code or whether you're using

9:36 Codeex, they both utilize these skills in this video. Anyways, if you want to check that out, go to that video up there. It's got a free skill you guys can download. It's really nice. Anyways,

9:43 same company, Trail Latch. We see still cooking out of three bins and we see dinner starts before the headlamps come out. So, we have a call to action right here to build your setup, which takes

9:51 you to a different page. Let's go back real quick and start scrolling down. So, we have like a journey, right? This line's going through. Okay, so I guess this is like a before and after. So,

9:59 it's like this is what you used to do. Five setup jobs before heat, but over here is what you could do now. One case, three moves ready. Set the case on stable ground. Open the legs. Latch on

10:08 shelf and basin. Okay, then we have five pieces without a system. And then over here we have everything returns to the case. So it's a little scroll animation of that happening. Then we have measure

10:18 the cargo floor, not the badge. Weatherable surfaces. Okay. I mean, I just don't like this feel, honestly. I think there's too much going on. It's a little more overwhelming. Your eyes as a

10:26 viewer, you don't really know where to be looking. So, I don't love this vibe. I like how it comes over into one clean screen. Now, I think that's good. The the spacing is okay. And then we go to

10:36 build your setup. And this is where we choose the kitchen. We can choose the bundle, the family expansion, and then we can go ahead and buy this. Let's see. We have something like vehicle fit.

10:45 That's pretty cool. I mean, this looks good. Like, this feels like a much better design than what we had on the main page. We have different products. Once again, I like this page. We have

10:53 FAQs. This page is eh. It's okay, but for the most part, I like this vibe, but this isn't what people are going to see right away. What they're going to see right away is this, and I don't like

11:02 this at all. Whereas over here, all of the things are answered in one page. So, I think that Cloud Code wins this one until we look at this pricing. So, once again, Cloud Code took four agents,

11:13 Codex was one, Cloud Code was almost 2 hours, Codex was one. Um, Cloud Code took almost 400,000 tokens, Codex took 100,000, and Cloud Code cost 42 bucks, and Codex cost a little under 20 once

11:24 again. So, you guys are starting to feel the theme. Codeex is faster, it's more efficient, and it's cheaper. And typically, I like the design better for the most part, but this one I would say

11:34 Cloud Code wins. So right now I'd say it's like 2 to1 on the design element codeex to cloud code but design obviously isn't everything. This stuff is you know very efficient. So I think

11:44 it's really important to call that out before we move on to the next one. It's not just about who can oneshot something the best. It's about how can I give instructions and how can they take what

11:51 I say and turn that into an experience for me. And I think that right now even though in this scenario I liked Claude Code's output better. If you were to be able to go back and forth with both of

12:01 these models for like an hour or two hours, let's just say maybe more than that since how long these took. Which one of these is going to follow your instructions and be more efficient about

12:08 it? Right now, I would say that's going to be Codex. So, anyways, just keep that in mind as we move through to the next examples. I'm going to speed this up a little bit because I think you guys are

12:14 starting to get the theme. All right, we're back with the split view. On the left, we have cloud code. On the right, we have codeex. And on the left, immediately there's just way too many

12:21 words once again. So, that's probably something I feel like I need to update in the skill is think about the user journey more. like it thinks about the user journey, but think about not

12:29 overwhelming them and making sure the messaging is super clear, which I thought I prompted them to do that in here. I talk about the pain, the promise, and the person, but I guess it

12:36 wasn't clear enough. So, anyways, we have present and clear. It sounds like it's a program that's supposed to help you with your speaking, speak more charismatically, public speaking, things

12:45 like that. So, Claude Code this time chose like a before and after approach. I think you can see here, you do not need more charisma, you need a clearer way through. They've got a cohort. So

12:54 the call to actions right up top to join this cohort to learn how to speak better. We go through, we can see what actually happens in the first 30 seconds. You speed up, you build a

13:01 runway, you explain. Whereas over here, you've got, you know, different things going on. I think the design isn't bad. The color scheme isn't bad. We've got some animations here. I actually like

13:09 this, right? It's like annotating things. It's highlighting things. It is, you know, kind of calling out issues. I think that's kind of a cool interactive experience, but I don't think this page

13:18 has enough like depth and it's just too confusing. Whereas on codec side, it crosses out the word charisma and it highlights the word clearer way through. We have different colors, so it switches

13:28 up the depth, switches up the sections, which I like. We've got just less wordage. It's a lot easier to understand what I should be looking at. We've got a camera here. A camera becomes ordinary

13:37 through useful reps. Different colors, more depth, crossouts. I think Codeex is going to win this one for sure. And on the cost side, very similar story. Four agents, one agent, two hours, almost an

13:48 hour. 440,000 92,000 42 bucks a little under 20 bucks. It's very very consistently like this. Okay, here we go. Cloud code on the left. Nice little animation. Codex on the right. No

13:58 animation to kick off. We have North Ledger Studio. Cloud Code says your number should tell you what to do next. And over here it says next. Your number should tell you what to do next. So it's

14:07 a fractional CFO council for founder creative agencies. Okay. So far I'm liking Codex better. It has, you know, some buttons up here. It's got the logo. It just feels like a little bit more

14:17 branded, a little bit more trusted. Let's start to scroll through a little bit. We have once again just a lot of words, not very many visuals. On the right, not as many words, and we have

14:26 more structure. We have also like this path that we're scrolling through, which is cool. We have right away some numbers here. Here's an agency, 18 people, 4.3 million a year, and a profit and loss.

14:34 That looks fine. Over here, a month with a point. We're just getting more color switch-ups. We're getting more depth. We're getting images. We're getting a a path that's just a little bit more. It's

14:44 just nicer to follow, right? Like it just has more of a story and this just feels like a report. Like who wants to really look through this? I definitely don't. I like the way they have this

14:52 separation here. We have three ways to work with us. Um hopefully this isn't like it's extremely overwhelming the way I'm scrolling through both at the same time. I like that animation. This is

15:01 just a much better branded feel than what we're getting over here. I didn't even know we were at the end of this dock. It just says, "Okay, we're done." So Codex is going to take this one for

15:08 me once again. two hours, one hour, 500K, 100K, 52 bucks, 18 bucks. It's pretty consistently the same. Okay, so now what I want to show you guys is those were examples where I gave them

15:20 like the exact same prompt and the exact same brand guidelines, but I kind of left it open-ended. I basically said, "Hey, here's the copy. Here's the pain person promise. Here's the logos and

15:28 stuff. Just build me a landing page." And that was basically it. Now, this example, I said something like, "Build me a website. I want you to impress me. Make up the business. Make up the use

15:37 case. Just show me what you're capable of." and show me how good you are at design. And this is what we got. So this one is claude code. I'll reload that right now. We can see we have like these

15:46 ripples or it's like sound waves or it's like real waves. It says your room has a note. You hear it in every take. So that's not a bad hero section. It's a little overwhelming, but it's not too

15:55 bad. It's showing me what it's capable of building. We can see down here we have a little bit more of a journey. Although this is a bit overwhelming. Like there's a lot of things going on

16:04 here. This is like spaced out super weird. It's stretched out. I don't think it's supposed to be like that. But they're giving us some sort of like demo almost to play with. We can choose the

16:13 floor, the walls, the ceiling. Okay. We can also see on the right hand side, we know how much we've scrolled through because we can see like this little bar. We can also click through it to nav.

16:21 Anyways, we can see some different elements. Here we have um just a lot of words. Like there's just there's so much copy on the site which I don't think is such a is a good thing. These numbers

16:32 once again are stretched. I don't know if they verified the aspect ratio, but this is not too bad. Um, it's it's a bit more clear, but like I said, it's just very wordy. So, that's what Cloud Code

16:42 wanted to build to impress us. Now, let's see if we go over to Codeex. I'll give this one a refresh. This one loads up. We have we heard tomorrow. We have a little mouse animation, too. If you guys

16:51 see that overall, I like the way this came through. It's just big hero text. It's very clear. It's not super wordy. We start to scroll down. The universe is not silent. It's incredibly quiet. We

17:00 get this animation here. We get a little mouse animation as well. A nice dynamic background. Tune the dark. We can play with this here. And I'm not sure if this is playing any noise or anything, but we

17:11 can like capture a signal. So, that's kind of interesting. But overall, this design feels nice. Like, I like the font. I like the feel. I like the way that this is coming through. Um, 17

17:21 minute sunrise. Okay. I mean, overall, this is just a better experience than what we were getting over here on the Cloud Code side. I personally think this is just a much better branded

17:29 experience. This is a pretty nice effect. We even have the glow still coming. I like this color scheme. I like how everything was simple. Codex wins this one as well. And if you take a look

17:38 at the results, this one's insane. Codex took 8 minutes on this and spent one and a half bucks. And Claude Code was very similar. You know, 330,000 tokens, almost 3 hours, 50 bucks. Like, that is

17:50 absurd to me. That was a little bit different because it was super open-ended, but it's still interesting to understand how the coding models and the harnesses work under the hood when

17:58 you give them such a vague prompt. Okay, so I think that this is the most interesting one of all because what I did here is I gave these guys the exact same prompt and it was so so so

18:08 specific. Like every single piece of the website what I wanted them to do and these things came out basically identical. I mean look at this. Everything about this is pretty much the

18:18 exact same. There's small differences here. You can see the icons are a bit different but everything is pretty much the exact same. And the reason why this is so interesting to me is this proves

18:26 that the more specific you are, you can get basically any model or harness that's capable enough to give you exactly what you're looking for. And because I was so specific in these

18:36 prompts, we got essentially the exact same thing. And why I wanted to show you guys this is because it wasn't the same when it came to cost and tokens. Again, Codex was still much more efficient even

18:46 though I gave them the exact same prompt and the outputs are the exact same. So, if this doesn't show you the way that the harness of Codex is being more efficient with its tokens and and by the

18:54 way, cloud code was on Opus 5. Codex was on GBT 51.6 Soul, but it's just really interesting to see. And I did this again with an HTML report, which I'll show you guys right now. Okay, here's the next

19:03 one. I said to build me an HTML report. I gave them all the info. And once again, they're pretty much the exact same from a design perspective. They're the exact same pretty much. All the

19:12 copies obviously the exact same. Like I said, I was so so specific, but these are the same outputs. like you wouldn't really look at one and be like, "Oh, this one's significantly better than the

19:19 other." But if we go to the cost, this is significantly better than the other. It was faster. It was cheaper. It was more efficient. It's just really, really, really interesting to me. And I

19:29 hope that this starts to paint some sort of picture in your guys' minds of like maybe you should start using Codex a little bit more for things that you originally thought was Claude because

19:37 these things are evolving so fast every single day. I'm not out here saying outright Codex is better than Claude. I'm saying that I have both subscriptions and I use them both every

19:44 day and I'm constantly changing my opinion and I'm constantly testing what's possible. So, let me just give you a quick rundown on the overall stats. We had 25 total agents with Cloud

19:53 Code and nine total of sub agents with Codeex. We had a total of 14 hours for Cloud Code and 5 hours for Codeex. Cloud Code used almost 3 million tokens on the output side. Output tokens, not input

20:03 tokens as well. Codeex used about 550,000 output tokens. And if we were doing API billing, this would have costed me about $444 in cloud code and about a hundred bucks in codec. And I'm

20:14 sorry I keep saying costed. I got ripped apart for a different video when I kept saying costed. It just I don't know why it comes naturally to me. Cloud code cost 444 bucks for me here. Sorry about

20:23 that, guys. But that is going to do it for today. So I hope you guys enjoyed the video. And if you did, I would really appreciate if you could leave it a like. And as always, I appreciate you

20:30 guys making it to the end of the video. And I'll see you on the next one. Thanks everyone.