AI and Design Systems: What Actually Works (and What Doesn’t)
40.5K views · 2026-04-27
UI Design
Learn what actually works when using AI with design systems. This video breaks down real workflows using tools like Anthropic’s Claude AI, Figma, and design tokens to help you go from idea to production without the usual AI fluff.
We cover where AI helps, where it fails, and how to structure prompts, components, and systems so outputs are usable in real product design. You’ll see how to use AI for ideation, UI generation, system thinking, and refining components that can actually ship.
If you're a product designer, UX designer, or UI designer trying to build faster without breaking your design system, this is a practical guide to using AI in real workflows.
🔗 KEY LINKS
📣 JOIN THE COMMUNITY: https://uicollective.co/
❎ Follow me on X: https://x.com/KirkMDesign
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/
📣 Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective
Google Stitch: https://stitch.withgoogle.com/
Claude Design: https://claude.ai/design
kirkland@uicollective.co
0:00 An Introduction
0:41 Can AI Build Your Design System
2:02 Generating Buttons with Claude Design
4:19 Figma MCP + Claude Skills Connection
6:16 Pushing Components to Figma
6:44 Reviewing Output in Figma
8:14 Component with Atom Components
10:01 Reviewing Complex Component Output
11:08 Workflow Limitations to Consider
14:26 Design Tokens & Figma Variables
17:52 My AI Design System Workflow
18:46 Training AI on Design Tokens
23:11 Reviewing Claude Skill
24:03 Training AI on Our Design System Components
27:50 Reviewing Components Claude Skill
28:34 Claude Design and Design System Limitations
31:51 Better First Time AI Design Outputs
33:02 Design System Research with Mobbin
34:50 Building Components in Claude Code
38:56 Reviewing Figma Design System Components
40:40 Audit Design System Skill
41:38 Outro
We cover where AI helps, where it fails, and how to structure prompts, components, and systems so outputs are usable in real product design. You’ll see how to use AI for ideation, UI generation, system thinking, and refining components that can actually ship.
If you're a product designer, UX designer, or UI designer trying to build faster without breaking your design system, this is a practical guide to using AI in real workflows.
🔗 KEY LINKS
📣 JOIN THE COMMUNITY: https://uicollective.co/
❎ Follow me on X: https://x.com/KirkMDesign
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/
📣 Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective
Google Stitch: https://stitch.withgoogle.com/
Claude Design: https://claude.ai/design
kirkland@uicollective.co
0:00 An Introduction
0:41 Can AI Build Your Design System
2:02 Generating Buttons with Claude Design
4:19 Figma MCP + Claude Skills Connection
6:16 Pushing Components to Figma
6:44 Reviewing Output in Figma
8:14 Component with Atom Components
10:01 Reviewing Complex Component Output
11:08 Workflow Limitations to Consider
14:26 Design Tokens & Figma Variables
17:52 My AI Design System Workflow
18:46 Training AI on Design Tokens
23:11 Reviewing Claude Skill
24:03 Training AI on Our Design System Components
27:50 Reviewing Components Claude Skill
28:34 Claude Design and Design System Limitations
31:51 Better First Time AI Design Outputs
33:02 Design System Research with Mobbin
34:50 Building Components in Claude Code
38:56 Reviewing Figma Design System Components
40:40 Audit Design System Skill
41:38 Outro