Big Idea

The argument in one line.

Giving Claude a skill file — a plain markdown instruction set — eliminates generic AI output by loading design taste, rules, and constraints before any prompt runs, and four specific skills cover nearly everything a web designer needs.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

A web designer or UI/UX designer already using Claude Code who is frustrated with generic, obviously AI-generated output on first pass.
Someone who wants a tested shortlist of skills rather than experimenting with every option in the marketplace.
A designer who wants to encode their own design system so Claude applies it consistently across client projects.
Anyone who has tried prompting Claude for landing pages and got purple gradients, emojis, and soft shadows back.

SKIP IF…

You are not yet using Claude Code — the skills system shown here is specific to Claude Code, not the Claude.ai web chat.
You are a backend developer unconcerned with visual aesthetics.
You want deep code architecture or performance advice — the video is entirely focused on visual design output.

TL;DR

The full version, fast.

Claude produces generic-looking designs by default, but skills — markdown files loaded before any prompt — give it the equivalent of a senior designer's brief. Four skills cover the spectrum: Front-end Design (Anthropic-built, anti-slop rules) sets the baseline; Impeccable adds 22 slash commands for targeted fixes like animation, quieting loud elements, and accessibility audits; UI UX Pro Max forces Claude to reason through design systems before generating; and Web Design Guidelines (from Vercel Labs) audits finished work against a comprehensive accessibility checklist. Skills can be installed from GitHub, a one-line command, or built from scratch via Claude's own skill creator in about five minutes of conversation.

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 →

Chapters

Where the time goes.

00:00 – 01:26

01 · What skills are

Skills defined: a markdown instruction set Claude reads before any task; sets up the why.

01:26 – 02:56

02 · Where skills live

Skills panel in Claude Desktop; Anthropic built-in options (Theme Factory, Brand Guidelines, Web Artifacts Builder).

02:56 – 06:12

03 · Skill 1: Front-end Design

Anthropic-built; before/after demo on Griffin UI landing page; install from GitHub zip; editing to force sans-serif.

06:12 – 09:58

04 · Skill 2: Impeccable

22 slash commands; /animate and /quieter demos; slop tab showing forbidden AI patterns; /document for design system capture.

09:58 – 14:15

05 · Skill 3: UI UX Pro Max

Design system search + reasoning before generation; drastic redesign with explicit direction; editing the markdown.

14:15 – 16:21

06 · Skill 4: Web Design Guidelines

Vercel Labs skill; accessibility audit with orange annotation overlay; focus states, ARIA labels, mobile nav surfaced.

16:21 – 18:47

07 · Skill libraries

UI Skills, TypeUI (visual previews by style), MCP Market design tools category.

18:47 – 23:11

08 · Build your own skill

Claude skill creator guided conversation; live build of SaaS UI Design skill; output demo for an LLM training startup.

Atomic Insights

Lines worth screenshotting.

A skill is just a markdown file — there is no proprietary format; Claude reads it like a job description before every task.
The Front-end Design skill works primarily by listing what NOT to do: overused fonts, cliched gradients, emojis, soft shadows — naming the enemy is half the battle.
Impeccable's /quieter command audits loudness level, ranks every violation by severity, and fixes all of them from a single prompt.
Impeccable's /document command generates a DESIGN.md capturing your full design system so any AI agent in any future session reads it automatically.
UI UX Pro Max forces a reasoning step before code generation — Claude searches an internal design database first, producing more intentional results than a bare prompt.
The Vercel Web Design Guidelines skill annotates your live rendered page with orange overlays showing exactly where accessibility failures occur, not just a text list.
Skills are fully editable markdown — delete a pattern you dislike (like glassmorphism) from the file and Claude applies the updated constraints immediately.
Claude's built-in skill creator builds a complete, detailed SKILL.md through a guided conversation, automatically adding Tailwind tokens and typography pairing references.
Four skills cover roughly 90% of web design workflows — generation quality, iterative refinement, design system enforcement, and accessibility review.
Impeccable's slop tab catalogs every AI-generated design pattern it teaches Claude to avoid — useful as a negative reference even when designing manually.
Skills stack — you can run Front-end Design to generate, Impeccable to animate and quiet, UI UX Pro Max for a drastic redesign, and Web Design Guidelines to audit, all on the same project.
The difference between a bare prompt and a skilled prompt shows most in typography: skills steer Claude toward editorial serif/sans pairings instead of defaulting to system fonts.

