A Design System for AI Tools
A sprawling Figma workspace with no single source of truth, rebuilt into a token architecture readable by both engineers and the AI tools that would use it next.
The job wasn't just to clean it up
A sprawling Figma workspace with no single source of truth. Three team members who had never worked together. A design library touched by multiple designers over time with no single owner.
Half a day a week to fix it.
The job wasn't just to clean it up. It was to build something the whole team and the AI tools coming next could rely on. That required a roadmap before a single token was touched.
Start with a roadmap, not a fix
The first decision was to resist the urge to start fixing immediately. Without understanding the full scope, any fix would be local and temporary. A full design system roadmap was defined first, from synthesising existing work through to governance, giving the team a shared picture of where the system needed to go and in what order.
The audit
Interface inventory. Gap analysis. A sprawling workspace, 20 hours, three categories of findings: redundant components, components needing updates, and components that should have been variants.
The token naming convention, color-text-secondary-disabled, was chosen with the frontend developer for continuity and machine readability. Both engineers and AI tooling can parse it without ambiguity. The architecture moved from styles to variables, making tokens readable by Figma MCP, Claude Code, and Figma Make.
86% of tokens reached consistency between Figma and Storybook. The component layer remains in progress.
System foundations
The file architecture was planned for scale: Foundations, Components, and Patterns as separate concerns, each publishable as a library to feature files. Voice guidelines were aligned with the existing marketing design system for cross-surface consistency.
Design principles and a shared glossary were initiated, work that was later deprioritised as the team and roadmap evolved.
A system the next generation of tools can read
A components.md file was created as a structured reference, readable by Claude Code and compatible with Figma Make. The architecture is in place. The pipeline between design system and AI-assisted production is being built in the open.
What was built, one half-day a week at a time
Design systems are never finished, they evolve. This one runs on a standing half-day-a-week cadence, and in that time it produced a full roadmap, a token architecture at 86% consistency between Figma and Storybook, and a pipeline connecting design to AI-assisted production that didn't exist before.