# How to Avoid AI Slop in Vibe-Coded Landing Pages

Channel: DesignCode
Video: https://www.youtube.com/watch?v=M4DNgmI7MIM
Duration: 22 min
Language: English
Words: 3162
Transcript page: https://viewrankai.com/tools/youtube-transcript/M4DNgmI7MIM

---

[0:00] These are the signs that your Vibe Coded project is considered AI slop. So, let's start with the first one. This is the selected state of the menu. It's lazy because it's just a border, but it's highly uneven. And then we have the next one, which is the eyebrow. It's using caps, but also gives too much space, cramps too much

[0:24] into the layout. We have the status. Totally unnecessary, out of nowhere. Also uneven in terms of spacing. So, usually you want to have the same spacing top and left. And then you have the one that I hate the most, which is the random lights in the design. This is kind of like sass-ish kind of layout, but it's everywhere. But also, you can see that the gray doesn't

[0:54] fit with the purple here. And with all of this stuff, you have a design that looks like AI slop. We all know the purple gradient. This is very 2025. In this video, I want to show you how to avoid these traps. Number one, there are models that you need to know that are better at design and worse at design. GPT 5.5 is typically has a

[1:21] specific style, which is like this one. And Gemini 3.1 Pro is a little bit better. But, you still need good prompting. So, one thing that I like to use a lot is to use image reference or to reference a URL. And nowadays, I never prompt without a skill or without a design system. So, you would go to a website, and then you download the design system, or you

[1:52] create one. You can just ask AI. And you can download the file, and you can include that in your next prompt, especially if you're starting from scratch. Then, if you want this as part of a workflow, you put these rules into your agents.md file. The agents.md file is the file that is going to run at every single prompt. You have to keep it minimal, but you can definitely reference some small things, like which

[2:21] browser to use or what style to use. And finally, which I think is the most important thing, is to keep in your memory or to keep in your AI memory the names of these problems. So, is it a menu? Is it the lights? You need to know how to prompt so that you can remove these things and you can

[2:46] improve those UIs. Now, let's get into the demo. So, most people are going to prompt like this. Create a beautiful landing page in dark mode. Now, it's not specific, doesn't have any skill, and most people are going to be using uh GPT-5.5 or Gemini-3.5 Flash or Opus-4.8. And it's not going to be very good. So, if you press enter,

[3:16] I'm going to do the same with Opus-4.8. And also, I'm going to do the same with Gemini-3.1 Pro. If you're not trained, it's going to look pretty much similar. But if you're trained, you will notice the details. For example, 4.8 Opus is going to give you something like this. This honestly feels very basic, and it's using a lot of purple, and it's also using too many colors. Again, we have these lights, and we have the same problems that we

[3:51] discussed. If you look at 5.5, and this is where I think a lot of people are using more and more, it's a little bit better, but also it has more information density, and it seems to go overboard with the light. So, you can see we have so many lights everywhere. And, you know, we have a lot of colors, maybe

[4:13] a little bit differently. And, yeah, you know, it's just very generic, and you can smell the AI slop. 3.1 Pro is a little bit better. There's a little bit more effort in term of the details, the sizing of elements. It doesn't have all of those lights everywhere. And, it understands, you know, it it's also putting a little bit more effort into the hover states

[4:42] and all that stuff. And, the lights are a little bit more tasteful. Is this perfect? Absolutely not. How do we fix it? Number one, understand the weaknesses and the strength of each model. 3.1 Pro is going to put a little bit more effort, but that's not enough, and it doesn't mean that you you shouldn't be using

[5:04] 5.5. If you have to use Opus 4.8 or 5.5, you should be using an image reference or a side URL. So, an image reference, you can go to any beautiful design that you've seen. A lot of designers do that. They put that into their mood boards, and then they use that as a reference for what they want to create, and it's not different from doing that with AI. So, you're going to take a screenshot of your website or of something that inspires

[5:34] you. So, you're going to open a design. You might want to take a screenshot of a part that you like. So, and then, you're going to drag and drop that into your reference. Make sure that you understand that this is a starting point and you want to change the names, numbers, brand, etc. And so, you can use 5.5 if

[5:59] you want. And so, this is good. We're going to start with this. And then, at the same time, I'm also going to use a URL. So, this is more a little bit more automated. It's going to use a script. So, for example, I can I like cursor.com and I'm going to import that. So, in this case, it's already

