youtube.nixfred.com nixfred.com

Turn Claude Into A Design GENIUS In 3 Simple Steps

A reproducible three step method for getting web design out of Claude Code that does not look like it came from Claude Code. Step one is building an inspiration library web app where every saved screenshot carries keywords, a copy image prompt and a copy brief, so your taste arrives as text an agent can act on. Step two is the short list of external tools: the Impeccable skill with its 23 commands and 46 pattern slop catalog, the Taste Skill v2, the Higgsfield MCP for images and video, and 21st.dev for component prompts, plus a warning that the next skill is never the answer. Step three is the build, done live for a fake analytics startup called Kestrel in four widening passes: five aesthetics, four body layouts, four Higgsfield hero images at 2K, five color grades, and finally a self built tweaks bar that mimics Claude Design so he can move fonts and accents without re-prompting. Every prompt is read out and every rejected option is named.

Published Jul 23, 2026 22:59 video 34 min read Added Jul 25, 2026 Open on YouTube →

At a glance

Chase Hannegan has a specific enemy in mind and he names it in the first sentence: AI slop. Not the broken kind, the generic kind. The website that works fine and still announces, from across the room, that a model made it. His argument is that this is not a technical problem and no amount of model improvement will fix it, because a ten times better model just moves where the average sits. The fix has to come from you. So he lays out three steps: cultivate your own taste and store it somewhere Claude can read, arm Claude Code with the handful of external skills and MCPs it does not ship with, and stop trying to one shot the build. The third step is where the video earns its length. He builds a landing page for a fake analytics startup called Kestrel live, in four widening passes: five aesthetics, then four body layouts, then four Higgsfield generated hero images, then five color grades of the winner, and finally a live tweaks bar so he can move fonts and accents without asking Claude anything. Every prompt is read out loud. Every rejected option is named.

Chapters

The two faces of AI slop

The video opens on a before and after that is really a before and before.

The first image is the slop everyone already learned to spot: a generic SaaS template, Inter everywhere, blue purple gradients (0:10). That was the tell for a couple of years. Purple to blue, rounded cards, a floating 3D blob, done.

The second image is the current version, and this is the interesting one. "This is definitely better, but it still screams AI" (0:20). Nothing is wrong with it. The type is fine, the spacing is fine, the layout works. What gives it away is that it has a specific color palette and a specific font and a general style, and you can tell from across the room that it came out of one or two prompts.

That distinction sets up the whole video. The problem is not that models produce bad work. It is that they produce the average of good work, and the average has a look.

He promises three things: how to cultivate and inject your own taste into the web design process, which skills and MCPs to start using, and the exact build sequence, meaning what to prompt, how to prototype, and what it actually means to iterate until you get something you like.

STEP 1 · TASTE Curate a library Dribbble · Pinterest · X screenshot everything you like Claude Code builds a web app grouped by design type each entry: keywords, copy image prompt, copy brief

STEP 2 · TOOLS Arm the agent Impeccable · 23 commands Taste Skill v2 · experimental Higgsfield MCP · images, video 21st.dev · component prompts flexible, never prescriptive (that is the whole selection rule)

STEP 3 · BUILD Widen, then narrow five aesthetics at once then three body layouts then the hero image then a live tweaks bar never a one shot, never "make it more premium"

every finished build feeds new references back "AI has no taste." The three steps exist because the missing ingredient is yours, not the model's.
Figure 1. The spine of the video. Taste gets collected once and reused forever, tools get installed once, and the build is a funnel rather than a lottery ticket.

Step 1: AI has no taste, so bring your own

"AI has no taste" (1:00) is a phrase he expects you have heard, and he thinks it is worth taking literally, because it defines what step one is for. How do we cultivate taste, how do we curate it, how do we bring it into the web design process.

Then the load bearing claim (1:10):

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.

That is worth sitting with. It says model progress cannot solve this. Better models raise the floor, and the floor is exactly what "generic" means. Whatever the best default output is, that becomes the new average, and the new average becomes the new tell. The only escape is to hand the model something that is not the average, and the only thing you have that qualifies is your own preference.

The payoff of doing that is two things at once. Something unique, because it is specific to you and therefore subjective. And something good, in the quote unquote sense he is careful to flag, because you sourced it from work that is already working.

