Course curriculum

    1. Welcome!

    2. AI & Design Systems Benefits Infomercial

    3. Course Goals & Outcomes

    4. Who This Course Is For

    5. Meet Your Teachers

    6. Our Collective AI Experience

    7. Principles & Our Approach to AI

    8. What To Expect

    1. 🚧 A quick note about how we're creating this course

    1. Chapter 1 Introduction

    2. How did we get here? A brief history of technology & computing

    3. History of design systems

    4. AI as mortar for design system foundations

    5. Design system definition

    6. A design system's ingredients

    7. The value of design systems

    8. What's hard about design systems?

    9. A Brief History of AI

    10. LLM Overview

    11. LLMs in Action

    12. AI for Digital Product Work

    13. The Value of AI

    14. What's Hard About AI?

    15. Design systems + AI Overview

    16. DS+AI Use Cases

    17. Redefining Digital Process

    18. Tools Orientation Intro

    19. Design System Tools Intro

    20. Figma Intro

    21. Figma Component Walkthrough

    22. Figma Variables Walkthrough

    23. Code and Storybook Intro

    24. Code and Storybook Walkthrough

    25. Publishing a Component Library in Code

    26. Documentation Tools

    27. Design System Tools Summary

    28. AI Tooling Overview Introduction

    29. What are LLMs and how do they work?

    30. What LLMs are not

    31. Major LLM players, overview, and features

    32. How we actually use LLMs

    33. AI Supporting Tools Introduction

    34. Agents

    35. Subagents

    36. MCPs

    37. Why MCPs matter

    38. Skills

    39. How it all connects

    40. AI Tools Recap

    41. Chapter 1 Review

    42. Chapter 1 Homework & Next Steps

    1. Chapter 2 Introduction

    2. Installing Claude Desktop

    3. Installing Cursor

    4. Claude Code

    5. Other Tools

    6. API Keys Introduction

    7. Claude API Keys

    8. OpenAI API Keys

    9. Gemini API Keys

    10. Figma Personal Access Tokens

    11. Configuration Introduction

    12. Configuring Cursor

    13. Installing Figma MCP in Cursor

    14. 🆕 Installing Figma MCP in Claude Desktop

    15. 🆕 Figma MCP Connectors, Plugins, and Skills

    16. Why Git Matters in the AI Age

    17. Git Definition

    18. Installing Git

    19. A Quick Note About Access and Security

    20. Creating a GitHub Account

    21. Installing GitHub CLI

    22. Git Core Concepts Cheat Sheet

    23. Git Demo: Making A New Website

    24. Git Init & Interacting With Git

    25. Git Commit & History

    26. AI-Generated Code & Git Commits

    27. Publishing Respository To GitHub

    28. Adding GitHub Collaborators

    29. Creating A New Branch

    30. Publishing A New Branch

    31. Merging & Pull Requests

    32. Syncing Changes From GitHub

    33. Git Concepts Recap

    34. Creating GitHub Issues

    35. Supercharging GitHub Issues with AI

    36. AI & Design Systems Environments & Tools Resources

    37. Tool Installation Cheat Sheet

    38. Chapter 2 Summary

    39. Chapter 2 Homework & Next Steps

    1. Chapter 3 Introduction

    2. 🆕 Creating Design Systems

    3. 🆕 Soul Patrol Design System Walkthrough

    4. 🆕 The Check Engine Light For Design Systems

    5. 🆕 Auditing Design Systems with AI

    6. 🆕 Introducing & Configuring FigmaLint

    7. 🆕 Analyzing a Component with FigmaLint

    8. 🆕 Fixing Component Issues with FigmaLint

    9. 🆕 Improving Soul Patrol components with FigmaLint

    10. 🆕 Assessment Tools

    11. 🆕 Assessment Considerations

    12. 🆕 Figma MCP - Installing into Claude Desktop App

    13. 🆕 Figma MCP - Installing Into Claude Code in the Terminal

    14. 🆕 Figma MCP - Translating Figma Component into Code

    15. 🆕 Figma MCP - Translating Component Variant in Code Into Figma

    16. 🆕 Figma Console MCP - Install into Claude Code

    17. 🆕 Figma Console MCP - Assessing Component Synchronization in Design and Code

    18. 🆕 Figma Console MCP - Bidirectional Figma and Code Component Changes From Assessment

    19. 🆕 Figma Console MCP - Create New Tokens

    20. 🆕 Figma Console MCP - Implement New Tokens Into Figma Component Library

    21. 🆕 Figma Console MCP - Translate New Tokens Into Code and Storybook

    1. What is the Design Systems Assistant?

    2. Design Systems Assistant Overview

    3. Connecting The Design Systems Assistant to ChatGPT

    4. Documentation: Integrating Grammarly with Design Systems

    5. Using MCP Apps with Figma Console MCP To Analyze Design System

About this course

  • $995.00
  • 182 lessons
  • 24 hours of video content

Discover your potential, starting today

Enroll today