04 Learning Path · 12 lessons

Design System Automation

Token audits, naming conventions, and component reviews with AI.

Start with lesson 01 ← All paths

What you'll learn

  • ✓ Compare token naming conventions from 7 systems
  • ✓ Build a reusable token naming audit skill
  • ✓ Catch token drift with a parity check
  • ✓ Run component audits at scale

About this path

The maintenance side of design systems is where AI pays back the most. This path covers token naming across the industry, audit skills you can reuse on any system, and a parity check that catches drift before it ships.

In this path

12 lessons
  1. 01

    Design Token Naming: 7 Systems Compared

    How Polaris, Carbon, Primer, Material Design, Lightning, Spectrum, and Fluent name their tokens. Side-by-side comparison with patterns, examples, and what to steal for your system.
  2. 02

    Build a Token Naming Audit Skill for Claude Code

    A reusable Claude Code skill that checks every token in your design system against your naming convention. One slash command, instant audit.
  3. 03

    Build a Token Parity Check Skill for Claude Code

    A Claude Code skill that compares your tokens between Figma and code. Catches drift before it ships, with one slash command.
  4. 04

    Build a Component Audit Skill for Claude Code

    A Claude Code skill that audits every component in your library. Checks docs, props, accessibility, and token usage in one slash command.
  5. 05

    Audit 500 Components in 10 Minutes

    A complete workflow for auditing your entire Figma component library using Tidy and Claude. Identifies naming issues, missing descriptions, and inconsistencies.
  6. 06

    Few-Shot Examples for Component Naming

    How I label 20 component names by hand and get Claude to pattern-match the rest. Practical setup for component naming, token naming, and any classification task.
  7. 07

    Build a Token Pipeline with Style Dictionary

    Transform design tokens from JSON to CSS, iOS, Android in one command. One source of truth, every platform covered.
  8. 08

    Run a Token Naming Audit with AI

    Use Claude Code, Codex, Cursor, or another repo-aware AI tool to scan your token files, flag naming inconsistencies, and generate a clean naming convention in minutes.
  9. 09

    Generate Component Documentation with AI

    Use Claude Code, Codex, Cursor, or another repo-aware AI tool to scan your component library and generate specs, props tables, and usage guidelines in minutes.
  10. 10

    Set Up a Design System Adoption Tracker

    Build a simple tracking system to measure component usage across products and prove your design system's impact.
  11. 11

    Build a Design System Pitch Deck with AI

    Use Claude to generate a compelling pitch deck that gets leadership buy-in for your design system investment.
  12. 12

    Create a One-Page Design System Strategy

    Use AI to distill your design system vision, principles, priorities, and success metrics onto a single page that aligns your entire team.

Ready to start?

Begin with lesson 01: Design Token Naming: 7 Systems Compared

Start path

Explore other paths

00

AI Design Starter Path

A plain-language beginner path from first setup to your first agent-ready design system context.
01

Beginner AI Setup

Your first week with AI design tools. From zero to working setup.
02

Claude Code

Install Claude Code, pick the right surface, and teach it your team rules with custom skills.
03

Visual Direction & Style

Stop saying "make it premium." Learn to give AI real visual direction.
05

Automation for DS Teams

GitHub Actions, browser automation, and overnight pipelines that run while you sleep.
06

Codex for Designers

Set up Codex, teach it your project rules, and turn repeatable design QA into reusable skills.
07

Agentic Design Systems

Make your design system readable by AI agents and coding tools.
08

Motion & Animation

A simple, hands-on path for UI motion: learn the vocabulary, then practice the core moves with interactive demos.