Back to WorkTech stack
Design SystemAI WorkflowFigmaTokens
Ralfy UI, AI Design System Pipeline
Design Engineer · 2026
Ralfy UI is a design system I built in two days to fix my own problem. While building Ralfy with Claude Code I moved fast and skipped the design layer, so I ended up with four button styles, three different tab components, and hardcoded colors all over the app. This is the cleanup. Tokens live in Figma using Tokens Studio, get exported to JSON, and flow into CSS variables that Tailwind v4 reads as utility classes. There are five components ready to use (Button, Alert, Sidebar, Tabs, TabItem), all in light and dark mode. The whole pipeline is documented so AI tools can build new screens that actually use the system instead of inventing new styles. Full case study lives on GitHub Pages.
React 19TypeScriptTailwind v4Radix UIStorybook 10VitestStyle DictionaryTokens Studio