Problem
Building consistent UI across projects is harder than it should be. Styles, spacing, and components often get redefined every time, which leads to inconsistency and slows things down. A proper design system solves this by acting as a single source of truth, but most setups are either too rigid or disconnected from actual code. The aim here was to make something more practical – a simple way to define and generate a full visual system directly in the browser.
Solution
I built a visual design system generator that works like a lightweight page builder. Users can define colours, typography, spacing, and UI styles through panels, and see everything update in real time as a live style guide. The system then exports clean CSS with tokens, along with a small utility-style framework that can be reused across projects. The focus was on keeping it flexible, visual, and directly usable in development.
Results
The result is a faster way to create and apply consistent design systems without manual setup. It removes the gap between design and code by generating ready-to-use CSS, making it easier to maintain consistency across projects. As a portfolio piece, it shows an understanding of scalable UI systems, design tokens, and building tools that improve real development workflows.