Claude Code + Impeccable = Design CHEAT CODE

CChase AI
컴퓨터/소프트웨어창업/스타트업AI/미래기술

Transcript

00:00:00"AI has no taste and it's your fault."
00:00:03The reason your visual outputs are so mediocre
00:00:05is because your prompts are so mediocre.
00:00:08You aren't using the type of terminology,
00:00:10language and nomenclature
00:00:11that an actual designer would be using.
00:00:13But luckily for us, I found a solution.
00:00:16It's called Impeccable.
00:00:17And it's an open source GitHub repo
00:00:20that for all intents and purposes is a single skill
00:00:23that we can import into Cloud Code
00:00:25that fixes this exact problem.
00:00:27It provides Cloud Code a design language
00:00:29that teaches it what good design actually looks like
00:00:32while also telling it what sort of bad designs to avoid.
00:00:36And today I'm not only gonna show you how the skill works,
00:00:39we are gonna use it to build a brand new website
00:00:42and to edit one of my websites that already exists.
00:00:45So by the end of this video, you are gonna have no excuse
00:00:48when it comes to creating mediocre front-end designs.
00:00:51So Impeccable is an open source GitHub repo
00:00:54that gives us a single skill
00:00:55that allows us to create front-end designs
00:00:58that don't suck.
00:01:00Now it's a single skill,
00:01:01but that's underplaying it a little bit
00:01:03because this single skill includes 23 different commands.
00:01:07It has seven domain-specific reference files.
00:01:10It tells us what sort of anti-patterns to avoid
00:01:13and it even allows us to edit things inside of our browser.
00:01:17So this is actually a very robust tool.
00:01:20This isn't just the front-end design skill
00:01:22that goes on for a few paragraphs
00:01:24about what Cloud Code should be doing.
00:01:26But that complexity can be a little overwhelming
00:01:28because there is literally 23 different commands
00:01:31that do a number of different things
00:01:34as it relates to your design.
00:01:35Now it breaks them all down here inside of the repo,
00:01:37but the truth is you're never gonna remember all of these.
00:01:40But there's two things that help out here.
00:01:42One, obviously, Cloud Code's gonna do a pretty good job
00:01:44of figuring out which one you should use.
00:01:46But secondly, they have an entire website
00:01:49that also shows us what it is each of these 23 skills do.
00:01:53So the GitHub links to the website,
00:01:54which is impeccable.style.
00:01:56And the cool thing is for every single applicable skill,
00:01:59we can see what something looks like before,
00:02:02which is plain Cloud Code,
00:02:03and what it looks like after
00:02:05using that specific impeccable command.
00:02:07So pretty neat.
00:02:09Now impeccable really has seven pillars of design,
00:02:12typography, color, spatial design, responsiveness,
00:02:15interactions, motion, and UX writing.
00:02:17So it isn't just going for colors and things like that.
00:02:21It's pretty comprehensive.
00:02:22And right here, we can scroll through
00:02:25all of these different commands.
00:02:27And like I said, see what they look like
00:02:29using the skill and not using the skill.
00:02:31So if you're like, hey, what exactly does this do?
00:02:34Can I see it in action?
00:02:35Well, this is the place to do it.
00:02:37The website also includes a case study
00:02:39showing how they created this website
00:02:40with impeccable and a single image.
00:02:42And I think it looks pretty cool.
00:02:43And lastly, they show off this live mode,
00:02:45which we will play around with a little bit,
00:02:47which is an alpha,
00:02:48and lets us actually mess with our website
00:02:51via the browser like I talked about earlier.
00:02:53Now it also has a Chrome extension and a CLI,
00:02:56but to be honest,
00:02:56we get about 99% of the value through the skill.
00:02:59So that's what we'll be focusing on today.
00:03:01Now to install this thing, it's a single line of code,
00:03:04which all you have to do is copy this,
00:03:06go into your terminal and paste it in.
00:03:07Now, when it comes to using impeccable,
00:03:09there's really two paths to go down.
00:03:11One is Greenfield,
00:03:12where we are building a website from scratch,
00:03:14and two is editing an existing site.
00:03:17Now, today we will be doing both of these and more
00:03:20because I'm not only gonna show you
00:03:22how to build it from scratch,
00:03:23I will also show you what it looks like
00:03:25when we build from scratch with some sort of reference image
00:03:27with like a mood board, so to speak.
00:03:30After we do that, we'll then go into my actual website
00:03:33and we'll see what impeccable has to think about it
00:03:36and what sort of slop stuff we can slay on my own work.
00:03:41Lastly, we'll take a look at impeccable live,
00:03:43which is in its alpha,
00:03:44and see how good this thing actually is as it stands today.
00:03:48But before we dive into the actual build,
00:03:50a quick word from everybody's favorite sponsor, me.
00:03:54So last month I released my Cloud Code Masterclass,
00:03:56and it is the number one way to go from zero to AI Dev,
00:03:59especially if you don't come from a technical background.
00:04:02I update this course every single week,
00:04:05so it is the best place to figure out
00:04:07how to actually use this wild tool.
00:04:10We focus on real use cases.
00:04:12I just came out with my entire
00:04:13Cloud Code Agenic OS lesson plan.
00:04:16So if you wanna get your hands on it,
00:04:18you can find it inside of Chase AI Plus.
00:04:20There is a link to that in the pinned comment.
00:04:23So let's get started,
00:04:24and we are gonna kick it off with the Greenfield project.
00:04:27So we're gonna build a website from scratch.
00:04:29Now, again, there's so many commands,
00:04:31it can get a little bit confusing.
00:04:32If you are starting something from scratch,
00:04:35I suggest opening up with impeccable craft,
00:04:39because it's going to include
00:04:41some of these subsidiary commands like impeccable teach.
00:04:44Now, what do all these things mean?
00:04:45Well, impeccable craft pretty much means
00:04:48it's gonna go through its own version of plan mode
00:04:50and ask about our website, our product,
00:04:53what it is we're actually trying to build.
00:04:55And in that process, it's gonna create two files.
00:04:59It's gonna create a product.markdown
00:05:01and a design.markdown.
00:05:02Now, the design.md is pretty much the same thing
00:05:07we've seen in Google Stitch.
00:05:09You guys remember Google Stitch, right?
00:05:11Google's free design tool.
00:05:13You have this whole design system thing,
00:05:14and you have this design.md file,
00:05:16which is this very in-depth markdown file,
00:05:20telling AI how to build something.
00:05:21This whole design.md construct
00:05:24is becoming somewhat of an industry standard, so to speak.
00:05:27You're seeing this all over the place these days.
00:05:29And impeccable follows that approach.
00:05:31So it's essentially gonna interview us
00:05:32and figure out what it is we're building
00:05:34and how do we want it to look.
00:05:36And once it's conducted the interview,
00:05:37it's gonna go ahead and build the landing page for us.
00:05:39So inside of Cloud Code,
00:05:41I'm in a new directory called impeccable-test.
00:05:44The command is impeccable-spacecraft.
00:05:47And the prompt is let's build a landing page
00:05:49for my fake SaaS product Lighthouse.
00:05:51It's an analytics platform for solo founders/small teams.
00:05:54Ask me any questions that you want.
00:05:56This is pretty much the same prompt
00:05:58that I gave Huashu Design in my last video.
00:06:01If you haven't checked that out, definitely do so,
00:06:03which is essentially a cloud design clone.
00:06:06So it will be interesting to see
00:06:08how impeccable holds up to that design system.
00:06:11And if you haven't checked that video out,
00:06:13I'll link it above.
00:06:14So it came back with 13 questions.
00:06:16The first four are all about the product,
00:06:18like who is the actual customer?
00:06:19How would you describe Lighthouse?
00:06:21What's the visitor mindset?
00:06:22And what's the primary CTA?
00:06:23What's the actual point of this landing page?
00:06:25The next few questions are all about the voice and the look
00:06:28before it goes into the scope.
00:06:29Are we just doing the hero only?
00:06:30Full scroll, real screenshots?
00:06:32Like, do you have any other assets for me?
00:06:34And what I like here is the depth of the questions.
00:06:36This is more questions than what Huashu Design asked us
00:06:40in the last video.
00:06:41And this is pretty close to the amount of questions
00:06:43you would get from something like Claude Design.
00:06:44Like this is very in-depth and I like to see this.
00:06:46So what I'm going to do is I'm just gonna fill these out.
00:06:49I'll keep it pretty standard.
00:06:50I'm not gonna have to do anything crazy.
00:06:52And we're gonna ask for a full scroll.
00:06:53So here's what impeccable gave us on its very first attempt
00:06:56with pretty minimal guidance.
00:06:57All we really did was answer its questions.
00:06:59We didn't give it any sort of assets or even examples.
00:07:01Now, right away,
00:07:02I definitely don't think AI slop off the bat when I see this,
00:07:05although you are starting to see this like cream color
00:07:08and Sarah font kind of everywhere in these more modern
00:07:11front end designs, especially stuff like Claude Design.
00:07:13I do like this dashboard it came up with,
00:07:16definitely like this.
00:07:18I do like that I'm not just seeing your standard, you know,
00:07:20four bento boxes that you see in every single
00:07:23AI design website.
00:07:25This part looks pretty good.
00:07:26We have the quote, full pricing,
00:07:30and then kind of like, hey, go ahead and give us your email.
00:07:32So for first pass, pretty good.
00:07:35But what I really like to do as of late
00:07:37when it comes to my web designs with Claude code is
00:07:40I don't let it just give me a single output like this.
00:07:44So what I went ahead and told impeccable AKA Claude code was
00:07:47I don't want just one layout of the website.
00:07:50Like you see here, this was the first pass it gave me.
00:07:52I want to see three different variants that I can choose.
00:07:56And I want them all to be pretty different.
00:07:59On top of that, I want to be able to click through all of them
00:08:01and I want to see them all side by side.
00:08:03So I want to see some sort of like macro layouts
00:08:05before we really dive in into the nitty gritty
00:08:08and start playing with components.
00:08:09And so impeccable gave me this.
00:08:11So we have the editorial one that we just looked at.
00:08:15It created one that it called drenched right here.
00:08:17Definitely a different style, a lot more color.
00:08:20And then we had the brutalist.
00:08:22So here's a look at the drenched,
00:08:24definitely a lot more different.
00:08:26I will say we have some overlap here on the front,
00:08:29but this looks pretty dissimilar from most AI generations.
00:08:34As we go through, you know, I do kind of like the boldness
00:08:39of this website, although I don't really know the colors.
00:08:43But I will say I do like this brutalist one.
00:08:44Like it's very grayscale,
00:08:46but I like how the numbers are set up.
00:08:48I like kind of how the boxes are kind of like offset.
00:08:52Like the lines don't totally match.
00:08:54I actually really like this one.
00:08:56I think this looks really cool and very different.
00:08:58And so I think what we're going to do is we're going to go
00:09:02with this one for now.
00:09:04And just so you know, this whole like triple design thing
00:09:07and seeing it all at once,
00:09:08that isn't something inherent to impeccable.
00:09:12This is something I do.
00:09:13This is just a single prompt.
00:09:14And I highly suggest you do this no matter what sort
00:09:17of designs or skills you're using.
00:09:19I think this is something I kind of picked up from Stitch
00:09:23because Google Stitch makes it really easy
00:09:25to do this sort of thing where you can see
00:09:26all these different variations on the same page
00:09:29and compare and contrast.
00:09:30And for me personally, I have to see these visual things
00:09:33to have any idea of kind of like where I want to go.
00:09:37So I highly suggest you do this.
00:09:38You don't have to do three.
00:09:39You could do six, you could do a million.
00:09:41And also when you prompt Claude code
00:09:42to do this sort of thing, just tell it,
00:09:44I want to be able to see all three on the same page.
00:09:47I want to be able to open them in full screen one by one.
00:09:50And you can also ask it to give you a bunch
00:09:53of different macro options,
00:09:55and then you can just choose from them
00:09:57and then have it create these.
00:09:57'Cause obviously it takes a little time to gen these up.
00:09:59So now that we have a landing page we like,
00:10:01now it's time to start editing some stuff,
00:10:03which is where the new Impeccable Live comes in.
00:10:06So all we have to do is say,
00:10:07hey, let's run Impeccable Live on this Brutalist page.
00:10:10Now, once you run that command,
00:10:12Claude code will tell you that live mode is up.
00:10:14It should give you a link to the local host
00:10:18that you need to be on, or you can just refresh your browser.
00:10:20And so inside here, you can now see
00:10:22as I kind of like scroll around, stuff is now highlighted.
00:10:26And at the bottom here, we have some stuff as well.
00:10:29So first of all, we have design.md.
00:10:32It pops up the sidebar on the right-hand side.
00:10:35And if I hit raw, I can see everything it actually created.
00:10:39Now, if I click on a particular component
00:10:41like this primary copy, we have some options that pop up.
00:10:45First of all, we have free form, which is,
00:10:47hey, I kind of just give it a text prompt,
00:10:50or I have access to essentially
00:10:52all these different Impeccable commands.
00:10:54So bolder, quieter, distill, polish, adapt.
00:10:56These are all, are just part of those 23 Impeccable commands
00:11:00we were talking about earlier.
00:11:02So let's say I do something like bolder.
00:11:04So bolder is essentially a predesigned prompt.
00:11:09And if we look here inside the Impeccable documentation,
00:11:12what bolder is going to do is it's gonna make it bolder.
00:11:15So this is the before, this is the after.
00:11:18It's just making it almost a bit more flashier.
00:11:21So the exact definition is it pushes safe designs
00:11:26towards impact without sliding into chaos,
00:11:28says when to use it and how it works and all this stuff.
00:11:31So if we do bolder on this, and to be honest,
00:11:32I feel like this is already pretty bold.
00:11:34I don't know if this is the best one.
00:11:35I can refine that further.
00:11:37So I can do bolder plus whatever prompt I want to do.
00:11:40Let's say I write add color.
00:11:43I then have this thing here that says
00:11:46times three times four times two.
00:11:47That's how many variations it's going to show me.
00:11:50And then we hit go.
00:11:51So this in a way is kind of like a micro version
00:11:56of what we were doing here in terms of variations
00:11:58where I'm like, all right, give me this one thing.
00:12:00Let's change it, show me variations.
00:12:03Now we're doing this at a micro level
00:12:06and we can be even more specific
00:12:08in terms of what we're going for, right?
00:12:09In this case, we're doing bolder.
00:12:10We could have picked any one of those like 12 options
00:12:13and here's what it came up with.
00:12:14So yeah, very bold compared to the other options.
00:12:17This is variant one, variant two,
00:12:21a little more subdued
00:12:22and then variant three kind of wild, right?
00:12:25Also this ability to tune the variant.
00:12:27So if I click on tune, right,
00:12:30we can kind of change the offset.
00:12:31For example of this, like a wild, do you want it to look?
00:12:36What do you want the colors to look like?
00:12:39So again, if we're thinking back to my last video
00:12:42or you're thinking back to Claude design, like tweaks,
00:12:44again, this is pretty much like micro tweaks
00:12:47and that applies to all variants.
00:12:50Hide the key, show the key, so a lot we can do.
00:12:53Let's say we wanna go with this.
00:12:54So if I wanna go with that, what am I gonna do?
00:12:56I just have to hit accept and it's now applied.
00:13:00Now if you hit accept and it bugs out like that,
00:13:02just checking the Claude code,
00:13:03it's basically applying your changes and reloading it.
00:13:06And here's what it looks like with the changes enacted.
00:13:09Now the one thing I didn't talk about was detect.
00:13:10So if I hit detect here, what it's gonna look for
00:13:13is essentially it's trying to see, is there any AI slop here?
00:13:17Is it detecting any of these anti-patterns
00:13:19we talked about earlier?
00:13:20Now, because this was created complete with impeccable,
00:13:24I highly doubt it's going to find anything
00:13:26and that's why we're not seeing anything show up.
00:13:28But we'll see later when we take a look at my own website,
00:13:31if that's the case.
00:13:32But that's pretty much how the live system works.
00:13:34And I think this part is really cool and what sets it apart,
00:13:37I think from other front end design skills and repos
00:13:41that you've seen in the past,
00:13:42especially the fact that we can create extra variants.
00:13:45I'm super bullish on being able to see
00:13:47all these different variants at once
00:13:49and kind of tweak them at this very micro, micro, micro level.
00:13:52So I love this, but again, it's alpha.
00:13:54So, you know, maybe you'll run into some errors.
00:13:57There are a little like couple of things
00:13:59that seem to be a little rough around the edges,
00:14:01like the reload you just saw, but hey,
00:14:03I think this is super cool.
00:14:04So definitely check this out if you use impeccable.
00:14:07Don't just have it created and be done with it.
00:14:09Go into live and mess with this.
00:14:11Now, once you get the webpage to a place you like,
00:14:13there are more commands you have the ability to run.
00:14:16So we can run something like polish
00:14:18where it does a final design system pass.
00:14:20We can do something like harden
00:14:22where it's gonna take a look at edge cases and errors
00:14:24and make sure everything's working.
00:14:25Like I said, this is very, very sophisticated
00:14:28and pretty deep in terms of the amount of commands we can run.
00:14:30But for the sake of time, what we're going to do now
00:14:33is I'm gonna show you how to build from scratch,
00:14:35but this time we are going to be using
00:14:38essentially like a mood board or a mock-up
00:14:40of the type of vision we wanna push to impeccable.
00:14:43Because I wanna see what this looks like
00:14:45when we kind of copy what their case study was,
00:14:48because what they did is they took this image,
00:14:50shoved it into Clod Code, put it into impeccable,
00:14:52and like, all right, created this website,
00:14:53and they're able to get something
00:14:54that looked pretty awesome.
00:14:55So I went ahead and created some images
00:14:58that match the aesthetic impeccable used in their case study,
00:15:02but we're using Lighthouse instead,
00:15:04so we can at least kind of get a test
00:15:07that is somewhat of a one-to-one comparison.
00:15:09So I kind of like this one, so I think we'll go with this.
00:15:11Just like before, I'm running impeccable craft as the skill.
00:15:15It then asked me a similar series of questions as before,
00:15:18and I'm pretty much told that just stick with
00:15:21sort of the mood and vibe
00:15:22that you got from the image I gave you.
00:15:24So this is what it came up with,
00:15:26and honestly, it leaves a bit to be desired.
00:15:29I think just throwing this sort of like mood board at it
00:15:33and telling it, "Hey, let's create a website from this,"
00:15:35it struggled.
00:15:37I think it did its best.
00:15:38Like, we still got the dashboard, it has the colors,
00:15:41but it's not as good as what they created,
00:15:43because I think since I just gave it that one asset
00:15:46and I didn't include additional assets,
00:15:48it didn't really like chop it up in the same way
00:15:51that Impeccable did with their case study,
00:15:52but it might be a prompting issue.
00:15:55But even with that, you can kind of see the bones
00:15:57of something that would work here.
00:15:59I do like how they do the dashboard.
00:16:01So definitely not as impressive, I think,
00:16:05as the raw one we did at the beginning,
00:16:09but hey, I figured I'd try it out.
00:16:11So now let's see how this does when we edit an existing site.
00:16:14So we're gonna use my website, my actual AI agency website,
00:16:18and we're gonna run a few commands on it.
00:16:21We'll do the Impeccable document
00:16:23so it can actually reverse engineer a design.md file
00:16:26from the code, and then we'll do stuff like run the audit
00:16:29and do a critique, and we'll actually do the live thing again
00:16:32on my actual website and kind of see
00:16:36what sort of ads we can make.
00:16:37So for reference, this is the website for my AI agency.
00:16:41I have like kind of a standard hero section.
00:16:43I go into services, talk about my philosophy
00:16:47for how we do AI implementation
00:16:49before having a sort of call to action,
00:16:51a place where people can fill out their information
00:16:54if they wanna work with me.
00:16:55I have some additional pages like my blog,
00:16:57but we will just stick with the homepage for now.
00:17:00So the first thing I did is I said,
00:17:02let's run Impeccable document on this code base
00:17:05and see what Impeccable has to say about my current website.
00:17:08So it's going through the entire code base
00:17:11and it's gonna create a design.md for what we have already,
00:17:16and it's from that foundation
00:17:18that we can begin to edit things.
00:17:19So after Impeccable went through the code base,
00:17:21it wrote three files that are basically like
00:17:23strategic context for what's going on.
00:17:26It talks about the winds, the North Star,
00:17:29but it also talks about seven different violations it bound.
00:17:33So the blue sphere, it says the service card mock-ups
00:17:37are basically a clip art variety pack,
00:17:40intentional card grid.
00:17:43It hates glass morphism, so it doesn't like that.
00:17:47It says we've loaded a certain font, but we never used it,
00:17:50as well as some other stuff.
00:17:53So there were some sort of features
00:17:54that are essentially in the code,
00:17:55but actually don't show up in the actual UI.
00:17:58And then some issue with some of the colors.
00:18:02It also talks about the strategic gap
00:18:04of me basically not putting myself, the person, Chase,
00:18:07on the website itself very much at all, which is fair.
00:18:10Now we can actually get an even deeper critique
00:18:12if we run the critique command.
00:18:15And so let's do that now.
00:18:16So I'm telling it to run the critique command.
00:18:18Didn't even spell critique correctly.
00:18:20Telling it to run the critique command on the landing page.
00:18:23So it ran its critique and its verdict was it is,
00:18:25yes, borderline AI slob.
00:18:27It gave me a design health score across 10 different things
00:18:33and each one was out of four
00:18:34and didn't score above three on any of them,
00:18:37but I didn't get any ones, so that's good.
00:18:39Overall was a 25 out of 40, which ranks as acceptable.
00:18:43For cognitive load, it gives me a five out of eight fail.
00:18:46It says the background motion competes with the content.
00:18:51Yeah, I think it's kind of subdued,
00:18:54but I see where it's coming from.
00:18:56Two equal weight CTAs in here with ambiguous priority.
00:19:00Service section has four different visual schemas
00:19:03along with some other things.
00:19:05And its overall impression is that it has good bones,
00:19:08but it could do a bit more.
00:19:10And then at the end, it kind of breaks it down
00:19:11into three different places a week ago.
00:19:14So honestly, I like this critique.
00:19:16This is very, very in-depth and gives us a lot to work off of
00:19:19and gets pretty specific about what it thinks is wrong.
00:19:22Now, whether or not I agree with some of it,
00:19:24I think is kind of besides the point,
00:19:26but it gives us things to think about.
00:19:29You know, I'm not just going to blindly assume
00:19:31everything it's telling me is correct,
00:19:32but we can kind of go through these, or if I wanted to,
00:19:35I can go through all these.
00:19:36I'm like, all right, let's change this and that.
00:19:37So let's see what happens if we do B
00:19:40and say we want to kind of like play around
00:19:42with what it calls a decoration discipline
00:19:44and see what changes it makes.
00:19:46And after we see what changes it makes,
00:19:48we'll hop into the live session,
00:19:51just like we did with the first landing page we built
00:19:54and mess around with that.
00:19:55So let's look at some of the changes it made.
00:19:57And the changes were very subtle.
00:19:59So we can see right here in the services section,
00:20:03this is the updated version.
00:20:04They kind of subdued the colors and kept it
00:20:07to just sort of this like terracotta orange and white.
00:20:09You will notice there's no longer like sort of a blue haze
00:20:13on the bottom left.
00:20:14A reference, this is the previous one
00:20:17where you kind of have this blue on the bottom left
00:20:18and then blue and then green.
00:20:20So it's kind of keeping it just to two colors, right?
00:20:23The kind of white, well really three colors,
00:20:25I'd say like white, gray, and then the orange.
00:20:28You can also see that down here in the approach section.
00:20:32So as I go over the cards, we still have that orange glow,
00:20:36but on the original it had some orange down here.
00:20:41It kind of had the card upline up top
00:20:43and it thinks that sort of like an AI slot type thing.
00:20:47And that's the extent of the decoration discipline changes.
00:20:51So rather subtle, it has some other ones
00:20:53it wants to try as well.
00:20:54They have to do sort of like trust and conversion
00:20:56and potentially adding things like headshots.
00:20:58But what we'll skip ahead to now
00:21:00is going into the live mode.
00:21:02So let's take a look at the website now in the live mode.
00:21:05So let's say I wanted to change these cards a bit
00:21:08and just like before, what would I do?
00:21:10I can do free form or I can go ahead
00:21:13and pick one of these preloaded commands.
00:21:17So let's try delight for this one.
00:21:19And then we'll go ahead and go for three variants.
00:21:22And what delight does is it adds some actual personality
00:21:26to that particular component.
00:21:27Here's a look at some of the variants it gave us.
00:21:30So this one's just a little bit bigger,
00:21:32has sort of this thing down here on the right.
00:21:35It changes the actual text here.
00:21:37And it adds this little thing as well.
00:21:40And obviously like these, we have the tunes
00:21:43to mess with too.
00:21:45That's supposed to be a number, it's a little off.
00:21:49So yeah, pretty much the exact same scenario
00:21:53as the first website we created.
00:21:55I think this live thing for impeccable
00:21:57is actually its most powerful tool by far.
00:22:00The fact that we can do these micro adjustments
00:22:02from essentially a graphic interface
00:22:04versus having to do everything in the command line.
00:22:06So I'm glad to see that it's pretty much
00:22:08the same exact set up,
00:22:09even when we're using a code base that already exists.
00:22:12So overall, I really liked impeccable.
00:22:13I think it is 100% a skill you should add to your stack
00:22:17and definitely test out when you're doing your next round
00:22:20of front end design,
00:22:21whether it's for a website you're creating from scratch
00:22:23or for something that already exists.
00:22:26And 100% try out the live tool.
00:22:29This is something they just added,
00:22:31I think about a week ago.
00:22:32And I think it's a big differentiator
00:22:34from all these other things.
00:22:35I think when you combined these micro adjustments
00:22:38with sort of the macro layouts that I told you to do
00:22:41via prompting at the beginning,
00:22:43I think you have a really powerful workflow.
00:22:45As always, let me know what you thought.
00:22:47The link to this repo will be down in the description.
00:22:49There's also the link in the pinned comment to Chase AI+
00:22:52if you wanna get your hands on my Cloud Code masterclass.
00:22:55And besides that, I'll see you around.

