Speaker A
Did Fable 5.2 finally kill AI slop? Well, not exactly. Unfortunately, AI slop is never going to go away. It's just going to look different as these models continue to get better and better. What you're looking at here is
Chase AI walks through a four-step workflow (taste, tools, direction, dial) for making AI-generated web design less generic, using a SaaS camping app as a demo.
Key Takeaways
- Generic AI design comes from prompting without taste inputs; building a reference mood board first fixes much of this.
- Design skills like the taste skill and Impeccable act as guardrails, especially for beginners in front-end work with Claude Code.
- A tweaks-bar style control panel makes iteration fast, letting you land on outputs you actually like rather than accepting the first generation.
What the video covers
- The video argues AI 'slop' persists but changes appearance as models improve, so one generic prompt won't yield distinctive design.
- Fable 5.2's default output is solid but generic, showing telltale signs like serif headlines, italic accents, eyebrow labels, cream backgrounds and buttons.
- Step one, taste: build a mood board of design references from Pinterest, Dribbble, Twitter, and component sites rather than trying to articulate preferences in words.
- The presenter keeps a 'taste vault' web app built by Claude Code that organizes saved screenshots into collections for programmatic reference.
- Step two, tools: use general design skills such as the taste skill and Impeccable, which target and remove AI-slop patterns across the design process.
- Image and video generation is handled through the Higgsfield MCP, giving Claude Code access to many AI image and video generators.
- Step three, direction: refine references toward a specific aesthetic by showing concrete screenshots, since many people cannot name the style they want in advance.
- Claude generates multiple visual variants, including interactive elements like sliders and toggles, to narrow down a direction.
- Step four, dial: have Claude build a tweaks bar that exposes adjustable controls (background texture, hero size, tilt, layout options) for rapid iteration.
- The overall message is that treating the model as an engine you steer, rather than a slot machine, yields outputs that reflect your own taste.
Chapters
- 00:00Introduction: The Problem of AI Slop
- 01:07Overview of the Four-Step Workflow
- 01:59Anatomy of Generic AI Design
- 02:53Step 1: Taste and Building References
- 04:46Building a Taste Vault
- 06:18Step 2: Tools and Design Skills
- 08:18Image and Video Generation Tools
- 10:48Step 3: Choosing a Direction
- 13:49Step 4: The Dial and Tweaks Bar
- 16:44Wrap-up
Full Transcript — Download SRT & Markdown
Speaker A
the new face of AI slop. This was created by Fable 5.2, and it is not objectively bad. This is not the purple gradient nonsense we saw in 2024. This is pretty solid, but it is extremely generic and it screams Claude Code made
Speaker A
this. But the issue is one prompt isn't going to change this. You can tell Fable 5.2 whatever you want. You can say, "Hey, I want you to be creative. I want you to think outside of the box. I want
Speaker A
you to create an award style website and it will create interesting things like you see here. But are these driving conversion? And most importantly, are you actually able to inject your own taste? Are you in control of the
Speaker A
creative process or are you just using Fable 5.2 as a slot machine and saying, "Hey, be creative." And just hoping you get some generation that makes sense. We don't want a slot machine. Instead, we want Fable 5.2 to be the engine of a car
Speaker A
we are driving. And to do that, we need a sustainable, repeatable workflow that allows us to inject our taste. And that's exactly what I'm going to show you today. Now, the workflow I'm going to walk you through today has four
Speaker A
steps. That's taste, tools, direction, and dial. For taste, I'm going to show you where you can find references and inspiration that you can bring into Claude so you aren't starting from scratch. For tools, I'm going to show you which skills can actually improve
Speaker A
your outputs. For direction, I'm going to show you how to pick an aesthetic style. This can be really hard if you don't come from a design background.
Speaker A
Like, where do we even start in terms of prompting? We're going to cover that there. And lastly, when it comes to dial, I'm going to show you how to create stuff like a tweaks bar similar to what you see inside of claw design
Speaker A
that allows us to iterate very, very quickly so we can land on outputs we actually like. But in order to defeat AI slop, we first have to understand it.
Speaker A
Again, we're talking about generic regression to the mean outputs. I would consider this AI slop. This was a very plain prompt. It didn't use any skills.
Speaker A
And you see a lot of the telltale signs from AI. First of all, we have the serif headline. Guess what's going to be number two? It's going to be this italicized font at the end. Next, what do we have here? We have the eyebrows.
Speaker A
Everything is always labeled, whether it's at the top or the bottom. Next, we have the cream background. And then these buttons are pretty much everywhere. Props to Fable 5.2 for not making them super rounded like we usually see. Now, a successful front-end
Speaker A
design workflow goes beyond simply noticing these things and getting rid of them. Like if I change the font and I get rid of the italics and I get rid of, you know, the eyebrows, does that necessarily make it a better product?
Speaker A
Not necessarily. What makes a product good or what makes this good for a design is very subjective. So we constantly talk about taste. Taste.
Speaker A
Taste. You also hear AI has no taste. Well, that's why the first step of this workflow taste is so important. You need to cultivate your own taste. What do you think actually looks good? And then how do you articulate that? That's sort of
Speaker A
difficult. it. It's actually very very difficult to articulate why you like certain things. So instead of expecting you or anyone else to be able to figure out in words what you want Claude to do, why don't we just go out into the web,
Speaker A
go out on the internet and find websites and designs we like and just show it to Claude. Essentially give it a mood board that it can work off of. Well, that's exactly what you're going to do in step
Speaker A
one. And for this rest of the video, we are going to be demoing the creation of a webpage board. This app called 14.
Speaker A
This is essentially an app that helps people find campgrounds or places on public land where they can camp. Think like disperse camping sort of thing. So, when it comes to finding inspiration, luckily there are a ton of places we can
Speaker A
go. Some of my favorites include Pinterest, Dribble, Twitter, and even component pages like 21st.
Speaker A
The idea is you just need to go out there and you need to start finding things you like. Ideally, you already have some sort of repository or perhaps a saved folder on your computer that's just like screenshots of web designs you
Speaker A
really like. But if you haven't created that yet, you just need to start now.
Speaker A
And I suggest choosing one of these sites to sort of start your journey. So let's say for Pinterest, for example, we're creating essentially a SAS a software as a service application. So I don't have to go hyper specific when I
Speaker A
talk about, you know, hey, we're doing something related to camping. I could just do like SAS UI design or I can do SAS web design to sort of just get the ball moving and see if anything speaks to me. The same thing goes for dribble.
Speaker A
If I just put like landing page SAS, what do I get? I get a bunch of stuff pop up that may I may or may not like.
Speaker A
And the idea is once I find something I do like, I'm just going to take a screenshot of it and I'm going to dump it into claw code. And truthfully, I think the best place to find really good
Speaker A
design is going to be on Twitter. There's a ton of great web designers that are on this app. And if you can start following them, you're going to see things populate on your feed all the time that make you kind of just like
Speaker A
stop, go, "Wow!" and kind of just add it to your collection. Now, I referenced earlier the idea of taking all these screenshots over time and putting them in some sort of folder on your computer.
Speaker A
You can also turn this into a web app. I called mine a taste vault, and I have a number of references inside of here that I have clawed code. take a look at when I'm looking for inspiration for web
Speaker A
design. So, same sort of idea. I have a bunch of screenshots of different things I found on the web. I gave them all to Cloud of Code and I said, "Hey, just turn this into a vault of my quote
Speaker A
unquote taste." It breaks it down by collection. And the idea is instead of having to, you know, bring up this folder on my computer at any point in time, I can just have Claude programmatically take a look at this.
Speaker A
So, if you are someone who's doing a lot of front-end design, I highly suggest doing something like this. So, inside of my taste vault, I think this looks pretty sweet. I like this. I'll throw something like this as a reference as
Speaker A
well. And I think the general layout of the landing page of this reference also kind of speaks to me. Again, we don't have to hone in on a specific aesthetic style yet. We're just kind of throwing a bunch of stuff at the wall that we like.
Speaker A
And again, just kind of moving Claude in the right direction. Now, once you feel happy with the references you found that you want Claude to sort of build off of, next we move into step two, which is the
Speaker A
tools. what skills you need to bring on board before you can even begin prompting. Now, when it comes to front of design skills, MCPs and CLI, they really fall into one of two categories.
Speaker A
The first are the general design skills, and the two biggest ones in the game today are the taste skill and impeccable. These both kind of operate the same. The idea is they have identified what they consider to be AI
Speaker A
slop and the skill gets rid of AI slop. Some minor practical differences between the two, but that's how they work. And again, they affect every level of the design process. These aren't micro scales that are like, "Oh, hey, this
Speaker A
skill does, you know, scrolling animations or stuff with like asking, none of that." Now, should you be using these very large all-encompassing skills? I would say yes if you're new to front of design and cloud code. These act as a great crutch. They give you
Speaker A
really good guard rails and they're going to make sure whatever you create isn't quote unquote sloppy. However, as you become more mature, you need these less and less. Now, that second group of skills and MCPS are the ones that give
Speaker A
Claude code some ability. It just does not have it all, namely image and video generation. Now, for this, I tend to rely on the Higsfield MCP because it gives me access to all the AI image and video generators out there today. Being
Speaker A
able to add images to your web page definitely adds a certain premium effect to whatever it is you're building. So, I think this one is extremely useful. Now, specifically to use the Higsfield MCP, all you need to do is go to
Speaker A
Higsfield.ai, go up to the MCP, and then you're going to hit add Higsfield to Claude. We're going to want to connect it in the desktop app. You're going to copy the MCP link inside of the desktop app. We
Speaker A
are then going to go to the left, go to customize. You're going to go to connector, add custom connector. You're going to paste in the custom connector.
Speaker A
Call it whatever you want, and then you're going to hit continue. From there, you're going to have to already have a Higsfield account for this, but it's going to walk you through the authentication process. At that point, it's going to include the Higsfield
Speaker A
skills, which means Claude now has access to essentially any AI video or image generator it wants. And truth be told, beyond those skills, the Higsfield MCP, the taste skill in the impeccable, it really becomes a case-byase basis. I
Speaker A
suggest, and I think this is sort of something we see across the board as these models get better and better, you don't just go out and add 10,000 front of design skills to your stack. You aren't one skill away from sort of
Speaker A
getting like good outputs. It really comes down to this workflow process and these references and everything we're talking about today. Try not to overbloat it with skills. And truth be told, if you are ever like unsure if, hey, should I use impeccable? Should I
Speaker A
use tkill? Should I just rely on plain claw code? You can always prompt claude code to give you outputs using the skill, not using the skill. So, you can quite literally see what your website would look like with or with or without
Speaker A
all these add-ons. So, we've completed steps one and two, which is the taste and the tools. Now, we move into direction. Here is where we begin.
Speaker A
prompting it and begin settling into some sort of design or aesthetic direction. Now, I've gone ahead and updated some of my references. I went further into Pinterest and looked up hiking and camping SAS UIs and took some screenshots that you see here that are
Speaker A
sort of going to drive our references. Now, the prompt looks just like this. So, basically, I'm just saying I'm building a landing page for 14, our madeup app that finds free legal dispersed camping spots on public land.
Speaker A
So, I'm just explaining what my app is, what I'm trying to build. I say, take a look at the references I've attached for the type of aesthetic I like. Now, importantly, I'm saying keep those references in mind with what we're
Speaker A
building and come up with three landing pages for this app. Make them three very distinct takes. You can generate images with Higsfield if you deem appropriate.
Speaker A
So, I don't necessarily know what I want it to look like yet. I know I have some references. So, because I'm kind of a visual person, I'm having Claude create three landing pages for me, three very different styles, and we're going to go
Speaker A
from there. Maybe you already know an exact style you want to go for. If so, great. But I think for a lot of us, we kind of have to see it. Like so many things when it comes to AI and Cloud,
Speaker A
you don't need to know the answers to the test at first. Just ask Cloud what it thinks is best and have it come up with a bunch of different options for you. So that's what we're going to do
Speaker A
here and we're going to have Claude go to work and create some landing pages for us. So here are the three options that Fable 5.2 ended up giving us. So it lists them all side by side. We have
Speaker A
survey over here on the left. We have the diarama in the middle and then the almanac over here on the right. So I can see all of them side by side, but we can also expand each one. So we have the
Speaker A
survey one. So this is kind of cool. I can kind of actually adjust things on the hero itself, which is kind of neat.
Speaker A
and definitely different than the original output we got with Fable 5.2. Again, we're getting away from the generic. As we scroll down, what do we got? Another image it created that's actually interactive. Got this cool image and this interactive slider. So,
Speaker A
this looks pretty neat. Then we have the diarama. Um, first impressions are I probably like this one the most out of all the ones we've seen. kind of just because I think kind of has some character, you know, uh when it comes to
Speaker A
frame design, it's so subjective, you know. I could totally see someone that likes number one over number two. But I kind of like the design it went with.
Speaker A
Kind of reminds me of sort of those like remember those like almost claimation Airbnb uh commercials they had come out.
Speaker A
Was that last year or something? Um although there's some minor things like the image you can see kind of goes over the top of the early access bar. Don't know if I love the color doing green on green, but again, maybe I'm kind of like
Speaker A
feeling it. I don't know. I kind of just like the character of this one. Um, this is cool. Again, I kind of like the interactive stuff that are on here. Turn it on. Turn it off. This also adjusts.
Speaker A
So, pretty solid. I think this part might be cool if this was actually just part of the footer itself, if that makes sense. So, I feel like I like maybe the the sole of number two, even though I
Speaker A
think it could definitely use a little bit more work. Then we have the almanac setup. This is almost like too clean, I think, which I don't really love. Too clean for me. Not a huge fan. So, definitely between one and two. I could
Speaker A
see people who would like number one the most. But what I'm going to do is I'm going to say I like number two. Now, you have a few options at this point at this part of the workflow. Step three, we're
Speaker A
talking about directions. I could say, "Hey, Claude Code, I like number two. Now, give me three different versions of number two of the diarama." and then I want three versions of that. Right? You can keep having it giving you more and
Speaker A
more sort of macro iterations. Or you can say, hey, you know what? I like the diarama style. Let's go with number two.
Speaker A
And then let's move into step four, which is the dial step. And really, that's about more micro adjustments.
Speaker A
That's where we go inside of here and we start giving it more specific changes we want. And that's where we also bring in the tweak bar. Because the problem is what you're going to find is you get to
Speaker A
this step and you're like, "Okay, let me give it a prompt to fix this, you know, little thing on here, and let me give it another prompt to deal with the color.
Speaker A
Let me give it another prompt to do X, Y, and Z." And you're constantly relying on you yourself to be the one to come up with the prompts to do the fixes. Well, what if instead all these things I want
Speaker A
to change were just like a toggle switch or a slider, and I could very quickly see a bunch of different things at once.
Speaker A
That's what a tweak bar is going to give us, and that's what we see in things like Claw Design. But we can take that to the nth degree just by prompting it.
Speaker A
So that prompt will sound something like this. So what I want to do now is move forward with the diarama option. But I do want to see some more adjustments to it. So could we create some sort of like
Speaker A
tweak bar that gives me like sliders and toggles to where it could change different things on the web page itself?
Speaker A
Whether that's like fonts or even like motion, how things go in shadows. I want you to get very very deep with the amount of things that show up on this tweet part. I want to be able to edit a
Speaker A
lot of things via this bar so I can iterate over and over and over again. So even things you think I wouldn't necessarily change, go ahead and throw it on there. Surprise me. And then go ahead and bring that up once you're
Speaker A
done. And let's see what it comes back with for that. So here's the tweak bar over on the right. And it gave us 101 controls. So it went pretty nuts with this thing. Now right away it also made
Speaker A
a few changes. So you can see it fixed sort of the get early access thing that we saw there before. But let's take a look at some of the controls. It has a surprise me control. So, if we click
Speaker A
that, it'll just do a complete adjustment. So, I mean, you know, you want to talk about slot machine. Well, we kind of just put that straight into this. Um, which I guess is kind of interesting. Um, although we can always
Speaker A
just reset it. We can change sort of the palette. So, right now we're on sage. We could do desert, lakeside, wildflower, dusk, whatever we wanted to do. Again, the idea here with the tweaks bar is that I can rapidly iterate until I find
Speaker A
something I like. We can mess with the background texture. I can adjust the hero thing itself, the actual size. I can pull it up or down towards the headline. I can tilt this thing if we want to. Can even kind of change the
Speaker A
seasons or the hue really kind of make it a little more fall. Also apply that color to all of the clay art if we want to adjust the shadowing. Can even adjust the actual pin style, you know, whether
Speaker A
we want that to be a ring, a dot, or a teardrop. can adjust the motion. So, we can replay it when scrolled back. You can see it kind of bounces up as it comes in. All that can be edited here.
Speaker A
And like you see, we could spend another 20 minutes here going through pretty much every single change we ever wanted to. And this becomes the last step in having Fable 5.2 give you outputs that aren't just generic slob. So, that's
Speaker A
where I'm going to leave you in today's video. I hope what you got from this, if nothing else, is the workflow. the idea of injecting taste, using the right tools, choosing an art direction before finally tuning these little dials to get
Speaker A
an output that isn't generic and actually reflects what you want. And you can apply this to any sort of web design idea you have. So, as always, let me know what you thought. Make sure to check out Chase AI Plus if you want to
Speaker A
get your hands on my cloud code master class and I'll see you
Topics:AI design workflowClaude CodeAI slopweb designdesign tastemood boardHiggsfield MCPfront-end designUI iterationFable 5.2