Takeaway

Four skills that replace the taste Claude does not have by default.

WHAT TO LEARN

Skills are markdown files that load a designer's preferences, rules, and constraints before any prompt runs — and four specific ones cover the full arc from first draft to accessibility review.

A skill is not a plugin or a subscription — it is a plain markdown file Claude reads before acting; you can write, edit, or delete rules at any time in any text editor.
The Front-end Design skill works partly by prohibition: it names specific patterns Claude must avoid, which eliminates generic AI defaults more reliably than telling Claude what to do.
Impeccable's command model — one root slash command with 22 sub-commands — shows how to scope a skill by phase: /animate for motion, /quieter for tone, /document for system capture, /audit for quality.
Generating a DESIGN.md with /document creates a persistent design system artifact that any AI agent, in any future session, can read to stay on-brand without re-briefing.
Directing Claude to think about the design before executing — as UI UX Pro Max does with its design-database search step — produces more intentional results than a direct generate command.
Accessibility audits surface more useful information as visual overlays on the rendered page than as text lists: seeing orange annotations on your actual UI creates immediate spatial context for fixes.
Skills are not mutually exclusive — you can run generation, refinement, redesign, and audit skills sequentially on the same project, each operating on the output of the last.
Building a custom skill through Claude's guided conversation produces a more detailed SKILL.md than most people would write manually, because the conversation surfaces constraints the designer had not explicitly articulated.

Glossary

Terms worth knowing.

Skill: A markdown file that Claude reads before executing any task in a session, loading design rules, constraints, and preferences so they apply automatically without re-prompting.
SKILL.md: The entry-point markdown file inside a skill folder; the primary instruction document Claude loads when a skill is triggered.
Slop: Common AI-generated design patterns that immediately signal machine origin — purple gradients, soft shadows, emoji in cards, generic avatars, and similar defaults.
DESIGN.md: A design system document generated by Impeccable's /document command; captures typography, color, spacing, and component rules so any AI agent can read the project's standards.
WCAG: Web Content Accessibility Guidelines — the international standard for web accessibility; the Web Design Guidelines skill audits against these rules.
Glassmorphism: A UI design style using frosted-glass transparency effects; mentioned as a pattern designers may want to remove from skill files to prevent Claude from defaulting to it.

Resources

Things they pointed at.

02:26linkFront-end Design skill (Anthropic GitHub) ↗

06:10linkImpeccable ↗

09:58linkUI UX Pro Max ↗

14:15linkWeb Design Guidelines (Vercel Labs) ↗

16:21linkUI Skills library ↗

17:35linkTypeUI ↗

18:16linkMCP Market ↗

22:10linkThe Complete Guide to Building Skills for Claude ↗

Quotables

Lines you could clip.

00:47

“Think of it like a saved instruction set that Claude reads before doing anything.”

Clean one-sentence definition, no setup needed→ IG reel cold open↗ Tweet quote

02:46

“It stops being a generic AI designer and starts feeling like a collaborator who knows your actual work.”

Outcome framing, quotable standalone→ newsletter pull-quote↗ Tweet quote

16:05

“It doesn't just tell Claude what to do, it tells Claude to think about what to do.”

Tight contrast, summarizes UI UX Pro Max value prop→ TikTok hook↗ Tweet quote

The Script

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.

metaphoranalogystory

00:00There's only a few skills that are actually worth using for web design. Most designers using Claude get output that looks like it was generated by AI. Generic styling, safe choices, nothing that actually reflects a real web designer's talent.

00:12But Claude has one feature that changes this completely. They're called skills, and once you set them up, Claude stops generating generic output and starts designing with the judgment and taste of a real web designer. In this video, I'm gonna show you the Claude skills that actually matter for web design, how to create your own skill, and what skills look like inside a real design workflow.

00:30Let's get into it. So what is a skill? Think of it like a saved instruction set that Claude reads before doing anything.

00:36Instead of explaining your preferences, your design system, your tone, every single time, a skill holds all of that. You write it once, Claude loads it automatically. Skills live as markdown files that you point Claude to.

00:48When you trigger that skill, Claude reads it first, then does the work. It's like giving Claude a job description before assigning it a task. The difference in output quality is significant.

