Nucleus Design System
An AI-native design system built from scratch in Figma and translated into production-ready React, Storybook, and documentation.
Design SystemDev
- My Role
- Product Designer & Builder
- The Problem
- Design systems can easily drift between design and code. Tokens, components, documentation, and implementation often become disconnected as the system evolves.I wanted to explore whether AI could help translate a structured Figma design system into consistent production code without losing the original design intent.
Overview.
Nucleus is a self-initiated design system built from scratch to explore the complete journey from design to implementation.
I designed the foundations, tokens, variables, typography, color system, and components in Figma, then used AI-assisted development to bring the system to life in React.
The system includes design tokens, React components, Storybook, documentation, accessibility guidance, usage rules, and a live deployment.
The goal was not just to build components, but to create a connected workflow where design, code, documentation, and AI operate from the same system.