← All work

Design System Architect

And Beyond: Charting the AI-Era Design System

AI design systems governance
3 min read

I envisioned the AI-era design system strategy before the org asked for one. I set the path, built the artifacts, and rallied the people.

What I delivered

  • Introduced the framing that AI behavior is a design system problem: prompts, agents, and system instructions as first-class system assets, not one-off tactics.
  • Shipped the arc in 3 stages, each further upstream: a prompt catalog of 8 categories, the LydAI agent (in production at v1.0.11), and a callable skill other agents now compose with.
  • Carried the framing across the org: 15+ knowledge-sharing sessions and the X3 Evals 201 deck presented to the Chief Design Officer's org.

What it enables

  • The workflow ships into Copilot: Fluent components built on these foundations land directly where product makers work.
  • The skill outgrew me: LydAI's instructions multiplied into the modular skills framework, now propagating beyond Fluent without my direct involvement.

The problem

Our design system was living dangerously at the pixel. When product teams started using AI to produce their experiences, the actual design decisions moved upstream of the pixel into prompts, system instructions, and the agents composing them. Teams were experimenting independently, writing their own prompts and defining their own guardrails, leading to fractured experiences faster than we could resolve them.

The system needed to move where the work was. I asked and answered: “What do we need to put in place to focus more on structure, strategy, and content, and less on pushing pixels?”

Fluent then: a triangle diagram showing the historical three-legged design system, docs, Figma, and code surrounding the Fluent F logo at center.

Fluent now: an aspirational diagram showing the original three-legged stool surrounded by AI-era artifacts orbiting the Fluent F.

Fluent then (left) and the vision of the system in an AI future (right).

My role

"You ... have a bias for action in this AI era — testing and creating new tools and writing down ideas that could help us meet the vision for the design system of the future."

— Liz O'Connell, Principal Content Design Manager

I introduced the framing that AI behavior is a design system problem. Prompts, specialized agents, and system instructions are not one-off tactical decisions; they’re first-class design system assets. Just as a button shouldn’t be designed from scratch for every surface, a prompt for a ghost text interaction shouldn’t be written from scratch for every team.

What I built: From playbook to agent to skills

The framing didn’t arrive all at once. It came out of three iterations, each one abstracting further upstream than the last.

Four-panel arc showing the evolution. Left to right: the original Fluent Style Sheet as a Word document (structured-authoring infrastructure I authored years earlier for human contributors), a prompt detail for Design system component documentation, a Copilot agent (LydAI) showing system messages and instructions, and a markdown skill file in the fluent-design repo.

The arc: playbook → agent → skill, all built on top of the Fluent Style Sheet (the structured-authoring infrastructure I’d authored years earlier for humans).

Stage 1: Fluent Prompt Playbook

The Fluent Prompt Playbook was the first move: a curated, model-aware library of prompts that systematized recurring AI work across the disciplines designers actually use. It shipped on Figma Make as a copy-and-paste catalog, with each prompt tagged by category, recommended model, and required inputs.

Fluent Prompt Playbook on Figma Make: 8 prompt cards visible spanning component spec generation, Responsible AI UX evaluation, placeholder copy, documentation, brainstorm-to-guidance, research-to-principles, decision logging, and a metaprompt for contribution. Filter rails for category and recommended model.

The goal was to expand what people thought belonged in the system. If a prompt is the thing producing a designer’s work, then the prompt belongs in the system. At its core, the Playbook aligns to the design system’s foundational goal: making product makers more efficient.

Stage 2: LydAI

"LydAI is a perfect example of implementing AI to improve our work and empower our own team and partners to do their best work."

— Roxanne Kenison, Principal Content Designer

LydAI took the next step. The Prompt Playbook gave people something to lift from; LydAI gave them something to collaborate with. I built a Copilot agent with system instructions built from the Fluent Style Sheet. LydAI documents design decisions in meetings, logs them, extrapolates UI recommendations, and drafts Fluent-aligned documentation.

The goal was to help partner content designers across product teams move documentation forward without bottlenecking on me.

LydAI's about page in Microsoft Copilot Studio. Version 1.0.11. Description: LydAI helps teams document design decisions during meetings, logs those decisions, extrapolates actionable UI recommendations, and drafts documentation.

Stage 3: Skills, and LydAI multiplied

"It was inspiring to see you not only lead this charge, but define the space as you went — you have stepped well beyond the role's previous expectations in regards to AI and dove into prototyping, code architecture, and validating complex AI workflows."

— Mitch Fraser, Senior UX Engineer

Once an agent could carry the Fluent voice reliably, the next abstraction was inevitable: give people something to compose with. LydAI’s system instructions multiplied and are wired more deeply into our intelligence layer as a callable skill. The agent I built to scale myself has become a primitive other agents reach for.

The pattern across all three stages: each move pushed the source of truth one step further upstream. Prompt → agent → skill. Each time, the thing I built last became infrastructure for what I built next.