Design System Generator

A tool that generates a complete design system (tokens, components, docs) from a single JSON config. Outputs to Figma, code (React + CSS variables), and Storybook.

Why I built it

Designers and engineers were spending weeks re-creating the same design system across tools. I wanted a single source of truth that could emit to any target.

Features

• Single JSON config for tokens, components, and docs
• Three output targets — Figma (via plugin), React (CSS variables + components), Storybook (mdx docs)
• Theme variants — light, dark, and brand-specific
• Watch mode — regenerate on file change
• Diff mode — show what changed between two configs

Adoption

• 3.1k+ GitHub stars
• Used by 4 design system teams that I know of

What I learned

Code generation is a UX problem for the developer, not a technical achievement. The generated code has to be readable — if it looks like machine output, developers will not trust it. I spent more time on code formatting than on the generator itself.