Where to look

The instruction is unglamorous: go collect. He names three places and shows each one.

Dribbble (2:05), which he pauses to spell, "that's Dribbble with three b's." He types web design, sorts by popular, and gets a wall of landing pages.

Pinterest (2:13). Same query, web design, and what comes back is a set of hero pages that look nothing like what Claude produces when you say "build me a landing page."

X, which he still calls Twitter (2:22), and which is his favorite of the three. The reason is people rather than boards: "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."

Your first job is the simplest one in the video. Go to these sites, look for things you like, and screenshot them. Save the links too when the live site exists, since a URL carries motion and interaction that a screenshot throws away.

Turn the screenshots into something Claude can read

You can stop at a screenshots folder. He did something better, and this is the single most reusable idea in step one: he had Claude Code build him a small web app that is the inspiration library (2:50).

It does more than store. It groups the screenshots by design type, and it can explain what a given design actually is: what it means, and what the vocabulary associated with it is. That last part matters more than it sounds. Design has names for things, and if you cannot name the thing you like, you cannot ask for it.

Click any screenshot in the app and you get:

So the library is not a mood board. It is a prompt source. Every entry has already been translated from "I like this" into text an agent can act on, which is exactly the translation most people never do.

He closes step one with an honest note about why the library exists at all (3:40):

So you don't just have to sit there and come up with something from scratch, come up with something 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.

Step 2: the tools Claude Code does not ship with

Step two is everything external you bolt on so that step three starts from a better place. He covers two skills, one MCP, and one website that is neither.

Impeccable

Impeccable is, in his words, "the best front-end design skill in the game right now" (4:04). The facts he gives:

He is upfront that a list of 23 command names is useless, so he opens impeccable.style where all 23 are in the left rail with a live before and after for each (4:42). Three he walks through:

The frame he lands on is that Impeccable is fundamentally a slop detector with opinions. It works across seven areas (5:20): typography, color, spatial design, responsiveness, interaction, motion, and UX writing. The site carries a whole section devoted to slop, broken into 46 different patterns, and the Impeccable CLI will walk your codebase looking for them and surface what it finds on a dev server (5:37).

Then the feature that closes the gap with visual tools: live mode (5:45). Bring your site up, click through it component by component, and make adjustments right there. His comparison is direct: "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."

Installing is deliberately boring. There is a CLI, three install options on the site, and if any of that confuses you, copy the page URL, paste it into Claude Code, and let the agent install it for you (6:03). That last trick generalizes to almost every tool in this video.

SEVEN DIMENSIONS IT JUDGES Typography Color Spatialdesign Responsiveness Interaction Motion UXwriting 46 slop patterns the catalog everything else reads from

SURFACE 1 23 commands bolder · overdrive · clarify polish · quieter · critique · …

SURFACE 2 The CLI scans the whole codebase, reports findings on a dev server

SURFACE 3 Live mode click through a running site component by component

Figure 2. Impeccable as described in the video. Seven dimensions produce one slop catalog, and that catalog is reachable three different ways depending on whether you want a command, a scan, or a visual editor.

The Taste Skill

If Impeccable is not for you, his alternative is the Taste Skill (6:16). It had just released version two, flagged experimental, and sat at just under 66,000 stars on GitHub when he recorded.

It works the same way in principle: hunt the AI slop tells, then push in the other direction. Stronger layout. Better typography, motion, and spacing. The stated goal is something unique rather than a boilerplate looking UI.

His verdict on the pair (6:43): "I think these two, the Taste Skill and Impeccable, are the best in the game right now. Definitely a step above the standard Anthropic frontend design, and definitely a step above some of the more popular repos like UI UX Pro Max."

That is a pointed ranking. UI UX Pro Max is the most starred of the four by a wide margin and he still puts it below the other two, which is a preview of the argument he closes step two with.

