WEBVTT

00:00:00.000 --> 00:00:50.875
So, there's a built in feature inside Clawd that helps you generate beautiful designs, and most designers don't even know that this exists. They're called skills. And in this video, I'm gonna break down every single one that matters for designers, how to build your own skill from scratch, and then I'm gonna prove to you that these skills work by generating a beautiful landing page live. So let's get into it. So what even is a skill? Think of it as like a simple plugin for Claude. It's a set of instructions and resources that completely changes how Claude approaches specific types of tasks. And the one that you need to know about first is the front end design skill. This skill is a set of detailed instructions that tells Claude how to think like a designer before it writes a single line of code. Here's how it works. When you ask Claude to build something, a landing page, a dashboard, a component, whatever it is, the skill kicks in and forces Claude through a design thinking process before it touches code. It considers four things, purpose, tone, constraints, and differentiation.

00:00:50.875 --> 00:01:18.895
And here's the part that's blown me away the most. The skill has a section called front end aesthetics guidelines that reads like it was written by a senior product designer. It covers typography and not just pick some random font. It tells Claude to avoid generic fonts like enter and aerial and instead choose distinctive character full type pairings. Then it also covers color, motion, spatial composition, and atmosphere. But here's the most important thing. The skill explicitly tells Claude what not to do. It literally bans what it calls AI slop.

00:01:19.055 --> 00:01:46.225
Those overused purple gradients, the same rounded corner cards on white backgrounds, and inter font everywhere. And every designer has seen it. The skill is specifically designed to avoid that. So just by having this one skill installed, you go from obviously AI generated output to something that actually looks designed. But this is just the beginning. The front end design skill is the real headliner of this video, but there are a few other lesser known skills that are incredibly useful for designers. So let me walk you through these ones worth knowing about.

00:01:48.225 --> 00:02:50.730
This is an official skill from Figma and it does exactly what it sounds like. You give it a Figma URL and it translates your design into production ready code as close as it can to one to one visual fidelity. Here's how it works. You paste a Figma link into Claude. For you, it would most likely be a screen you've designed. The skill parses the URL, pulls the file key and node ID, and then calls the Figma MCP server to fetch the full design context. That means it's reading your actual layout properties, your auto layout settings, your typography specs, your color values, your spacing tokens, and everything else included in your design. Then it takes a screenshot of the design as a visual reference and downloads any assets like icons or images and then starts building. But it's not just dumping out generic code. The scale has a whole section on translating Figma output into your project's actual conventions. So if your code base uses a specific component library or design system, it maps to that. It reuses your existing buttons, inputs, and typography components instead of recreating them. And at the end, it runs a validation checklist. Layout, typography, colors, interactive states, responsive behavior, accessibility,

00:02:50.810 --> 00:03:18.570
all compared against that one Figma screenshot. Now, one important thing to note, this skill requires the Figma MCP server to be connected. So before you use it, you'll need to make sure that's enabled in Claude. It's the bridge that lets Claude actually read your Figma files, and once that connection is set up, you're good to go. For designers who've ever given a screenshot to Claude, told it to turn it into code, and it comes out looking terrible, this skill is gonna help close that gap. And you don't need to be a developer to use it. You paste a link, Claude does the rest. Theme Factory.

00:03:19.610 --> 00:03:48.800
This skill gives you 10 pre built professional themes. Each one is a complete package with a curated color palette and carefully paired fonts. Think of it like a design system starter kit, except it's not just for UI design. You can apply any of these themes to slides, documents, web pages, dashboards, or reports, basically any artifact Claude generates. So if you're building a presentation deck and you don't wanna spend twenty minutes picking colors and fonts, you just pick a theme and everything stays consistent. What I like about this one is that each theme has a distinct visual identity.

00:03:49.040 --> 00:03:56.160
These aren't just random color combos. They're designed for specific contexts and audiences. So you've got options that work for corporate presentations,

00:03:56.160 --> 00:04:06.255
creative pitches, editorial layouts, and more. And because the themes include both header and body font pairings, you get great typographic hierarchy along with harmonious color palettes.

00:04:09.375 --> 00:04:10.175
Brand guidelines.

00:04:10.980 --> 00:04:12.660
This one is about consistency,

00:04:12.660 --> 00:04:19.540
and it's a concept that every in house or agency designer should pay attention to. Out of the box, this skill is set up with Anthropic's

00:04:19.540 --> 00:04:27.755
brand. Their colors, typography, and visual identity rules. But the real value here isn't Anthropic's brand, of course, because you don't work for Anthropic.

00:04:27.755 --> 00:04:41.435
You can still just use this skill as a template. So think about what this skill actually does. It takes a set of brand rules like hex codes, font stacks, spacing values, logo usage, tone, and enforces them automatically across everything Claude generates.