00:56Same prompt, same Claude, but with a skill loaded, it knows your stack, your style, and your client context if you're working on a client project. It stops being a generic AI designer and starts feeling like a collaborator who knows your actual work. I've tested most of the design skills out there and these are the ones that actually make a difference, and I'm gonna walk you through each one so you know exactly what it does, when to reach for it, and how it fits with the others.

01:19There's overlap between some of these. That's intentional. You don't need all of these on every project, but together they cover almost everything a web designer does in Claude.

01:26Let's start off by seeing where skills live in the Claude desktop app. Go to customize, skills, and here you'll see any skills you've already installed.

01:34Anthropic offers a small handful of skills that you can access immediately inside the desktop app. You can get to them by hitting this plus, browse skills, and here they are.

01:43You can click into any of them to see the file contents of the skill. This skill theme factory, for example, includes a skill dot m d file, which includes instructions for Claude to follow and a variety of other m d files with prepackaged themes including color palettes and typography systems. Canvas design, on the other hand, includes a folder with a bunch of fonts that Claude is instructed to use as it sees fit.

02:04Just a couple examples to show you what can be inside a skill. Now, out of these skills that Anthropic officially offers, the ones most relevant to web designers would be Theme Factory, Brand Guidelines, and web artifacts builder. But there are a few other skills not listed here that I think are gonna be even more relevant to you as a web designer.

02:21So let's dive deep into those, including some examples of real output from each of them. I've tested so many different skills and here are the ones that actually make a difference for web design. The first one I wanna show you is one that you've probably heard of at this point.

02:33It's front end design. And this is far and away the most popular skill for any type of designer, whether you're a web designer, UI UX designer, product designer, partly because it gives Claude instruction on how to design better, but also because it was developed and released by Anthropic themselves. We can see one of the key engineers at Anthropic working on Claude code tweeting out an example of what he created using it, with a few additional examples too.

03:02One of the key reasons that those designs don't look particularly AI generated is that the skill tells Claude exactly what not to do. It says never use generic AI generated aesthetics like overused font families, cliched color schemes and more.

03:16This MD file basically gives Claude a brief lesson about how to be a good designer that incorporates creativity and thoughtfulness into its designs. But to give you a clearer picture of what impact the front end design skill has on your design work, let me show you a before and after. I'm gonna start with an open ended prompt, build a polished modern landing page for my design agency, Griffin UI.

03:35I'm gonna show you the first example before I install the skill, and then I'll run the same prompt after installing front end design. So here's what we got on the first pass. I'll say what we're all thinking.

03:44This obviously looks AI generated. From the purple gradients to the white background to the soft shadows, nothing about this screams creative.

03:51It just screams AI generated. We even have the improper vertical alignment of these cards here and the emojis especially really just give it away that a human did not design this landing page. So now, it's time to install front end design and put it to work.

04:04Now, there's not one singular way to download a skill. A lot of skills will exist as a GitHub link like this, in which case you can open this drop down and hit download.

04:14But a lot of skills like this next one I'm gonna show you, impeccable, can be installed with a single prompt like this by default. But since we downloaded front end design as a zip file from GitHub, back in the skills panel, I'm gonna hit plus, create skill, upload a skill, and then drop in that file.

04:32Now we have the skill installed and ready to go. Just make sure that this toggle in the upper right is turned on. Now let's see what that same landing page is gonna look like after we use this skill.

04:41To make sure Claude uses the front end design skill, I'm gonna hit slash and find front end design. This is the easiest and fastest way to make sure Claude actually uses the skill that you want. Now let's hit prompt and see what it comes up with.

04:54And now just on that first pass with that front end design skill installed, have a landing page that is so much more creative and unique than what we saw before. We have this really interesting custom cursor here, which I actually don't mind at all, some really nice fade in animations as we scroll down, some nicely laid out cards with some interesting hover states here, and some really nice fade in animations as we scroll down.

05:16Even though we only gave it one prompt, even the links up in this header work with nice smooth scroll animations down to each section. Now what you'll find a lot of the time is that with the instructions that Claude has given through that dot m d file, it'll often use this more elegant editorial style with these serif fonts paired with a more modern sans serif font.

