Besseres Webdesign mit Claude Code in drei Schritten

I'm going to teach you how to defeat the monster known as AI slop in three simple steps. Now, AI slop has taken a number of forms over the years, and it wasn't too long ago that it looked something like this, a generic SaaS template with Inter font everywhere and blue-purple gradients. But now, AI slop looks something like this. This is definitely better, but it still screams AI. It has a specific color palette, a specific font, just a general style that, right away, you can tell this was generated in just a prompter too. But today, I'm going to show you how to break out of this mold. I'm going to teach you how to cultivate and inject your own taste into the web design process. I'm going to show you what sort of skills and MCPs you need to begin using to help you in that endeavor, and lastly, I'm going to show you the exact sort of build sequence you need to begin applying to this. What are the prompts we should be using? How should we be prototyping? What does it mean to iterate and tweak our web design until we get something we actually like? And by the end, you're going to have a flexible roadmap that you can apply to all of your AI design work. So let's get started. AI has no taste. Now, this is a phrase you've definitely heard of before, but it's an important one, and it's what step one is all about, because step one is figuring out how do we cultivate taste? How do we curate it? How do we bring that into the web design process? Because the problem with this website and this website isn't a technical one, it's simply generic. And no matter how good the models get, they could get 10 times better tomorrow, it'll just change what we consider to be generic. But 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. So for step one, what we are going to do is we are going to curate a library of design inspiration. This is also going to help us cultivate our own taste. We're going to expose ourselves to a lot of, you know, high-level web design, or whatever you want to call it. And once we have this library of stuff we like, you know, this is a reflection of our taste, we 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. So where should you go to find inspiration? Well, there's a number of websites that I think do a really good job. What I'm on right now is Dribbble, that's Dribbble with three Bs. I just typed in "web design", put in "popular", and I can see a bunch of different landing pages. Another good one is Pinterest. Again, all I did was throw in "web design", and what do I see? I 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". And 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. And so your first job is simply to go to these websites, start looking for things you like, and just start screenshotting them, saving them. You can even save links if you have the actual websites themselves. Now, 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. It'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. And when I click on one of these screenshots, it gives me some keywords associated with this design, so this is something like a voxel rendered landscape, and then down here, I can both copy the image prompt, so 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. And then I also have this button that says "copy brief", and that's something I would use to actually create the website in its entirety. And we'll go into prompting and all of that in step three. But big picture, step one is cultivating our taste, it's creating this library of inspiration, so you don't just have to sit there and come up with something from scratch, just come up with something, you know, that's been sitting in your brain. Because when we're just getting started, we're really not good enough for that yet. We need to find stuff that's actually working that we like, and use that as our base. Now step two is all about the external tools we 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. And the first one I want to talk about is Impeccable, which I think is the best front-end design skill in the game right now. Now Impeccable is an open-source tool, it's got almost 50,000 stars on GitHub, and speaking of GitHub, they now turned it into like an official part of GitHub's AI tool, and 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. So it's able to, you know, critique any issues, it's able to add additional polish, make it bolder, make it quieter, etc., etc. There's 23 different things. Now it's kind of impossible to understand what those 23 things do without seeing them in action, but if you go to the actual Impeccable website, which is impeccable.style, we can see all those 23 different commands over here on the left. So if I look at "bolder", for example, it explains what it does, it pushes safe designs towards impact without sliding into chaos. And over here on the left, this would just be like a standard Claude Code output, and if I do "impeccable bolder", well I get something like this. Or if I do something like "overdrive", a, here's, you know, standard Claude Code, and then here's Impeccable, or "clarify". Here's the standard warnings you get, and here's something that is a bit more condensed and easy to understand. And really what Impeccable is doing is it's identifying and getting rid of slop, and it does that across really seven different places: typography, color, spatial design, responsiveness, interaction, motion, and actual UX writing. They have an entire section of their website dedicated to slop, and it breaks it down into 46 different patterns, and you can actually run the Impeccable CLI, and it will look through everything to see, "okay, like, is this, quote unquote, AI slop?" And it'll actually show it to you on a dev server. Speaking of a dev server, they also have Live Mode, so you can actually bring up your website, and you can actually click through it component by component, and make adjustments right there, live. So it's almost like Claude Design in an, in a, in one sense, but it definitely gives you a visual aspect that you can't get if you're using exclusively the terminal. Now, to install this is super easy, it includes a CLI, and they give you three different options for installing this thing. And if you get confused, just go ahead, copy the URL and drop that into Claude Code, and it will install it for you. If you don't really like Impeccable, another one I would suggest is the Taste Skill. They just release their version two, although it's experimental. Again, we can find this on GitHub, it's just under 66,000 stars, and sort of works in the same manner, you know, it's going to look for those AI sort of, like, slop tells, and instead, it's going to give you a stronger layout, it's going to work on the typography, motion, and spacing. And in the end, it's meant to give you something unique instead of a boilerplate-looking UI. So I think these two, the Taste Skill and Impeccable, are the best in the game right now. Definitely a step above the standard Anthropic front-end design, and definitely a step above some of the more popular repos like UI UX ProMax. Now, when we talk about MCPs, the one I use the most is the Higgsfield MCP, and this is because it's going to give Claude Code capabilities it simply does not have out of the box, primarily image creation and video creation. So the Higgsfield MCP is going to give you access to virtually every single AI image and video generator out there. So I usually use GPT Images 2 for images, and then for video, that's usually bouncing around every few weeks, but right now, Seedance tends to be the best. So you can also install this as a CLI to actually get here. All you have to do is go to the Higgsfield website, higgsfield.ai, go to MCP and CLI, just copy this, paste it into Claude Code, and then it will run you through the authentication process. It also has some skills you can add here as well, and 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. Furthermore, if we want to generate custom assets, this can allow us to do it as well. And one last thing I wanted to talk about isn't really a skill or even an MCP, but that is 21st.dev, and 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. So, let's say I was looking for specific buttons. So, if I come over here on the left, and I click buttons, I'm going to see a bunch of different buttons. And if I click on any of these buttons, I then have the ability to copy the prompt. So down here it says "copy prompt". If I copy that, and I paste that into Claude Code, it will give me a button that looks like this. And there isn't just buttons, there's cards, there's, you know, pricing sections, so similar to, you know, in step one where we're 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. So we're just getting more detailed and, like, a little lower level on this sort of stuff. But even here, it will have things again, it will do, um, borders, backgrounds, calls to action. So again, this is just all in the same vein of, like, exposing ourselves to things we otherwise wouldn't even think about. Like, how much, how often are you looking at, like, pagination, and the different options we have for that? And 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." You'll probably see some really cool skills out there that build really cool websites. The issue is those tend to be very narrow in scope, they're extremely prescriptive, and oftentimes those skills will only give you one kind of output. The reason why I suggest the Taste Skill and I suggest Impeccable is because they're very flexible, and we can go a number of different directions with them. However, 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, and again, how we inject taste. And now in step three is where we kind of put it all together, and I'm going to show you how you should prompt, and more importantly, how you should iterate until you get an output you like. So now we're in to step three, which is the actual build phase, and what I want you to get away from is the idea that we need to one-shot these things. What we instead need to do, and what I suggest, is cast a very wide net off the bat. What you see here is I had it create a website for this fake AI company called Argus, and I had it create five different versions in five different styles, and also what you see over here is, on one hand, on the left-hand side, I had it use Impeccable, and on the right, I had it use the Taste Skill. And 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. I like to do five. Once we see all five, we probably have a decent idea of, like, "okay, this is the direction I want to go." Once we choose that one, like, let's say I did Print-Tech, then we want to do some iterations on that. I have it do like three versions of that style, and then from those three versions, I pick one, and then we tinker. The idea is, I want to see all my options on one screen at one time. It'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, like, "why don't we just try a bunch of stuff at once and compare and contrast?" That's sort of my idea, and 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 Higgsfield MCP, and start generating assets, generating hero images, and doing all that cool stuff. Now, in regards to prompting, this is kind of how I like to go about it. I really have four different things I am going to pass to AI when I prompt. And again, it's not prescriptive, it's not overly specific, it's not some 10,000 page design dot MD prompt you need to copy, because remember, when people give you that, it's going to be kind of the same thing every time. It's very narrow. And what I think you want to pass is, first, the aesthetic, right? What is the general, like, family of design we want this website to sort of follow? Secondly, we want to give it some sort of reference image. This is where our, sort of, curated, like, taste library comes into play. There's probably some sort of website, or multiple websites, you want to drop here in terms of the reference. And what we're trying to do is we're trying to match the feel, we are not necessarily trying to match it, you know, content-wise, or design-wise, because we're not trying to like copy them. Again, we're going for a feeling, an aesthetic. Number three is the intent. What are we building and why? Like, is this a SaaS product? Is this something for an event? Who is the target audience? What are we trying to have them do? Do we want them to just like read everything, and that's it? Do we want them to click through something, fill out some sort of form? These things are important, and they're going to dictate what the rest of the website looks like. And then lastly, what are some, sort of, guardrails? What are things we always want it to do, and what are some things we never want it to do? This can become useful in terms of, like, AI slop, stuff like, "I never want purple gradients, I never want Inter font," and things of that nature. Also, in terms of references, don't be afraid to drop actual website URLs. If 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. It doesn't just have to be screenshots. But this, I think, is sort of a great place to start. And again, we're not trying to one-shot, we just want to get something moving in the right direction. Now, when we prompt this, like I said, I want a bunch of different, you know, design styles, and this kind of comes back to my taste library, because if you built this, like I suggested you'd do, it's already kind of broken it out into different libraries, right? I have Print-Tech Paper style, I have Dither Mono, I have, kind of, this like, Vast Quiet Cinematic style, and 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," or, if you haven't built something like that, you need to actually tell it specifically, like, "hey, I want five different variations and five different styles." That works too. So what we're going to do is we're going to use this prompt and start walking through it ourselves. So here's the prompt I gave it, I said, "build a landing page for Kestrel, an AI analytics platform for small startups," I give it the intent, and what we're trying to actually do, right, we want them to actually book a demo, we have some guardrails, I'm saying for pretty much all the hero pages, we're going to have like a monumental image, and I want it to never do the AI slop stuff, things like purple gradients, 3D SaaS blobs, that kind of thing. I say I want it to create five versions of the page, and then for each version, I break down the directions, so I specify the aesthetic, I give it a reference image, again that's coming from my taste library, remember this thing, and then I mention what the future hero will probably look like, and I do that for all five versions. So let's see what it comes up with. So here the five it created, here's, sort of, the Print-Tech Paper version. I got the Data as Texture and remember all these graphics were all just generated by Claude Code. I haven't used anything like the Higgsfield MCP to actually create the graphics. We have sort of the Vast Quiet one, this was supposed to be like a stand-in for some sort of like mountain range we would create. We have Dither Mono, and then we have Classical Remix. So, again, remember we're just kind of looking like big picture, what sort of style do I like. I kind of, Dither Mono looks kind of cool. I kind of think the Vast Quiet looks kind of sick. It's definitely different, very minimalist, but I kind of like what it's doing, and I think this might look really cool if we can nail the actual image behind it. So, I'm going to go with, sort of, this Vast Quiet direction, and now what I'm going to do is I'm going to ask it to essentially create three different versions of this, specifically when we look at the body, I want to just kind of like see what's possible out there. So, I said, "let's go with the Vast Quiet version, generate three versions of that aesthetic for me, namely changing the body formats, etc.," and you can get specific about what you want to see different with it. And so just like we did here, it's going to be three versions of this, then we'll nail down the one we like, and 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. So it's come up with a few more variants. Here's the original, right, very minimal, very vertical. Here is the second one, which also kind of has that calm approach, but it looks like it's kind of edited a little bit more to the body, because I like to add some sort of like splash of color somewhere, just because it's very black and white, and maybe just like some semblance of color would look good. So that's what I'm going to tell it. Can we get with option four that you created, and can you create multiple versions of that, and show me just like you did before, but could we add maybe a little color to it? Right now it's very black and white, I'm not sure if just a splash of color somewhere would look good. So, it created some variations, so here's the original, here it added a little color, called it "Dawn Touch", "Golden Hour", "Alpenglow", and then the "Duotone", which is way too much. Um, and of all these, I think I like the "Alpenglow", so we're going to go with that. Let's go with the Alpenglow version, and then go ahead and bring up our webpage with that as the hero. When you do that, make sure you take a look at the transitions between the hero and the body, it shouldn't just be like a super sudden change. So, do what you need to make that look sort of premium, and then, in terms of, like, page loading, we want everything to feel kind of like heavy, um, and give some weight to it. So here's what we got, all this stuff kind of loads in one by one, which I like, as we scroll down, it's not like a hard transition, so it kind of just, you know, slowly fades out, and then yeah, I like, I kind of, I really like this index, honestly, I think it looks really cool. And then at the bottom we have "Book a Demo". Now, overall, very minimal, but it kind of fits the vibe, and at this point, I'd kind of just want to start tweaking different things, and maybe see if we can add, I don't know, a little bit more, I don't know, punch to it so it isn't overly minimal, but honestly, I I I kind of think it fits. And so I think the easiest way to do that, instead of just sort of guessing, being like, "uh, make it look more premium, oh I want to add stuff," is to have, have it add a Tweak bar, and this is something you see inside a Claude Design. And so that prompt will look something like this. Can we sort of mimic what happens inside a Claude 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, basically, 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. So, go pretty aggressive with what you offer me. And while it builds that, the other thing I want to talk about is sort of references. So 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. But that also applies to the body, so just like we've given it screenshots, you can do the same for the body, and in fact, you can give it actual URLs of websites you like and be like, "hey, like, take a look at the actual formatting of that website because Claude Code can see it, and I want it applied to my page." And just like we've created this library of inspiration, you can do the same for stuff that isn't the hero. Again, it can just be how a, you know, the body of a website is laid out. Okay, so now you can see over here on the bottom right, I'll shift over here, we have this Tweaks button. So when I pull up the Tweaks, again, similar to Claude Design, I can start changing a bunch of stuff. So I can change the heading fonts and like, I this is just all built on the idea that like, I need to see the differences. I don't know what font's going to look good, I don't want to sit here and ask Claude Code to then create 10 different versions of the web page with different fonts, like, just give me some sort of, like, thing like this. Right? I think being able to, like, iterate visually very quickly is what allows us to eventually get something we like. So we can, "uh, don't like the italics," change the size, all this good stuff. And like I said, I told it to get pretty aggressive, so it has like the hero imagery, the assets, the motion, the weight, the reveal distance, all this stuff. And 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 to a place you're happy with. And really, this entire video has been about that. It'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. None of this is meant to be prescriptive. None of this needs to be followed to a T. Instead, it's about some, like, general rules and guidelines of figuring out, "okay, what do I actually like?" You know, cultivating that taste, how do I then take that taste and bring it to AI, where are some additional tools that Claude Code doesn't come with that can help me do a better job of that, and then lastly, how do I tweak, how do I iterate, so I'm not just at the mercy of Claude Code one-shots, and just playing the lottery game of putting in a random prompt, saying "please make it look more premium," and praying that the output is good. So with all that said, that is where I'm going to leave you guys for today. As always, let me know what you thought. Make sure to check out Chase AI Plus if you want to get your hands on more Claude Code guides, especially my Claude Code Masterclass. There'll be a link to that down in the pinned comments. And I'll see you around.