This is a story on building the AI-Powered Design System, a front-end foundation built with Claude Code and Figma, designed to serve as a single source of truth across the whole Prerender B2B SaaS app.
For quite some time now I’ve been chasing the same idea. Design something in Figma, push it to the front-end, iterate, push back. A clean loop. No context lost in translation. No “it looked different in Figma” conversations.
The bigger challenge underneath it was this: I wanted a single source of truth for the front-end layer. One place where colours, typography, spacing, components and layout logic all live, and every project you spin up pulls from that same foundation.
What tools did I try first?
Let me be honest about what didn’t work, because I think it saves people time.