16:27Chase AI · Tutorial
Stop Using Ralph Loops (Use This Instead)
A 16-minute argument that Ralph is a weapon — and most builders need the whole armory first.
January 22ndThe argument in one line.
Claude Code defaults to a recognizable aesthetic rut on every build, and the open-source ecosystem has already produced a dozen targeted tools that each fix one specific dimension of that problem.
Read if. Skip if.
READ IF YOU ARE…
- You build web apps with Claude Code and every output looks like a B-tier SaaS template.
- You tried the Anthropic frontend-design skill and found it too vague to produce consistent results.
- You want ready-made skills or CLIs that improve output without requiring you to learn design fundamentals.
- You are starting a new project and want a strong visual foundation before writing any code.
SKIP IF…
- You are not using Claude Code for frontend work.
- You are a trained designer who already has a design system and visual direction locked.
The full version, fast.
Claude Code is technically strong but aesthetically defaulting — it reaches for Inter, purple gradients, and bento card layouts on every project. This video catalogs 10 tools built specifically to override those defaults: anti-pattern skill libraries (Impeccable, Taste), design-system extractors (SkillUI, Awesome Design), visual ideation tools (Stitch), component libraries (21st.dev), an intelligent design generator (UI/UX Pro Max), a GPU animation skill (WebGPU Three.js), typography resources (Google Fonts), and automated frontend testing (Playwright CLI). Most are free and installable in minutes, and together they address design quality at the skill, component, and testing layers.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:28
01 · Intro — the AI slop problem
Hook: names AI slop and promises 10 tools. Shows a WebGPU galaxy animation as contrast.
00:28 – 03:05
02 · Tool 1: Impeccable
1 skill, 18 commands, named anti-patterns. Chrome extension highlights slop on live pages.
03:05 – 06:13
03 · Tool 2: SkillUI
Reverse-engineers any website into a Claude-ready skill. Ultra mode uses Playwright for interaction capture.
06:13 – 07:37
04 · Tool 3: WebGPU Three.js TSL Skill
Teaches Claude to write GPU shader code for browser animations. Advanced but accessible via simple text prompts.
07:37 – 09:31
05 · Tool 4: Awesome Design MD
Community collection of DESIGN.md files extracted from real websites. 50k+ stars.
09:31 – 11:49
06 · Tool 5: Stitch (Google)
Visual-first mock-up tool. Input a prompt, get full design system and variant pages. Free.
11:49 – 13:28
07 · Tool 6: UI/UX Pro Max
Intelligent design system generator with 161 industry-specific rules.
13:28 – 16:05
08 · Tool 7: 21st.dev
Component library with copyable Claude Code prompts. Best for small flourishes.
16:05 – 16:57
09 · Tool 8: Taste Skill
Subskill collection with three tunable settings: variance, motion, density.
16:57 – 18:04
10 · Tool 9: Google Fonts
Free font repository. Claude Code defaults to Inter on every project.
18:04 – 19:22
11 · Tool 10: Playwright CLI
CLI for automated frontend interaction testing. More token-efficient than MCP.
19:22 – 20:07
12 · Outro
Encourages differentiation. Soft pitch for Chase AI masterclass.
Lines worth screenshotting.
- Telling an LLM what AI slop looks like by name is more effective than telling it to avoid generic design.
- A Chrome extension that highlights slop patterns on live pages gives instant visual feedback that prompts alone cannot.
- Reverse-engineering a real website into a Claude-ready skill with one command is now a solved problem.
- Design-system prompt files (DESIGN.md) let you carry a brand visual logic into Claude Code without copying HTML.
- Iterating visually in a mock-up tool first saves dozens of write-code/check-browser cycles.
- A design generator that asks what your product does before styling it produces more appropriate output than a one-size-fits-all skill.
- The smallest components — buttons, cards, borders — show the biggest return on design investment because they appear everywhere.
- Claude Code defaults to Inter on every project unless you explicitly specify a font from a resource like Google Fonts.
- Playwright CLI is more token-efficient than Playwright MCP because it does not load large tool schemas into the context window.
- Automated interaction testing at the end of every frontend build catches edge cases that manual click-testing always misses.
- GPU-accelerated browser animations are now accessible to non-shader developers through a single Claude Code skill.
- The biggest design differentiator available to Claude Code users is simply installing a tool nobody else is using yet.
Claude Code needs explicit design guardrails to escape its defaults.
WHAT TO LEARN
The AI slop problem is not a Claude limitation you wait for Anthropic to fix — it is a tooling gap the open-source ecosystem has already started filling.
01Intro — the AI slop problem
- Consistent, named anti-patterns are more actionable than a general plea to avoid generic design.
02Tool 1: Impeccable
- Teaching an LLM what bad design looks like by name outperforms telling it what good design looks like in the abstract.
- A Chrome extension that highlights anti-patterns on live pages turns abstract rules into immediate visual feedback.
03Tool 2: SkillUI
- Any live website can now be converted into a Claude-ready design skill in a single command, bypassing manual HTML inspection.
- Ultra mode captures interactions and animations via Playwright, not just static HTML.
04Tool 3: WebGPU Three.js TSL Skill
- GPU-accelerated browser animations are now within reach for non-shader developers through a single Claude Code skill.
05Tool 4: Awesome Design MD
- Pre-extracted design system prompts for dozens of real websites let you start with someone else's proven visual language instead of inventing your own.
06Tool 5: Stitch (Google)
- Front-loading visual ideation in a mock-up tool eliminates the slowest part of frontend iteration: the write-code / check-browser loop.
- A design system document generated before writing any code gives Claude Code consistent visual guidance across the entire project.
07Tool 6: UI/UX Pro Max
- A design generator that asks what your product does before styling it produces more domain-appropriate output than a generic skill.
- 161 industry-specific reasoning rules give the tool concrete guidance for contexts where a SaaS template would be the wrong aesthetic choice.
08Tool 7: 21st.dev
- Small components — buttons, cards, borders — return the most design value per prompt because they appear throughout an interface.
- Exposure to a wide library of component examples helps developers develop taste even before they know what they like.
09Tool 8: Taste Skill
- Design variance and motion intensity are tunable parameters — aesthetic output is a dial, not a binary switch.
10Tool 9: Google Fonts
- Specifying a font is one of the fastest ways to break Claude Code out of its Inter default and signal intentional visual decisions.
11Tool 10: Playwright CLI
- Playwright CLI is more token-efficient than the MCP version because it does not load large tool schemas into the context window.
- Automated interaction testing at the end of every frontend build catches edge cases in form submissions and user inputs that manual testing always misses.
Terms worth knowing.
- AI slop
- A colloquial term for the predictable aesthetic that AI-generated UIs default to: Inter font, purple or gradient backgrounds, cards nested in cards, glassmorphism, and sparkline charts.
- DESIGN.md
- A plain-text markdown file that describes a website design system — colors, typography, component patterns, layout rules — in a format that LLMs can read and apply to new projects.
- WebGPU / TSL
- WebGPU is a browser API that exposes the graphics card for web rendering. TSL (Three.js Shading Language) is Three.js abstraction layer for writing GPU shaders without raw WGSL or GLSL.
- Playwright
- An open-source browser automation library by Microsoft. Its CLI is used here to script and auto-run end-to-end tests of frontend interactions from within Claude Code.
- Glassmorphism
- A UI style characterized by frosted-glass backgrounds, blur effects, and semi-transparent panels — one of the most over-used patterns in AI-generated interfaces.
Things they pointed at.
Lines you could clip.
00:00
“There's a monster inside of Claude Code, and it's called AI Slop.”
01:44
“Why don't we use a skill that tells LLMs this is AI slop verbatim instead of using something like the front-end design skill, which is like, just don't do AI slop, please?”
16:03
“AI has no taste. Well, what if we gave it taste as a skill?”
18:03
“It's always inter. Always.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphoranalogy
00:00There's a , and it's called AI Slop. Purple gradients, inter font for everything, and the same card setup on every single website. You know that kind of AI Slop I'm talking about.
00:12But today, I'm gonna give you 10 different tools to help you slay this beast. And no, none of them are the front end design skill. In fact, a lot of these tools are relatively new.
00:22So even if you've been in the Cloud Code design space for some time, I promise you're gonna learn something today. Now all these tools we're gonna go over today serve essentially the same purpose and that's to give you a fighting chance to create high quality front end web design with Claude code because as good as Claude code is, that is one area.
00:40It is extremely deficient. And the first tool on the list is Impeccable. This is a single skill that includes 18 commands and I will link this in the description as well as every other tool we will cover today.
00:51Now I really like Impeccable because what it's able to do is extremely wide ranging. It's one skill, but it's 18 commands. And if we follow the link on the GitHub to impeccable.
01:00Style, we can see all of their commands in action. And better yet, we can see generic AI output. Hey, interfont purple gradients and sort of the after image using the different commands.
01:14So for example, we have something like Clarify, which is all about UX errors and error messages. And you can see the difference between the two here.
01:21It also has a Chrome extension which will highlight these sort of AI slop aesthetics directly on your web page like in this example. And I really like how this skill uses anti pattern. So it essentially teaches large language models what AI slop actually looks like.
01:37These border accents, these side tab accent borders that you see everywhere. You know, sparklines, glassmorphism.
01:44Right? We just see these things again and again and again and again. So why don't we use a skill that tells LLMs this is AI slop verbatim instead of using something like the front end design skill, which is like, just don't do AI slop, please?
01:56Like, that doesn't work. And as you can imagine, this skill is pretty dense as we see here and I continue to scroll. And that's because it has several references for each specific sort of design domain.
02:08You can almost think of those as subskills and the aforementioned 18 different commands.
02:14Now the easiest way to see all these commands in action is actually just to go to the impeccable docs. And just like you saw on the hero page, you can see the examples of the before versus the after.
02:25And so visually seeing what all these things can do is way better than kinda just looking at the description and hoping Cloud Code uses what you expect it to use. And it isn't even just a purely visual thing. When you look at skills like adapt, it makes sure it actually works across different platforms like mobile and tablet versus just desktop only.
02:44So highly suggest you check this one out. It's only been out for about a month. Now before we go into tool number two, just a quick plug for my Cloud Code Masterclass, which I just released last month and have already put out a ton of updates.
02:54It is the number one place to go from zero to AI dev, and the price of this is increasing in just a few days. So if you wanna get your hands on this, make sure to check it out.
03:04There's a link in the pinned comment. Now let's talk about tool number two which is SkillUI. Now this is a tool I just found out about this morning.
03:12It's it hasn't even been up for twenty four hours. It's got seven stars. We are on the Ground Floor.
03:16I didn't make this. I don't know this guy. I just happened to see him post about it on Twitter.
03:21I was just, like, doomscrolling. I saw it. So this looks like a cool skill.
03:24And it allows us to reverse engineer any design system into a Claude ready skill. What does that mean? That means we take this skill, we point it at some sort of website that already exists, and it essentially analyzes how that website was built and turns that into a template, into a skill, essentially.
03:43Let me show it in action. So right here, have the Stripe website. Pretty cool website.
03:48A lot going on. Obviously, it has a lot of custom graphics and things like that. It is impossible for Claude code without a lot of these graphics and visuals to necessarily recreate it.
03:58Yet, let's say I like the general design, just kind of how it's set up in terms of cards and layouts, and I wanted to use this as a foundation for my own website. Well, we've talked about in past videos ways we can do that, like, you look at the HTML, all these things, but, you know, it ends up being like a 70% solution.
04:13So I took that Skill UI skill. I pointed it at Stripe, and then I said, hey. Make me a fake Stripe website in that sort of style.
04:21And this is what it came up with as a one shot. That's all I told it. I didn't give it any more information, and it created this.
04:28And so it kinda has, like, definitely a Stripe vibe to it. Again, like, these are custom graphics on Stripe. It's not gonna be able to recreate that just off a prompt, but, you know, pretty good, actually, if you ask me.
04:42Like, you know, it still has some, you know, standard AI stuff there, kinda like how stuff is set up in the icons, but it didn't just do, like, a two by two bento, you know, box with the cards.
04:55I do like the colors it used. I like sort of the graphic it put here. Like, this is honestly really good for me just saying, hey.
05:02Look at Stripe's website. Build me a foundation. And since it turned it into a skill, I now have a Stripe design skill, which is just on the project level, but I could bring that up at any time.
05:12So let's say I wanted to make another website that also used the Stripe style, I can do that. But I can point Skill UI at anything. And you can see it in action in the example video he has here on the GitHub where he pointed this tool at Notion, and they told Cloud Code, make me essentially a Notion clone.
05:27And that's what you see right there. So to use this skill, you just follow the install commands here on the GitHub page, and it has two different modes. So if you want something that essentially takes everything, like scroll screenshots and different interactions when your mouse goes over stuff, it uses Playwright to figure all that out.
05:46So it isn't just looking at the HTML like normal stuff does, like something like my custom site breakdown skill has done in the past. So if you use ultra mode, it actually brings in playwright. So there is a certain level of sophistication here.
05:57So all in all, really clever skill. You're on the ground floor if you start using this. You're now like a hipster GitHub repo skill user.
06:03And I would highly suggest you do this if you're starting a new website and you have no idea how you should kinda like start it at the ground floor. Because again, this is a great starting point. I can edit anything I want from here.
06:13Now tool number three is one that I will be honest is a little outside of my wheelhouse, but I find it super interesting. I'm trying to learn more about it and use it myself. And that is a web GPU skill.
06:23So web GPUs are essentially like web design components where the web page is interacting with your graphics card. And this allows us to create super cool animations like you see here.
06:35I like, this stuff as well. When we talk about if you watch my seven levels of Claude code web design and we looked at stuff like the Igloo website on level seven, they were using things like WebGL and custom shaders.
06:47Like, this is the sort of realm I'm talking about. And so this skill teaches Claude code how to essentially write code that does that. So it tells it how to set up the render, how to do shaders, how to create the node based material.
06:59And by using the skill, I just gave it a couple text prompts, and it was able to create this. Now is this as cool as, you know, this one?
07:08No. But I I did it in two minutes after well, actually took it like ten minutes with the GPU, but a couple text prompts that I had no idea what I was doing. So if this sort of stuff interests you, and out of all the tools I talk about here, this is the one that's the most, you know, probably out there, but I I liked it.
07:24Uh, if this stuff interests you, this is a skill you should check out because it kinda moves you in that direction. But, obviously, this is something that is much more advanced than just changing what our cards look like or changing the typography of a website, but something to keep in mind. Now tool number four is one of the hottest AI repos over the last month and that is awesomedesign.md.
07:43This is at over 50,000 stars at this point, so it's been absolutely ripping. And this is similar in some respect to the Skill UI tool we talked about because it's a skill that allows us to look at other websites that already exist and use them as somewhat of a template for a website we're gonna build.
08:01Now awesome design is heavily influenced by Stitch, and we will talk about Stitch a little bit later. And Stitch has this concept of design.m d, design markdown files, and they're just prompts describing how you should build your website.
08:14The difference is Google did a very good job of creating these prompts like you see here and it gets very, specific about what the overview is, what's the north star, how we're doing colors. It just adds great structure instead of again something like the front end design skill from Cloud Code which is kinda like, uh, let's kinda just do stuff in this this way.
08:32This is much more concrete about what it needs to do. And so it has taken that idea of these very specific design system prompts and essentially created them for a bunch of different websites across a bunch of different domains. So something like Eleven Labs.
08:48I click on that here. I can see essentially in the entire Eleven Labs design idea ripped apart form elements, card examples, buttons, headings, typography, colors, all that.
09:02It's not just that live preview we see, it's the actual prompt that we can then feed to Cloud Code. And, again, they have a ton of websites here including, like, non text stuff, things like Bugatti. Right?
09:12Like, you know, it's essentially, this is giving you the building blocks of some website you like so you can build your own using those same building blocks. So while the skill UI tool we saw earlier kinda just looks at any website you want and then builds it for you, this is just kind of breaking out the component parts, and then it's up to us to build it ourselves.
09:31Now after hyping up awesome design, it's only fair that for tool number five, we talk about the application that actually inspired it, and that is Stitch itself from Google. So Stitch is awesome if you wanna start from a visual approach before you actually go out there and begin building your web page. So what you do is you go into Stitch and you just give it a prompt for what you're trying to build.
09:51This can include screenshots of inspiration. What it's going to do is it's gonna create that same sort of design MD file you saw earlier, but it's natural habitat. So it gives us a breakdown of the colors, the sort of typography, the labels, the buttons, and then we can see over here the entire design system, the same sort of design MD you saw before, but now it's customized for whatever you prompted it.
10:13And once it does that, it then gives you a bunch of variations of the type of website you're gonna create. It's not just the hero section. It does it all.
10:21And once it creates that mock up, I can edit it however I wish. I can click on it. I can go to right click.
10:26I can get specific variants. I can customize the different variants. I can change it from I want three variants, five variants.
10:32I can give it a creative range, instructions, etcetera, etcetera. I basically have a ton of different ways to spin up a bunch of visuals of my potential website.
10:41And this is great because it is tough when you're inside of Cloud Code. And every time you wanna do a visual change, right, it needs to write the code. You need to spin up dev server.
10:49You need to check it on the web page. And oftentimes, when we're doing these things, especially from a front end design, you know, angle, I wanna see the options in front of me.
10:58Right? It's a lot easier for me to see all three of these and say, alright. I hate this.
11:02I hate this. Maybe I like this versus, alright. No.
11:05Claude code. Try again. Nope.
11:07Try again. Nope. Try again.
11:08So this is also free, which is great. And whatever I build here, it's really easy to transfer to Cloud Code because if I just click on the one I like, I go to more, I can view the code, I can then copy the code, and then bring it into Cloud Code.
11:23And you can even do stuff like copy it to Figma. You can bring it into AI Studio as well, but the easiest path to Claude code is just to export and then copy to clipboard. There is an MCP, so you can do all of this through the Claude code terminal.
11:35But to be honest, I don't really understand what it really buys you. I I feel like being hands on in this visual sense is is kinda worth it.
11:43Now I actually have a full deep dive on Stitch and Claude code, and I'll link that above if you wanna see more of this in action. Now I debated putting skill number six in this video because I feel like it's getting so ubiquitous, pretty much everyone knows it exists. But you never know.
11:56It might be someone's first time seeing it, and that is the UI UX Pro Max skill. This is, I think, the spiritual successor or what the anthropic front end design skill should be. So imagine a anthropic front end design skill that is actually trained on different sorts of, you know, conventions for different sorts of websites in different sorts of domains because not every website needs to look like some SaaS, like some b tier SaaS.
12:24And that's what this skill is all about. It's an intelligent design system generator. So it's actually gonna ask you questions.
12:29It's gonna figure out what your website is about, what your service is about, and then design it based on its function. So it has a 161 industry specific reasoning rules.
12:40So they've really built this thing out. You are not gonna get the sort of generic AI slop with no skill, and you're not gonna get what is slowly becoming the Claude code version of AI slot with the front end design skill. It's also built out with a bunch of stack specific guidance so you aren't pushed into just something like React.
12:59And ultimately, it's a great skill if you kinda just have no idea where you wanna go. A lot of the stuff we've talked about already requires you to have some sense of what you want either well, especially if you have an example website.
13:12Right? When we saw Skill UI, if I have an example, I can pretty much copy it.
13:17And same thing with awesome design. Like, I'm choosing from these websites that exist.
13:21If you don't wanna go that route, you still are kind of confused about where you should be, use this skill. Great starting point. Now tool number seven is all about components and really nailing the details of our web page.
13:34And that is where we bring in 20first.dev, which is a website with a million different components for us to choose from and directly integrate into our website. So for example, let's say I was trying to figure out something for our hero page.
13:46Well, I just go to the heroes section on 20first.dev, and I search for one I like. Let's say I like this one, this hero page that uses spline.
13:56So it has this robot that actually follows my mouse. Well, instead of figuring out how to use spline and write up that code, I just go into 20first.dev. I copy the prompt by clicking the copy prompt button up there.
14:09I go to Claude code and I paste it in. Boom. I will have this as my hero section.
14:14Now obviously, hero sections are probably the heaviest thing we could possibly import into our web page because if we have a hero page with a robot looking all over the place, our whole website kinda has to fit that aesthetic. So luckily, I think you get the most value out of something like 20first.dev when it comes to the smaller components and the small little flourishes like buttons.
14:33Right? Just the fact that this button has this little light on it when I move it around versus your standard button is something that will make your website look better or cards that have this, you know, sort of lighting animation that follows my mouse or anything like that. Again, it's these little minor details, these glowing shadows.
14:49These are the sort of thing that elevates your web page, makes it look more premium, and just makes it look like you cared and you actually tried. And if nothing else, what this should do is it should just give you inspiration because there's nothing that says you can't copy a prompt for any of these components, whether it's borders or heroes or whatever, and then tweak it to your heart's desire with Cloud Code.
15:12It's not an all or nothing thing. And I think especially for those of us who don't come from a web design background, I certainly don't. You know, you just don't know what you don't know.
15:21And being exposed to all these different ways that we can create a button kinda gets your mind moving in different directions, and it helps you over time the more you're exposed to it to kinda develop your own taste and figure out what you like. But until you see these things, you just don't even know what you like.
15:36All you've seen is is what Claude code gives you. So highly suggest you check this out. Virtually all of these things are free, and you should be integrating at least some of the smaller things like some of the ways they do with buttons and cards into your next web page.
15:49Now the phrase you keep hearing over and over and over these days is AI has no taste. Well, what if we gave it taste as a skill? Well, that's what we attempt to do with tool number eight, and that is the taste skill repo.
16:01And this is a collection of skills that tries or attempts to give Cloud Code some measure of taste, aka moving away from the AI soft stuff, which is the theme you see over and over and over again. Now this taste skill includes a number of different subskills like you see here, and it has different settings so you can kind of adjust how, you know, abstract it gets versus a normal AI generation.
16:24And what you see here is an example of some of the websites that have been created using this skill. And right away, you notice it's a little bit different.
16:34Right? I mean, it's not mind blowing, but right away, different. And different is good.
16:38The the less it looks like every single SaaS template, the better. And a lot of these include things like scroll animations and, you know, we're not seeing bento boxes over and over. So this is a cool sort of skill, like, on the margins that you might wanna at least try out and see how it does in comparison to your normal Cloud Code generations.
16:57Now tool number nine will seem very simple to a lot of you, but you would be blown away by the amount of people who do not know that Google Fonts exists. Google Fonts is a giant free repository of a trillion different fonts that you can use in literally all of your coding projects.
17:14You do not need to be a slave to enter or whatever five fonts that Cloud Code uses for everything. You can just go on Google Fonts, and it is broken down by appearance, by feeling, you know, by family and tell Cloud Code use this, use that.
17:29Cloud Code has access to all these as well because typography is a huge, huge part of how your design looks and feels. Furthermore, you can use Claude Code to help you search through Google Fonts.
17:42So simply tell Claude Code the type of website you're building, the type of feeling you're going for, it should give you an example or five sort of fonts to look at. You can actually see it in real time here. Again, you don't wanna just leave everything up to chance and just depends on how Cloud Code feels that day as to what font it's gonna give you because it's gonna feel like inter.
18:02It's always inter. Always. And last but not least, tool number 10, Playwright CLI.
18:06Now Playwright CLI is not a design tool per se, although it's something we've already talked about in the past with Skill UI and its ability to go out there and take screenshots of web pages. So you can use it as sort of a research ideation tool. What I really wanna focus on though is the idea of form and function and that when we build things on the front end, think of something as simple as a form submission page, we are going to have to test it.
18:29We're gonna have to make sure these things actually work. And the easiest way to do that at scale is Playwright CLI, not Playwright MCP. CLI is way more effective.
18:38And the way we do that is once you create your front end design stuff, all you have to do once you install the CLI tool is tell Cloud Code, I want you to test every single interaction on this web page using Playwright CLI. It will create a bunch of different Chrome instances.
18:52You can have it beheaded if you actually wanna see them or headless so it's invisible, and it will test it all on its own. So this makes the whole front end design process go way quicker because I think we've all been there where we added something and then we wanted to see it and then we wanna test it. And it just takes forever, especially things like form submissions where there's tons of edge cases with how some weirdo users is is gonna go in there and actually put in their information.
19:15So those are my 10 favorite Claude Co design related skills, plugins, and CLIs. I hope at least a few of those were new to you.
19:24I mean, Skill UI better be, like, three people know about this thing. So, uh, but, yeah, the the front end design space, just find super interesting with ClaudeCode because it's so bad at it from, a taste point of view.
19:37Although I hate saying even the word taste these days because it's all anyone talks about. But because ClaudeCode is bad at that, that should be kind of a good thing for you, the individual. Right?
19:46Because that is a space now where you can differentiate yourself from the pack. And anytime you can differentiate yourself from everybody else who's hopping on to Cloud Code these days, that's a good thing, and these skills and tools can help you do that.
19:59So as always, let me know what you thought. Make sure to check out Chase AI plus if you wanna get your hands on the master class, and I'll see you around.
The Hook
The bait, then the rug-pull.
There is a monster inside Claude Code, and its name is AI Slop — purple gradients, Inter font for everything, and the same card layout on every single website. This video is a toolkit for slaying it.
Named ideas worth stealing.
01:40concept
Anti-pattern teaching (Impeccable model)
Instead of telling an LLM what good design looks like, enumerate exactly what bad design looks like by name. The LLM then has concrete rejection criteria rather than vague aesthetic aspirations.
Steal forAny skill file where you want Claude to avoid a specific aesthetic or behavior
08:10model
DESIGN.md format (Google Stitch)
- North star
- Color palette
- Typography rules
- Component patterns
- Spacing system
A plain-text design system document structured for LLM consumption. More concrete than a vague style prompt; more portable than a Figma file.
Steal forStarting any new project where you want visual consistency across Claude Code sessions
How they asked for the click.
VERBAL ASK
19:55product
“Make sure to check out Chase AI Plus if you wanna get your hands on the masterclass.”
Low-pressure single mention at end; earlier mid-roll at 02:50 had urgency framing (price increasing in a few days).
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
