Pavle
Back to Work
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.

Tech stack
React 19TypeScriptTailwind v4Radix UIStorybook 10VitestStyle DictionaryTokens Studio