[6:25] doing all the screenshotting for you. And again, I'm just using this as an example. It could be any website. It could be anything that you have created. And so, you also have the design.md and you're going to use any model that you want and it's going to do a far better job. Looking at this one, like I said, if the goal is to avoid the AI

[6:49] slop, this is a good starting point. There are the mistakes. For example, each model might try to do the illustration for you or do some of these things which should have been a photo. So, you might want to specify that. So, your goal is to understand what the mistakes are and to prompt away those mistakes. So, for example, you can say something like "I don't want any illustration. I want to use images instead for the hero and

[7:21] for the third section. For the second section, I want a alternative color with a dark background. And I want to change to beige colors." See, already we're fixing a lot of mistakes and the website is starting to shape into something different. And from here, we're going to add the missing sections if you have starting to get happy with it. So, you can say something like add a pricing section. I want more spacing between sections. I want the footer Great, we have the footer, and the

[8:04] website is looking not bad. So, let's take a look at import URL. We have the full screenshot here. It's recreating the Cursor website. It's very good at that because the model is getting better and better. And at this point, you want to change the brand, you want to change the colors, and also you want to generate the images. So, we're going to use AI to generate images to make it not AI slops. So, I'm going to

[8:35] do the same right here. And then, boom, we have images that are not slob. We want to avoid the Unsplash images, and we have something that looks so much better. As you can see here, it's starting to shape into something way more professional. And again, you're here to set it up as a starting point. I want this to be in green earth tones. I want to change the fonts

[9:06] to be serif. The brand should be Aura. And I want the fonts the headings to be bigger. And voila, we've changed the colors, we've changed the brand, and we can just play with the fonts. So, you should get familiar with all of these fonts on Google Fonts. They're free, and it you know, it's going to go a long way. And by just using a few clicks, you're going to get something that is so

[9:38] different and way less AI slop. So, for example, some of my favorites, of course, the normal one, but because the normal one everyone used them, it's going to become more like AI slops. So, you know, try to avoid enter because AI used that all the time or fronts nowadays, AI will always use this font. So, what you want is just to try different fonts until you find

[10:07] something that you like. So, Urban is, sign, Google sans, these are pretty good options and you want to see how it looks like, then there you go. It's a lot better and it doesn't look like AI slop. So, we're going to do the same here and we will change the font and we're going to try different fonts just because we want to get away from

[10:40] looking like another design. We don't want our design to look like another one, which is why for me, my tricks is that I would turn a section into light or dark mode. I would change the font. I would get familiar with the colors like earth tone, pastel colors, um off-white. Now, all of this stuff is inside skills that are already packed with this information that you can use for your designs. Every time that you prompt or every time that you feel that the AI is steering away from something that looks good into something that looks

[11:29] like slop. So, impeccable is a really good skill. The one that most people are using nowadays is the taste skill. And here we have a bunch of them for different uh environments and platforms. So, for example, for image generation or for HTML generation, I think it's really good to play with them on top of generating images for your design

[11:59] or generating videos. So, that can really make your design stand out from the crowd. And it's important to pay attention to the mistakes. So, for example, you know, it's trying to set this button into two lines of text and it does not look good. You have to fix it. It's this pricing section is not consistent with the rest of the website,

[12:29] which is more like square-ish. So, you have to fix it. You would go to a website like Mobbin. And here you're going to find the pattern that you're looking for. So, in this case, let's say I'm searching for a pricing section. And you know, let's say I like this one. I can always take a screenshot.

[12:54] But taking a screenshot is not enough. You have to go back here and then you have to bring this to your design, use it as a reference, and you have to some to say something like adapt this design into my design. Replace the pricing section and turn this into dark mode for this section. So, you can see we have a pricing section that looks far better with one single mistake, which is this weird gradient, which again I can just use uh a prompt to remove that, or I can just edit into the code. But, I think it looks pretty good. It looks very

[13:34] different from the inspiration. And that's your goal. It's also adapting to the page using the font that is the design system of the page. And it's also setting it in dark mode. Now, again, coming back to point number three, you don't want a prompt without a taste skill or a design.md. The design.md is a design system. You can turn any design that you have created into a design system by just exporting it to HTML. So, you're going to download it first, and then you're going to go to for example, ChatGPT, and you're going to say something like

[14:23] turn this into a design.md. A design system which includes the typography, the colors, and all the design system that you can think of. And I want this in a markdown format.