Design skillWhat it isStars, as he states themHis verdict
ImpeccableOne skill, 23 commands, plus a CLI and a live browser mode. Judges seven dimensions against a 46 pattern slop catalog.Almost 50,000His top pick. "The best front-end design skill in the game right now."
Taste Skill v2Same job, different hands. Hunts slop tells, pushes layout, typography, motion and spacing. Version two was newly out and marked experimental.Just under 66,000Co-recommended. The one he runs side by side against Impeccable in the Argus test.
Anthropic frontend-designThe stock, first party design skill that most people already have loaded.Not statedBeaten. Both picks are "definitely a step above" it.
UI UX Pro MaxOne of the most popular design skill repos going.Not stated, and the most starred of the fourBeaten. Named specifically as an example of popular not meaning better.

The Higgsfield MCP

MCPs get one entry and it is the one he uses most: Higgsfield (6:53). The reason is a plain capability gap. Claude Code cannot make images or video. Higgsfield's MCP hands it both, and it does so as an aggregator rather than a single model, which he describes as access to "virtually every single AI image and video generator out there."

His current picks inside it (7:10):

Installing follows the same pattern as everything else. Go to higgsfield.ai, open MCP and CLI, copy the snippet, paste it into Claude Code, and it walks you through authentication (7:22). There is a CLI as well as the MCP, and the site also offers skills you can add.

Once it is wired, Claude Code just reaches for it. If you are building a site that wants hero imagery in the background, the agent calls the MCP and generates it. Same for any other custom asset. Step three demonstrates exactly this.

21st.dev

The last item in step two is neither a skill nor an MCP: 21st.dev (7:52). He notes it arguably belongs in step one, since it is really a taste source, just at a lower altitude. Step one is about big picture aesthetics. This is about components.

The workflow he shows: click buttons in the left rail, get a wall of buttons, click one you like, and there is a copy prompt button underneath it (8:20). Paste that prompt into Claude Code and you get that button. Not a screenshot of it, the actual thing.

It is not just buttons. Cards, pricing sections, borders, backgrounds, calls to action. And his favorite example of why this is worth browsing at all is the least glamorous element on the internet (9:03):

How often are you looking at like pagination and the different options we have for that?

Which is the same argument as step one, scaled down. You cannot ask for a component you have never considered. Browsing a registry is how you find out that a decision you have been defaulting on was a decision.

The rabbit hole warning

Step two ends with a caution that is really a rule for evaluating any design tool (9:05):

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 all my design problems being solved.

You will find skills that build genuinely cool websites. The catch is that they tend to be narrow in scope and extremely prescriptive, and a prescriptive skill only ever gives you one kind of output. Which is a fine deal if that output is what you want and a dead end otherwise.

The reason he picks Impeccable, the Taste Skill, and Higgsfield is that all three are flexible, and you can push them in many directions. And then, to his credit, he immediately names the cost of that choice (9:36):

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.

That is the honest trade. A prescriptive skill guarantees a decent floor and caps the ceiling. A flexible skill removes the cap and removes the floor with it. Step three is the procedure for surviving without the floor.

Step 3: the build phase

The thesis arrives immediately (10:00): "what I want you to get away from is the idea that we need to one shot these things." What replaces it is cast a very wide net off the bat.

He shows the demonstration he ran before recording. A website for a fake AI company called Argus, built in five different versions in five different styles, all displayed at once. And there is a second axis in that grid: the left hand column used Impeccable, the right hand column used the Taste Skill (10:17). One screen, ten data points, two design skills compared head to head under identical prompts.

The cadence he recommends (10:31):

  1. Five styles. "I like to do five." Once you see all five you have a decent idea of the direction you want.
  2. Three versions of the winner. Take the one you picked, ask for three iterations of that style.
  3. Pick one and tinker.

The reason for doing it this way is spatial, not technical (10:48):

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 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?

Assets come last. Only once you have fidelity on the style do you bring in the Higgsfield MCP and start generating hero images and the rest (11:12). Generating a beautiful hero for a layout you are about to throw away is wasted work.

The four things every prompt carries

Prompting gets a short, specific framework, and he opens it with a shot at the alternative (11:31):

It's not some 10,000 page design.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.

Which is the same complaint as the prescriptive skills warning, applied to prompt libraries. A giant shared design document is just prescriptiveness in another format, and it converges everyone who uses it onto one look.

His four slots:

