Welcome!

AI & Design Systems Benefits Infomercial

Course Goals & Outcomes

Who This Course Is For

Meet Your Teachers

Our Collective AI Experience

Principles & Our Approach to AI

What To Expect

Chapter 1 Introduction

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

History of design systems

AI as mortar for design system foundations

Design system definition

A design system's ingredients

The value of design systems

What's Hard About Design Systems?

A Brief History of AI

LLM Overview

LLMs in Action

AI for Digital Product Work

The Value of AI

What's Hard About AI?

Design systems + AI Overview

DS+AI Use Cases

Redefining Digital Process

Tools Orientation Intro

Design System Tools Intro

Figma Intro

Figma Component Walkthrough

Figma Variables Walkthrough

Code and Storybook Intro

Code and Storybook Walkthrough

Publishing a Component Library in Code

Documentation Tools

Design System Tools Summary

AI Tooling Overview Introduction

What are LLMs and how do they work?

What LLMs are not

Major LLM players, overview, and features

How we actually use LLMs

AI Supporting Tools Introduction

Agents

Subagents

MCPs

Why MCPs matter

Skills

How it all connects

AI Tools Recap

Chapter 1 Review

Chapter 1 Homework & Next Steps

Chapter 2 Introduction

Installing Claude Desktop

Installing Cursor

Claude Code

Other Tools

API Keys Introduction

Claude API Keys

OpenAI API Keys

Gemini API Keys

Figma Personal Access Tokens

Configuration Introduction

Configuring Cursor

Installing Figma MCP in Cursor

Installing Figma MCP in Claude Desktop

Figma MCP Connectors, Plugins, and Skills

Why Git Matters in the AI Age

Git Definition

Installing Git

A Quick Note About Access and Security

Creating a GitHub Account

Installing GitHub CLI

Git Core Concepts Cheat Sheet

Git Demo: Making A New Website

Git Init & Interacting With Git

Git Commit & History

AI-Generated Code & Git Commits

Publishing Respository To GitHub

Adding GitHub Collaborators

Creating A New Branch

Publishing A New Branch

Merging & Pull Requests

Syncing Changes From GitHub

Git Concepts Recap

Creating GitHub Issues

Supercharging GitHub Issues with AI

AI & Design Systems Environments & Tools Resources

Tool Installation Cheat Sheet

Chapter 2 Summary

Chapter 2 Homework & Next Steps

Chapter 3 Introduction

🆕 Creating Design Systems

🆕 Demo Design Systems Introduction

🆕 The Check Engine Light For Design Systems

🆕 How AI Can Help With Asessing A Design System

🆕 Design System Inspection Qualities

🆕 Design System Inspection Stations

🆕 Installing & Using The DS Inspection Kit

🆕 Station 1: Coverage & Gaps

Figma MCP - Installing into Claude Desktop App

Figma MCP - Installing Into Claude Code in the Terminal

Figma MCP - Translating Figma Component into Code

Figma MCP - Translating Component Variant in Code Into Figma

🆕 Eddie: Clarifying Architecture, Finding More Gaps, and Capturing Tickets

🆕 Eddie: Building a Loading State Button

🆕 Station 1: Review & Considerations

🆕 Station 2: Best Practices

Introducing & Configuring FigmaLint

Analyzing a Component with FigmaLint

Fixing Component Issues with FigmaLint

Improving Soul Patrol components with FigmaLint

Figma Console MCP - Install into Claude Code

Figma Console MCP - Assessing Component Synchronization in Design and Code

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

Figma Console MCP - Create New Tokens

Figma Console MCP - Implement New Tokens Into Figma Component Library

Figma Console MCP - Translate New Tokens Into Code and Storybook

🆕 Eddie: Fixing the Danger Button Dead Prop

🆕 Station 2: Recap & Considerations

🆕 Station 3: Accessibility

🆕 Eddie: Fixing Modal Focus Trap

🆕 Station 3: Accessibility Recap & Considerations

🆕 Station 4: Shared Language

🆕 Eddie: Normalizing Shared Language with Knockout

🆕 Station 4: Shared Language Recap & Considerations

🆕 Station 5: Testing & Validation

🆕 Deterministic and Agentic testing with FigmaLint

🆕 Evals Testing

🆕 Playwright Testing & Self-Healing Loops

🆕 Eddie: Closing Keyboard & Behavioral Testing Gaps

🆕 Station 5: Testing & Validation Recap & Considerations

🆕 Station 6: Orchestration

🆕 Eddie: Fixing Synchronization in Knowledge Graph & CLAUDE

🆕 Station 6: Orchestration Recap & Considerations

🆕 Station 7: Governance & Version Control

🆕 Eddie: Improving Governance with Branch Protection and PR Template

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

🆕 Station 7: Governance & Version Control Recap & Considerations

🆕 Station 8: Feedback & Adoption

🆕 Eddie: Feedback & Adoption

🆕 Station 8: Feedback & Adoption Recap & Considerations

🆕 Station 9: Machine Readable Docs & Context

Company Docs and Figma MCP Tools

Generating documentation from Figma with Company Docs

🆕 Eddie: Fix Machine-Readable Docs & Context

🆕 Station 9: Machine Readable Docs & Context Recap & Considerations

🆕 Station 10: Agent Access

🆕 Publishing docs via Mintlify

🆕 Publishing & Using Company Docs MCP

🆕 Eddie: Publishing Eddie-Brain MCP

🆕 Station 10: Agent Access Recap & Considerations

🆕 Eddie: Drumroll, Please! New DS Inspection Results

🆕 Chapter 3 Summary, Homework, and Next Steps

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

Chapter 4 Introduction

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

🆕 Using Figma MCP to Generate a DS-Powered Login Page

Story UI with Soul Patrol Design System Introduction

Installing Story UI into Soul Patrol Design System

Using Story UI to Create Sign In Page

🆕 Introducing Storybook MCP

🆕 Installing & Configuring Storybook MCP

🆕 Running Storybook MCP

🆕 Generating a Login Form with Storybook MCP

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

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