AI & Design Systems

8h 15m 18s
English
Paid

Unlock the future of digital product creation with our advanced course focused on AI and design systems. This course delves into essential concepts, cutting-edge technologies, and effective implementation strategies to enhance your skills in today’s dynamic environment.

This program is tailored for all professionals who impact the success of digital products within their organization. Whether you function as a designer, developer, product owner, manager, or leader, you'll gain an in-depth understanding of how AI integrates with design systems to elevate digital product quality. Our course seamlessly blends foundational knowledge with detailed practical insights to ensure you can proficiently navigate this subject matter.

Course Benefits

By enrolling in and completing this course, you will be equipped to:

  • Navigate the AI Landscape: Distinguish the true value of AI amidst the noise and stay ahead in the ever-evolving AI domain.
  • Utilize Critical Design Infrastructure: Understand the pivotal role of design systems in the AI-driven setting.
  • Enhance Product Creation: Become adept at leveraging the synergy between AI and design systems to craft superior digital products.
  • Accelerate AI Adoption: Employ architecture models and case studies to foster AI and design systems' integration.
  • Transform Team Dynamics: Streamline workflows and boost efficiency without reducing product quality.
  • Enhance Collaboration: Bridge designers and developers through shared concepts, languages, and frameworks.
  • Optimize Resource Usage: Effectively synchronize diverse environments, tools, and project components to save time and effort.

Course Structure

The course is self-paced and enriched with comprehensive video lessons that blend strategic theories with hands-on applications, exemplifying how AI and design systems are mutually advantageous. Below is a breakdown of the chapters covered:

Chapter 1: AI + Design Systems

Explore foundational concepts and interaction models that enhance the efficiency, consistency, and quality of digital products through AI and design systems.

Chapter 2: Technologies and Tools

Gain insight into the rapidly evolving landscape of technologies and tools within the realms of AI and design systems, equipping you for future challenges.

Chapter 3: Environments and Setup

Learn to integrate AI within design platforms, development environments, documentation processes, and other vital elements throughout the product lifecycle.

Chapter 4: Contextual Workflow of Design Systems

Master the utilization of AI for component creation, design artifact verification, translatory design-to-code processes, implementation validation, and accelerating high-quality deliverables.

Chapter 5: System Support and Readiness for Change

Develop a culture of adaptability and resilience to thrive in a constantly changing environment, ensuring your team is always ready for transformation.

About the Authors

Brad Frost

Brad Frost thumbnail

Hello! My name is Brad Frost - I am a design systems consultant, frontend developer, teacher, speaker, writer, musician, and artist. I am incredibly passionate about the web, creativity, and how people can come together to create amazing digital products.

Throughout my career, I have helped numerous teams build and develop design systems, combining solid architecture with more open processes and a collaborative culture. I am the author of the Atomic Design methodology and the book of the same name, in which I explain how to create and maintain effective design systems. I have been involved in many projects related to design systems: co-author of the Style podcast, creator of Pattern Lab, curator of Styleguides.io, author of Style Guide Guide, and more.

I love creating, and equally enjoy sharing knowledge. Conference talks, workshops, trainings, seminars, my blog, and my book have helped hundreds of thousands of designers and developers around the world learn best practices for working with design systems.

I live in beautiful Pittsburgh, Pennsylvania, with my wife, my daughter Ella, and our French bulldog named Butzi. When I'm not immersed in the world of design tokens, you can find me with musical instruments or engaged in any creative activity - I strive to take every opportunity to create something.

Ian Frost

Ian Frost thumbnail
Hello! My name is Ian Frost, and I am Brad's younger brother. I am a frontend architect, tech lead, and consultant with a passion for helping developers grow and evolve. Since 2015, I've been working on design systems alongside Brad. During this time, I've had the opportunity to build design systems using a variety of technologies: Web Components, React, Angular, Vue, and more. I've collaborated with tech leads, developers, and designers from multiple organizations, assisting them in creating, implementing, and maintaining a robust architecture for design systems and tokens. This work is both a science and an art, and I'm eager to share the lessons we've learned to make your life easier. Before I became a web developer, I worked as a professional meteorologist. And when I'm not writing code or forecasting snow, you can find me playing musical instruments, on a sports field, or spending time with my family – my wife and son.