SlotThe question it answersWhat went in the Kestrel prompt
1 · AestheticWhat general family of design should this follow?A named family per version, pulled from the library's own groupings: print tech paper, vast quiet, dither mono, classical remix.
2 · Reference imageWhat does that family actually look like? This is where the taste library pays for itself.A screenshot from the inspiration library attached to each of the five versions. Live URLs work too, and he says do not be shy about using them.
3 · IntentWhat are we building and why? SaaS or event? Who is the audience? Do they read, click through, or fill in a form?"An AI analytics platform for small startups," and the conversion goal is to book a demo.
4 · Guard railsWhat must it always do, and what must it never do?Always: a monumental image on the hero. Never: purple gradients, 3D SaaS blobs, Inter font.

Two notes he adds to slot two. First, the point of a reference is to match the feel, not the content (12:02). "We aren't necessarily trying to match it contentwise or design-wise, because we're not trying to like copy them. Again, we're going for a feeling, an aesthetic." Second, references do not have to be images. Drop actual website URLs, because Claude Code can go and look at them.

Slot four is where the AI slop vocabulary earns its keep. "I never want purple gradients. I never want Inter font" (12:38) is only a usable instruction because he has spent enough time in step one to know what the tells are called.

Prompt one: five aesthetics at once

If you built the library, you can offload the aesthetic selection to Claude (13:26). His is already broken out into families, print tech paper, dither mono, the vast quiet cinematic thing, so he can say: take a look at my library and pick out five different aesthetic families and create websites like that. If you have no library, "I want five different variations in five different styles" works too, it just leaves the taste up to the model.

The prompt he actually ran, as he reads it out (13:47):

Build a landing page for Kestrel, an AI analytics platform for small startups.

Intent: get the visitor to book a demo.

Guard rails: every hero should carry a monumental image.
Never use AI slop patterns: no purple gradients, no 3D SaaS blobs, no Inter font.

Create five versions of the page. For each version I'll give you:
  - the aesthetic (the design family it should follow)
  - a reference image from my inspiration library
  - what the future hero image will probably look like

The five came back and he walks the grid (14:28). Print tech paper, with what he calls data as texture. Vast quiet, holding a placeholder for a mountain range that does not exist yet. Dither mono. Classical remix. Four of the five get named clearly on screen.

And a detail worth flagging, because it is easy to miss (14:37):

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.

So pass one runs entirely on Claude Code's own drawing. The image model has not been touched yet. That is the discipline he described earlier, actually executed.

His pick: dither mono looks cool, but vast quiet wins (15:10). "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."

Prompt two: three body layouts

Same move, narrower (15:33):

Let's go with the vast quiet version. Generate three versions of that aesthetic
for me, namely changing the body formats.

He notes you can be as specific as you like about what should differ between them. He chose body format because the hero direction was already settled and the body was the open question.

Four panels come back, the original plus three new ones (15:57):

He picks the ledger (16:30). "I kind of like how when you scroll down this follows you on the left hand side. Maybe we add something to the right a little bit. Not totally sure, but I like this. This kind of is like a neat, minimal approach, yet looks a little bit different." It gets the label V3B, the quiet ledger version.

Prompt three: nail the hero image

Now, and only now, the image model gets called. The sequencing is deliberate (16:50): "I want to nail the hero image first. I think if I nail this background, then I'll begin playing around with fonts and where things are kind of sitting."

The prompt (17:03):

Let's go with V3B, the ledger version.

Now nail that hero image. You have the examples of hero images that are part of
the quiet aesthetic in our inspiration library, I think there are three or four
of them. Give me four different images that fit that, and that would also fit
our hero composition specifically.

Use the Higgsfield MCP. Make them high quality, make them 2K, create four
different designs, and pull them up once you're done.

Note what that prompt is doing. It is not describing a picture. It is pointing at the library entries that already encode the aesthetic, adding a compositional constraint from the chosen layout, and naming the tool, the count, and the resolution. Four separate constraints, none of them adjectives like "premium."

Claude Code called the Higgsfield MCP, generated the images, dropped them into the hero section, and displayed the variants (17:42): aerial, crag, watercolor, cloud sea.

His read: not a fan of the second, "I feel like it overlaps some of the text," and he likes one and four. He wants one thing changed. It is very black and white and he wonders whether a splash of color somewhere would help.

