# How to Fix AI Slop with CLAUDE DESIGN

Channel: Tristen O'Brien
Video: https://www.youtube.com/watch?v=S2DE95bGld0
Duration: 9 min
Language: English
Words: 1943
Transcript page: https://viewrankai.com/tools/youtube-transcript/S2DE95bGld0

---

[0:00] So, today I want to show you the five fixes that can turn any Claude design from AI slop into something that looks like it cost $20,000 to make. Because at this point, you can spot an AI website in about a second, right? And that's because they all look the same. They all have that purple gradient look, like this one as an example. This was made with Claude design in just a few minutes. And most people will take a look at it and say, "Hey, this looks pretty good." And to be honest, it doesn't look bad, but the problem is they all look the same. And this is AI

[0:31] slop. But it's not Claude's fault. You asked for a modern website, and so what it gave you was the average of the whole internet. But the good news is that is completely fixable. So, what we're going to do is we're going to take this exact page right here. This is a a fictional energy drink company that I put together. I'm calling it complete energy, and we're going to build it out live. I'm going to take you through all five of the fixes from start to finish until it looks like something that a real brand would pay thousands of dollars for. So, let's jump right into fix number one, which is creating an

[1:01] inspiration board. Before you even go into Claude, you're going to do what the top designers do. And that is go to a couple sites like Site Inspire or Lapa Ninja, and find four or five different websites that you think look really, really good. And what you're going to do is you're going to hang onto those links because we're going to use them just here in a few minutes. And to be clear, we're not copying anything here. We are just using this for inspiration, and that's exactly what the top designers do. So, when you're looking at these websites, I want you to not only think, "Yes, I like this website." But I want

[1:33] you to really think what you like about it. For example, this one right here. I don't love the colors or the font, but I do love how the image overlaps the text as you scroll down. Something very specific. Or this one right here. I really like how big the elements are. I like the colors with this one, but that's really about it. But you get the idea, right? You're just going to pick four or five different websites that you like, and you're you're to use them for inspiration. And we're actually going to use them as part of our prompt. So, take a look at my prompt here. I'm basically

[2:01] saying, "I like these sites." I'm telling Claude exactly what I like about each one of them, and then I'm going to hit enter, and we are going to see what it builds. And after just a few minutes, this is what we get. And this is already looking a thousand times better than where we started. Yes, there's a lot of work that we need to do here, but it's already starting to take shape, and it's already starting to pull away from that AI slop. With that said, we need to tackle something that stands out immediately, which takes us to fix number two, and that is the typography,

[2:29] or the font. Almost every AI tool is going to default to the Inter font, and that's because it looks clean, it looks good, but there's so many websites that are using it right now that as soon as you see it, your brain automatically switches to AI slop. And you don't have to be a typographer to fix this. You just have to go find the fonts the same way that you found your websites. Matter of fact, on the references that you already pulled, you probably have

[2:52] spotted something that you already like. So, for me, I'm going to show Claude my font inspirations, and to tell it again, don't copy it, this is just for inspiration. And then I'm going to tell it a couple rules here. The body of text needs to be around 16 to 18 pixels, so it's really easy to read. And then only have one display font, so it doesn't get really messy. Those are the two that we need to tell it. And if you don't know what any of that means, well, don't worry, you're not alone, and we're putting this inside of our prompt, so

[3:19] Claude can process all this for you. Okay, now, this doesn't happen every single time, but Claude design did give me a couple of options to pick from, which is good. I'm glad that they did. I like this one right here, but I am going to tell it to make it just a little bit heavier, and we'll see what it comes up with. Matter of fact, here just in a

[3:35] couple minutes, this is what we have. The Inter font is gone. Now, the font doesn't look terribly different, to be honest, but it is different enough that it already feels like it's becoming its own brand, and I do like it. Now, a font might be a really small change. Yes, that is true, but let's keep going here, because once we get to number five, I'm telling you it's going to completely transform this page. And that takes us to fix number three, which is color with a job. When it comes to AI slop, we know that the purple gradient look is a dead

