Insane Claude Design Skills You Need To Build Beautiful Websites
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Here's something that people get wrong.
00:00:01Models have gotten way better at design and we've seen them keep improving every day.
00:00:05But at some point, all those great designs start to look the same.
00:00:08So the real question is, what makes your design actually stand out?
00:00:12A lot of that comes down to the right prompts and instructions.
00:00:15And this is where skills come in because now the ones that actually work can be packaged
00:00:19into a reusable workflow you can share with anyone.
00:00:21So a lot of people have been building skills for design and some of the best ones come
00:00:25straight from the teams behind the tools.
00:00:27But not every skill out there is worth using and a lot of them don't really help with
00:00:31your design.
00:00:32Now for some context, we're a software company and this is our channel AI Labs and on this
00:00:37channel we show you how to optimize processes with AI just like how we've optimized our own.
00:00:41Before we dive into some of the more creative skills, let's start with one that forms the
00:00:46basis of many other design skills.
00:00:48Anthropik's front-end design skill is the one that shapes the design direction of your site
00:00:53and we've used it in our previous video too.
00:00:55After you've generated enough landing pages with AI, you start noticing a pattern where
00:01:00the sites are all different but somehow feel the same.
00:01:03That's because the model learned from a huge amount of data full of the same patterns.
00:01:07So whenever it has to make a design call, it reaches for the most common one.
00:01:11So the design keeps drifting toward the same safe generic choices no matter what the project
00:01:16actually is.
00:01:17And that's the exact problem this skill solves.
00:01:19It escapes those safe choices by forcing the model to commit to a real design direction before
00:01:24it writes anything.
00:01:25Instead of defaulting to the safe common look, it has to pick a direction and stay consistent
00:01:30with it.
00:01:30It even calls out the usual AI slop directly in its skill.md file which is basically the
00:01:36skill's instruction sheet so the model stops reaching for the same overused fonts and the
00:01:41purple gradients on white backgrounds.
00:01:42And that matters more than it sounds.
00:01:44Because when most models build a landing page, they're optimizing to be correct.
00:01:48But this skill pushes them to commit to a design direction instead.
00:01:52So we mainly reach for it on landing pages or portfolios where the design itself is part
00:01:56of the product since it gives the model a stronger point of view before it starts.
00:02:00To test it, we had it build a landing page and gave it our requirements.
00:02:03And it generated a site with none of the usual AI slop because it stuck to the design direction
00:02:08it committed to instead of drifting into the usual defaults.
00:02:11In AI lab's design system, we've got two skills, each made for a separate job.
00:02:15There's the functional skill which builds the UI people actually have to use, like dashboards.
00:02:20And then there's one for marketing UI.
00:02:22Inside the marketing one, the skill.md uses a prompt called "break the default".
00:02:27And that's basically Anthropic's front-end design skill.
00:02:29Just modified a bit.
00:02:31We modified it because the original's gotten a little outdated for the newer models.
00:02:35Opus 4.8 and Fable 5 both shipped with prompting guides that show how clods changed
00:02:40and how the instructions you give it need to change too.
00:02:42So we folded a version of that into our own design system.
00:02:45As we've already stated, the Anthropic design skill does not work well with functional UI.
00:02:50Once you're building actual products, the problem changes completely.
00:02:53You're not just trying to make something look good anymore.
00:02:55You're trying to build something that works as a product
00:02:58with a lot of components that all have to behave properly.
00:03:01This is where things shift from landing pages into real applications.
00:03:04For example, in AI Labs Pro, you can see that the landing page has a much more artistic design
00:03:09language as opposed to the actual functional layer of the community which looks really boring
00:03:14and plain just like any other web interface you have ever interacted with.
00:03:18And that's where ShadCN comes in.
00:03:20Now models can absolutely build dashboards on their own.
00:03:23But every one of the components commonly used in dashboards already exists,
00:03:27built to a professional standard by actual people.
00:03:29So the model doesn't have to generate components from scratch and configure animations on its own.
00:03:34It can just pull the component that's already pre-built in the registry,
00:03:38which is basically a big library of ready-made components.
00:03:41That's the whole point of ShadCN.
00:03:43Instead of the model hand-building each component,
00:03:46it just pulls from that library of parts that are already professional-grade and uses them in your app.
00:03:51And that's why the result feels like a real product.
00:03:53Because you're not starting from a rough first draft and slowly fixing it up.
00:03:57You're starting from parts that were already built to ship.
00:03:59The ShadCN setup has two parts that work together.
00:04:02The first one is the skill.
00:04:03Think of it as a rulebook.
00:04:05ShadCN has a specific, correct way of building things and the skill holds all of those rules.
00:04:10On top of that, it looks at how your own project is set up.
00:04:12So when you ask the model to build something,
00:04:15the skill makes sure the result follows ShadCN's rules and fits the way your project already works.
00:04:20The benefit is simple.
00:04:21You get clean output the first time instead of having to go back and fix the same mistakes over and over.
00:04:26The second is the ShadCN MCP.
00:04:29It's basically a live connection to ShadCN's registry
00:04:32that lets the model browse and pull real components straight into your project.
00:04:36Now you might think,
00:04:37why use the skill if the MCP already exists and gives you the components you need?
00:04:41The answer is that the skill only loads when it's actually needed,
00:04:44instead of being in the context window all the time like MCP does.
00:04:48The ShadCN skill gives the coding agent the rules,
00:04:50patterns and the context about your project.
00:04:53Together, those give it the judgement to use components correctly.
00:04:56With a normal app, you build it up one component at a time and that approach works well.
00:05:00So you might expect it to carry straight over to a dashboard.
00:05:03And it partly does.
00:05:04But dashboards have a different core problem than normal apps.
00:05:07It's less about keeping components consistent and more about how all the information is arranged
00:05:12on the screen.
00:05:12That means working out how to group the data and how much can live on one screen before it gets too cluttered.
00:05:17So there's a separate skill named dashboard made just for that.
00:05:21Not by ShadCN, but by another developer.
00:05:23And it focuses the model on exactly that arrangement.
00:05:26And because it reasons through that arrangement first, the result actually feels like a real
00:05:30analytics tool instead of being cluttered.
00:05:33UIUX Pro Max works differently from everything so far.
00:05:36Most skills hand the model some design principles and trust it to apply them.
00:05:40But this one runs an actual engine first.
00:05:43The problem it's built around is that even with good direction and a solid set of components,
00:05:47the model still has to decide what kind of design choices fit your product.
00:05:51Most skills treat design as one general idea of good.
00:05:54So everything drifts toward the same look no matter what you're building.
00:05:58And that's the gap this skill closes.
00:06:00When you ask it to build something, it doesn't jump straight to code.
00:06:03It runs an engine first.
00:06:04Behind the scenes, this engine fires off five searches at once across its own open source
00:06:09database on GitHub.
00:06:11It pulls the styles that fit your product from 161 industry categories.
00:06:15And out of those choices, it picks a color palette, a font pairing, and a page layout that actually
00:06:20suits the industry you're building for.
00:06:22Then it filters out anything that would look wrong for that kind of product and hands the
00:06:26model a tailored design system, which is basically the complete rule book the model follows to
00:06:31build the website.
00:06:32So you get a genuinely strong website where it matches every design attribute to your website idea.
00:06:37Instead of the model inventing a design and hoping it works, it's building from
00:06:41one that was actually reasoned out for your exact use case.
00:06:44This skill is really different from the others.
00:06:46The others give the model better taste, while this one gives it a decision before it starts,
00:06:50tuned to the kind of product you're actually making.
00:06:53But before we move forward, let's have a word by our sponsor, SciSpace.
00:06:56If you do any kind of research, you've probably used ChatGPT for it.
00:07:00The problem is, it confidently makes up citations and papers that don't even exist,
00:07:04and you usually don't catch it until that fake citation is already sitting in your paper.
00:07:08SciSpace fixes that, and now it lives right inside ChatGPT.
00:07:12To test it, I opened SciSpace, navigated to my profile, and selected ChatGPT app from there to
00:07:17connect SciSpace.
00:07:18I asked for a literature review, and ChatGPT pulled relevant studies from SciSpace's library of over 280
00:07:24million real papers.
00:07:25It also summarized them and gave me real clickable citations instead of hallucinating.
00:07:30And every citation links straight back to the source.
00:07:33So you can open the paper and check the exact line yourself in one click.
00:07:37In head-to-head tests, it even surfaced more relevant papers than tools like Elicit and ConsenSys.
00:07:42So if you're a student or researcher, connect the SciSpace app inside ChatGPT using the first link
00:07:48in the description and start getting research you can finally trust.
00:07:52So far, everything we've added makes the site look right while it's sitting still.
00:07:56But a static page only gets you so far.
00:07:58Animations are actually important because they improve the user experience and they bump up how long
00:08:04people stay on the website. But the problem is, animation is where AI-generated code falls apart.
00:08:09The actual problem is that when you ask a model to add animation, it almost always does the exact
00:08:15same thing where things slide into view as you scroll down the page. That one scroll reveal is basically
00:08:20the only move it knows. But it's also the same animation on half the AI-built sites out there,
00:08:25and it's nowhere near what real motion can do.
00:08:27This is where the GSAP skill comes in. GSAP is the animation library a lot of professional
00:08:32sites already run on, and this skill comes straight from the team that builds it. So instead of the
00:08:37model guessing how it works, it works from the correct patterns, and it covers everything from
00:08:42basic movement to the bigger animations that play as you scroll down a page. It also handles the
00:08:47performance side, which is the part most people underestimate. A big reason AI animations feel
00:08:52janky is that the model moves things by changing their size or position, and those changes force the
00:08:57browser to rebuild the whole page on every single frame. So the skill steers the model toward the
00:09:02kind of movement the browser can handle easily, and that one habit alone is what keeps the animation
00:09:07smooth. GSAP is at its best on landing pages and scroll-driven storytelling, where everything gets
00:09:12revealed like a story, so the important details land with the viewer, and that's what takes your
00:09:16website from a static page to a dynamic one. This is why in the AI Labs design system, we have explicitly
00:09:22mentioned in the marketing UI skill that whenever animations are required, it should use the GSAP
00:09:27skill to implement those animations on the landing pages. This next group of skills isn't for full
00:09:33systems. They're taste presets you drop in to push the model toward one specific look of your choice.
00:09:38First there's the minimalist UI one. It's the type of design where instead of cramming too much onto the
00:09:43page, you keep things simple and open. It's the one you reach for on newspapers or blog sites where you want the
00:09:49content to breathe instead of everything fighting for attention. On the complete opposite side there's
00:09:54the industrial brutalist UI skill which goes raw and heavy with that anti-corporate style. Then there's
00:09:59front-end UI UX, a general all-rounder for solid defaults when you don't want anything extreme. It's the
00:10:05safe pick for a product or a business landing page that just needs to look clean and professional. And then
00:10:10there's the premium front-end UI skill which makes sites look like those luxury fashion brand landing pages.
00:10:16So you don't stack all of these at once. Instead you pick the one that matches the vibe you're after
00:10:21and let it steer the design. So if you've already got a direction in your head, these are the fastest
00:10:25way to hand it straight to the model. By this point you can build a site that's structured well,
00:10:30moves nicely and has a real style. But professional-grade websites need more than just animations. For
00:10:36professional apps you need real image and video visuals. Models on their own mostly just grab stock
00:10:41images off the internet and most of the time they don't actually match what you need. Higgs field is
00:10:46what we use to skip that. It plugs image and video generation straight into your agent so you can ask
00:10:51for a hero image or a background clip right where you're working without ever leaving the terminal.
00:10:56And Higgs field isn't tied to one model. It's got most of the good image and video models so you're not
00:11:01stuck with the strengths of just one and you can use whichever one suits you. If you're doing video,
00:11:06Cdance is the one worth using since it's one of the best video generation models right now so you get
00:11:12real visuals instead of static text or grey placeholder boxes on your website. The previous
00:11:17skills were all for web. Now we're going to cover mobile skills where a lot of AI generated UI quietly
00:11:23falls apart for a simple reason. Models tend to treat a phone like a small website, taking the same web
00:11:29habits and shrinking them down. But mobile isn't a smaller web. It's its own thing with its own rules. The way
00:11:35people hold a phone where their thumb can actually reach, how navigation should work, it's all different
00:11:40and every platform has its own design language that the model usually doesn't follow properly. There
00:11:45are multiple skills to optimize mobile development too. The first is mobile app UI design, the principles
00:11:51layer. On its own, the model treats the rules of good mobile design pretty loosely but this skill
00:11:56bakes them in directly. That covers things like the thumb zone which keeps the main buttons where your
00:12:01thumb can actually reach along with consistent spacing and a clean limited set of font sizes instead of 10
00:12:06different ones. And these are basically the same rules behind popular apps like Airbnb, Duolingo,
00:12:11and Spotify. So the model ends up designing with that sense instead of guessing at it. The second is
00:12:16Material 3 which is basically the mobile version of what Shad CN did for the web. It gives the model
00:12:21Google's actual design system, the one behind most Android and Pixel apps. Google's design language has a real
00:12:27personality. It's bold and colorful with big rounded shapes and springy motion that sit at the more
00:12:33expressive end of mobile design. The skill brings the whole system of components and colors so you hand
00:12:38it one color and it builds a full matching theme. It even checks how closely your app follows Google's
00:12:43guidelines so the app you're building matches the design system exactly. But if you're building fully
00:12:48native on the iPhone, you can use the Swift UI skills. Apple's design sits at the opposite end from Google.
00:12:53Where material is bold and colorful, Apple is more restrained and it leans on that translucent,
00:12:58glassy look it now calls liquid glass. The skill pulls Apple's own documentation straight out of
00:13:04Xcode on your Mac and hands it to the model as the rules. So the model isn't guessing at what an Apple
00:13:09app should feel like, it's working from Apple's actual guidance. And instead of something that only
00:13:14looks roughly like an iPhone app, you actually get one that feels native. And if you're building for
00:13:18iPhone and Android at the same time, there's the official Expo skill. Expo is a framework for
00:13:23making one app that runs on both Android and iOS. So you're not building the same app twice. It covers
00:13:29everything you need for a real app that runs on both, from the navigation and styling to the platform
00:13:34features all in one place. So whether you're building for one platform or both at once, there's a skill
00:13:39that actually knows the territory. Now all the skills and workflows and everything else we build and
00:13:43show you in these videos can be found in AI Labs Pro, which is our community. That's where you'll
00:13:48get the resources, the starter packs and more along with a place to interact with a bunch of like-minded
00:13:53nerds, including our team. So if you found value in what we do and want to support the channel,
00:13:58this is the best way to do it. The link's in the description. That brings us to the end of this
00:14:02video. If you'd like to support the channel and help us keep making videos like this, you can do so by
00:14:07using the super thanks button below. As always, thank you for watching and I'll see you in the next one.