Adapting an enterprise design system to be AI ready
Background
I was the lead experience designer working on the largest design system at PNC: a 400-component system serving nine design pods and more than 100 designers.
The problem
The system had accumulated gaps over eight years of distributed ownership. Documentation lacked context and usage guidance, tokens were not used in the component library, and Figma practices varied across the organization. PNC was interested in agentic AI development but did not yet have the infrastructure to support it.
The approach
I rebuilt the context needed for people and AI to work with the system by standardizing documentation, defining system primitives, and creating shared tooling literacy across design, development, and accessibility.
Building documentation for humans and AI
The documentation had to be readable at a sixth- to eighth-grade reading level while also giving AI explicit context through tokens and clear Do’s and Don’ts. I created a reusable prompt template to help rewrite documentation for the 2,000 Figma components supported by the legacy system.
Establishing the token foundation
PNC did not have a design-system token foundation. Working side by side with development, I helped modernize the system around color, spacing, and information-density tokens.
Color tokens aligned with Material 3 updates and gave designers clearer semantic guidance. Spacing tokens moved the legacy system from a 10px rem base to the 8px standard used across modern design systems. Information-density tokens created consistent modes for tables and other data-heavy interfaces.
Standardizing Figma best practices
I created a Figma starter file to teach the new tokens and reduce rework. It included page templates, ready-to-use accessibility annotations, table-building guidance, and expectations for people consuming design files.
The result was more consistent and predictable design output across teams.
Tokenized libraries and AI-ready workflows
I created rollouts of the design-system library with the new token sets in place and advocated for coded proofs of concept to demonstrate the value of tokenizing the library. This enabled scalability and multi-brand theming while unlocking a path toward agentic AI development.
Context-driven documentation
The updated documentation gave AI the design-system context needed to generate more accurate work. I used it to create design-system-aware low-fidelity Figma Make kits that helped consuming designers move faster during early iteration.
Outcome
This work aligned design, development, and accessibility around shared conventions. It gave more than 100 designers a stronger foundation for producing consistent work and modernized the legacy system for AI-ready development.
“This helps align design, development, and accessibility in a way we’ve struggled to do.”
— Quote from presenting to design leadership
Reflection
Small steps can move giant design systems. By improving documentation, tokens, and everyday Figma workflows together, I helped make the system easier for people to use today and more legible to AI-powered tools tomorrow.