[14:45] So, this is pretty good, and it's giving you the markdown, the design system, the colors, and all that stuff. You can also uh use existing design.md, and we have a number of them. So, for example, get design.md, which comes from really, really popular brands out there. But, we also have in Aura the uh a library of more than 600 design.md, and you can just get the styling, and also get the HTML, which is going to give you really, really good results. So, you can just download the design.md and use that in Codex or Cloud Code. You can also download the HTML which going to give you more details

[15:34] into how you want your design. So, for example, the animations. So, HTML is richer, but also more prescriptive versus design.md is more like a system, a process. So, the HTML guarantees that it's going to look as good as what you see. The design.md is not a guarantee because this design can look really bad if it's just a hero section or a pricing section. It's just going to give you the

[16:04] colors. So, to put it all into practice, we have the model, their strengths, and their weaknesses. We have to use screenshots and references and URLs of your favorite websites. We want to use skills and design.md that are highly available across many, many websites. And if you're using something like Codex, you want to put those rules. So, you're going to pick and choose like the fonts and the colors and you're going to, you know, or you can just reference which design.md that you want to use or which skill that you want to use every single time. And then finally, you need to be familiar with all of those names

[16:49] and how to pronounce them. Dark mode, light mode, you know, menu, selected state. And so, the AI can fix these AI slot machines. Now, one final demo. We're going to go to Aura and we're going to put that all of that into practice using the design system in which we can just pick any

[17:12] design that we want. I'll pick this one. And it gives me all of those beautiful names that I need, the fonts, the spacing, motion, light mode and dark mode. And this is where it's really important that you understand and that you get familiar with is what are the page sections of a landing page. So, for example, you want the pricing section, the trusted by, which are the logos, a contact form, a story about your product or your company or yourself, and maybe a list or you know, and then obviously you want the hero, the features, the

[17:55] testimonials, and the footer. Then we have the animations. This is something we haven't covered yet, but it's just one prompt. And this is going to help you get started. So, for example, you want rich interactions and smooth scroll. And then for the polish, again, we don't want AI slabs, so we want these polishes. So, we want this to be fully responsive, we want an SVG logo, so just the logo, not every single logo, otherwise it takes too much code, and maybe you can reference something like awards, and you want more images rather than just plain colors or you know, the worst, the gradients or the lights. So,

[18:37] colors definitely going to help you. And depending on your design, you can you also use beautiful shadows, which definitely elevate. Now, you want to use an icon that is different from the AI slabs or whatever is generic that is used all the time, which is usually Lucid. So, maybe you want to use something like Basil or IconMoon, and then you want to describe your product. So, for example, you know, AI

[19:06] gave Vectra. So, for my uh yoga studio called Vectra. And then you add this all to the prompt which includes the design.md and the HTML and then you can just prompt this. And there you go. We have a full landing page as a starting point and we're going to fix all the issues that we can think of. So, for example, we have the white

[19:38] borders. You can notice that because we have packed so much into the prompt, this is one shot it and it has these small little particles, it has these uh you know these um hover interactions and just with a few fix and also we have these icons that we mentioned, we also have this smooth scroll that we mentioned and let's fix this super easily. Number one, we want to use the images, so I'm going

[20:07] to generate that. So, now we have the images that are generated and we also have an animated video in the background with just one click. So, now we have a beautiful image in the hero, but also an animated video in the background. We have all of these beautiful animations, we just need to fix the white border. So, step two, we're going to fix the white border. We can also use border gradient. This is where I'm going to reference a skill, so I'm going to do at and by the way, you can do also this in Codex or whatever tool that you want to use, but in this case, you can

[20:49] reference the skill like this and you can search for for example, border gradient and All right, we fixed the white borders. This took a little bit more efforts than I expected. Sometimes you have to get dirty and then you have to really take the screenshots. And to me, in my experience, that has been the best way to fix issues. And so, you can see here we have the border gradient. We have the beautiful uh video in the background. We have the animations. If I replay the page because it only loads once. And so, you can see it's going to appear really nicely like that. It's very

[21:36] soothing and you can also, you know, add background blur and all that stuff. So, with these techniques, you can avoid the AI slugfest that you see everywhere because more and more people are creating uh you know, their own design and they don't know these techniques. They don't know how to prompt correctly. And so, it's just a few prompts. It's just a few comp

---

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