Creating an AI-Ready Design System
AI never got our design right. So we built it a language.
← scroll to see the full diagram →
Figma → agent proposes structure → I validate against real product intent → structured library → split into AI-readable rules and human-legible docs.
Role
Senior Product Designer: diagnosed why AI output was failing, defined what "correct" meant, and shaped how the agent behaved.
Team
Me, and one developer who dreamed this whole thing up and built the agent and library tooling.
Status
Internal rollout in progress. Next phase adds real code snippets to the library.
Summary
AI-generated UI never looked like it belonged in our product. Spacing was off, components were invented, and patterns didn't match our brand. Better prompts didn't fix it, because the AI had nothing real to check itself against. Our design system lived in Figma and in people's heads, and neither of those is something an LLM can read.
A normal style guide means nothing to an AI model. It needed real rules to check itself against. A developer on the team had the idea to build an agent that could construct exactly that, and I made sure every rule it produced reflected real product decisions.
The Process
How the Agent Worked
- A developer built an agent that could read our Figma files and propose a library structure
- It asked questions whenever it wasn't sure, instead of guessing
- I had to learn GitHub and VS Code to work directly in that process
Validating What It Built
- Checked every proposed rule against real product intent, not just what looked plausible
- Caught deprecated patterns and intentional exceptions the agent wouldn't have known about
- Made naming and hierarchy calls the agent couldn't make on its own
Shaping the Agent
- Helped shape how the agent asked questions, so output stayed useful instead of generic
- Split the output into an AI-readable version and a human-legible Storybook version
- Scoped the next phase: wiring in real code snippets
Proof It Worked
Before referencing the library, prompting AI for a component returned the wrong spacing, invented UI patterns, and the wrong hierarchy. After adding an explicit rule to the library for that pattern, the same prompt produced something close to production-ready.
← scroll to compare before and after →
Recreated example, not the actual product or design system. Before: dark mode, switch style toggles, no save link, irrelevant content. After: consistent colors, use of checkboxes, consistent spacing, relevant content, consistent use of surfaces and save button.
The Output
- An AI-consumable component library — the reference AI tools query against
- A human-legible version, going into Storybook, so anyone internally can browse the system without opening Figma
- Next phase: a developer is wiring in real code snippets so the library reflects what's actually implementable
The Impact
AI output went from needing a full redesign pass to being a usable first draft. The team now has one source of truth for the design system, readable by people and by AI. I turned design knowledge that used to live in Figma and in people's heads into an explicit system that will outlast any specific AI tool.