05:34But if, for example, you wanted Claude to follow all the other instructions from that dot m d file but always use sans serif fonts for a more modern look, you could go back to the skills page in Claude, open this drop down, hit edit with Claude, and that will start you out with the prompt to edit the skill. After it, I could say, I only ever want to use sans serif fonts.

05:54Examples are Geist, Google Sans, and DM Sans. And with this prompt, Klob would adjust that dot m d file accordingly.

06:03So just because a skill comes with a bunch of preset instructions doesn't mean you're locked into them. This next skill I wanna show you is another really popular one right now called impeccable. I'm a big fan of this skill not just because of the skill itself, but also because of this landing page that gives you a super clear impression of what it offers.

06:18Before any command runs, impeccable teaches your AI how design works. It teaches your AI about typography, color and contrast, spatial design, responsiveness, interaction design, motion design, and UX writing.

06:31Now, this skill especially is primarily used through slash commands. The main slash command is just slash impeccable, but it also comes with 22 other sub commands that are more specific and you pick depending on the context.

06:44For example, if your website is lacking any sort of animations, you can use impeccable's animate to add some as it sees fit. Or if your web design is lacking color, you can use colorize to add color intelligently.

06:55But these commands aren't just for improving your web design immediately. For example, you can use audit to run a five dimension technical quality check, telling you what parts of your design have accessibility issues. One of my favorites is document, which generates a design dot m d file, which basically captures your full design system so that any AI agent including Claude code can read it every time.

07:16Before I get into the demo of Claude using Impeccable, I strongly encourage you to go check out the Impeccable landing page because it's very well designed and gives you some interesting insight into what's going on when you actually use this skill. Now, I've prompted Claude with the install command that I got from Impeccable's landing page and it's installed it in just ten seconds.

07:33With that being said, let's take this landing page that Claude initially generated for us last time and make some improvements to it using impeccable. Right now, it doesn't have any animations whatsoever. So even though we could take it a lot further than just adding animations, let's stick with that for now just to show you what it's capable of at a basic level.

07:50I'll run a slash command and choose impeccable. Then I'll add animate onto it.

07:55Now, just like that, when I refresh the landing page, we can see some beautiful intro animations. This makes it feel a lot more alive and interactive, and it all happened just from that one prompt. Now, right now, I actually think even though our website still looks very AI generated, I think it looks pretty bold.

08:10Very bold headers, the button colors really jump out at you, and the background of this final CTA at the end is just really loud. So I think this is actually a case where we could use the quieter command. You can see from the before and after on the right that it shows an example that actually looks pretty similar to my landing page and turns it into something elegant and much easier to look at.

08:30So let's try it out. I'll run the impeccable slash command and then use quieter.

08:37Now from that one prompt, Claude has ran an audit to determine the biggest issues regarding loudness at the moment. It lists gradient text everywhere, heavy font weights on every heading, and emojis in many places, also ranking the severity of each issue, and then establishing what it's gonna do to fix each of them. So now that it's executed that redesign, let's refresh and see how it looks.

08:57Now it's looking not only quieter, but also less AI generated in my opinion. It's reworked a lot of the web design patterns that scream AI and brought a nice touch of elegance to our site. So now we have not only those nice fade in animations, but also styling that feels a lot more unique and easy on the eyes.

09:14And we made these improvements just from two different prompts. So you should clearly be able to see the value in a skill like impeccable, where you get all these different commands from a single skill. And the creator of this skill is actively working on new features like live, where you can iterate on your UI in the browser.

09:29The last thing I wanna show you about this skill is the slop tab. It shows you a bunch of different design patterns that impeccable teaches AI not to use. But besides the fact that it's teaching AI not to use these, I think it's also important to look at these patterns yourself so that when you're designing manually, you can know that something like a side tab accent border at this point in time is a very AI generated design pattern.

09:51You can also learn a lot about what kind of typography patterns look AI generated and what kinds of color and contrast you should avoid whenever possible. Let's check out the next skill that every web designer needs to try, UI UX pro max. This skill is packed with a wide variety of UI styles, color palettes, font pairings, and even eight tech stacks to assist Cloud with the web development part depending on what stack you wanna use.

10:13The landing page for this skill also spells out what the process looks like when you use this skill. You start off with a prompt. Your AI starts reasoning, which I think of as basically being the planning process.

