The Learns Design System is an interactive documentation site I built for the Code the Dream Learns App. The codebase already had a set of design tokens, components, and patterns. None of it was well-documented.
The site auto-generates tokens directly from the theme file, so docs stay in sync without manual upkeep. Every component page has a live MUI playground with prop controls, a spec sheet, and copyable code. I also documented the app's most complex pattern, a React Flow workflow editor, end to end with a fully interactive canvas.
Built with Next.js, MUI, and deployed on Vercel.
0 likes · 0 views · Apr 15, 2026
The Learns Design System is an interactive documentation site I built for the Code the Dream Learns App. The codebase already had a set of design tokens, com...
