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. 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 Repository 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. Demo Design Systems Introduction

    4. The Check Engine Light For Design Systems

    5. How AI Can Help With Assessing A Design System

    6. Design System Inspection Qualities

    7. Design System Inspection Stations

    8. Installing & Using The DS Inspection Kit

    9. Station 1: Coverage & Gaps

    10. Figma MCP - Installing into Claude Desktop App

    11. Figma MCP - Installing Into Claude Code in the Terminal

    12. Figma MCP - Translating Figma Component into Code

    13. Figma MCP - Translating Component Variant in Code Into Figma

    14. Eddie: Clarifying Architecture, Finding More Gaps, and Capturing Tickets

    15. Eddie: Building a Loading State Button

    16. Station 1: Review & Considerations

    17. Station 2: Best Practices

    18. Introducing & Configuring FigmaLint

    19. Analyzing a Component with FigmaLint

    20. Fixing Component Issues with FigmaLint

    21. Improving Soul Patrol components with FigmaLint

    22. Figma Console MCP - Install into Claude Code

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

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

    25. Figma Console MCP - Create New Tokens

    26. Figma Console MCP - Implement New Tokens Into Figma Component Library

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

    28. Eddie: Fixing the Danger Button Dead Prop

    29. Station 2: Recap & Considerations

    30. Station 3: Accessibility

    31. Eddie: Fixing Modal Focus Trap

    32. Station 3: Accessibility Recap & Considerations

    33. Station 4: Shared Language

    34. Eddie: Normalizing Shared Language with Knockout

    35. Station 4: Shared Language Recap & Considerations

    36. Station 5: Testing & Validation

    37. Deterministic and Agentic testing with FigmaLint

    38. Evals Testing

    39. Playwright Testing & Self-Healing Loops

    40. Eddie: Closing Keyboard & Behavioral Testing Gaps

    41. Station 5: Testing & Validation Recap & Considerations

    42. Station 6: Orchestration

    43. 🆕 Context-Based Design Systems Overview

    44. Eddie: Fixing Synchronization in Knowledge Graph & CLAUDE.md

    45. Station 6: Orchestration Recap & Considerations

    46. Station 7: Governance & Version Control

    47. Eddie: Improving Governance with Branch Protection and PR Template

    48. Eddie: Using Figma Console MCP to Create Eddie-s Governance Diagram

    49. Station 7: Governance & Version Control Recap & Considerations

    50. Station 8: Feedback & Adoption

    51. Eddie: Feedback & Adoption

    52. Station 8: Feedback & Adoption Recap & Considerations

    53. Station 9: Machine Readable Docs & Context

    54. Company Docs and Figma MCP Tools

    55. Generating documentation from Figma with Company Docs

    56. Eddie: Fix Machine-Readable Docs & Context

    57. Station 9: Machine Readable Docs & Context Recap & Considerations

    58. Station 10: Agent Access

    59. Publishing docs via Mintlify

    60. Publishing & Using Company Docs MCP

    61. Eddie: Publishing Eddie-Brain MCP

    62. Station 10: Agent Access Recap & Considerations

    63. Eddie: Drumroll, Please! New DS Inspection Results

    64. Chapter 3 Summary, Homework, and Next Steps

    1. Chapter 4 Introduction

    2. 🆕 Types of Product Work & The Redefined Process

    3. 🆕 Discovery & Strategy

    4. bradfrost.com - Introducing The Redesign Project

    5. bradfrost.com - Introducing bfw-process and SPEC

    6. bradfrost.com - Reviewing The Project SPEC

    7. bradfrost.com - Installing and Running the Product Inspection

    8. bradfrost.com - Product Inspection Results & Work Order

    9. 🆕 Discovery & Strategy Recap and Considerations

    10. 🆕 Experience Design

    11. 🆕 Static Artifacts in the AI Age

    12. Using Figma MCP to Generate a DS-Powered Login Page

    13. Building a Soul Patrol Page in Figma Using the Figma MCP and Claude Skill

    14. 🆕 Static Artifacts Recap & Considerations

    15. 🆕 Prototyping

    16. 🆕 Prototyping Without The Design System

    17. Head to Head AI Prototyping Showdown

    18. Figma Make

    19. Bolt

    20. v0

    21. Claude Design

    22. Lovable

    23. Prototyping Wrap Up & Other Options

    24. 🆕 Prototyping Without The Design Recap & Considerations

    25. 🆕 Prototyping With the Design System

    26. bradfrost.com - Generating A Footer With And Without System Guardrails

    27. bradfrost.com - Keeping Product On The Eddie Rails: Multi-Phase bfw-process, Settings, Rules, & Validation

    28. Story UI with Soul Patrol Design System Introduction

    29. Installing Story UI into Soul Patrol Design System

    30. Using Story UI to Create Sign In Page

    31. Introducing Storybook MCP

    32. Installing & Configuring Storybook MCP

    33. Running Storybook MCP

    34. Generating a Login Form with Storybook MCP

    35. Design System Extraction from Production Application

    36. 🆕 Prototyping With the Design System Recap

    37. 🆕 Design Phase Recap

    38. 🆕 Engineering & Infrastructure

    39. 🆕 The Steel Curtain

    40. 🆕 Engineering Demos

    41. 🆕 Ongoing Feature Work

    42. Translating Soul Patrol Page from Figma into Code Using the Figma Console MCP

    43. 🆕 Greenfield Work

    44. 🆕 Legacy Product Work

    45. bradfrost.com - Fixing the most urgent inspection issues with Declarative Shadow DOM

    46. bradfrost.com - Adopting the Eddie page shell, header, and footer

    47. bradfrost.com - Creating an adoption plan and getting quick wins

    48. bradfrost.com - Improving the article template

    49. bradfrost.com - Timeline component adoption

    50. bradfrost.com - Full Eddie Adoption Walkthrough & Recap

    51. 🆕 Rebrands & Rethemes

    52. Add Dark Mode To Soul Patrol Across Platforms With Figma Console MCP, Skills, and Scripts

    53. 🆕 Engineering Recap & Considerations

    54. 🆕 Chapter 4 Summary, Homework, and Next Steps

    1. Chapter 5 Introduction

    2. 🆕 Agents As Users

    3. 🆕 Generative UI

    4. Understanding AI-Generated Interfaces with A2UI

    5. 🆕 Generative UI Demo - DS+AI Course Resources Website

    6. 🆕 Generative UI Recap & Considerations

    7. 🆕 Hyperpersonalization

    8. 🆕 Hyper-Personalized Website Browser Plugin Demo

    9. 🆕 Hyperpersonalization Recap & Considerations

    10. 🆕 The Future is Wide Open

    11. 🆕 Speech-To-Text Accounting App Demo

    12. 🆕 Realtime UI Demo

    13. 🆕 Exploring The Creative Infinite

    14. 🆕 The Future is Wide Open Recap & Considerations

    15. 🆕 Chapter 5 Summary, Homework, and Next Steps

About this course

  • $995.00
  • 290 lessons
  • 40.5 hours of video content