Generative Design Systems With React
summary
Built a cascade of small generators that produce concrete CSS values (a working box shadow generator, color generators that handle lab and lsv spaces, gradient and text‑shadow generators) and compose them with React components into a full design system called Components AI Studio. Generation uses simple algorithms — most values come from math.random ranges — and composition is multiplicative: adding one generator creates combinatorial variants across the system. Contrast and accessibility checks are implemented as constraints; the studio loads, generates, edits, and exports usable components.
AI-written summary · about
chapters (13)
- 0:00Introduction by host
- 0:44What is generative design
- 2:31Building a box shadow generator
- 5:21Why randomness helps learning
- 7:07Refining generators for specific use
- 8:10Composing generators into a system
- 10:58Design system as a generative component
- 12:43Accessibility through generators
- 13:47Generators as components themselves
- 15:17Demo of Components AI Studio
- 17:09Key takeaways and insights
- 18:54How to add generation to your work
- 19:40Conclusion and call to action
related talks
29mAre Design Systems Ready for the AI Revolution?
19mGenerative UI: Bring your React Components to AI today!
21mDesign Systems 101: The Developer Approach to Better Frontends
30mDesigning with React
41mBuilding a design system with React in 2025, what's new?
39mDesigning with Components
21mDesign Systems @Scale
35mDesign system - From a Developer Point-of-View