Problem

Keeping UI consistent across projects is harder than it should be. Styles, spacing and components get redefined every time, which causes inconsistencies and slows things down. A design system fixes this by giving you a single source of truth, but most setups are either too rigid or disconnected from the actual code. I wanted a practical way to define and generate a complete visual system directly in the browser.

Approach

The generator works like a lightweight page builder. You set colours, typography, spacing and UI styles in panels and watch a live style guide update as you go. It then exports clean CSS with design tokens, plus a small utility-style framework you can reuse across projects.

Outcome

It’s a faster way to set up a consistent design system without doing it by hand. Because it generates ready-to-use CSS, the design and the code stay in step, which makes consistency easier to maintain across projects.