Sieben Claude-Skills gegen generisches AI-Webdesign

These two pages came from the exact same prompt and the same model. The only difference is that the one on the right had one skill installed. There are thousands of skills you can install now, and most of them don't do much for design work. So, these are the seven I actually use on real projects, what each one fixes, and which one I install first. Let's get into it. If you're new to skills, a skill is a folder with a markdown file inside it. That file is a set of instructions that Claude or really any other AI model reads when your task matches what the skill is for. Claude only sees the name and a one-line description until it needs the skill. So you can install a bunch of them without filling up the context window. And most of the skills in this video install with one command, and I'll show each one on screen and down in the description. Here's the first problem: Ask Claude for a landing page with no other direction, and you'll get back a dark background, a purple gradient, a pill badge, a centered headline, and three feature cards in a row. I made a whole video on why this happens. The short version is that the model reaches for the average answer for that category. The taste skill is built to push against exactly that. Before it writes any code, it has to state a design read in one line. What kind of page this is, who it's for, and what visual language fits. Then it works from a long list of what it calls AI tells. No three feature cards, no fake perfect numbers like 99.99%, no placeholder names like John Doe, and no M-dashes anywhere on the page. At the end, it runs a pre-flight checklist and has to pass every box before it's done. This is the page from the start of the video. Same prompt, same model. The layout follows the product instead of the category, and the copy uses real-sounding names and numbers. And if you're redesigning something that already exists, it starts with an audit of what's there and keeps the brand assets you already have instead of starting from scratch. This one is great for landing pages and portfolios. The skill itself says it isn't meant for dashboards or data-heavy product UI, so keep that in mind. Taste is mostly about getting the first version right. Impeccable is what I use once something already exists, and I want to work on it like a designer would. It comes with more than 20 commands: critique, audit, polish, distill, bolder, quieter, typeset, colorize, and a lot more. Each one is a specific design pass you can run on a page or component. Critique is the one I'd start with. It runs two separate reviews that can't see each other—one from the model looking at your code and the page, and one from an automated check—and then combines them into a score with specific issues. Then you fix things one pass at a time. Distill to strip out what doesn't need to be there, typeset to fix the hierarchy, quieter if the design is just doing too much. It also asks you to set up a product.md and a design.md for your project first, which describe who the product is for and what the visual system is. Every command reads those, so the feedback is specific to your product. A note like "this feels too playful" means something different for a banking app than for a game. And these files are how it knows which one you're building. There's also a live mode. If you have a dev server running, you can select an element right in the browser, pick an action like bolder or quieter, and it swaps in a few variants for you to compare. If you watched my AI design patterns video, Impeccable also has the gallery of AI-generated patterns I mentioned there. I'll link both below. Now, most bad AI UI design comes from designing with no references. Mobbin is a library of real screens and complete user flows from apps that actually shipped, and they've been a sponsor on this channel before. But Mobbin now has official skills, making their platform easier than ever to access. The plugin installs four of them, along with the Mobbin MCP that lets Claude search their library. The one I use is called "redesign-screen". You give it a screen you already have, as a screenshot, your code, or a design file. It asks a couple of scoping questions, writes down what has to stay the same, and then searches Mobbin for how real apps handle the same screen. It groups the references by the direction they take and builds from one direction, so you don't end up with a mix of three different apps. Every change is one move for one problem, backed by screens it actually looked at. At the end, you get a before and after image and a short report. Each change lists the apps it came from with a link to the screen on Mobbin. If two or more products do it, it calls that "precedent". If only one does, it calls it an "example". And if it's the model's own judgment, it has to say "my opinion is" instead of passing it off as research. It's not allowed to say things like "most apps do this" or "research shows" either. It has to name the products. That's the part I like most, because AI design feedback is usually full of claims that nobody can check. It also keeps your design system. The references decide what changes, and your own design decides how it looks. You install it as a Claude code plugin with two commands, and the first time you use it, it opens a browser to sign in to Mobbin. You do need a Pro plan or higher to use this feature, but my link is down in the description if you want to get 20% off your subscription. All right, now back to the rest of the skills. Next is Emil Kowalski, and you've probably heard of him if you know anything about skills. He made Sonner and Val, and he put out a whole set of skills, mostly about animation and interaction design. The one I find the most interesting and underrated is called "pick-ui-library". When you need a component, it tells Claude which library to use and gives you one sentence on why. It has a short list it picks from, things like Base UI for primitives, CMDK for command menus, Sonner for toasts, Motion for animation, and Virtuoso for long lists. It checks your package.json first, so if you already use a library from the list, it keeps it. It also catches the things AI tends to hand-build. A custom toast system turns into Sonner, rendering thousands of rows directly turns into a virtualized list. You can install only this one or the whole set. His set also has skills for reviewing and improving animations, finding places where animation would help, and even one for Apple-style designs, so it's worth looking through the full list. Motion is where AI-built interfaces usually feel the cheapest. Things either snap in with no transition, or everything fades up the same exact way. The transitions.dev skill gives Claude a library of more than 30 ready-made CSS transitions for specific UI moments, made by Jakub Antalik. It picks the transition from the element first. A menu that opens from a button gets an anchored dropdown, a number that updates gets a pop-in, a form error gets a shake, and the details are the kind you'd normally only get from a motion designer. The dropdown opens in 250 milliseconds and closes faster in 150. It scales up from 97%, and it grows out of the corner of the button that opened it instead of the center of the screen. And every transition uses shared motion tokens, so the timing and easing stay consistent across the whole app. Each one also respects reduced motion settings. The skill is free to use, and there's a paid tier for more transitions if you want them. This next one doesn't design anything for you. Vercel published their Web Interface Guidelines, and this skill audits your code against them. It covers 17 categories, including accessibility, focus states, forms, animation, typography, and dark mode. Rules like "icon-only buttons need a label," "never remove a focus outline without replacing it," "don't block paste," and "destructive actions need a confirmation or an undo." A lot of these are things a designer would catch in a review but wouldn't think to put in a prompt, like using a real ellipsis character instead of three periods or never writing "transition: all" in your CSS. The output is a list grouped by file with line numbers so you can go fix each one or have Claude do it. It also pulls the latest version of the guidelines every time it runs, so it stays current when Vercel updates them. I run this at the end of every project the same way you'd do a final QA pass. The last one is Anthropic's frontend-design skill, and it's probably the one you've heard about the most. My take on this one is more mixed. It's short, about 560 words, compared to almost 13,000 for the taste skill. Most of it tells Claude to commit to a bold direction and avoid generic fonts and purple gradients. It does make the output more distinctive than having nothing, but it mostly sets a direction. It doesn't make Claude check the result against anything, and it doesn't know anything about your product. Impeccable started from this skill and built a lot more on top of it. So if you already have Impeccable or Taste installed, I don't really think you need this one too. It's still a good free starting point if you're going to install one thing from Anthropic. If you're only going to install one, I start with Impeccable. If you build a lot of landing pages, add Taste. If you're building product UI, add pick-ui-library and transitions.dev. Run the Vercel guidelines before you ship anything, and if you have a Mobbin plan, connect it, because better references improve everything else on this list. Of course, none of these replace your design decisions. They give the model better defaults and a way to check its work, and you still decide what the product should be. I'll put every install command and link in the description. Drop a like and subscribe if you want more AI design workflows, and I'll see you in the next one. Thanks for watching.