AI + Design Systems: The Honest Truth Nobody’s Telling You
26.3K views · 2026-10-12
UI Design
AI WORKFLOWS & MORE: https://uicollective.co/
Follow me on X: https://x.com/KirkMDesign
Get better at solving design problems (beta): https://designersmash.com/
The honest truth about AI and design systems. We break down Design.md files, Figma components, Figma variables, design tokens, and AI design system syncing. Learn where AI helps, where it falls short, and how to use AI in UX design and product design workflows without buying into the hype.
🔗 OTHER VIDEOS TO WATCH
Learn AI Design: https://youtu.be/r-MPiu0E4W4
Learn Design Systems: https://youtu.be/lsgVRCJ4fko
Complex Design System & Figma Variable Setup: https://youtu.be/L-tpK7Eeuow
Build a Design System (Full Course): https://youtu.be/opTANvl9G1g
Train Claude on Your Design System: https://youtu.be/VezxOhvoXqU
Design to Developer Handoff: https://youtu.be/ALkqhXv0GPk
Multi-Brand Design System Setup: https://youtu.be/EyeO-yWSkYE
🔗 MORE LINKS
➡️ WORK WITH US: We help enterprises make their Design Systems AI ready: https://designsystemlabs.co/
Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective
Need a design system? (also included in the academy): https://collectivekit.co/
kirkland@uicollective.co
0:39 Intro to a Design.md
1:40 How Useful is a Design.md?
2:43 Real World Example of Design.md Flaws
4:26 Where Design Systems Fit Within Claude Design
6:21 AI and Design System Components
10:16 Using AI to Support in Generating Component Layouts
12:56 AI and Design Tokens or Figma Variables
16:18 AI and Design System Typography
19:47 Design System Rules
22:24 Building an AI Skill to Support Design Tokens
25:34 Building an AI Skill to Support Components
29:54 Building an AI Skill to Support Typography
31:05 Spacing and Shape
32:17 Generating Layouts Using Our Design System
34:12 Auditing for Design System Drift
Follow me on X: https://x.com/KirkMDesign
Get better at solving design problems (beta): https://designersmash.com/
The honest truth about AI and design systems. We break down Design.md files, Figma components, Figma variables, design tokens, and AI design system syncing. Learn where AI helps, where it falls short, and how to use AI in UX design and product design workflows without buying into the hype.
🔗 OTHER VIDEOS TO WATCH
Learn AI Design: https://youtu.be/r-MPiu0E4W4
Learn Design Systems: https://youtu.be/lsgVRCJ4fko
Complex Design System & Figma Variable Setup: https://youtu.be/L-tpK7Eeuow
Build a Design System (Full Course): https://youtu.be/opTANvl9G1g
Train Claude on Your Design System: https://youtu.be/VezxOhvoXqU
Design to Developer Handoff: https://youtu.be/ALkqhXv0GPk
Multi-Brand Design System Setup: https://youtu.be/EyeO-yWSkYE
🔗 MORE LINKS
➡️ WORK WITH US: We help enterprises make their Design Systems AI ready: https://designsystemlabs.co/
Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective
Need a design system? (also included in the academy): https://collectivekit.co/
kirkland@uicollective.co
0:39 Intro to a Design.md
1:40 How Useful is a Design.md?
2:43 Real World Example of Design.md Flaws
4:26 Where Design Systems Fit Within Claude Design
6:21 AI and Design System Components
10:16 Using AI to Support in Generating Component Layouts
12:56 AI and Design Tokens or Figma Variables
16:18 AI and Design System Typography
19:47 Design System Rules
22:24 Building an AI Skill to Support Design Tokens
25:34 Building an AI Skill to Support Components
29:54 Building an AI Skill to Support Typography
31:05 Spacing and Shape
32:17 Generating Layouts Using Our Design System
34:12 Auditing for Design System Drift