10:23It searches through its design database to figure out what aspects of the skill are relevant to the website that you're designing. Then not only does it generate the code for the web but it also runs your AI agent through a quality checklist. So if you care about refining your website and making sure it's accessible, this is a solid all in one skill for web designers.

10:41So let's take the landing page that we have going so far, apply the UI UX pro max skill and see how it iterates on it. But, of course, we still need to install this skill. So just like with impeccable, I'm gonna paste this simple one line command, which is gonna have Claude code install the skill on its own.

10:57Now with that skill installed, I'll say, let's keep working on our landing page. And then I'll find the UI UX pro max slash command to iterate on what we have so far.

11:07Now, let's have it get to work. We can see it's running the skill. Now, it's running a design system search and figuring out which of its design systems is best for our type of landing page.

11:15So one of the main points of this skill is that it has Claude do a lot more thinking than it normally would. It doesn't just tell Claude what to do, it tells Claude to think about what to do, which ultimately gets you a much more intentional looking result. There are some demos on the UIUX Pro Max landing page, and I think this one is a good example of what this skill can do.

11:33It has some really nice sections that I would actually expect to find on a real human generated landing page. With that being said, the best chance of achieving really nicely designed sections like this is if you're specific with what content you want included, so that Claude is on the same page with you about what you want, and then it's able to enhance that direction through the UI UX pro max skill or any other skill that you end up using in your web design process.

11:56So now Claude has finished the redesign of our website using that skill. And at first glance, it really doesn't look much different. One of the main things is that these emojis have been replaced by actual icons.

12:06It's redesigned this process section to be cards with numbers in the upper right. But besides that, it's not really doing anything too crazy. So this is actually a perfect example of me telling Claude to use a skill and run with it, but not really giving it any additional guidance beyond that.

12:20So this time, I'm gonna say, use the skill again to do a more drastic redesign. UI UX Pro Max has an extensive library of color palettes and font pairings, so use them to their full advantage. Now Claude is gonna understand that we want a much bigger change than what we just saw.

12:36So when you're using skills like this for web design, you need to understand that you don't just need to know which skills are gonna be helpful for you, which I'm showing you today. You also need to understand how to use them by communicating to Claude exactly what you want from it. And even though I've taught you a lot about how to use skills already today, I think practicing using skills on your own and going through that whole trial and error process is really important, especially if you're a designer utilizing AI in your design process like this.

13:01And now after about five minutes, we have our redesigned website. Starting at the hero section, it kept all the same overall content and layout, but adjusted the styling to be more bold and eye catching. Scrolling down, it did actually make some changes to this layout of cards here.

13:15It added this code snippet style text right here, which is relevant to this card about AI powered design, so it's cool to see that it's taking that context and also added a list of actual integrations down here in this card. Then in the how it works section, it made some changes to the card layout that we had before, and it doesn't look great.

13:31We have this really thick dark line right above them, which doesn't really blend into the UI at all. But scrolling down a bit more, I'm liking what it did with this list of KPIs here. I like how it's doing a brief transition from light mode to dark mode.

13:43To highlight impressive KPIs like this, that should stand out. Then our testimonial section is looking pretty similar, just adjusting the styling to use the new design system that Claude shows. So overall, I'm liking the direction that we've gone with this UI UX pro max skill.

13:56But remember what I told you earlier, you can open the markdown file in your code editor and make any adjustments to what you want. For example, if I never wanted Claude to use a style like glassmorphism, I could delete that keyword and then save the file.

14:07But also, if you don't like a particular design pattern that Claude generates using this skill, you can just tell Claude through a prompt to never use it again. The fourth skill I wanna show you is called web design guidelines and it comes directly from Vercel Labs. When you use this skill, Claude audits your design against this super long list of web interface guidelines from Vercel.

14:26It teaches Claude about interaction design. For example, keyboard works everywhere, never disable zoom, don't block paste, loading indicators for buttons, and much more. It also teaches Cloud about animations, layout, content, how forms should be designed, and much much more.

14:41And you could see here the main use cases for using this skill is reviewing your UI, checking accessibility, audit your design, or review your UX. So with the web design guidelines skill installed, I'll use the slash command for it and say review my UX and accessibility.