Key Takeaway

Integrating the Impeccable repository into Claude Code provides a comprehensive design language and live-editing capability that elevates front-end development beyond standard AI-generated mediocrity.

Highlights

  • Impeccable is an open-source GitHub repository that adds 23 design-specific commands to Claude Code.

  • The tool utilizes seven design pillars: typography, color, spatial design, responsiveness, interactions, motion, and UX writing.

  • Impeccable Live, an alpha feature, enables browser-based design editing with real-time variants and micro-adjustments.

  • Users can reverse-engineer design standards from existing codebases by running the 'impeccable document' command to generate a design.md file.

  • The 'impeccable craft' command automatically conducts a design interview to generate product and design markdown files for greenfield projects.

  • Audit scores generated by the tool provide a health rating out of 40 across 10 design metrics to identify AI-generated mediocrity.

Timeline

Impeccable Tool Overview

  • Mediocre AI visual output stems from a lack of proper design terminology in prompts.
  • Impeccable introduces 23 design commands and 7 domain-specific reference files to Claude Code.
  • The tool provides a comprehensive framework covering typography, color, spatial design, responsiveness, interaction, motion, and UX writing.

Visual outputs from AI often suffer due to non-professional prompting styles. Impeccable acts as a specialized skill set for Claude Code, defining both good design principles and anti-patterns to avoid. The platform includes a dedicated website, impeccable.style, where users can compare before-and-after results for every command.

