Connecting a production design system to AI coding tools, so designers and engineers can prototype with real, on-brand components straight from Claude Code and Codex.
A design system only pays off when teams actually build with it. At Abarca, the components lived in Figma and in code, but prototyping still meant rebuilding them by hand, and AI coding tools had no idea the system existed.
I built a bridge that exposes the design system's components and tokens to AI tools like Claude Code and Codex, so a prompt produces interfaces made of the real, governed building blocks, not generic approximations.
Inventoried components and tokens to find what was truly reusable, and what had quietly drifted.
Documented components so they're legible to both designers and AI tools, not just human readers.
Created the integration layer that feeds the real system into Claude Code and Codex.
Rolled the workflow out to designers and engineers, then tightened it on real feedback.
Collapsed scattered component definitions into a single governed source that both humans and AI read from.
Made design tokens the shared language between design, code, and AI, so output stays on-brand by construction.
The bridge returns real, accessible components from a prompt, so prototypes start as production-grade UI instead of throwaway mockups.
Designers and engineers now prototype with production components straight from their AI tools, closing the gap between an idea and an on-brand build.
AI doesn't replace a design system. It makes one more valuable. The better the system is structured and documented, the better everything built on top of it becomes. Increasingly, the role is curating that foundation.
A calm, guided patient portal for value-based primary care at ChenMed.