design systems + ai workflows

Building reusable foundations for humans—and exploring what happens when AI designs within them.

Description
What started as a personal goal to deepen my understanding of modern design systems became a working foundation for my client projects—and eventually an experiment in how those same systems could provide structure for AI-assisted design.

I built the system to reduce repeated decisions, improve consistency, and create a stronger starting point for each project. More importantly, using it in real work taught me when a comprehensive system adds value, when it becomes unnecessary overhead, and how reusable foundations can support both human designers and AI collaborators.

Work Produced
Design System Architecture | Design Tokens | Component Libraries | Documentation | AI-Assisted Prototyping

Tools
Figma | Figma Variables | Claude | Figma MCP | Figma Agent

Concept | n/a
Typeface | various

Building the Foundation

Working across a high volume of client projects, I kept encountering the same problem: every new project required rebuilding many of the same foundational decisions. I also wanted to better understand contemporary design-system architecture—not just how to use a library, but how to build one thoughtfully from the ground up.

I created a three-tier token architecture spanning primitives, semantics, and components, along with responsive typography, accessibility considerations, reusable components, and brand modes. The goal was to create a flexible foundation that could adapt to different clients without reinventing the system each time.

Build, Test, Simplify

My first version was comprehensive. Too comprehensive…

Once I began using it on real projects—and, importantly, reviewing it with the developers who would receive my work—I learned that theoretical completeness wasn't the same as practical usefulness.

The developers valued the consistency and clearer design decisions, but a small, collaborative team didn't need every layer of infrastructure I had created. I simplified the foundation and eventually developed fit-for-purpose versions: a larger system for website work and a much leaner one for highly templated forms.

The goal shifted from building the most complete system I could to building only as much system as the work actually needed.

Giving AI Better Context

As I began experimenting more deeply with AI-assisted design, the system took on another role: context.

Rather than asking an agent to create an interface from an unconstrained prompt, I could connect an established library and ask it to work within decisions I had already made about typography, components, spacing, accessibility, and visual language.

On a recent project, I combined meeting summaries with my own notes to develop an initial information architecture and user journeys with AI, then connected my simplified design-system library and used Figma Agent to generate early interface directions. The results still required critique and refinement, but the system gave the agent a much stronger—and much more intentional—place to start.

The design system became more than a consistency tool for designers. It became context for an AI collaborator.