00:04:41.870 --> 00:05:08.185
Every artifact, every landing page, every deck comes out on brand without you having to check it. Now, imagine building one of these for your own company. You take this skill as a reference, have Claude swap in your own brand tokens, your primary and secondary colors, your heading and body fonts, your spacing scale, your do's and don'ts, and suddenly Claude knows your brand just as well as you do. And this is especially powerful if you're on a small team where there's no dedicated design system person enforcing consistency.

00:05:08.620 --> 00:05:35.605
You could even share it with non designers on your team, marketing, sales, whoever, so that anything they generate in Claude automatically follows your visual standards. Realistically, connecting Claude to Figma via an MCP is gonna get you more accurate results. And if you'd like a video on how to do that, let me know in the comments. But this skill is a quicker way to get UI that follows your desired style guidelines. The skill itself is pretty simple to set up once you understand the format, and I'll show you how to create one from scratch in a minute using the skill creator.

00:05:36.460 --> 00:05:37.660
Canvas design.

00:05:38.220 --> 00:05:56.965
This last one is different from everything else I've shown you. It's not for UI. It's for creating actual visual art like posters, graphics, static design pieces as real PNG and PDF files. And the way it works is genuinely unique. It's a two step process. First, Cloud creates a written design philosophy, like an actual aesthetic manifesto.

00:05:56.965 --> 00:06:09.940
It defines a visual movement, describes the principles behind it, the forms and colors and composition rules it'll follow. Then in step two, it takes that philosophy and expresses it on a canvas as a real image file. So it's designing from real principles,

00:06:10.020 --> 00:06:17.165
comes up with a creative direction, and then executes it. For things like event posters, social graphics, abstract art for presentations,

00:06:17.165 --> 00:07:04.750
or visual concepts you want to explore quickly, this is a really interesting tool. And it won't replace Photoshop or Illustrator because that isn't Claude's main use case, but it does give you a way to explore visual directions in seconds in a way that you wouldn't otherwise be able to with Claude. So between front end design and these other skills that I've showed you, you've got a complete creative toolkit inside Claude. UI generation, Figma to code, theming, brand enforcement, and visual art. But what happens when you need a skill that doesn't exist yet? This is where the skills feature gets really powerful. Of course, in the realm of AI, you're never limited to what's already been built. You can create your own skills and Claude will actually help you do it. So now you're not just a user of these skills, you're also creator. You can build exactly the skill you need for whatever kind of project you're working on. There's a skill called the skill creator. It's a skill for making skills

00:07:04.990 --> 00:07:16.185
and the workflow is pretty simple. Here's how it works. You tell Claude what you want the skill to do. Maybe you want a skill that generates mobile app screens in your company's design system or a skill that writes UX copy in your brand voice.

00:07:16.585 --> 00:07:21.625
Claude then interviews you. It asks about edge cases, input formats, output expectations,

00:07:21.705 --> 00:08:23.980
then it writes a draft of the skill dot m d file. That's the core instruction document. But it doesn't stop there. It creates test prompts, runs them, and shows you the results so you can evaluate whether the skill is actually working. You give feedback, it revises, and you repeat. It's an iterative design process, just like how we design products in real life. The anatomy is simple. Every skill is a folder. It has a skill dot m d file at the root. That's the brain. And optionally, it can include scripts, reference documents, and any other assets you want Claude to inform its responses with. The skill dot m d has a name, a description that controls when it triggers, and then the actual instructions. And when you're done, you can package it as a dot skill file and share it. Install it on another machine, send it to a teammate, share it with the community. It's like building your own design plugin. So you're not just a user of these skills, you're a creator. You can build exactly the tool you need. Now, let me prove all of this actually works. So now, let's see what this looks like in practice. Right here in Claude, I'm gonna generate a full landing page from a single prompt using the front end design skill, which like I said is hands down the most valuable skill for UI design right now.

00:08:44.735 --> 00:09:28.910
So that's the power of skills. Claude isn't just guessing. It has a design playbook preloaded and it executes with intention. So to recap, skills are Claude's hidden plugin system. The front end design skill alone transforms how Claude generates UI, and other skills like Theme Factory and Implement Design round out the designer's toolkit. And with the skill creator, you can build the perfect tool for your specific workflow. But here's the thing, skills are just one piece of the puzzle when it comes to building using Claude. And you have a lot more to learn if you wanna use Claude for most or even all of your design process. Lucky for you, I have a full video guide on my design workflow using Claude code, so make sure you go check out that video too. As always, I hope you guys have gotten some good value out of this video. And if you did, subscribe to continue becoming a better designer.