Claude Code for Designers: All the Ways to Use It
Try Claude Opus 4.7 for AI design workflows: https://clau.de/UICollective
Learn senior design skills and more: https://uicollective.co/
Designers are using Claude Code for UI, but the bigger opportunity is everything around the design work.
In this video, I break down how Claude Code, Claude Skills, and Claude Routines can help designers speed up design system work, developer handoff, component docs, design audits, accessibility checks, type scales, Figma variables, and design tokens.
This is not about replacing Figma or becoming a developer. It’s about using Claude Opus 4.7 as a workflow layer for the time-consuming parts of product design, UX design, UI design, and design systems work.
🔗OTHER KEY LINKS
📣 LEARN AI WORKFLOWS AND JOIN THE COMMUNITY: https://uicollective.co/
❎ Follow me on X: https://x.com/KirkMDesign
Design with AI - Full Guide: https://youtu.be/j_ZPV10bu54
Why Join UI Collective Academy? Get access to premium courses, premium downloads, and so much more on the way (I am largely building this solo...trying to make design education available for all, support goes a long way!)
↪️ Need a design system? (also included in the academy): https://collectivekit.co/
🔗 OTHER SYSTEM VIDEOS TO WATCH
Build a Design System: https://youtu.be/opTANvl9G1g
Complex Design System & Figma Variable Setup: https://youtu.be/L-tpK7Eeuow
Claude Design Video: https://youtu.be/eXlSgQmz02E
🔗 MORE LINKS
Let us build or fix your design system: https://designsystemlabs.co/
kirkland@uicollective.co
Figma Skills: https://www.figma.com/community/skills
This video is sponsored by Anthropic
@claude
#ClaudePartner
0:00 An Introduction
0:50 Why You Should Learn These Processes
2:21 Getting Started with Documentation
5:15 Building Component Documentation Claude Skill
9:33 Building a Claude Routine to Update Component Documentation
12:47 Figma Skills & Figma MCP Connection
15:37 Generating Component Documentation
17:55 Testing the Claude Routine
19:52 Building Developer Handoff Documentation Claude Skill
23:12 Building the Routine and Testing the Workflow
25:58 Auditing of Designs with Claude Code
30:02 Results of AI Design Audit
32:01 Accessibility with Claude Code
34:29 Accessibility Report
35:50 Generating Type Scales
38:52 Generating Figma Variables and Collections
43:13 Claude Code Limitations with Figma Variables and Design Systems
47:59 Using Claude Code to Build Design Tokens in JSON Format
51:12 Outro
Learn senior design skills and more: https://uicollective.co/
Designers are using Claude Code for UI, but the bigger opportunity is everything around the design work.
In this video, I break down how Claude Code, Claude Skills, and Claude Routines can help designers speed up design system work, developer handoff, component docs, design audits, accessibility checks, type scales, Figma variables, and design tokens.
This is not about replacing Figma or becoming a developer. It’s about using Claude Opus 4.7 as a workflow layer for the time-consuming parts of product design, UX design, UI design, and design systems work.
🔗OTHER KEY LINKS
📣 LEARN AI WORKFLOWS AND JOIN THE COMMUNITY: https://uicollective.co/
❎ Follow me on X: https://x.com/KirkMDesign
Design with AI - Full Guide: https://youtu.be/j_ZPV10bu54
Why Join UI Collective Academy? Get access to premium courses, premium downloads, and so much more on the way (I am largely building this solo...trying to make design education available for all, support goes a long way!)
↪️ Need a design system? (also included in the academy): https://collectivekit.co/
🔗 OTHER SYSTEM VIDEOS TO WATCH
Build a Design System: https://youtu.be/opTANvl9G1g
Complex Design System & Figma Variable Setup: https://youtu.be/L-tpK7Eeuow
Claude Design Video: https://youtu.be/eXlSgQmz02E
🔗 MORE LINKS
Let us build or fix your design system: https://designsystemlabs.co/
kirkland@uicollective.co
Figma Skills: https://www.figma.com/community/skills
This video is sponsored by Anthropic
@claude
#ClaudePartner
0:00 An Introduction
0:50 Why You Should Learn These Processes
2:21 Getting Started with Documentation
5:15 Building Component Documentation Claude Skill
9:33 Building a Claude Routine to Update Component Documentation
12:47 Figma Skills & Figma MCP Connection
15:37 Generating Component Documentation
17:55 Testing the Claude Routine
19:52 Building Developer Handoff Documentation Claude Skill
23:12 Building the Routine and Testing the Workflow
25:58 Auditing of Designs with Claude Code
30:02 Results of AI Design Audit
32:01 Accessibility with Claude Code
34:29 Accessibility Report
35:50 Generating Type Scales
38:52 Generating Figma Variables and Collections
43:13 Claude Code Limitations with Figma Variables and Design Systems
47:59 Using Claude Code to Build Design Tokens in JSON Format
51:12 Outro