Prompt four: color grade the winner

Can we go 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.

Five come back (18:35): the original, dawn, golden hour, alpenglow, and a duotone he dismisses on sight as "way too much."

Alpenglow wins.

PASS 1 · AESTHETIC FAMILIES · Claude Code graphics only, no image model yet five at once Print techpaper Vastquiet ✓ Dithermono Classicalremix unnamed

PASS 2 · BODY LAYOUTS · same aesthetic, three new variants three, plus the original Originalvertical Calmer,fuller body Ledger ✓V3B Frames

PASS 3 · HERO IMAGES · Higgsfield MCP, 2K, four designs first call to the image model Aerial Crag(overlaps text) Watercolor Cloudsea ✓

PASS 4 · COLOR GRADE · "it's very black and white, maybe a splash of color" five grades of one image Original Dawn Goldenhour Alpenglow ✓ Duotone(too much)

Kestrel · quiet ledger · alpenglow hero shipped with a live tweaks bar for fonts, accents, motion and weight
Figure 3. Every option generated in the live build and which one survived each pass. Eighteen candidates across four passes, one page out the other end, and not a single "make it look more premium" in the whole chain.

Prompt five: assemble it, with weight

With the hero settled, he goes back to the page, and this prompt is where the taste vocabulary shows up as motion rather than color (18:53):

Let's go with the alpenglow version. Bring up our web page with that as the hero.

When you do that, take a look at the transitions between the hero and the body.
It shouldn't just be a super sudden change, do what you need to make that look
premium.

And in terms of page loading, we want everything to feel kind of heavy, give
some weight to it.

The result (19:12): elements load in one at a time, which he likes. Scrolling down, the hero does not hard cut, it slowly fades out. The scrolling index is still his favorite part, "I really like this index, honestly, I think it looks really cool." Book a demo sits at the bottom, closing the loop on the intent slot from the very first prompt. Overall very minimal, and he thinks it fits the vibe.

The tweaks bar, or how to stop guessing

Here is where he wants a bit more punch, and here is where most people would type "make it look more premium." He calls that out as the failure mode (19:52) and replaces it with something structural: have Claude build you a tweaks bar, the same live control panel you get inside Claude Design.

The prompt (20:02):

Can we sort of mimic what happens inside of Claude Design and add a tweaks 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.

Go pretty aggressive with what you offer me.

While that builds, he circles back to references with a point he had not made yet (20:29). Everything about inspiration so far has been about the hero, the first thing you see. The same applies to the body. Give it screenshots of bodies you like. Better, give it live URLs, "because Claude Code can see it, and I want it applied to my page." And build a second library for body layouts exactly as you built the first one for heroes.

The tweaks bar arrives as a button in the bottom right (21:08). Open it and you can change the heading font, kill the italics, change the size. The rationale is the same one that drove the five-at-once approach, just at a finer grain (21:20):

This is all built on the idea that 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. Just give me some sort of thing like this. Being able to iterate visually very quickly is what allows us to eventually get something we like.

He did ask for aggressive, and he got it. The panel exposes hero imagery, assets, motion, weight, and reveal distance on top of the typography and color controls (21:44). Reveal distance is a nice tell that the model took "go aggressive" seriously, since that is the kind of parameter you would normally never think to expose.

From there it is just tweaking, repeatedly, showing it more references of things you like, until you land somewhere you are happy with.

The closing argument

The outro (22:05) refuses to turn any of this into a recipe. The whole video has been about giving you a flexible workflow. "None of this is meant to be prescriptive. None of this needs to be followed to a tee." What it is instead is a set of general rules for answering three questions: what do I actually like, how do I get that taste to the model, and what tools does Claude Code not come with that would help.

And the last line is the one that names what all of it is for (22:30):

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?

That is the actual deliverable. Not a design skill, not an MCP, not a prompt. A way to stop buying lottery tickets.

He closes by pointing at Chase AI Plus for more Claude Code guides, particularly his Claude Code masterclass, linked in the pinned comments.

Best quotes

"I'm going to teach you how to defeat the monster known as AI slop in three simple steps." (0:00)

"A generic SaaS template with Inter font everywhere and blue purple gradients." (0:10)

