Your AI Website Looks Like Slop. Here's the Free Fix.

0:00You can turn your designs from this to this using a free open source tool and it's about more than just before and after. It's about understanding what your needs are and designing to your taste. It's free. There's a link below and I've got the creator to show you how impeccable will change your designs.

0:15Let's get into it. Presented by Zapier, the AI automation company. If you've seen a lot of AI websites, you have seen this look, right? And so you have um beige uh backgrounds, you have like I call this cloud beige, you have uh italic serif fonts. Um it's it's a serviceable page, but you see a lot of slot patterns, you know, it's card stacks here. You have the

0:37emojis, right? So it's it's very typical. It's not necessarily bad, but it is very clearly you see that it was made by AI. Um and so impeccable helps you fix that uh through multiple methods and here I actually asked it, okay, please please redesign the website with impeccable. It then asked me a bunch of questions to just make sure that we're heading in the right direction. I also said keep me a

1:02copy before and after. And then it went into world building mode. Um what I mean is it's going to iterate with the image generation skills in your editor a few different directions and then present them to you. I see. a live picker of these new worlds that have been created for your new design. I see. So now I see blue on the left, good ideas deserve a clear path. I see something that looks You know what? Open each one of them just a little bit bigger so we can see them. And then on the bottom, I'm seeing the colors that are being used here, the decisions, and then the button that says

1:36build it. Yeah, zoom in on this one. That's right. So here we have the rule. So this is the um creative direction that itself picked. And so uh this is what it came up with. Um I think it definitely looks less AI, you know, I don't know if that's exactly the look that I want, but it it could work.

1:54Um it's pretty clean, I would say. Um and it also solved some of the positioning, some of the copy changes. So, it does a whole bunch of things. Um, I can also read about the design system that it created. And then you see this the thing here at the bottom it says improved by Impeccable Worlds. Mhm. So, by default, the models actually create something really boring. And so, if you look at the site here, um, this is actually what the model would create if you just let it do the category

2:24default. Right. Uh, and so this is a serviceable page, but you're not going to really attract attention to this, right? You're not going to have people click on this and say like, "Oh, wow, this is very exciting." Um, you can pick this if that's what you really want, but then beyond that, I'm trying to create divergent creativity. So, now here we have a change view show how a loose idea

2:45becomes a reviewable plan. Um, so you get a kind of different concept Yeah. And then you have, um, you have the other one which is like, okay, the journey wallet. And as you can see here, if you hover over this little tap here at the at the bottom, you see the inspiration that it came from. So, Impeccable ships with hundreds of, I call them worlds, visual worlds that, um, that it uses as challenges to inspire the model to do better. So, here it had like this, uh, you know, almost like uh, you know, uh, uh, terminal inspired, airplane terminal inspired,

3:23uh, look. And then it took what it thought was the most appropriate best of it, and it created a new look for this particular page. Yeah. Um, so that's what you kind of get. And then and then, uh, and then for the for the role, for the ones that, uh, that is sort of like the default that you should pick, uh, that it thinks that you should pick, it actually says how it was improved by these challenges. So, it looked at all of the other challenges. So, well, how

3:51what are they doing better? And then upgraded the world alongside. Now, I kind of actually I kind of really like this one personally. I think it's pretty clever. I like the little cards designs here. So, if I like this, I just can click build this. All right, okay, the choice was recorded. The agent is resuming. I can now close this tab. And it will simply

4:12start working. Okay. Now, if you want to give more granular feedback, you've got something called Impeccable Live. Let's see how that works. That's right. So, I have it open in another tab here. So, Yep. we don't have to wait for it. Can I see the prompt that you used to bring it up? That's right. So, so over here at the top, we have uh the command, so the prompt {dot} impeccable live. So, literally there's no other configuration

4:35that you need to do. Um I, for demonstration purposes, have used a pretty weak model. I have used Luna. So, sometimes you have to say like, "Hey, are you listening?" Um so, there are some technical hiccups here and there, but if it works, what you get is you get this picker in your own development server. So, if you ever use the annotation feature in the inline browser for some of these coding agents, um you see the annotation feature, it's very similar Yeah, the annotation is on the top left, right there. There's already an annotation tool in ChatGPT. You can see it right above the word Lumina in the

5:08browser window. What's the difference between what comes in ChatGPT and what Live is here from Impeccable Live? So, with the annotation feature, you can send things to your agent, but it's fairly limited, right? The only thing you can do is you can chat with the page, but often times I find it much more interesting to be more visual than that. Um Impeccable has a large palette of commands that you can use from the agent window. So, you can say like, "Hey, make this section bolder or fix the layout" or something along those lines. But if you just want to uh edit something in real time visually,

5:42this is where this mode comes in really handy. So, you get this new bottom bar in your development server. This is uh to remind you about this is your live website. This isn't This isn't um a fake website or fake representation of it. It's your own development server. And and this would work in anything. Cloud code, we were playing with it in cursor before. Anything that you're doing that you're building with. Okay,

