Transcript
00:00:00There are a million and one skills and plugins that claim to solve
00:00:03Claude's front end design problem.
00:00:05But as someone who has tested literally hundreds of them,
00:00:08there is one that stands above the rest and it just got a huge upgrade.
00:00:12Now I'm talking about Impeccable 4.0, and it is the king of giving Claude
00:00:17code the power to create front end designs and web designs that actually look
00:00:21good and give you control while you do it.
00:00:24So in this video, I'm going to break down what this tool is, how it works
00:00:27and how you can get the most out of this thing.
00:00:30So you can start building front end designs you actually like.
00:00:33Now, in my last design related video, we touched on Impeccable a little bit,
00:00:36but that was in the greater scheme of how to essentially inject taste
00:00:41into your web design process so we can get away from generic AI slop outputs.
00:00:44If you haven't watched that video, I highly suggest you do, because I'm not going
00:00:48to repeat all the baseline things you need to understand when it comes to injecting
00:00:53your taste and sort of avoiding AI slop from a design process.
00:00:57And instead, we're going to be deep diving Impeccable as a specific tool.
00:01:01Now, there will be some overlap, but it helps to have that background coming into this.
00:01:05Now, before we do a full deep dive on the tool itself, let's talk about some of the changes,
00:01:09because chances are there's a lot of you out there who use this tool a few months ago
00:01:12and are now are wondering, OK, it's 4.0, what actually changed here?
00:01:15Now, the biggest change over the last few months is a live mode.
00:01:17Now, this was something that was sort of in the alpha when they're in their 2.0 range,
00:01:21and now it's gotten a lot more fleshed out.
00:01:23It's much smoother.
00:01:24It's much snappier and allows us, again, to get outside of the terminal
00:01:28and start iterating visually, which makes the design process so much more simple.
00:01:32The other big change is worlds.
00:01:34They talk about adding 177 high rated worlds into this skill.
00:01:39Now, what the heck does that mean?
00:01:40Well, that means they've essentially created 177 different design templates,
00:01:46different aesthetics that you can use when you're trying to create your website from scratch.
00:01:50So kind of like what we did manually in the last video,
00:01:54Impeccable is going to show you a the first sort of design idea it has,
00:01:59and then it's going to give you a few other options that are wildly different.
00:02:03Now, they have a whole article about how they essentially created this
00:02:05to make sure it isn't just like slop trash every single time.
00:02:09I'm not going to dive that into here because it's going to be like a 15 minute discussion.
00:02:12But what it gives us is options and options that we can see visually.
00:02:17And when we hook up something like the Higgs field MCP to this,
00:02:20we can actually see what it would look like with our specific website.
00:02:23And you'll see that later.
00:02:24That way isn't just like a generic template.
00:02:25You'd see like what your thing would look like in these different sort of visual themes.
00:02:31And those two things, the live mode in the world are the biggest differences
00:02:35over the last few months.
00:02:36And I don't think they're small things because they're all about iteration
00:02:39and giving us options throughout the design process.
00:02:42Now, let's do a quick rundown of Impeccable itself
00:02:45because there's probably some of you who've never even used this app.
00:02:47So what the heck are we even talking about here?
00:02:48Well, Impeccable is a free open source skills, got about 50,000 stars on GitHub.
00:02:53GitHub themselves actually integrated it into their own AI tool because they liked it so much.
00:02:57And the thesis of the skill is we want to identify AI slot patterns.
00:03:02They consider like 40 different things to be AI slot, things like purple gradients,
00:03:05blue gradients, that sort of thing.
00:03:07And instead we replace those with essentially better design, so to speak.
00:03:12Impeccable itself is one skill, but includes 23 different commands that hit different parts of the design continuum.
00:03:18This includes things like shape, polish, making it choir, animating things, things for onboarding, coloring, typeset, on and on and on.
00:03:25Now, while each of those things does something slightly different, the point is this.
00:03:28And you can see this over here on the right.
00:03:30Claude gives us something that's kind of generic, kind of boring.
00:03:32We automatically know it's AI.
00:03:34Impeccable gives us something that is cleaner, less generic and overall better for the user.
00:03:39As for those 23 different commands, well, if we go to the website itself, which is impeccable.style,
00:03:44you can see all of them in action.
00:03:46So, you know, we have Claude code version here, impeccable version here.
00:03:50You can see that for each and every one to get sort of a visual idea of what these things actually do.
00:03:54The documentation on the website goes pretty deep and I actually misspoke earlier in terms of AI slot.
00:03:58It's actually 64 different patterns that they say expose AI defaults and production defects.
00:04:04And you can see how this has changed over the years.
00:04:07Like we all remember this, like the early days of ChatGPT, right?
00:04:10And now, you know, AI slot looks something a little bit more like this.
00:04:14Still, these are things we want to move away from.
00:04:16So that's impeccable in a nutshell.
00:04:18Identify slob and then gives us better options that allow us to iterate and even iterate visually with their live tool.
00:04:23Now, to actually use this thing, it's pretty simple to install.
00:04:26It's just going to be npx impeccable install.
00:04:29Now, if that is too confusing, you can also go to the impeccable, impeccable GitHub page.
00:04:33You can copy this URL, paste it in the cloud code and say, hey, can you go ahead and install impeccable for me?
00:04:39Now, once you install impeccable, the other thing you're going to want to install, like I talked about earlier, is the Higgsfield MCP,
00:04:44which impeccable is going to be able to call on when it builds that world's feature for us or essentially shows us all the different aesthetic styles for our website.
00:04:51Now, to get the Higgsfield MCP set up, which, again, is an aggregator for essentially every AI image and video generator out there,
00:04:57you'll just go to Higgsfield.ai, go to the top where it says MCP and CLI,
00:05:03head here to Claude code, and you can just copy this prompt right here and it will walk you through the authentication process.
00:05:09After that, the first step we are going to do is simply run impeccable init.
00:05:15And in this case, I've opened up a new folder and I've just called it impecc-test.
00:05:19You can create whatever folder or directory you want, but forward slash impeccable init.
00:05:23And once you do that, it's going to begin asking questions about what it is you're trying to build.
00:05:27So I'm going to say I'm building a real landing page.
00:05:31Then we'll ask what stack this project should use.
00:05:33If you don't know, you can just have it say you're a call and that's what we'll do for today.
00:05:36And then it's going to ask about evidence, essentially like what do you want to be on this website?
00:05:40If you have screenshots you can provide, if you have actual numbers, that's great.
00:05:43If you don't have anything else, you can essentially tell it to make it all up.
00:05:47So I just told it to create fake data for now and we can see what it comes back with and we can always edit it later.
00:05:52So after we answered those questions, impeccable then called on the Higgs field MCP to create those different worlds,
00:05:58essentially those different design aesthetics for our webpage.
00:06:02And it's asking us which one we want to choose.
00:06:04What it does is it brings it up in localhost so you can actually see it.
00:06:07So it looks something like this.
00:06:09So this was the first one that it came up with.
00:06:13This is essentially be the hero section for Pathfinder.
00:06:15And then we see all these other options.
00:06:17Again, this is very reminiscent to what we did in the last video.
00:06:20We were like, hey, come up with the different options for us so we can actually see it.
00:06:23So we have this one, we have this one.
00:06:26And again, this is just like kind of like a high level sketch of what it would look like and where you want to go.
00:06:31We have the option.
00:06:33If we don't like these, we can re-roll it down here on the right.
00:06:36We also can give it an optional steer.
00:06:38So we could say like, hey, I kind of like number three, but let's do some more variations of that or something to that effect.
00:06:44In this case, what we're doing of these, I kind of like the first one it came up with.
00:06:48So I'm just going to say build this.
00:06:50So I just click this and that's going to get sent back to the terminal.
00:06:53And so now it's going to start building out the prototype of that landing page in that style we chose.
00:06:58And as part of that build process, it's then going to show us multiple variations of that specific style.
00:07:03So we have at the beginning a bunch of different styles.
00:07:06We choose one style and now we have variations of that style.
00:07:09So it gives us the constellation option.
00:07:12It gives us sort of the dossier split and then sort of the find the why.
00:07:17Again, just like before, if we want to give it an optional steer, I have sort of a prompt window down here that I can point it to.
00:07:23But for this, I kind of like, I think what we'll do is we'll go with number three and we'll say build this.
00:07:30You can see here in the terminal, it got passed.
00:07:31It says timeline approved.
00:07:33Recording the approval in the surface brief, then loading the craft floor and building.
00:07:37And this is what I like about Impeccable, the fact that it's very visual in terms of how we make the decisions.
00:07:41And at every step of the way, we have the option to steer it.
00:07:43It's not an extremely prescriptive skill.
00:07:46And you've seen those where it's like, okay, here's random skill from random GitHub repo.
00:07:51The website it makes is really cool looking, but that's like the only type of website it can create.
00:07:55It's kind of like a one trick pony.
00:07:57Things like Impeccable are very general, which means I think it has a lower floor.
00:08:02Like these very sort of one trick pony skills will always give you a pretty cool website, but it's just that kind.
00:08:08Impeccable, a lot more room for error on your part, but we can make it much more custom.
00:08:14And in the end, if we actually work on it, I think you end up getting a better product.
00:08:18So Impeccable actually finished creating the website.
00:08:20And what it does at the end of the first iteration is it launches a sub-agent called the Impeccable Finish Reviewer.
00:08:26So it's essentially checking everything to make sure in the process of building this thing,
00:08:31we didn't actually, you know, sort of trip over ourselves and add some quote-unquote AI slot pattern.
00:08:36So it does an additional run-through with a separate sub-agent that it's fresh context window.
00:08:41So it's supposed to be a second set of eyes to make sure what we set out to build is what we actually build.
00:08:46So here's the website it built us.
00:08:47And remember, we gave Impeccable very little information.
00:08:51I just said, hey, I want it to be Pathfinder.
00:08:52I gave it no reference images.
00:08:53I really even didn't even give it a CTA.
00:08:55I just said, this is a fake AI analytics company.
00:08:58Create some information for it.
00:09:00And this is what we got.
00:09:02And if you compare this to what we would have got with the same sort of prompt, if we just use like the front-end design skill, the outputs are wildly different.
00:09:09Mainly, this isn't the kind of generic output you would see.
00:09:13Now, is this great?
00:09:14Is this exactly what we want on a one-shot?
00:09:16Probably not.
00:09:17But I think when we do any sort of creative work with AI and Claude, I think you really have to get away from the idea of like this must be a one-shot thing.
00:09:24It always is an iterative process, which is why the Impeccable live feature is so nice.
00:09:29So to use the Impeccable live feature, we're just going to do Impeccable forward slash and then do live.
00:09:35And it's going to bring it up for us.
00:09:37Now, once we do that, it'll bring the website back up and we'll have this little bar down here.
00:09:40Now, what you're going to want to use mostly is the pick element thing, which we see right down here.
00:09:45So, you know, I have insert, but I can click pick and I can see all the different components.
00:09:49So let's say I want to adjust this.
00:09:51I click on it and I have a prompt window.
00:09:53Now, I can add anything I want here and I can see how many variations I want.
00:09:57You can have one variation, two variations, all the way up to four.
00:10:00You can also do a microphone.
00:10:02You can also choose exactly what it is you want to do.
00:10:04So let's say if I wanted to make it bolder or quieter or do polish or typeset, those specific sort of domains, we can specify that as well.
00:10:12Now, remember, these are all related to like the Impeccable commands.
00:10:16And if I go back to the Impeccable website, I can see them all here, right?
00:10:19You know, quieter, overdrive, characterize, you know, all these sort of things.
00:10:25Okay, so if you're like, oh, what exactly is it asking me?
00:10:26What does this do?
00:10:27Just check here.
00:10:28So let's say I just wanted to make this bolder, right?
00:10:31I just want to make a bolder.
00:10:32I don't even have to give it a prompt and I want three different variations.
00:10:35I'm just going to click that, hit enter, and it's going to start generating the variance.
00:10:39And if you hop back into the terminal, you will see that command sent there because the session you're in is always going to be polling for live mode events.
00:10:47Now, while that's working, let's talk about what else is going on in here.
00:10:50So we have the detect button that will detect essentially any of those AI slop anti-patterns.
00:10:56If you're doing this from scratch, it kind of already did that in the creation process.
00:10:59This is more for if you're using Impeccable Live on a website you've already generated.
00:11:03We have the design.md.
00:11:06I'll move this over a little bit.
00:11:07And this is our entire design file.
00:11:09All of our colors, components, what we're doing for our buttons.
00:11:13Again, very similar to Google Stitch and also what you see these days inside of flawed design.
00:11:19We can also see the actual raw file if we want that as well.
00:11:23We also have the ability to insert things and we have a prompt window here as well, which is you steering the page.
00:11:28So this is pretty much exactly the same as if you had the terminal up and you're saying, hey, let's do X, Y, and Z a little bit differently versus trying to pick a specific component and doing sort of these three variants that I just showed you.
00:11:38And speaking of those three variants, here's what it gave us when we told it to make it bolder.
00:11:42So this is variation one, variation two, we kind of added just like the red line, and then we have variation three.
00:11:50We have the ability to tune these things as well, so I can kind of mess with the fill.
00:11:56Do I want the stamp border on and off?
00:11:58So not only do I have three variations, I have variations of each variation, which I honestly love versus having to prompt Claude Code to create some sort of like micro tweak section on its own.
00:12:09And once you like it, all you have to do is hit accept.
00:12:12And again, what is that going to do?
00:12:13It's just going to send that information back to the terminal.
00:12:15Now at this point, all that is left is to iterate, iterate, iterate.
00:12:19Now, we don't have to do everything inside of Impeccable Live, even though that's what I've been showcasing.
00:12:23The use case for Impeccable Live is what you've seen, which is for micro adjustments and variations in specific components.
00:12:30If we want to think big picture, we want big, big layout changes, or just completely go in another direction, we're going to want to use the terminal for that.
00:12:37So if that's the case, let's say I didn't like this design at all.
00:12:40I was like, hey, like we did the variations, turns out this isn't what I like.
00:12:44Well, let's just do what we would normally do inside of a design process and feed it some different references.
00:12:48So this right here is sort of my inspiration library of all these different sort of hero pages and designs that I've liked and I've seen across the web.
00:12:57So if I wanted to now have a new variation that looks something like this, well, what I'm going to do is I'm just going to point Claude Code at this library or drop in the screenshot and say, hey, let's try a new variation, something that looks like this.
00:13:10So let's say we instead wanted to go with like this ASC2 sort of like web section, this like kind of vibe we're going for.
00:13:17So I can just copy this image, I'm going to paste this in, and I'm just going to give it a prompt like so.
00:13:23So take a look at this reference image I gave you.
00:13:26This is also inside of my taste vault.
00:13:28This is currently running on the 4610 local host port.
00:13:33I kind of want to go in a new direction with sort of the landing page we've created.
00:13:38I want to go with this like ASC2 type style.
00:13:42Remember, we still have access to the Hicksfield MCP.
00:13:44So if we need to create assets for the background hero page, we can do that as well.
00:13:48But go ahead and create a variation like that.
00:13:51So again, this is a huge sweeping change, not something we would necessarily use the live thing for.
00:13:56And here's the second version of our website.
00:13:58Again, a huge departure from what we saw before.
00:13:59It definitely has an ASC2 theme based on our reference, but this is still an impeccable based product.
00:14:05It ran the impeccable reviewer, made sure there wasn't slop.
00:14:08And so we're able to kind of get the best of both worlds in this case.
00:14:11And just like you saw before, we could again bring up impeccable live.
00:14:14We could start doing things.
00:14:16I think something that would look cool is if we ran essentially like the animate thing on each one of these sections to give it a little bit, a little bit of movement.
00:14:23So it isn't so static, but this is kind of how you want to approach it.
00:14:27Big picture, the lion clawed code, small picture, really start knocking out stuff with impeccable.
00:14:33And actually, now that I look at this, there is some motion and some of the numbers coming in and out on this hero if you look closely.
00:14:39So that's what I'm going to leave you guys for today.
00:14:41Impeccable is a great tool in your toolbox for any sort of front end design work.
00:14:46And as you saw, you can actually get pretty far if you stay 100% within the impeccable ecosystem.
00:14:51I think the best use case for it is a more, you know, sort of wide ranging design approach that brings in outside sources like references that we saw at the end.
00:15:00And that whole sort of workflow is what I detailed, you know, step by step in my last video about how to sort of defeat AI slop.
00:15:08But I think it was nice to sort of do a deep dive on what I think is the best front end design skill in the game right now.
00:15:13So as always, let me know what you thought.
00:15:15Make sure to check out Chase AI Plus if you want to get your hands on my clawed code masterclass.
00:15:19It's actually going to have a huge update coming out this week, which is exciting.
00:15:23And other than that, I'll see you around.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video