AI-Ready Design System

I’m leading design on an AI-assisted rebuild of a patient portal platform used by healthcare organizations.

AI coding tools can now build screens from a written request. They only build well when they can find the team’s real buttons, colors and layouts. When the design system is messy, the AI guesses, and engineers spend time fixing what it made up.

My job was to make the design system clean and connected, so AI builds come out on-brand, accessible and ready for engineering review.

An earlier proof of concept failed. The AI coding tool invented components instead of using the real ones. The root causes sat in the design foundation, not in the code:

• Zero Code Connect mappings between design components and code
• Hardcoded colors instead of variables
• Six overlapping organization libraries with conflicting components
• Design system foundation tickets that weren’t treated as dependencies of feature work

How might we make the design system a dependable source of truth, so AI coding tools build with production components instead of guessing?

I treated the design system as infrastructure for both designers and AI agents.

• Cleaned the core design file: detached thousands of remote library instances and migrated paint bindings to local variables. The file now has zero remote instances, variable bindings and style references across all 106 pages.
• Automated the large passes with Figma MCP tools and plugin console scripts, including token binding and replacing catch-all variable scopes with semantic scopes.
• Partnered with engineering on a Code Connect workflow, so each component maps to its code counterpart.
• Built an 8-phase UX process for the web build, with a Claude Code sync test in week 6 as the gate before full build.
• Made design system foundation work an explicit dependency ahead of feature tasks.

I mapped six core flows in FigJam: online scheduling, appointment reminder to check-in, login and account setup, proxy access, campaign configuration, and post-care summaries.

For appointment reminders, the flow is mobile-first and starts from a text message. Patients view their appointment details, and “Add to calendar” is the primary action.

For mobile, I built a multi-platform design system with six clinical card types, tabs, and date and time pickers. Its four variable collections are at 100% binding coverage.

I also explored OKLCH-based client theming that enforces WCAG AA contrast through CSS custom properties.

This work is in progress. The design files now give AI coding tools one consistent set of components and tokens to build from, with no remote dependencies and full variable coverage on mobile.