14:57So this skill is less about coming up with a beautiful design in the first place and much more about reviewing what you have when you're pretty close to the finish line and wanna make sure your site is completely accessible and offers a great user experience. And now it's come back with a full list of accessibility issues, problems with focus states, semantic HTML, navigation and mobile friendliness, animations, typography, and then a concise summary of what needs to be addressed.

15:21One thing I like to do with Claude when I use this skill is tell it to annotate the landing page itself with the issues. This lets me see visually what's wrong on my website itself rather than just reading a list of what's wrong. Now, just like that, we have everything wrong with our site accessibility wise outlined in orange with what's going wrong and how many times it's happening in a particular area.

15:41In our nav bar, for example, it says that mobile and keyboard users lose all anchor navigation. And in our primary call to action in the upper right, it says there's no focus. It also says down here that this group of avatars are lacking an accessible name and this five stars right here has no ARIA label.

15:56Then in this drop down, you can see everything going wrong with your landing page. So you can clearly tell that Claude doesn't always do a great job at considering accessibility. So having a clear and extensive list of web interface guidelines like this makes it so much easier and more efficient to prioritize accessibility.

16:11You don't need 20 different skills because these cover 90% of what you're gonna be doing on an actual design project. Set them up once and Cloud is gonna make a massive leap with its design output. So now that you know those four essential skills for web design, I wanna show you how to explore and find more skills that may be relevant to you as a web designer.

16:29One way you can do that is by diving into skill libraries. This first one is called UI skills, and it specifies that it's mainly for design engineers. But don't let that steer you away.

16:39A lot of the skills listed here are gonna be relevant to web design too. This library actually lists a few of the skills we discussed today, front end design, UI UX pro max, and impeccable. If one of your focuses is accessibility, a couple that would be relevant to you are fixing accessibility and WCAG audit patterns.

16:55If you wanna design with or sell SHAD CN component library, this one lets you do that. Just one skill and it gives you full access to every component in the SCADCN library. This skill design taste front end is similar to front end design in that it enforces anti slop design decisions and gives Claude a very long list of how to design better.

17:13In these skills, it's really common to see rules that tell Claude what not to do, including not using generic names or avatars, which immediately gets you past that initial design that often looks really generic in placeholder. So with that being said, I highly recommend you check out the UI skills library. Even if you're not a design engineer, whether you're doing product design, web design, you're gonna find a lot of skills here that help your design process.

17:35Another skill library I recommend you check out is Type UI. What I like about this one is you can scroll and see a bunch of visual previews of what type of design you would get if you use each of these skills. Each of them lets you achieve a specific visual design without having to give Claude a long drawn out instruction about what kind of styling and overall look you're looking for.

17:54Whether you're looking for an elegant design, a more modern sophisticated design, or something bold like neo brutalism, TypeUI gives you a really wide variety of skills to choose from. And I love it because as a designer, I oftentimes have a particular visual direction that I wanna go toward before I even start laying out the landing page.

18:11So using skills like this is a great way to steer Claude toward that visual direction faster. The last library I wanna show you is called MCP market. If you hover over the agent skills drop down, go to categories and then go to design tools, it'll show you a seemingly never ending list of skills that can help aid your design process.

18:28But if you wanna focus on web design, you can just search for that. And then you can access a bunch of free skills that are tailored toward web designers. Whether you wanna focus on design systems, have a design reviewer right alongside you, or teach Claude how to execute good web animations, pretty much all the skills you'll need to find are in libraries like this.

18:47Now let me show you how to build your own skill that's perfectly tailored to your exact needs. Creating your own skill comes in handy when you have specific preferences or guidelines that you want Claude to follow during the design process. In Claude code, let's go back to customize, skills, hit plus, create skill, and then create with Claude.

19:04Then it starts you out with this first prompt. Let's create a skill together using your skill creator skill. First, ask me what the skill should do.

19:11So when we give Claude this prompt, like I said, it asked me what the skill should do. So now I'll just describe it. I start off by giving Claude some instructions about how to approach the design process.

19:21Always identify the product type first, dashboard, landing page, mobile app, etcetera. And this is because the design style should always be different based on the context. Meaning, the design for a dashboard versus a landing page should typically be different because they're completely different use cases.

19:35Along with that, always infer the goal of the screen before designing. What actions matter most, what information matters most, and what the user should notice first. So these couple instructions are partly to encourage Claude to think harder before actually starting the design process.

