New live course
The problem
Figma UI
Coded UI
The shift
What you will build
Live and cohort based
The method
What you will learn
Set the direction and start building immediately.
Design Systems Have a New User
Understand why AI changes the role of a Design System without turning the session into abstract AI theory.
You leave with: 8 to 12 labeled scenarios and a recorded baseline, scored for valid code and for the right component choice.
Define the System We Will Build
Turn the course into a real system project, and decide which artifact wins when two disagree.
You leave with: A project definition, an architecture plan, and a written authority model.
Prototype the First System Slice
End the first week with something tangible.
You leave with: A first working slice, a list of context gaps, and the agent's behavior against it on record.
Build foundations that people and AI can understand.
Tokens, Semantics, and Naming
Understand how to create a token model that communicates intent.
You leave with: An agreed token taxonomy, with a documented authority for each layer.
Build the Foundation in Figma
Implement the token architecture as Figma variables.
You leave with: Working Figma foundations, traceable to the code tokens they correspond to.
Component Architecture for Humans and AI
Create components with predictable APIs and boundaries.
You leave with: A Figma component library and an API inventory that says when each component is the wrong choice.
Connect design, AI, repositories, and code.
Connect Figma and AI
Give AI structured access to the actual design.
You leave with: A working Figma to agent connection, and a clear line between what it exposes and what it guarantees.
Code for Designers
Make the codebase understandable without teaching a frontend development course.
You leave with: You can navigate the repository and explain how a component is represented in code.
Git, GitHub, and GitLab
Understand safe version-controlled workflows.
You leave with: A repository, a review workflow, and one deliberate drift reconciled through a reviewed diff.
Turn the system into production components.
Build with shadcn
Understand why shadcn is a useful foundation for a custom AI-era Design System.
You leave with: A working shadcn setup aligned to the project, and a decided format for component contracts.
Build and Customize Components
Implement the core Design System in code, four to six components verified properly rather than ten described.
You leave with: A component library with contracts, negative cases that fail on purpose, and one wrong choice they cannot catch.
Build the shadcn Registry
Make the system distributable and discoverable.
You leave with: A working custom registry that distributes the contracts alongside the components.
Make the system understandable to people and AI.
Storybook as the System Interface
Document the implementation so people can understand and use components correctly.
You leave with: A documented Storybook, its stories working as executable usage examples.
Storybook for Humans and AI
Turn documentation into structured context agents can consume.
You leave with: An AI-accessible Storybook workflow and a harness scoring compliance, component choice and experience apart.
Teach AI Your Design System
Create persistent rules so you do not need to repeat the same instructions in every prompt.
You leave with: A persistent AI instruction layer, revised from a failure you measured.
Use the system for real product work, then learn how to keep it healthy.
Build a Product with AI
Test whether AI can actually use the Design System instead of inventing UI.
You leave with: A real product interface built from the registry, scored as it is built.
Maintain the System with AI
Use AI as a maintenance and auditing assistant.
You leave with: An AI-assisted maintenance toolkit, with drift and regression checks that run on change.
Governance, Evolution, and Final Presentation
Define how AI participates in the system after the course and present the completed work.
You leave with: A completed capstone, a before and after scorecard on all three levels, and a governance model with risk tiers.
Part-time training
The teacher
The toolchain
- FigmaDesign Tokens
- Figma MCP · BridgeClaude
- React + ShadCNStorybook + MCP
- GitGithub · Gitlab
Who it’s for
- Product Designers
- Principal · Staff Designers
- Design Systems Leads
- Product & Design Directors
Pricing
Have any question?
The course is designed primarily for Product Designers, Design System Designers, and Design System Leads who already understand the basics of Design Systems and want to learn how to build and operate them in an AI-assisted product workflow.
It is particularly relevant if you want to become more technical without becoming a full-time developer.
The course is intermediate. You should already be comfortable working in Figma and understand basic concepts such as components, variants, Auto Layout, variables, and Design Systems.
We will not spend the course teaching Figma fundamentals from scratch.
No. This is not a programming bootcamp, and no React or Git experience is assumed.
You will work with code, repositories, React components, Git, and AI-generated changes, but the objective is to teach the technical concepts a designer needs to understand, direct, and review the work. You are not expected to become a frontend engineer during the course.
What the course does assume is intermediate Figma and Design System skill: variables, components, variants, and the reasoning behind a token model. That is the level week one starts from.
The practical workflow is designed around Claude and Codex. We will also use integrations such as Figma MCP and Storybook MCP where appropriate.
The principles are more important than any single AI product, so the course is designed to remain useful as tools evolve.
An agentic Design System is a system structured so AI agents can do more than generate random UI.
Agents can inspect the system, understand approved components and tokens, read documentation and rules, help build product interfaces, validate work, and assist with maintenance. Human judgment and governance remain central.
You will build one complete Design System project throughout the six weeks rather than completing disconnected exercises. The project will include:
- Figma foundations
- Primitive and semantic tokens
- Reusable components
- A code repository
- shadcn-based components
- A custom component registry
- Storybook documentation
- AI instructions
- MCP integrations
- A real product interface
- AI-assisted maintenance workflows
- A governance model
The course runs for six weeks. There are three live sessions every week.
Plan for approximately two hours of independent project work per week, plus additional time to complete the final capstone.
The current estimate is approximately 52 to 54 total hours across the full program, including the 36 live teaching hours.
Students who successfully complete the required final project receive the Certified AI Design Systems Practitioner certification.
The intention is for it to reflect demonstrated practical competency rather than simply attendance.
The capstone is judged on evidence rather than effort: a working product interface built from your own registry, your component contracts and the checks they pass and fail, a comparison of how an agent handled the same task in week one and week six, at least one documented improvement, and an honest account of what still does not work.
The program is live, project-based, and focused specifically on Design Systems. Students build one system over six weeks, receive direct feedback, troubleshoot real implementation issues, compare approaches with other practitioners, and finish with a capstone rather than only watching tutorials.
The value is direct teaching, cohort interaction, practical system-building, and deep Design System expertise applied to AI.