"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 prompt or two." (0:20)

"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." (1:10)

"Instead of relying on nothing and instead just getting an average regression to the mean output." (2:00)

"That's Dribbble with three b's." (2:10)

"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." (2:22)

"So you don't just have to sit there and come up with something from scratch. 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." (3:40)

"It pushes safe designs towards impact without sliding into chaos." (4:50, quoting Impeccable's own description of bolder)

"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." (5:52)

"If you get confused, just go ahead, copy the URL and drop that into Claude Code and it will install it for you." (6:08)

"Definitely a step above the standard Anthropic frontend design, and definitely a step above some of the more popular repos like UI UX Pro Max." (6:47)

"How often are you looking at pagination and the different options we have for that?" (9:03)

"It's very easy to fall into the trap of, well, I'm just one skill away from all my design problems being solved." (9:07)

"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." (9:36)

"What I want you to get away from is the idea that we need to one shot these things." (10:00)

"The idea is I want to see all my options on one screen at one time. Why don't we just try a bunch of stuff at once and compare and contrast?" (10:48)

"It's not some 10,000 page design.md prompt you need to copy, because when people give you that, it's going to be kind of the same thing every time. It's very narrow." (11:31)

"We're trying to match the feel. We aren't necessarily trying to match it contentwise or design-wise, because we're not trying to copy them. We're going for a feeling, an aesthetic." (12:02)

"I never want purple gradients. I never want Inter font." (12:38)

"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." (14:37)

"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." (15:10)

"The duotone, which is way too much." (18:42)

"We want everything to feel kind of heavy, and give some weight to it." (19:08)

"This is all built on the idea that I need to see the differences. I don't know what font's going to look good." (21:20)

"Being able to iterate visually very quickly is what allows us to eventually get something we like." (21:34)

"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." (22:30)

The method, extracted

For anyone who wants the thing without the walkthrough, here is the whole video compressed into a sequence you can run today.

An honest footnote

Three things are worth checking against the record, none of which changes the method.

The GitHub claim is about GitHub, not Anthropic. He says Impeccable was "turned into like an official part of GitHub's AI tool" (4:14), which is easy to hear as an Anthropic endorsement given everything else in the video is Claude shaped. It is not. Impeccable ships as a built in skill in the GitHub Copilot app, which GitHub announced on X. Anthropic's connection runs the other way: Impeccable's own README credits Anthropic's frontend-design skill as its starting point, which makes the "step above the standard Anthropic frontend design" line a statement about a fork outgrowing its origin rather than a competitive dig.

The counts move. Star counts and rule counts in a video like this are timestamps, not facts. Impeccable's slop catalog was 46 patterns when he recorded and has since grown past that. The seven dimensions are the stable part and the part actually worth internalizing, since they are a checklist you can run in your head without any tool installed. Same for the star numbers on all four skills. They were true on the day and they will drift.

"Tweaks" is a description, not a product name. The behavior he is copying from Claude Design is real and well documented, live sliders and color pickers embedded into a running prototype for theme color, accent, type size, spacing and timing. Anthropic's own materials call these adjustment knobs and layout controls rather than a capitalized Tweaks panel. It does not matter for the prompt, since you are asking Claude to build the behavior rather than to import a feature, but it is worth knowing the word is community shorthand.

One more thing that is not a correction so much as an observation. The most transferable idea in the video is not any of the tools, all of which will be replaced. It is the library with copy prompt buttons. Almost everyone collects design inspiration and almost nobody translates it into text an agent can act on, so the collection sits in a folder doing nothing. Doing that translation once, at collection time rather than at prompt time, is what makes the four slot prompt cheap enough to run five times in parallel. Everything downstream of step one depends on step one having been done properly.

Resources

The creator

Step 1: taste sources

Step 2: skills, MCPs and registries

Models named

Anthropic surfaces

Named in passing

Full transcript
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 looks something like this. A generic SAS template with interfont 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 prompt or two. 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 road map 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, highle 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 dribble. That's dribble with threebs. 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, alls 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 vaual 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 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 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 claw 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 into 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 boulder 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 boulder, well, I get something like this. Or if I do something like overdrive, hey, here's, you know, standard cloud 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 slob. 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 as 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 will 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 claw design in it 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 cloud code and it will install it for you. Now, if you don't really like Impeccable, another one I would suggest is the Taste Skill. They just released 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 fronted design, and definitely a step above some of the more popular repos like UIUX Pro Max. Now, when we talk about MCPS, the one I use the most is the Higsfield MCP. And this is because it's going to give Cloud Code capabilities. It simply does not have out of the box primarily image creation and video creation. So the Higsfield MCP is going to give you access to virtually every single AI image and video generator out there. So I usually use GPT images too for images. And then for video that's usually bouncing around every few weeks, but right now Seed Dance 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 Higsfield website, higsfield.ai. go to MCP and CLI. Just copy this, paste it into cloud 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 cloud 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 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. So, we're just getting more detailed and like a little lower level and 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 pagionation and the different options we have for that. Now 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 and hickfields 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 into step three which is the actual build phase. And what I want you to get away from is the idea that we need to oneshot 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 lefth 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 Higsfield 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,000page design. 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? and 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 aren't necessarily trying to match it, you know, contentwise 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 SAS 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 guard rails? 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 oneshot. 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 do, it's already kind of broken it out into different libraries, right? I have print tech paper style. I have dither mono 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 guard rails. I'm saying for pretty much all the hero pages, we're going to have like a monumental image. and I wanted to never do the AI slop stuff, things like purple gradients, 3D SAS blobs, that kind of thing. I say I wanted to create five versions of the page. And then for each version, I break down the direction. 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 are the five it created. Here's sort of the print tech paper version. got the data as texture. Remember all these graphics were all just generated by cloud code. I haven't used anything like the HQL MCP to actually create the graphics. We have sort of the vast quiet one. This is supposed to be like a standin 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? Kind of their 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 added a little bit more to the body. Here's one where it's more of a ledger. It's kind of shifted a few things over to the left and now we have this index that scrolls along with us which I actually kind of like. Then we have this one which it called frames. Okay. So everything's kind of like you see kind of how has these edges on the side that frames each section. To be honest, I kind of like the ledger. Um I kind of like how when you scroll down um this follows you on the left hand side. Uh maybe we add something to the right a little bit. Not totally sure, but I like this. This kind of is like a neat, minimal approach, yet looks a little bit different. And 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. And what I want to do now is I want to nail the hero image first. I think if I nail this background, then I'll begin playing around, you know, with like fonts and where things are kind of sitting. So, the prompt I'm going to give it is let's go with the V3B, which is the Ledger version. And what I want to do now is nail that hero image. So you have the, you know, examples of the hero images that are part of the quiet aesthetic that's on our inspiration library. I think there's like three or four of them. So can you create like give me like four different images that fit this that would also fit our hero image specifically, right? The whole like composition of it. So um use the Higsfield MCP for that. that make them high quality, make them 2K, and create four different designs and then pull them up once you do that. So, Claude Code called the Higsfield MCB, created some images, threw it into the hero section, and now it's displaying those different ones. So, this is the first version, which is the aerial, we have the crag, then we have almost this like watercolor type painting, which I think is cool. And then it did the cloud sea. Now, I kind of like honestly not a huge fan of two cuz I feel like it overlaps some of the text, but I do like I like number one and four. I think I think one looks pretty cool, but maybe if we could add I don't know like a splash of color somewhere just cuz 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 go 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 golden hour albing glow and then the duo tone which is way too much. Um, out of all these, I think I like the Alpen glow. So, we're going to go with that. Let's go with the Alpenlow version. And then go ahead and bring up our web page 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, um, 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. 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 just a little bit more, I don't know, punch to it so it isn't overly minimal. But honestly, I I kind of think it fits. And so, I think the easiest way to do that instead of just sort of guessing and being like, uh, make it look more premium. Oh, I want to add stuff, is to have it add a tweaks bar. And this is something you see inside of Claw Design. And so, that prompt will look something like this. Can 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, 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 cuz I do like the hero. Um, 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 like formatting of that website cuz cloud 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 a 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 claw design, I can start changing a bunch of stuff. So I can change the heading font. 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 could 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 it 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 tea. 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? What 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 oneshots 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 masterass. There'll be link to that down in the pin comments and I'll see you