0:00
9:31
9:31

How to Use Claude Skills as a Designer

Tech

Breaking down the BEST Claude Skills for designers — Frontend Design, Implement Design, Brand Guidelines, and more — and showing you how to actually use them in a real design workflow. Skills: Frontend Design: https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md?plain=1 Implement Design: https://mcpservers.org/agent-skills/figma/implement-design Theme Factory: https://mcpservers.org/agent-skills/anthropic/theme-factory Brand Guidelines: https://mcpservers.org/agent-skills/anthropic/brand-guidelines Canvas Design: https://mcpservers.org/agent-skills/anthropic/canvas-design 📩 Business: [email protected] 🌐 https://www.griffinwooldridge.com/ 🔥 My top tools (some are affiliate links – thank you!): Anything – https://anything.link/griffin-wooldridge Mobbin – https://mobbin.com/griffin Granola – https://go.granola.ai/griffin-wooldridge 00:00 – Intro 00:27 – Frontend Design 01:46 – Implement Design 03:17 – Theme Factory 04:09 – Brand Guidelines 05:36 – Canvas Design 06:59 – Create your own 08:11 – Demo 08:44 – Outro #AIDesign #UXDesign #aitools #productdesign

ADVERTISEMENT

Comments 60

Sign in to join the conversation

Sign in
F
franklinvelvet77 1 month ago

It generated a fully functional WP theme for me in like 15 minutes :) Having a theme options page as well to modify anything inside the website. That's pretty powerful.

B
brendanhollow27 1 month, 1 week ago

this was really helpful! Thanks for show how to actually use the skills. I had the idea that you had to install them!! and now I see that you simply "call them" in the prompt 🙃

H
harryjames211 1 month, 1 week ago

Is this only for designers or can I use this without being tech savvy?

H
hans-willi_kallert 1 month, 2 weeks ago

I can't add all of them as I get an error message "This skillname is already in use". What goes wrong here?

V
vincent_webb 1 month, 2 weeks ago

Even chat bots themselves tell you to not give it a complete design to translate to code…

J
james_west 1 month, 3 weeks ago

I did not know Inter font was generic.. I just started using it in my designs..

micheal.turner
micheal.turner 1 month, 3 weeks ago

Skills in Claude sound like a way to extend the model with reusable, purpose-built capabilities, which is basically how modern AI tools are moving toward more modular workflows instead of one-off prompts. I’ve also been testing small design ideas and sharing quick live demos using Tiiny Host to see how these outputs actually behave in practice.

B
bertrand_charpentier 1 month, 3 weeks ago

Is this guy ai?

T
tony_johnson 2 months ago

Can you translate to arabic ,please?

R
robertyadav686 2 months ago

I just tried creating a prototype with frontent-design skill and without. My jaw dropped! Absolute gamechanger.

M
maria_evans 2 months, 1 week ago

Really cool video, Straight to the important points. Thank you. You got yourself a new subscriber.

D
daniela_campos 2 months, 1 week ago

Are these speakers real or AI generated?

M
megan_miller 2 months, 1 week ago

talking too fast to make any sense

L
lilia_medrano 2 months, 1 week ago

Thanks for the video, but I feel that this video is AI generated. I was looking for tutorial to see how to set up Skills in Claude, but the content is not aligned with the video title.

R
raagini_dhar 2 months, 1 week ago

Great video! QQ - I see you code in the web-browser interface of Claude Code. Why not in the terminal?

claude.renard
claude.renard 2 months, 2 weeks ago

I think this video is more like introducing what it can do for design but it's not actually 'How to'.....

abigailbrown482
abigailbrown482 2 months, 2 weeks ago

Great video but not such a great output example.

C
christopherharper955 2 months, 2 weeks ago

Can we also use these skills in codex or are they only limited to claude?

L
leon.mohaupt 2 months, 2 weeks ago

5:17 I want to know more about connecting Figma using MCP

G
graciela_morales 2 months, 3 weeks ago

You have To get the paid version ?