6:03and so let me see what's on the bottom. What were you about to show? Yes. And so you can use this in any other type of environment. Anything that has um you know, uh most coding agents support this. And um and so now you have this picker. And in this picker, you can for instance, if you have a design.md file uh for your design system, you can see it visualized. You can see like, "Okay, this is my system." Now, of course, this is the Slope website, so the system won't be very exciting, but you see it visualized. You see the fonts. And so

6:31you can kind of decide, "Do I like this? Do I not like this?" Um you can also uh steer it directly. So, this is similar to talking to and then talking to your agent, but you can do it live on the page. And then you have two modes here. You have pick and insert. With

6:46pick, you can pick anything on the page. And so you can click it, and then you get this overlay. Uh and you can say uh you can click this button here. Uh you can either free-form let a design new variants of this particular thing, or you can steer it with one of the impeccable commands. So, for instance, um let's say you want to reduce this a

7:05little bit and make it quieter, you can. You can say like, "Hey, I want more colors here." Uh or I want to fix the layout. So, adapt once and it allows you to adapt it for mobile. Animate at some new animations. So, you can steer it in specific directions. You can also uh write something in here.

7:21Yeah. And then um and then you can uh use voice if you like to as well. Uh you can additionally edit things live. Uh so, for instance, if you just don't like the copy, you can say like, uh "Make faster." Um or that. I I don't want to just blow past that because sometimes it's so annoying to have to go back into the chat to say, "You see this thing over here? I want you to change that." I just want to go

7:45in and edit. Okay, that's beautiful. Uh and then if you actually want to visually draw something on top of this like, you know, I want to I don't know like I don't like this word, you can, right? So, you can simply um draw on top of this and then even like I don't know I want to change the position of something. I'll draw an arrow and then the this will be stand-alone to your agent and it will usually pick up on these signals. You can also add comments uh specifically on these different parts of

8:14the element and it will do as well. Uh and then when you're happy, um you can decide how many variants you want generated. Say I want two variants. I click um I didn't know that. Uh and then let's see uh pick up the latest. This is usually something that you don't have to do. I want to make sure that we do it quickly

8:32here. Um but usually it will just listen in the background uh to the latest events um and then will generate these variants. So, this is important, right? This isn't happening on some remote server. It's a event that gets sent back to your own agent and it will then do the work on your behalf and then send it back to the

8:53site. By events, you mean the notes that I've made. Pick up the latest notes that I've sent over and act on them. That's right. Okay. Yeah. Yeah. And so, we have two new variants that it created. And uh I can click through those variants. I see. Um if I would have clicked something uh a little bit more advanced, I would also have tunable parameters here and if I like something, I can hit accept and it would be

9:16production-ready code in my code base. Um but of course, I can also exit out of this again. And then um nothing happened. So, we're back to normal. That is in Pega Build Life. The other thing you can do, which is also kind of neat, is you can insert new elements. So, for instance, I you know, now I get this insert picker. Say like, "Okay, here I want a new section and I think like uh I know I can draw a picture here. I can say like, you know, whatever, and then I can say like make a case study

9:46section. Uh I hit go. And then um And then uh it will create that for me. And so now it will check the poll again. Um again, normally happens automatically. But um but it would pick up this generate event, and it will now create the section based on what you gave it and how big you made it as well. So it's a really neat way of working

10:09with UI. This is like having a marketing agency in your coding uh tool of choice. I love that it gives me something with some taste and some some understanding of what I'm looking for up front, and then I could go back in and I could start making edits by drawing on it, by writing, by asking for for variations.

10:30Exactly. It's fantastic. You wanted to make sure that people saw that you don't just take a before image and then just start, you know, getting an after, that there's a lot of collaboration. Do you want to just switch to cursor for a moment to show people how you did that? Yeah, totally. Yeah, there you go. So the first thing you said was you said, "Impeccable,

10:47critique this site." That's right. So this is a typical way of using Impeccable. Uh before I even start anything, I want to know what's actually wrong with my site. Right. I look into this and say like, "Well, critique this site." You can also say, "Critique the section or critique this particular page of my website." So it

11:04doesn't have to be your whole site. And then it does a a full-blown design critique in lots of different areas. And so you see the um actual summary of what was created here. Um let me see. Mm. There we go. Um so you get the design review um and you get the design health score uh across a number of areas. For instance, uh visibility of system status, user control and freedom. So, it it does a pretty thorough critique, then goes into a is this AI slop? So, is this is this something that I would say is is human-made or intentionally made at least, or is it something that just came

11:46out of AI and doesn't really have any point of view? And so, this one very clearly failed the bar. All right, it says like, "Okay, this is clearly the typical AI look. Um nothing on the surface is a workflow. This is terrible. All this fails, right? Uh the category interchangeable choices choices are the entire page. Um and so, uh this this is the exact end-to-end

12:09reference and uh it's very bad. Um and so, it gets you an overall impression. And now you can decide what to do with this. Uh you can see everything that's broken. You can see also what's working. And then you get a whole bunch of priority issues and importantly, how to fix them. So, Impeccable has this router of commands and it will suggest how you actually fix this, how do you approach