[4:05] giveaway. For some reason, every AI tool loves to use it, and the second that somebody sees it, they know that AI built that website. A good designer gives every color a reason to be there. Now, you don't have to find these color palettes. Again, you're just going to use websites for inspiration. And for me, I'm going to show Claude a couple of palettes that I like for inspiration. I'm going to tell it that I want bright and fun colors, right? This is for an energy drink. And I remind it that this is for an energy drink. But we're also going to give it one rule that works with almost

[4:34] any brand, and it's going to make this significantly better. We're going to say that we want most of our page to stay neutral. We want a base color, and then we want something that gives us really clean text, because that is the majority what people are actually going to see. And then we're going to add in some bold color, but we're going to do it sparingly. And every color that we add has to earn its place, which means that it's only going to go where you want people to look, where you want them to click. So this could be your buttons, or it could be your link, or it could be a

[5:03] word that you really want to pop. And whatever you do, you're not going to use a gradient color. And after a few minutes, this is what we get. Now, I really like this. This may not be everybody's taste in color, but since we're going for this electric energy drink, I think it'd be a lot of fun to keep this color scheme here. So I think it's looking pretty good for me. And just to remind you, this is where we started. This was the AI slop page that Claude Design built. And here's where we are now. Now again, there's still a lot of work to do here, and I'm telling you

[5:32] as we get to number five, it's going to look significantly different. But let's go to number four first, which is spacing and breaking the center. Again, take a look at our original slop page. Claude Design made this. Everything is crammed into the middle. It's running straight down the center of the page. And that is AI slop. So, when we're talking about real design, we want to make sure that Claude knows that we want eight-point spacing. And we want to make sure that the layout isn't going

[5:58] directly down the center of the page. Eight-point spacing just means that every gap, every margin, every bit of space in between things is a multiple of eight. So, 8, 16, 24, and so on. So, it sounds like it's something that's really small, but really it isn't. It's the reason why a page will feel intentionally lined up. So, we do want to put that inside of our prompt. Now, the good news here, we really don't have to build a prompt because Claude design has already done this for us. But, if it didn't do it for you, then just make sure you point that out to Claude, and I

[6:26] think you'll be good to go. So, let's jump over to fix number five, which is the largest fix, and that is real images. Okay, so this one is single-handedly the most important piece that is going to make this look premium instead of AI slop. So, what we need here is we need real professional-looking images and real professional-looking videos that we can put on this page. Now, there is one important thing to point out here, which you may already know, but Claude design can't create images itself. So, you do have to use another service. You could go straight to Gemini and use their API if you want to. But, for me, I like to

[7:02] use Higgsfield. Now, if you haven't heard of Higgsfield before, it has all of the top image and video and audio models all in one place, and you can run it right inside of Claude, which is the real reason why I like to use their service so much. So, that's what I'm going to use today. I'm going to tell Claude design to add real images and video to make the whole thing look premium. I'm also going to tell it that

[7:22] I want a cinematic scrolling hero. That's the the first thing that you see on the screen. And I want to show off energy. I want to put lightning bolts on there. I wanted it to use my color scheme. Now, I wanted it to feel fun and inviting for adults. And then I want a real cinematic 15-second commercial built right into the website. And just

[7:40] about 10 minutes, this is what we got. And this looks absolutely awesome. Everything that I asked for is here. There's a hero with a cinematic scroll. There's a video playing. The can is spinning and it's opening up right in front of the screen. You can scroll down and you see the flavors. You can play an actual video that I created. Everything that we asked for has been built inside of here. Now, if you want to take a look at this site, I actually put it up on my own website, which you can check out at tristanobryan.ai

[8:10] /soda. So, those are the five fixes. Those are going to turn your AI slop website into something that looks like it cost $20,000 to make. And if you like this video, please give it a like, please drop a comment, and please subscribe. And if you want to learn more about how to use Higgs Field or grab any of the prompts in this video, check out the description, and I will see you in

[8:30] the next one.

---

About this transcript
Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com).
ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts.
Free transcript tools, no account needed: https://viewrankai.com/tools
How to read any video this way: https://viewrankai.com/llms.txt