Greenfield Development Workflow

  • The 'impeccable craft' command initiates a design interview to produce product and design markdown files.
  • Generating multiple macro-layout variants allows for side-by-side comparison before committing to a design.
  • Using a design system approach via a design.md file is becoming an industry standard for AI-assisted development.

Starting a new project involves running 'impeccable craft', which prompts the user for project goals, target audience, and visitor mindset. Instead of accepting a single output, the workflow suggests requesting three distinct visual variants to compare macro-layouts. This method leverages iterative refinement to avoid the common aesthetic of 'AI slop'.

Live Editing and Micro-Adjustments

  • Impeccable Live allows direct browser-based interaction with components for design tuning.
  • Commands like 'bolder' or 'delight' enable precise modifications with configurable variant counts.
  • The system includes an 'accept' feature to apply changes and reloads the local environment automatically.

Live mode provides a graphical interface for fine-tuning designs without needing to manually edit code via the command line. Users can select specific components to apply pre-programmed design commands, tune variant parameters, and immediately see the results. This alpha feature enables granular control over the design output.

Auditing and Refactoring Existing Sites

  • Running 'impeccable document' reverse-engineers a design.md file from an existing codebase.
  • The 'critique' command evaluates site health across 10 metrics with a maximum score of 40.
  • Automated audits identify specific design violations such as ambiguous CTA priority or competing background motion.

Applying Impeccable to legacy sites involves documenting the current architecture to uncover strategic gaps and design violations. The audit tool provides specific, actionable feedback on visual schemas and cognitive load, allowing for subtle refinements like color consolidation and decoration discipline. This workflow effectively balances maintaining existing functionality with improving overall aesthetic quality.

Community Posts

View all posts