12:29it. Um It's also important quality now is that I want Impeccable to be a thought partner for you. I don't just want it to be like a one-shot thing. So, for instance, if you're designing something from scratch, we'll actually interview you first. It will ask you about your target audience. Like, who are you even

12:44making this for? Because if you end up making, let's say um a reading app, a kids reading app on the iPad, right? Um who are you making landing page for? Are you making it for the parents? Are you making it for the kids? That's a really important consideration, right? Because it will change the game. So, it's really um it's really supposed

13:03to be partner. Yeah. Uh I like that you're not replacing one AI decision slop with another AI's decision slop. It's being customized to you based on information about what you want and also informed by previous designs that make it look great. All right, this is fan-freaking-tastic. The whole thing is completely free. Why are you putting it up free um for everyone to use? What's

13:25the model here? Well, I to um I used to run into these problems myself. So, I used to develop um a lot of different websites with AI over the last year. Um a bunch of contracting jobs and um in the process, I found myself being stuck in these ways often. And so, uh initially, I didn't even have a a plan on making money with this. Uh I figured, "You know what? I'm going to open source everything that worked for me because I want the whole industry to benefit and flourish. I think there's so much we still have to learn about working with AI, working in these new

13:55agentic workflows. And uh I wanted to put something out there and see does it work for people or not. I also put a bunch of other open source projects out, but this one was kind of struck a nerve for many, right? It's kind of uh really works in ways that I didn't anticipate. So, I'm very grateful for the community um that have picked it up. Now, I have kind of backwards, but I did turn it into a startup. So, now uh I'm running a startup called Renaissance Geek. And um Impeccable is a product of

14:24that startup. Impeccable will stay free, but uh we're we're in closed beta with a new version of Impeccable that is uh running reviews like Reptile or Code Rapid, but design critique, you know, similar critique that I just showed you. But in a in a way supercharged version on your own pull requests every time you

14:42make a pull request. Um so, that's a cloud-based service. And then um and then also Impeccable Pro. A lot of people have asked for a subscription tier version of Impeccable. It's even faster, even more capable. Maybe have some teamwork capabilities, gives you access to more worlds. And so, that's coming as well. And by worlds, you mean a set of

15:01designs. That's what you call the world. Visual worlds. You know what? Let's take a look at the repo. So, what's in here? So, the repository has grown quite a bit. It started as a set of prompts, right? So, it is an agent skill after all. But in fact, if you look at this, uh first of all, Impeccable has different versions for every type of agent. So, there's a specialized version for Codex. There's is version for Claude because they all have different ways of creating slop. So, I needed to have different versions that you can use the Impeccable installer and it will automatically match your coding

15:32environment. The other thing that I wanted to point out really quick is if you look at the the CLI and the crates here, Impeccable is quite bionic now. Um so, we have a this is all Rust code. Uh there's a ton of Rust code in here. And if you look at, for instance, detect, this is a deterministic detection engine that detects patterns without even using an LLM. So, these are installed as hooks

15:57into your Codex or Claude or whatever. And so, in less than 10 milliseconds, even before you do a critique or anything with Impeccable, it will look at typical patterns, slop patterns in your code like side tap orders or stuff like that, and will automatically tell your agent. So, most of the time, this is the cool thing, you don't have to do anything proactively. It will just magically make it better. So, this is something that a lot of people don't

16:22know about Impeccable. Okay. And And truthfully, for most people, they just need to know that it exists. All I do is I give the URL from GitHub to my agent and I say, "Let's get started with this." and it starts rolling. And by the way, Yeah. You can do that or you can honestly just use this command, right? NPX Impeccable install in your repository folder and

16:39that's it. And it just runs. Let's see some of the gallery examples and then I want to see a before and after. I really wanted to show the world not just how does Impeccable improve websites, how does it remove slop, but then what would you get without Impeccable? So, here is a typical prompt. This is the actual prompt, right? Make me a homepage for Trattoria Da Nonna Lucia, a family Italian

17:00restaurant. Pretty simple prompt. Um and then what you get without Impeccable are basically websites that look like this, right? So, this is a service of a website, but I think you pretty clearly see it looks the same every time. I mean, it's not terrible maybe, but it is very very clear that this came out of AI. And if you do that, you don't you don't really want your website to look at everybody else's, right? That's not how

17:24you grab attention. Now, with Impeccable, as you can see, you get completely, vastly different results. And not just in terms of quality, but also in terms of creativity. So, here's the same type of prompt, but done with Impeccable. Um so, hopefully, you find it quite different. And so, here's a good example of menu

17:46design. it. I like also that it's not just about better design. It's just functional. You could see on the very top the two things that you come into a site to get, which is when is it open, and then what's the phone number, so I want to want to book a time there. And frankly, also a link to where the address is with

18:02directions. That's exactly right. And of course, obviously, it's something can't just look fancy. It has to be functional as well. So, it's trying to really find that balance between functionality and design. All right. Again, we're going to have a link to the repo below. Play with it, show us the results. And if you like this video, I've got another one for you

18:19right there. See you in that next one.