19:48As far as specific styling instructions, I say default to a restrained palette, mostly neutral backgrounds and surfaces, and a couple other instructions about how to design with good styling in mind. Then also an instruction about font families, one primary body font, and if needed, one display font for large headings. Now, this is just an example prompt for this demo.

20:07But when you're creating your own skill, try to be as thorough as possible so that the skill actually ends up being useful for you. But Claude will walk you through a full conversation and ask you more questions to get a feel about what you want from this skill. What should the skill govern?

20:19Who's the primary audience for designs produced with this skill? Any specific rules around spacing, sizing, etcetera, and asking if I have a preferred tech output. Again, be thorough with this so that Claude generates a detailed skill.

20:31So now I have a really long response answering the additional questions that Claude has asked me about this skill. So let's prompt it. And now it just has a few more questions for me.

20:40And the nice thing is all these additional questions are based around the answers that I've given it so far. Now let's see if it has any more questions for us. Nope.

20:48It has everything it needs, and it's building the skill now. And now it's specifically writing the skill.md file, which is the heart of our skill.

20:55So now Claude has finished creating the skill, and it's named it sas UI design. I've just saved it, so now I'll be able to access it from Claude code as a slash command. Over on the right, let's look at the anatomy of this skill.

21:06We have the skill dot n d file, which if we scroll down, we can see it's super detailed. It lists the type of products I'd be designing. It walks Claude through the goal of the project.

21:14And if I keep scrolling down, you'll see it's super thorough, detailed. There's a lot of content here.

21:20And each time I reference the skill in a design project, Cloud is gonna run through all of it to inform its decisions. It also generated a references folder, including Tailwind design tokens because I told it I wanna use Tailwind and then a list of typography pairings. Now, back in Cloud Code, I'll say, use our new SAS UI design skill to generate a landing page for an AI startup focused on LLM training.

21:43Now we can see it's reading the Tailwind file and the typography pairings file. Now it's walked me through its design decisions and has gotten started building the actual landing page. And now it's generated a complete landing page based around the instructions that I gave it.

21:56I'm actually pleasantly surprised at how nice this looks. It does look somewhat basic, but I think it looks really sleek. And from just a first prompt and having that new skill doing the heavy lifting, I'm really happy with how it's looking.

22:06The primary teal color makes the CTAs stand out a lot, and I like that it's dynamically generated some code based graphics like the one we see in the hero section here. If you wanna learn more about creating your own skills, go ahead and look up the complete guide to building skills for Claude. And you'll find this slide deck diving deep into what guidelines and principles to follow and how to get the most out of the skills that you create.

22:27Claude is not a super impressive designer by default. At this point, we all know what an obviously AI generated design looks like. And skills are one of the ways that you give Claude more guidance and instruction about what good design looks and feels like.

22:40They're super powerful, and now that you know which ones are important and how to use them, go give them a shot when you're working on your next web design project in Claude and see the difference that they make. Once Claude knows how a real web designer thinks and works, the output stops feeling like AI and starts feeling produced by an actual expert web designer.

22:57And on top of all the skills that you have access to on the Internet, Cloud lets you create your own skills so that it understands your brand guidelines, your design preferences, and any other custom instructions that Cloud needs to know about how you work. Thanks for watching, and we'll see you in the next one.

The Hook

The bait, then the rug-pull.

Most designers prompting Claude for a landing page get the same result back: purple gradients, white background, soft shadows, and emojis in the cards. The problem is not the prompt. The problem is that Claude has no taste loaded. Skills fix that — and there are four that cover nearly everything.

Frameworks

Named ideas worth stealing.

02:56list

Four-skill web design stack

Front-end Design (taste + anti-slop rules)
Impeccable (22 targeted slash commands)
UI UX Pro Max (design system reasoning)
Web Design Guidelines (accessibility audit)

Four skills covering generation quality, iterative refinement, design system enforcement, and accessibility review.

Steal forAny Claude Code web design project — install all four once and reach for the right one depending on phase

06:28model

Skill command taxonomy

One root slash command per skill, with sub-commands for specific operations (/animate, /quieter, /colorize, /audit, /document). The pattern lets one skill cover an entire design phase.

Steal forDesigning your own skill — give it sub-commands for distinct use cases rather than one catch-all instruction

CTA Breakdown