3 Ways To Fix Claude Code's #1 Web Design Problem
CChase AI
Computing/SoftwarePhotography/ArtInternet Technology
Transcript
00:00:00I'm going to teach you how to defeat the monster known as AI Slop in three simple steps.
00:00:05Now, AI Slop has taken a number of forms over the years,
00:00:08and it wasn't too long ago that it looks something like this,
00:00:10a generic SaaS template with interfont everywhere and blue-purple gradients.
00:00:16But now, AI Slop looks something like this.
00:00:19This is definitely better, but it still screams AI.
00:00:22It has a specific color palette, a specific font, just a general style
00:00:25that right away you can tell this was generated in just a prompt or two.
00:00:30But today, I'm going to show you how to break out of this mold.
00:00:32I'm going to teach you how to cultivate and inject your own taste into the web design process.
00:00:36I'm going to show you what sort of skills and MCPs you need to begin using to help you in that endeavor.
00:00:42And lastly, I'm going to show you the exact sort of build sequence you need to begin applying to this.
00:00:47What are the prompts we should be using?
00:00:49How should we be prototyping?
00:00:50What does it mean to iterate and tweak our web design until we get something we actually like?
00:00:54And by the end, you're going to have a flexible roadmap that you can apply to all of your AI design work.
00:00:59So let's get started.
00:01:00AI has no taste.
00:01:01Now, this is a phrase you've definitely heard of before, but it's an important one.
00:01:04And it's what step one is all about, because step one is figuring out how do we cultivate taste?
00:01:08How do we curate it?
00:01:09How do we bring that into the web design process?
00:01:12Because the problem with this website and this website isn't a technical one.
00:01:15It's simply generic.
00:01:17And no matter how good the models get, they could get 10 times better tomorrow.
00:01:20It'll just change what we consider to be generic.
00:01:23But instead, if we are able to inject our taste into the design process, we are going to be able to create something that is unique because it's specific to you and it's very subjective, but also something that is quote unquote good.
00:01:34So for step one, what we are going to do is we are going to curate a library of design inspiration.
00:01:41This is also going to help us cultivate our own taste.
00:01:43We're going to expose ourselves to a lot of, you know, high level web design or whatever you want to call it.
00:01:48And once we have this library of stuff we like, you know, this is a reflection of our taste.
00:01:53We can then bring that to AI and use that as the foundation for what we are going to build moving forward instead of relying on nothing and instead just getting an average regression to the mean output.
00:02:04So where should you go to find inspiration?
00:02:06Well, there's a number of websites that I think do a really good job.
00:02:08What I'm on right now is Dribbble.
00:02:10That's Dribbble with three B's.
00:02:11I just typed in web design, put in popular, and I can see a bunch of different landing pages.
00:02:16Another good one is Pinterest.
00:02:18Again, all I did was throw in web design and what do I see?
00:02:20I see a bunch of hero pages that are much different than what Claude is going to generate me when I say build me a landing page.
00:02:27And lastly, we got Twitter, which I think is my favorite of the bunch because there are a ton of awesome creators in this space that are doing really cool design work and UI stuff that you just aren't going to see anywhere else.
00:02:37And so your first job is simply to go to these websites, start looking for things you like, and just start screenshotting them, saving them.
00:02:44You can even save links if you have the actual websites themselves.
00:02:46Now, once you do that, you can just leave all those screenshots in a screenshot folder, or you can do what I did and have Claude Code create a simple web app that is essentially your inspiration library.
00:02:55It's going to put everything in one place, but more importantly, it's going to group them based on design type, and you can have it explain what the design even is, what it means, what is the actual vocabulary associated with this design.
00:03:09And when I click on one of these screenshots, it gives me some keywords associated with this design.
00:03:13So this is something like a voxel rendered landscape.
00:03:15And then down here, I can both copy the image prompt.
00:03:18So if I wanted to create an image for my hero section in the background, like this one, this sort of gives me the foundation for that.
00:03:24And then also this button that says copy brief.
00:03:26And that's something I would use to actually create the website in its entirety.
00:03:30And we'll go into prompting and all that in step three.
00:03:34But big picture, step one is cultivating our taste.
00:03:37It's creating this library of inspiration.
00:03:40So you don't just have to sit there and come up with something from scratch.
00:03:43Just come up with something, you know, that's been sitting in your brain.
00:03:46Because when we're just getting started, we're really not good enough for that yet.
00:03:49We need to find stuff that's actually working that we like and use that as our base.
00:03:55Now, step two is all about the external tools.
00:03:57We are going to give Claude code so that when we move on to step three, which is actually creating the website, it gives us better outputs right away.
00:04:05And the first one I want to talk about is impeccable, which I think is the best front of design skill in the game right now.
00:04:10Now, impeccable is an open source tool.
00:04:12It's got almost 50,000 stars on GitHub.
00:04:15And speaking of GitHub, they now turned it into like an official part of GitHub's AI tool.
00:04:21And it's one skill, but it includes 23 different commands that will essentially improve your web design or your website's components in a number of different ways.
00:04:30So it's able to, you know, critique any issues.
00:04:33It's able to add additional polish, make it older, make it quieter, et cetera, et cetera.
00:04:37There's 23 different things.
00:04:38Now, it's kind of impossible to understand what those 23 things do without seeing them in action.
00:04:42But if you go into the actual impeccable website, which is impeccable.style, we can see all those 23 different commands over here on the left.
00:04:49So if I look at Boulder, for example, it explains what it does.
00:04:53It pushes safe designs towards impact without sliding into chaos.
00:04:57And over here on the left, this would just be like a standard Claude code output.
00:05:01And if I do impeccable Boulder, well, I get something like this.
00:05:04Or if I do something like overdrive, hey, here's, you know, standard Claude code, and then here's impeccable.
00:05:11Or clarify, here's the standard warnings you get, and here's something that is a bit more condensed and easy to understand.
00:05:19And really what impeccable is doing is it's identifying and getting rid of slop.
00:05:23And it does that across really seven different places, typography, color, spatial design, responsiveness, interaction, motion, and actual UX writing.
00:05:32They have an entire section of their website dedicated to slop, and it breaks it down as 46 different patterns.
00:05:38And you can actually run the impeccable CLI.
00:05:40And we'll look through everything to see, okay, like, is this quote unquote, "AI slop"?
00:05:45And it'll actually show it to you on a dev server.
00:05:48Speaking of a dev server, they also have a live mode.
00:05:50So you can actually bring up your website and you can actually click through it component by component and make adjustments right there, live.
00:05:57So it's almost like Claude design in one sense, but it definitely gives you a visual aspect that you can't get if you're using exclusively the terminal.
00:06:06Now, to install this is super easy.
00:06:07It includes a CLI and they give you three different options for installing this thing.
00:06:11And if you get confused, just go ahead, copy the URL and drop that into Claude code and it will install it for you.
00:06:17Now, if you don't really like impeccable, another one I would suggest is the taste skill.
00:06:20They just released their version two, although it's experimental.
00:06:24Again, we can find this on GitHub.
00:06:26It's just under 66,000 stars and sort of works in the same manner.
00:06:30You know, it's going to look for those AI sort of like slop tells.
00:06:34And instead, it's going to give you a stronger layout.
00:06:36It's going to work on the typography, motion and spacing.
00:06:39And in the end, it's meant to give you something unique instead of a boilerplate looking UI.
00:06:43So I think these two, the taste skill and impeccable are the best in the game right now.
00:06:46Definitely a step above the standard anthropic front of design and definitely a step above some of the more popular repos like UI, UX, Pro Max.
00:06:55Now, when we talk about MCPs, the one I use the most is the Higgs field MCP.
00:06:58And this is because it's going to give cloud code capabilities.
00:07:00It simply does not have out of the box primarily image creation and video creation.
00:07:06So the Higgs field MCP is going to give you access to virtually every single AI image and video generator out there.
00:07:12So I usually use GPT images, too, for images and then for video that's usually bouncing around every few weeks.
00:07:19But right now, seed dance tends to be the best.
00:07:22So you can also install this as a CLI to actually get here.
00:07:25All you have to do is go to the Higgs field website, Higgs field dot AI, go to MCP and CLI, just copy this, paste it into cloud code, and then we'll run you through the authentication process.
00:07:36It also has some skills you can add here as well.
00:07:39And once this is installed, if we're trying to create a website where especially if we want to add some sort of like hero imagery right in the background, it just calls on the MCP and it will generate it for you.
00:07:49Furthermore, if we want to generate custom assets, this can allow us to do it as well.
00:07:52And one last thing I wanted to talk about isn't really a skill or even an MCP, but that is 21st dot dev.
00:07:58And this is kind of something you could probably even throw in step one in terms of the taste thing, but this is all about components.
00:08:06So let's say I was looking for specific buttons.
00:08:10So if I come over here on the left and I click buttons, I'm going to see a bunch of different buttons.
00:08:17And if I click on any of these buttons, I then have the ability to copy the prompt.
00:08:22So down here, it says copy prompt.
00:08:23If I copy that and I paste that in a cloud code, it will give me a button that looks like this.
00:08:27And there isn't just buttons.
00:08:29There's cards.
00:08:31There's, you know, pricing sections.
00:08:33So similar to, you know, in step one where we were really looking at sort of like big picture in terms of design and aesthetics, this is a great place to go to get inspiration for specific components.
00:08:43So we're just getting more detailed and like a little lower level and this sort of stuff.
00:08:47But even here, it will have things again.
00:08:50It will do borders, backgrounds, calls to action.
00:08:56So again, this is just all in the same vein of like exposing ourselves to things we otherwise wouldn't even think about.
00:09:01Like how much, how often are you looking at like pagination and the different options we have for that.
00:09:05Now, the last thing I'll say at this step is beware going down the rabbit hole in terms of tools and skills, because it's very easy to fall into the trap of, well, I'm just one skill away from like all my design problems being solved.
00:09:19You'll probably see some really cool skills out there that build really cool websites.
00:09:22The issue is those tend to be very narrow in scope.
00:09:26They're extremely prescriptive.
00:09:27And oftentimes those skills will only give you one kind of output.
00:09:30The reason why I suggest the taste skill and I suggest impeccable and Hicks fields is because they're very flexible and we can go a number of different directions with them.
00:09:38However, because they are not prescriptive, they aren't always going to give you a quote unquote great output because that great output is going to depend on your prompting.
00:09:47And again, how we inject taste.
00:09:49And now in step three is where we kind of put it all together.
00:09:52I'm going to show you how you should prompt and more importantly, how you should iterate until you get an output you like.
00:09:58So now we're into step three, which is the actual build phase.
00:10:00And what I want you to get away from is the idea that we need to one shot these things.
00:10:03What we instead need to do and what I suggest is cast a very wide net off the bat.
00:10:09What you see here is I had it create a website for this fake AI company called Argus.
00:10:13Listen, I had it create five different versions in five different styles.
00:10:19And also what you see over here is on one hand, on the left hand side, I had it use impeccable.
00:10:23And on the right, I had it use the taste skill.
00:10:25And the idea is when we first start prompting this guy, we want to see a bunch of different styles of the website we're trying to create.
00:10:32I like to do five.
00:10:33Once we see all five, we probably have a decent idea of like, okay, this is the direction I want to go.
00:10:39Once we choose that one, like let's say I did print tech, then we want to do some iterations on that.
00:10:44I have it do like three versions of that style.
00:10:47And then for those three versions, I pick one and then we tinker.
00:10:49The idea is I want to see all my options on one screen at one time.
00:10:54It's kind of tough, I think, to know what direction you even want to go on or go through when you're just sitting inside a terminal and you just try one thing and then you try another.
00:11:03Like, why don't we just try a bunch of stuff at once and compare and contrast?
00:11:07That's sort of my idea.
00:11:09And once we get a little more, you know, sort of fidelity in terms of what style we want to go into, then we bring in things like the Higgs field MCP and start generating assets, generating hero images and doing all that cool stuff.
00:11:20Now, in regards to prompting, this is kind of how I like to go about it.
00:11:26I really have four different things I am going to pass to AI when I prompt.
00:11:31And again, it's not prescriptive.
00:11:33It's not overly specific.
00:11:34It's not some 10,000-page-design.md prompt you need to copy.
00:11:38Because remember, when people give you that, it's going to be kind of the same thing every time.
00:11:42It's very narrow.
00:11:43And what I think you want to pass is first, the aesthetic, right?
00:11:47What is the general, like, family of design we want this website to sort of follow?
00:11:52Secondly, we want to give it some sort of reference image.
00:11:54This is where our sort of curated, like, taste library comes into play.
00:11:59There's probably some sort of website or multiple websites you want to drop here in terms of the reference.
00:12:03And what we're trying to do is we're trying to match the feel.
00:12:05We aren't necessarily trying to match it, you know, content-wise or design-wise because we're not trying to, like, copy them.
00:12:12Again, we're going for a feeling and aesthetic.
00:12:14Number three is the intent.
00:12:16What are we building and why?
00:12:17Like, is this a SaaS product?
00:12:19Is this something for an event?
00:12:21Who is the target audience?
00:12:22What are we trying to have them do?
00:12:24Do we want them to just, like, read everything and that's it?
00:12:27Do we want them to click through something, fill out some sort of form?
00:12:29These things are important and they're going to dictate what the rest of the website looks like.
00:12:33And then lastly, what are some sort of guardrails?
00:12:35What are things we always wanted to do and what are some things we never wanted to do?
00:12:39This can become useful in terms of, like, AI slop stuff.
00:12:41Like, I never want purple gradients.
00:12:44I never want enter font and things of that nature.
00:12:46Also, in terms of references, don't be afraid to drop actual website URLs.
00:12:51If there's a website you like and you kind of want it to match, again, sort of the feel and style, drop that as well.
00:12:56It doesn't just have to be screenshots.
00:12:58But this, I think, is sort of a great place to start.
00:13:02And again, we're not trying to one-shot.
00:13:04We just want to get something moving in the right direction.
00:13:06Now, when we prompt this, like I said, I want a bunch of different, you know, design styles.
00:13:11And this kind of comes back to my taste library.
00:13:14Because if you built this, like I suggested you do, it's already kind of broken it out into different libraries, right?
00:13:19I have print tech paper style.
00:13:21I have dither mono.
00:13:23Kind of this, like, fast, quiet, cinematic style.
00:13:26And so, for me, I can just tell Claude Code, hey, take a look at my library and pick out, you know, five different aesthetic families and create websites like that.
00:13:36Or, if you haven't built something like that, you need to actually build specifically.
00:13:41Like, hey, I want five different variations and five different styles.
00:13:44That works, too.
00:13:45So, what we're going to do is we're going to use this prompt and start walking through it ourselves.
00:13:50So, here's the prompt I gave it.
00:13:51I said, build a landing page for Kestrel, an AI analytics platform for small startups.
00:13:55I give it the intent and what we're trying to actually do, right?
00:13:58We want them to actually book a demo.
00:14:01We have some guardrails.
00:14:02I'm saying, for pretty much all the hero pages, we're going to have, like, a monumental image.
00:14:06And I wanted to never do the AI slop stuff.
00:14:08Things like purple gradients, 3D SaaS blobs, that kind of thing.
00:14:11I say I wanted to create five versions of the page.
00:14:14And then, for each version, I break down the direction.
00:14:16So, I specify the aesthetic.
00:14:18I give it a reference image.
00:14:19Again, that's coming from my taste library.
00:14:22Remember this thing.
00:14:23And then, I mentioned what the future hero will probably look like.
00:14:26And I do that for all five versions.
00:14:28So, let's see what it comes up with.
00:14:29So, here are the five it created.
00:14:31Here's sort of the print tech paper version.
00:14:35Got the data as texture.
00:14:36Remember, all these graphics were all just generated by Cloud Code.
00:14:40I haven't used anything like the Higgsfield MCP to actually create the graphics.
00:14:45We have sort of the vast, quiet one.
00:14:48This is supposed to be, like, a stand-in for some sort of, like, mountain range we would create.
00:14:52We have Dither Mono.
00:14:55And then, we have Classical Remix.
00:14:59So, again, remember, we're just kind of looking, like, big picture of what sort of style do I like.
00:15:07Kind of.
00:15:09Dither Mono looks kind of cool.
00:15:11I kind of think the vast, quiet looks kind of sick.
00:15:15It's definitely different.
00:15:16Very minimalist.
00:15:17But I kind of like what it's doing.
00:15:19And I think this might look really cool if we can nail the actual image behind it.
00:15:24So, I'm going to go with sort of this vast, quiet direction.
00:15:27And now, what I'm going to do is I'm going to ask it to essentially create three different versions of this.
00:15:33Specifically, when we look at the body, I want to just kind of, like, see what's possible out there.
00:15:36So, I said, let's go with the vast, quiet version.
00:15:38Generate three versions of that aesthetic for me, namely changing the body formats, etc.
00:15:42And you can get specific about what you want to see different with it.
00:15:45And so, just like we did here, it's going to be three versions of this.
00:15:49Then, we'll nail down the one we like.
00:15:51And then, we can get a little more specific when it comes to changing components, doing tweaks to fonts and colors, and then actually generating the assets.
00:15:59So, it's coming with a few more variants.
00:16:00Here's the original, right?
00:16:02Very minimal.
00:16:03Very vertical.
00:16:05Here is the second one, which also kind of has that calm approach.
00:16:08But it looks like it's kind of added a little bit more to the body.
00:16:13Here's one where it's more of a ledger.
00:16:14It's kind of shifted a few things over to the left.
00:16:16And now, we have this index that scrolls along with us, which I actually kind of like.
00:16:22Then, we have this one, which it called frames.
00:16:25Okay.
00:16:25So, everything's kind of like, you see, kind of has these edges on the side that frames each section.
00:16:31To be honest, I kind of like the ledger.
00:16:33I kind of like how when you scroll down, this follows you on the left-hand side.
00:16:38Maybe we add something to the right a little bit.
00:16:40Not totally sure.
00:16:41But I like this.
00:16:42It's kind of like a neat, minimal approach, yet looks a little bit different.
00:16:46And so, what I'm going to tell it now is, hey, we're going to go with version 3B, which is the quiet ledger version.
00:16:51And what I want to do now is, I want to nail the hero image first.
00:16:55I think if I nail this background, then I'll begin playing around, you know, with like fonts and where things are kind of sitting.
00:17:01So, the prompt I'm going to give it is, let's go with the V3B, which is the ledger version.
00:17:08And what I want to do now is nail that hero image.
00:17:10So, you have the, you know, examples of the hero images that are part of the quiet aesthetic that's on our inspiration library.
00:17:19I think there's like three or four of them.
00:17:21So, can you create like, give me like four different images that fit this that would also fit our hero image specifically, right?
00:17:30The whole like composition of it.
00:17:31So, use the Higgs field MCP for that.
00:17:33Make them high quality.
00:17:34Make them 2K.
00:17:35Create four different designs and then pull them up once you do that.
00:17:39So, Cloud Code called the Higgs field MCP.
00:17:40Created some images.
00:17:42Threw it into the hero section.
00:17:43And now it's displaying those different ones.
00:17:45So, this is the first version, which is the aerial.
00:17:47We have the crag.
00:17:49Then we have almost this like watercolor type painting, which I think is cool.
00:17:53And then it did the cloud C.
00:17:55Now, I kind of like, honestly, not a huge fan of 2 because I feel like it overlaps some of the text.
00:18:01But I do like, I like number one and four.
00:18:07I think, I think one looks pretty cool.
00:18:12But maybe if we could add, I don't know, like a splash of color somewhere just because it's very black and white.
00:18:17And maybe just like some semblance of color would look good.
00:18:19So, that's what I'm going to tell it.
00:18:20Can we get with option four that you created and can you create multiple versions of that and show me just like you did before?
00:18:27But can we add maybe a little color to it?
00:18:30Right now, it's very black and white.
00:18:31I'm not sure if just a splash of color somewhere would look good.
00:18:34So, it created some variations.
00:18:35So, here's the original.
00:18:37Here, it added a little color called a Dawn Touch, Golden Hour, Alpine Glow, and then the Duotone, which is way too much.
00:18:48And of all these, I think I like the Alpine Glow.
00:18:51So, we're going to go with that.
00:18:52Let's go with the Alpine Glow version and then go ahead and bring up our webpage with that is the hero.
00:18:58When you do that, make sure you take a look at the transitions between the hero and the body.
00:19:03It shouldn't just be like a super sudden change.
00:19:07So, do what you need to make that look sort of premium.
00:19:08And then, in terms of like page loading, we want everything to feel kind of like heavy and give some weight to it.
00:19:16So, here's what we got.
00:19:18All this stuff kind of loads in one by one, which I like.
00:19:21As we scroll down, it's not like a hard transition.
00:19:25So, it kind of just, you know, slowly fades out.
00:19:29And then, yeah, I like, I kind of, I really like this index, honestly.
00:19:33I think it looks really cool.
00:19:35And at the bottom, we have book a demo.
00:19:37Now, overall, very minimal, but it kind of fits the vibe.
00:19:41At this point, I kind of just want to start tweaking different things and maybe see if we can add just a little bit more, I don't know, punch to it so it isn't overly minimal.
00:19:50But honestly, I kind of think it fits.
00:19:53And so, I think the easiest way to do that, instead of just sort of guessing and being like, oh, make it look more premium, oh, I want to add stuff, is to have it add a tweaks bar.
00:20:00And this is something you see inside of Claw Design.
00:20:03And so, that prompt will look something like this.
00:20:05Can we sort of mimic what happens inside of Claw Design and add like a tweak bar that pops up on this dev server so I can change a number of things, whether that's font size, font type, accent, colors?
00:20:16Basically, any place where you think there's a decision to be made in terms of the overall aesthetic and design, especially when looking at the body, because I do like the hero, I want an ability to tweak that on the tweaks page.
00:20:28So, go pretty aggressive with what you offer me.
00:20:30And while it builds that, the other thing I want to talk about is sort of references.
00:20:35So, a lot of this today has been, you know, when we've talked about inspiration and building references, has been in regards to the hero section, right, the first thing you see.
00:20:44But that also applies to the body.
00:20:46So, just like we've given it screenshots, you can do the same for the body.
00:20:49And in fact, you can give it actual URLs of websites you like and be like, hey, like, take a look at the actual, like, formatting of that website because Claw Code can see it.
00:20:57And I want it applied to my page.
00:20:59And just like we've created this library of inspiration, you can do the same for stuff that isn't a hero.
00:21:04Again, it can just be how a, you know, the body of a website is laid out.
00:21:08Okay, so now you can see over here on the bottom right, I'll shift over here, we have this tweaks button.
00:21:14So, when I pull up the tweaks, again, similar to Claw Design, I can start changing a bunch of stuff.
00:21:19So, you can change the heading font and, like, this is just all built on the idea that, like, I need to see the differences.
00:21:28I don't know what font's going to look good.
00:21:30I don't want to sit here and ask Claw Code to then create 10 different versions of the web page with different fonts.
00:21:35Like, just give me some sort of, like, thing like this, right?
00:21:37I think being able to, like, iterate visually very quickly is what allows us to eventually get something we like.
00:21:42So, we can, eh, don't like the italics, change the size, all this good stuff.
00:21:48And like I said, I told it to get pretty aggressive.
00:21:49So, it has, like, the hero imagery, the assets, the motion, the weight, the reveal distance, all this stuff.
00:21:57And so, at this point, it's really just a matter of tweaking it over and over again, showing it more references of things you like until you get it to a place you're happy with.
00:22:05And really, this entire video has been about that.
00:22:07It's about giving you a flexible workflow, a series of steps that you can follow to get you to a place you're happy with.
00:22:14None of this is meant to be prescriptive.
00:22:15None of this needs to be followed to a T.
00:22:17Instead, it's about some, like, general rules and guidelines of figuring out, okay, what do I actually like, you know, cultivating that taste?
00:22:23How do I then take that taste and bring it to AI?
00:22:26Where are some additional tools that Cloud Code doesn't come with that can help me do a better job of that?
00:22:31And then, lastly, how do I tweak?
00:22:33How do I iterate so I'm not just at the mercy of Cloud Code one-shots and just playing the lottery game of putting in a random prompt saying,
00:22:40please make it look more premium and praying that the output is good.
00:22:44So, with all that said, that is where I'm going to leave you guys for today.
00:22:47As always, let me know what you thought.
00:22:49Make sure to check out Chase AI Plus if you want to get your hands on more Cloud Code guides, especially my Cloud Code masterclass.
00:22:55There'll be a link to that down in the pinned comments.
00:22:57And I'll see you around.