TJ Pitre

TJ Pitre thumbnail

I am a frontend engineer, design system architect, and founder of Southleft. For two decades, I have been helping product teams transform complex interfaces into reliable, scalable systems compatible with various brands, platforms, and teams. I enjoy creating interfaces that are both flexible and resilient.

In recent years, I've been focused on how artificial intelligence can accelerate the journey from design to development. I create generative UI prototypes and tools that help teams build real interfaces based on design systems, verify the correctness of tokens and component structures, and maintain high-quality standards with less cost. I regularly share this experience through demos, talks, and collaborative projects, exploring how AI enhances existing digital product creation processes.

I live in New Orleans with my wife and three children. When I'm not working on a new project, you can find me in the kitchen, workshop, or searching for the next exciting idea.

Watch Online 48 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 48 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 001 Intro 1080p
All Course Lessons (48)
#Lesson TitleDurationAccess
1
001 Intro 1080p Demo
00:58
2
002 Our Design Systems and AI Experience 1080p
03:49
3
003 Grounded in Reality and Respect 1080p
02:39
4
004 Moving Beyond the AI Hype Cycle 1080p
01:34
5
005 Course Outline 1080p
04:23
6
006 Join The Community 1080p
01:30
7
007 Who This Course Is For 1080p
02:20
8
008 Nuance and Responsibility around AI 1080p
03:58
9
009 Expectations and Next Steps 1080p
01:29
10
010 AI that knows (and uses) your design system 1080p
01:01:15
11
011 01 - Agentic Design Systems in 2026 with Storybook - Intro from Dominic Nguyen 1080p
11:59
12
012 02 - Agentic Design Systems in 2026 - Storybook MCP 720p
08:55
13
013 Into Design Systems - Vibe Coding Jam November 2025 720p
02:04:21
14
014 Part 1 Why Figma Console MCP 540p
07:58
15
015 Part 2 From System-Wide Awareness to Pinpoint Precision 720p
09:23
16
016 Part 3 Figma Console MCP vs. Dev Mode MCP – Component Creation 720p
09:50
17
017 Part 4 Unlocking Full Variable Access 540p
08:01
18
018 Part 5 Plugin Development and AI Feedback Loops 540p
07:30
19
019 Figma MCP → Web Components → React Storybook → Story UI 540p
06:38
20
020 Using Claude Desktop with Figma MCP, Story UI, and Design Systems Assistant 720p
06:15
21
021 Generate Stories in Story UI using Claude Desktop 540p
07:19
22
022 Installing Story UI Into Existing Custom Design System in Storybook 720p
10:11
23
023 Using Figma MCP with Claude Code
08:21
24
024 Design Systems Assistant Overview
02:48
25
025 Connecting The Design Systems Assistant to ChatGPT
07:22
26
026 Documentation Integrating Grammarly with Design Systems
08:20
27
027 Using MCP Apps with Figma Console MCP To Analyze Design System
07:34
28
028 Linting Components with FigmaLint
08:45
29
029 Figma Lint AI Model Integration and Features
11:01
30
030 Installing Figma Console MCP
08:26
31
031 Using the Figma Console MCP Effectively
14:17
32
032 Figma Console MCP Capabilities
13:47
33
033 Using Figma Console MCP for Enterprise Design System Applications
10:04
34
034 Implementing Code-Only Props Technique with Figma Console MCP
06:08
35
035 Figma Console MCP Design To Code Demo
11:48
36
036 Figma Console MCP Code To Design - Fixing Drift
08:47
37
037 Story UI and Claude Desktop
06:15
38
038 Cursor Features and Story UI
07:13
39
039 Using the Figma MCP and Design Systems Assistant
06:40
40
040 Understanding AI-Generated Interfaces with A2UI
19:45
41
041 Welcome!
00:26
42
042 AI & Design Systems Benefits Infomercial
00:37
43
043 Course Goals & Outcomes
01:43
44
044 Who This Course Is For
01:47
45
045 Meet Your Teachers
03:09
46
046 Our Collective AI Experience
01:27
47
047 Principles & Our Approach to AI
13:26
48
048 What To Expect
03:07
Unlock unlimited learning

Get instant access to all 47 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription