§ 01 · The Hook
The bait, then the rug-pull.
Most designers who use Claude for UI work have accepted the same disappointing output: purple gradients, Inter font, rounded cards on a white background. What they have not discovered is that Claude ships with a hidden plugin system, and the right skill installed turns a generic code dump into something that actually looks designed.
Where the time goes.
00:00 – 00:27
01 · What is a skill
Pattern interrupt and promise: there is a built-in feature most designers do not know about, called skills.
00:27 – 01:46
02 · Frontend Design skill
The headline skill. Forces a 4-step design thinking process and applies aesthetics guidelines before writing code. Explicitly bans AI slop.
01:46 – 03:17
03 · Implement Design (Figma MCP)
Official Figma skill that reads actual layout properties and spacing tokens via MCP, then generates code mapped to your existing component library.
03:17 – 04:09
04 · Theme Factory
10 pre-built professional themes, each a complete color palette and font pairing system, applicable to any Claude artifact.
04:09 – 05:36
05 · Brand Guidelines
A template to encode any company's brand tokens so everything Claude generates is automatically on-brand.
05:36 – 06:59
06 · Canvas Design
Two-step generative art skill: Claude writes a design philosophy manifesto, then executes it as a real PNG or PDF.
06:59 – 08:11
07 · Build your own (Skill Creator)
The Skill Creator interviews you, drafts a SKILL.md, runs test prompts, and iterates. Skills package as .skill files for sharing.
08:11 – 08:44
08 · Live demo
Single-prompt generation of a full SaaS landing page using the frontend-design skill. Output: dark theme, serif headline, stats strip, FAQ.
08:44 – 09:30
09 · Outro
Recap of skills covered, plug for the full Claude design workflow video, subscribe CTA.
Visual structure at a glance.
Named ideas worth stealing.
01:00
list
Four-part design thinking pre-flight
- Purpose
- Tone
- Constraints
- Differentiation
Before writing any code the frontend-design skill forces Claude to evaluate these four dimensions and commit to a bold aesthetic direction.
Steal for Any design brief, RFP, or AI prompt for UI work
07:30
model
Skill anatomy
- SKILL.md (required)
- scripts/ (optional)
- reference docs (optional)
- assets (optional)
The minimum viable structure for any Claude skill. The SKILL.md description field controls when the skill auto-triggers.
Steal for Building any custom Claude skill
Lines you could clip.
01:20
"The skill explicitly tells Claude what not to do. It literally bans what it calls AI slop."
07:00
"So now you're not just a user of these skills, you're also a creator. You can build exactly the skill you need."
09:16
"Claude isn't just guessing. It has a design playbook preloaded and it executes with intention."
Things they pointed at.
How they asked for the click.
08:55
next-video
"I have a full video guide on my design workflow using Claude Code, so make sure you go check out that video too."
Soft next-video push with no subscribe pressure until the final sentence. Non-aggressive.
Word for word.
HOOK opening / re-engagementCTA the pitch
00:00HOOKSo, 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.
00:16HOOKSo let's get into it. So what even is a skill? Think of it as like a simple plugin for Claude.
00:21HOOKIt'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.
00:36Here'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:50And 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.
01:01It 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.
01:13The skill explicitly tells Claude what not to do. It literally bans what it calls AI slop. Those overused purple gradients, the same rounded corner cards on white backgrounds, and inter font everywhere.
01:24And 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.
01:35But 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.
01:48This 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.
01:59You 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.
02:11That 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.
02:27But 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.
02:38It 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,
02:50all 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.
03:00It'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.
03:15You paste a link, Claude does the rest. Theme Factory. This skill gives you 10 pre built professional themes.
03:22Each 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.
03:37So 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. These aren't just random color combos.
03:50They're designed for specific contexts and audiences. So you've got options that work for corporate presentations, creative pitches, editorial layouts, and more.
03:58And because the themes include both header and body font pairings, you get great typographic hierarchy along with harmonious color palettes.
04:09Brand guidelines. This one is about consistency, and it's a concept that every in house or agency designer should pay attention to.
04:16Out of the box, this skill is set up with Anthropic's brand. Their colors, typography, and visual identity rules.
04:23But the real value here isn't Anthropic's brand, of course, because you don't work for Anthropic. You can still just use this skill as a template. So think about what this skill actually does.
04:32It takes a set of brand rules like hex codes, font stacks, spacing values, logo usage, tone, and enforces them automatically across everything Claude generates. 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.
04:49You 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.
05:08You 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.
05:24But 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. Canvas design.
05:38This 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.
05:48And 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.
05:56It 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,
06:10comes up with a creative direction, and then executes it. For things like event posters, social graphics, abstract art for presentations, or visual concepts you want to explore quickly, this is a really interesting tool.
06:20And 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.
06:37UI 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.
06:47Of 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.
06:57You 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
07:04and the workflow is pretty simple. Here's how it works. You tell Claude what you want the skill to do.
07:09Maybe 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. Claude then interviews you. It asks about edge cases, input formats, output expectations,
07:21then it writes a draft of the skill dot m d file. That's the core instruction document. But it doesn't stop there.
07:26It 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.
07:39The anatomy is simple. Every skill is a folder. It has a skill dot m d file at the root.
07:43That'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.
07:56And 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.
08:05So 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.
08:12CTASo 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.
08:44CTASo that's the power of skills. Claude isn't just guessing. It has a design playbook preloaded and it executes with intention.
08:51CTASo 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.
09:07CTABut 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.
09:22As 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.
— full transcript
§ 05 · For Joe
Skills give Claude a design playbook it actually follows.
WHAT TO LEARN
Prompting Claude for UI without a skill installed is asking a generalist to make aesthetic decisions — skills encode the specific standards that prevent generic output.
- Claude's default UI output follows statistical patterns, not design principles — a skill intercepts that and forces purpose, tone, constraints, and differentiation to be resolved before any code runs.
- The instruction to avoid AI slop is explicit and enumerated inside the frontend-design skill, not implicit — this is the model of how to write negative constraints into any AI system prompt.
- The Figma MCP connection is what makes Implement Design actually accurate: without it, Claude is reading a screenshot; with it, Claude is reading the actual spacing tokens and component references.
- Brand consistency through a skill means the enforcement is automatic and upstream — it does not require a designer to review every artifact a marketing or sales person generates.
- Canvas Design separates philosophy from execution: writing a design manifesto first and then generating from it produces more coherent visual output than describing an image directly.
- The Skill Creator's interview loop mirrors the design process itself — requirements gathering, prototyping, testing, and revision cycles — which means designers already know how to use it.
- A finished skill is a portable artifact: one folder, one SKILL.md, shareable as a .skill file — the distribution model is closer to a plugin than a SaaS tool.
