핵심 요약
Claude Code와 Codex에 동일한 프롬프트와 브랜드 데이터를 제공해 8개의 웹사이트를 제작하고 디자인 완성도와 성능을 비교한 테스트다. 서브 에이전트 수, 소요 시간, 비용, 출력 토큰 등 정량적 데이터를 바탕으로 두 도구의 차이를 분석한다. 첫 번째 사이트 비교에서 Codex는 직관적인 네비게이션과 인터랙티브한 UI로 완성도 높은 구조를 보인 반면, Claude Code는 텍스트 위주의 다소 장황한 구성을 보였다.
주요 포인트
- 동일한 프롬프트, 로고, 브랜드 가이드라인을 기반으로 8개의 웹사이트를 제작해 비교 변수를 최소화함
- 단순 디자인 느낌뿐 아니라 서브 에이전트 수, 소요 시간, 비용, 토큰 소모량 등의 객관적 데이터를 종합 비교함
- Codex는 명확한 상단 네비게이션, 직관적인 CTA, 가로 스크롤 애니메이션을 갖춰 사용자 친화적인 구조를 제공함
- Claude Code는 텍스트 중심의 스토리텔링 방식으로 정보를 전개해 다소 장황한 인상을 줌
- 동일한 정보를 담고 있더라도 레이아웃, 인터랙션, 정보 전달 방식에서 뚜렷한 차이가 확인됨
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. 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 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, 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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. 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 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 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, the feel, and the cost and t