The argument in one line.
The generic AI aesthetic is a missing-decision problem: without a committed design direction before the first line of code, every model defaults to the statistical average of the web.
Read if. Skip if.
READ IF YOU ARE…
- You use Claude Code, Cursor, or Windsurf to build websites and keep getting the same bland AI aesthetic.
- You want to understand why marketing UI and functional UI need completely separate skill stacks.
- You are building dashboards and want a skill that reasons through information arrangement before touching components.
- You want scroll-driven animations that are GPU-efficient.
- You are building for mobile and tired of AI generating a shrunken website.
SKIP IF…
- You already run a mature design system with opinionated component libraries and do not use AI coding agents.
- You want a deep tutorial on any single skill - this is a curated survey.
The full version, fast.
Models default to the statistical average of the web when left undirected. The fix is layering skills that force a committed direction before code is written. Nine skills covered: Anthropic frontend-design, ShadCN skill plus MCP, dashboard arrangement skill, UI UX Pro Max, GSAP, four taste presets, Higgsfield MCP, and three mobile-platform skills.
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:48
01 · The Sameness Problem
Thesis: models improve but designs converge; skills force a committed direction.
00:48 – 02:20
02 · Anthropic frontend-design skill
Forces design direction commit before code; bans AI slop defaults; best for landing pages.
02:20 – 02:45
03 · AI Labs modified version
Updated for Opus 4.8 and Fable 5 prompting patterns; lives in marketing-ui SKILL.md as Break the Default.
02:46 – 03:04
04 · Why frontend-design fails for functional UI
Art-direction skill conflicts with component-consistency requirements in real products.
03:05 – 04:18
05 · ShadCN skill plus MCP
Skill is the project-aware rulebook; MCP is the live registry. Together they produce correct output first time.
04:18 – 05:33
06 · Dashboard skill
Information arrangement skill - how to group data and manage screen density before touching components.
05:33 – 07:12
07 · UI UX Pro Max
5 parallel searches across 161 industry categories; returns tailored palette, font, layout before any code.
07:12 – 07:51
08 · Sponsor SciSpace
SciSpace MCP for ChatGPT: real citations from 280M papers.
07:52 – 09:31
09 · GSAP skill
Official GreenSock AI skill; steers from reflow-heavy animation to GPU-composited transform and opacity.
09:31 – 10:36
10 · Taste presets four skills
minimalist-ui, industrial-brutalist-ui, frontend-ui-ux, premium-frontend-ui - pick one, do not stack.
10:36 – 11:17
11 · Higgsfield MCP
Inline image and video generation inside the agent; Seedance recommended for video.
11:17 – 12:11
12 · Mobile App UI Design skill
Principles: thumb zone, F-pattern reading, limited font sizes - same rules behind Airbnb, Duolingo, Spotify.
12:11 – 12:58
13 · Material Design 3 skill
Google's full design system; one seed color generates complete theme; includes MD3 compliance audit.
12:58 – 14:12
14 · SwiftUI skill and Expo
SwiftUI sources from Xcode docs. Expo covers Android and iOS from one React Native codebase.
14:12 – 14:14
15 · CTA AI Labs Pro
All skills and workflows available in the AI Labs Pro community.
Lines worth screenshotting.
- AI design is the statistical average of the web - models reach for the most common choice when making design calls.
- Anthropic's own frontend-design skill explicitly bans Inter, Poppins, and purple gradients on white backgrounds.
- Forcing a design direction commit before any code is written eliminates most generic AI aesthetics.
- Marketing UI and functional UI are fundamentally different problems and actively conflict when given the same skill.
- The ShadCN skill gives the model judgment; the ShadCN MCP gives it components - you need both.
- The hard problem in dashboard design is information arrangement, not component consistency.
- UI UX Pro Max runs five parallel searches across 161 industry categories and returns a complete design system before any code.
- A skill loads only on the turn it is needed; an MCP is always in context - context overhead vs access latency.
- Scroll-reveal is the only animation move a model knows without guidance; GSAP skill teaches GPU-composited alternatives.
- Animating width and height forces a full page reflow every frame; transform and opacity are GPU-composited.
- Taste presets are mutually exclusive - pick one, do not stack them.
- Mobile is not a smaller web: thumb zones, F-pattern reading order, and platform design languages require explicit rules.
- The Material 3 skill accepts one seed color and generates a full matching theme across every component.
- SwiftUI skill sources from Apple's actual Xcode documentation, not training-data approximations.
Nine skills that end the AI-design sameness loop.
WHAT TO LEARN
The generic AI aesthetic is not a model problem - it is a missing-decision problem, and the right skills inject those decisions before the first line of code.
- Models default to the statistical average of the web when left undirected, producing the same Inter-font purple-gradient result every time - this is a direction gap, not a capability gap.
- Marketing UI and functional UI need completely separate skills: an art-direction skill actively conflicts with component-correctness requirements the moment you build a real product.
- The ShadCN skill gives the model judgment to use components correctly in your project context; the MCP gives it live access to fetch those components - you need both.
- Dashboard design is primarily an information-arrangement problem: how data is grouped and how much lives on one screen matters more than component aesthetics.
- UI UX Pro Max runs a five-search reasoning engine that matches your product to an industry category and returns a tailored color palette, font pairing, and layout.
- Animating width and height forces full browser reflow every frame; GSAP skill steers the model toward transform and opacity, which the GPU composites without rebuilding the page.
- Taste presets are mutually exclusive: pick one aesthetic direction and let it own the design rather than layering them.
- Mobile UI requires explicit skill-level rules because models default to treating phones as small websites; thumb zone placement, F-pattern reading order, and platform design languages need direct instruction.
- Platform-specific skills (Material 3, SwiftUI, Expo) source from official documentation rather than training-data approximations, producing apps that feel genuinely native.
Terms worth knowing.
- AI slop
- The generic AI design aesthetic: overused fonts like Inter and Poppins, purple gradients on white backgrounds, and predictable layouts lacking context-specific character.
- Design direction commit
- A required first step in Anthropic's frontend-design skill where the model locks in a specific aesthetic before writing any code.
- ShadCN registry
- A curated library of pre-built React UI components; the ShadCN MCP gives an AI agent live access to pull these into a project.
- Skill (Claude Code)
- A SKILL.md file an AI coding agent reads on the turn it is needed, loaded on demand rather than persisted in context like an MCP.
- MCP (Model Context Protocol)
- A persistent server connection in the model's context window every turn, giving live access to tools at the cost of ongoing context usage.
- GSAP
- GreenSock Animation Platform - a professional JavaScript animation library; its AI skill teaches correct timelines, ScrollTrigger, and GPU-safe patterns.
- Thumb zone
- The region of a phone screen reachable by the user's thumb without repositioning; mobile skills place primary actions here.
- Material Design 3
- Google's current design system for Android; generates a full color theme from one seed color with bold shapes and expressive motion.
- Expo
- A React Native framework that compiles one codebase to both Android and iOS.
Things they pointed at.
Lines you could clip.
01:20
“Instead of defaulting to the safe common look, it has to pick a direction and stay consistent with it.”
04:31
“The skill only loads when it's actually needed instead of being in the context window all the time like MCP does.”
05:33
“Most skills hand the model some design principles and trust it to apply them, but this one runs an actual engine first.”
08:50
“A big reason AI animations feel janky is that the model moves things by changing their size or position, and those changes force the browser to rebuild the whole page on every single frame.”
11:17
“Models tend to treat a phone like a small website, taking the same web habits and shrinking them down. But mobile isn't a smaller web.”
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:00Here's something that people get wrong. Models have gotten way better at design, and we've seen them keep improving every day. But at some point, all those great designs start to look the same.
00:09So the real question is, what makes your design actually stand out? A lot of that comes down to the right prompts and instructions, and this is where skills come in because now the ones that actually work can be packaged into a reusable workflow you can share with anyone. So a lot of people have been building skills for design, and some of the best ones come straight from the teams behind the tools.
00:27But not every skill out there is worth using, and a lot of them don't really help with your design. Now for some context, we're a software company, and this is our channel AI Labs. And on this channel, we show you how to optimize processes with AI just like how we've optimized our own.
00:42Before we dive into some of the more creative skills, let's start with one that forms the basis of many other design skills. Anthropic's front end design skill is the one that shapes the design direction of your site, and we've used it in our previous video too. After you've generated enough landing pages with AI, you start noticing a pattern where the sites are all different but somehow feel the same.
01:03That's because the model learned from a huge amount of data full of the same patterns. So whenever it has to make a design call, it reaches for the most common one. So the design keeps no matter what the project actually is, and that's the exact problem this skill solves.
01:19It escapes those safe choices by forcing the model to commit to a real design direction direction before it writes anything. Instead of defaulting to the safe common look, it has to pick a direction and stay consistent with it. It even calls out the usual AI slop directly in its skill dot m d file, which is basically the skills instruction sheet so the model stops reaching for the same overused fonts and the purple gradients on white backgrounds.
01:43And that matters more than it sounds because when most models build a landing page, they're optimizing to be correct. But this skill pushes them to commit to a design direction instead. So we mainly reach for it on landing pages or portfolios where the design itself is part of the product since it gives the model a stronger point of view before it starts.
02:00To test it, we had it build a landing page and gave it our requirements, and it generated a site with none of the usual AI slop because it stuck to the design direction it committed to instead of drifting into the usual defaults. In AI lab's design system, we've got two skills each made for a separate job. There's the functional skill which builds the UI people actually have to use like dashboards, and then there's one for marketing UI.
02:22Inside the marketing one, the skill dot m d uses a prompt called break the default, and that's basically Anthropic's front end design skill, just modified a bit. We modified it because the originals gotten a little outdated for the newer models. Opus 4.8 and Fable five both shipped with prompting guides that show how Claude's changed and how the instructions you give it need to change too.
02:42So we folded a version of that into our own design system. As we've already stated, the Anthropic design skill does not work well with functional UI. Once you're building actual products, the problem changes completely.
02:53You're not just trying to make something look good anymore. You're trying to build something that works as a product with a lot of components that all have to behave properly. This is where things shift from landing pages into real applications.
03:05For example, in AI labs pro, you can see that the landing page has a much more artistic design language as opposed to the actual functional layer of the community, which looks really boring and plain just like any other web interface you have ever interacted with, and that's where Shad CN comes in. Now models can absolutely build dashboards on their own, but every one of the components commonly used in dashboards already exists built to a professional standard by actual people.
03:30So the model doesn't have to generate components from scratch and configure animations on its own. It can just pull the component that's already prebuilt in the registry, which is basically a big library of ready made components. That's the whole point of shad c n.
03:44Instead of the model hand building each component, it just pulls from that library of parts that are already professional grade and uses them in your app. And that's why the result feels like a real product because you're not starting from a rough first draft and slowly fixing it up. You're .
04:00The Shadcyan setup has two parts that work together. The first one is the skill. Think of it as a rule book.
04:05Shadcyan has a specific correct way of building things, and the skill holds all of those rules. On top of that, it looks at how your own project is set up. So when you ask the model to build something, the skill makes sure the result follows Shadcyan's rules and fits the way your project already works.
04:20The benefit is simple. You get clean output the first time instead of having to go back and fix the same mistakes over and over. The second is the ShadCN MCP.
04:29It's basically a live connection to ShadCN's registry that lets the model browse and pull real components straight into your project. Now you might think, why use the skill if the MCP already exists and gives you the components you need?
04:41The answer is that the skill only loads when it's actually needed instead of being in the context window all the time like MCP does. The SCADCN skill gives the coding agent the rules, patterns, and the context about your project. Together, those give it the judgment to use components correctly.
04:56With a normal app, you build it up one component at a time, and that approach works well. So you might expect it to carry straight over to dashboard. And it partly does, but dashboards have a different core problem than normal apps.
05:07It's less about keeping components consistent and more about how all the information is arranged on the screen. That means working out how to group the data and how much can live on one screen before it gets too cluttered. So there's a separate skill named dashboard made just for that.
05:21Not by Shad CN, but by another developer, and it focuses the model on exactly that arrangement. And because it reasons through that arrangement first, the result actually feels like a real analytic tool instead of being cluttered. UI UX Pro Max works differently from everything so far.
05:37Most skills hand the model some design principles and trust it to apply them, but this one runs an actual engine first. The problem it's built around is that even with good direction and a solid set of components, the model still has to decide what kind of design choices fit your product. Most skills treat design as one general idea of good, so everything drifts toward the same look no matter what you're building, and that's the gap this skill closes.
06:00When you ask it to build something, it doesn't jump straight to code. It runs an engine first. Behind the scenes, this engine fires off five searches at once across its own open source database on GitHub.
06:11It pulls the styles that fit your product from a 161 industry categories. And out of those choices, it picks a color palette, a font pairing, and a page layout that actually suits the industry you're building for.
06:22Then it filters out anything that would look wrong for that kind of product and hands the model a tailored design which is basically the complete rule book the model follows to build the website. So you get a genuinely strong website where it matches every design attribute to your website idea. Instead of the model inventing a design and hoping it works, it's building from one that was actually reasoned out for your exact use case.
06:44This skill is really different from the others. The others give the model better taste, while this one gives it a decision before it starts tuned to the kind of product you're actually making. But before we move forward, let's have a word by our sponsor, SciSpace.
06:56If you do any kind of research, you've probably used ChatGPT for it. The problem is it confidently makes up citations and papers that don't even exist, and you usually don't catch it until that fake citation is already sitting in your paper. SciSpace fixes that, and now it lives right inside ChatGPT.
07:12To test it, I opened SciSpace, navigated to my profile, and selected ChatGPT app from there to connect SciSpace. I asked for a literature review, and ChatGPT pulled relevant studies studies from SciSpace's library of over 280,000,000 real papers.
07:26It also summarized them and gave me real clickable citations instead of hallucinating. And every citation links straight back to the source. So you can open the paper and check the exact line yourself in one click.
07:37In head to head tests, it even surfaced more relevant papers than tools like elicit and consensus. So if you're a student or researcher, connect the SciSpace app inside ChatGPT using the first link in the description and start getting research you can finally trust. So far, everything we've added makes the site look right while it's sitting still, but a static page only gets you so far.
07:59Animations are actually important because they improve the user experience and they bump up how long people stay on the website. But the problem is animation is where AI generated code falls apart. The actual problem is that when you ask a model to add animation, it almost always does the exact same thing where things slide into view as you scroll down the page.
08:18That one scroll reveal is basically the only move it knows, but it's also the same animation on half the AI built sites out there, and it's nowhere near what real motion can do. This is where the GSAP skill comes in. GSAP is the animation library a lot of professional sites already run on, and this skill comes straight from the team that builds it.
08:37So instead of the model guessing how it works, it works from the correct patterns, and it covers everything from basic movement to the bigger animations that play as you scroll down a page. It also handles the performance side, which is the part most people underestimate. A big reason AI animations feel janky is that the model moves things by changing their size or position, and those changes force the browser to rebuild the whole page on every single frame.
09:00So the skill steers the model toward the kind of movement the browser can handle easily, and that one habit alone is what keeps the animation smooth. GSAP is at its best on landing pages and scroll driven storytelling where everything gets revealed like a story. So the important details land with the viewer and that's what takes your website from a static page to a dynamic one.
09:19This is why in the AI labs design system, we have explicitly mentioned in the marketing UI skill that whenever animations are required, it should use the GSAP skill to implement those animations on the landing pages. This next group of skills isn't for full systems. Their taste presets you drop in to push the model toward one specific look of your choice.
09:39First, there's the minimalist UI one. It's the type of design where instead of cramming too much onto the page, you keep things simple and open. It's the one you reach for on newspapers or blog sites where you want the content to breathe instead of everything fighting for attention.
09:53On the complete opposite side, there's the industrial brutalist UI skill, which goes raw and heavy with that anti corporate style. Then there's front end UI UX, a general all rounder for solid defaults when you don't want anything extreme. It's the safe pick for a product or a business landing page that just needs to look clean and professional.
10:10And then there's the premium front end UI skill, which makes sites look like those luxury fashion brand landing pages. So you don't stack all of these at once. Instead, you pick the one that matches the vibe you're after and let it steer the design.
10:22So if you've already got a direction in your head, these are the fastest way to hand it straight to the model. By this point, you can build a site that's structured well, moves nicely, and has a real style. But professional grade websites need more than just animations.
10:36For professional apps, you need real image and video visuals. Models on their own mostly just grab stock images off the Internet, and most of the time, they don't actually match what you need. Higgs field is what we use to skip that.
10:48It plugs image and video generation straight into your agent so you can ask for a hero image or a background clip right where you're working without ever leaving the terminal. And Higgs Field isn't tied to one model. It's got most of the good image and video models, so you're not stuck with the strengths of just one, and you can use whichever one suits you.
11:05If you're doing video, Cdance is the one worth using since it's one of the best video generation models right now. So you get real visuals instead of static text or gray placeholder boxes on your website. The previous skills were all for web.
11:19Now we're gonna cover mobile skills where a lot of AI generated UI quietly falls apart for a simple reason. Models tend to treat a phone like a small website, taking the same web habits and shrinking them down. But mobile isn't a smaller web.
11:32It's its own thing with its own rules. The way people hold a phone where their thumb can actually reach, how navigation should work, it's all different. And every platform has its its own design language that the model usually doesn't follow properly.
11:45There are multiple skills to optimize mobile development too. The first is mobile app UI design, the principles layer. On its own, the model treats the rules of good mobile design pretty loosely, but this skill bakes them indirectly.
11:57That covers things like the thumb zone, which keeps the main buttons where your thumb can actually reach along with consistent spacing and a clean limited set of font sizes instead of 10 different ones. And these are basically the same rules behind popular apps like Airbnb, Duolingo, and Spotify.
12:12So the model ends up designing with that sense instead of guessing at it. The second is material three, which is basically the mobile version of what Shad CN did for the web. It gives the model Google's actual design system, the one behind most Android and Pixel apps.
12:25Google's design language has a real personality. It's bold and colorful with big rounded shapes and springy motion that sit at the more expressive end of mobile design. The skill brings the whole system of components and colors, so you hand it one color and it builds a full matching theme.
12:41It even checks how closely your app follows Google's guidelines. So the app you're building matches the design system exactly. But if you're building fully native on the iPhone, you can use the Swift UI skills.
12:51Apple's design sits at the opposite end from Google. Where material is bold and colorful, Apple is more restrained and it leans on that translucent glassy look it now calls liquid glass.
13:01The skill pulls Apple's own documentation straight out of x code on your Mac and hands it to the model as the rules. So the model isn't guessing at what an Apple app should feel like. It's working from Apple's actual guidance.
13:12And instead of something that only looks roughly like an iPhone app, you actually get one that feels native. And if you're building for iPhone and Android at the same time, there's the official expo skill. Expo is a framework for making one app that runs on both Android and iOS, so you're not building the same app twice.
13:28It covers everything you need for a real app that runs on both, from the navigation and styling to the platform features all in one place. So whether you're building for one platform or both at once, there's a a skill that actually knows the territory. Now all the skills and workflows and everything else we build and show you in these videos can be found in AI Labs Pro, which is our community.
13:47That's where you'll get the resources, the starter packs, and more along with a place to interact with a bunch of like minded nerds, including our team. So if you found value in what we do and want to support the channel, this is the best way to do it. The link's in the description.
14:01That brings us to the end of this video. If you'd like to support the channel and help us keep making videos like this, you can do so by using the super thanks button below. As always, thank you for and I'll see you in the next one.
The Hook
The bait, then the rug-pull.
Every AI coding agent ships with the same design playbook: Inter or Poppins, a purple gradient, and elements that slide in on scroll. The AI LABS team traced the problem to a structural gap - models optimize for statistically correct output, so every design call defaults to the most common choice. This video is their answer: nine skills that inject a committed decision at each layer of the stack.
Named ideas worth stealing.
02:20model
Two-Skill Design System
- marketing-ui: art-direction plus break-the-default
- functional-ui: component-correctness plus ShadCN rules
Separate design direction from component correctness; mixing produces conflicts.
Steal forAny team building both a landing page and an app in the same Claude Code project
04:31concept
Skill vs MCP Context Window Tradeoff
MCP is always in context; skill loads only when needed. Use skill when MCP context overhead is wasteful.
Steal forDeciding whether to wrap a tool as a skill or an MCP
05:33model
UI UX Pro Max Five-Search Engine
- Product type matching 161 categories
- Style recommendations 67 styles
- Color palette selection 161 palettes
- Landing page patterns 24 patterns
- Typography pairing 57 font combinations
5 parallel searches with BM25 ranking outputs a complete tailored design system.
Steal forBuilding industry-aware design-direction tooling
08:50concept
GPU-Safe Animation Rule
Animate transform and opacity not width or height; the latter forces full page reflow every frame.
Steal forAny prompt or skill instruction that includes animation requirements
How they asked for the click.
VERBAL ASK
14:12product
“All the skills and workflows and everything else we build and show you in these videos can be found in AI Labs Pro, which is our community.”
Soft sell placed after all value delivered. Shows product landing page briefly.
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.
