Home Work About Field Notes Contact
Back to work AI Architecture

Architecting design systems
ready for AI

As AI tools become embedded in design and engineering workflows, design systems need to do more than serve humans. Tokens, components, and documentation must be structured so that LLMs can read, reason about, and act on them reliably — turning the design system into a machine-legible foundation for AI-assisted product building.

Scope AI Systems Strategy
Context Design Systems · LLM Integration
Category AI Architecture
Focus Structure · Legibility · Automation
Tokens Components Patterns Docs LLM language model Code Design Content AI-READY DESIGN SYSTEMS · LLM INTEGRATION · MACHINE-LEGIBLE ARCHITECTURE
Objective

Making design decisions machine-legible

The objective was to evolve the design system's architecture so that AI tools — from coding assistants to generative UI — could reliably interpret, use, and extend it without producing inconsistent or broken output.

This meant rethinking how tokens are named and structured, how component documentation is written, and how the system as a whole communicates intent — not just to designers and engineers, but to language models.

Challenges & Goals

Design systems weren't built for machines

  • Token names optimised for human readability but ambiguous to LLMs without semantic context
  • Component documentation written as prose — useful for humans, hard to parse programmatically
  • No structured metadata describing component purpose, constraints, or relationships
  • AI tools hallucinating component names, misapplying tokens, or generating inconsistent UI
  • Lack of machine-readable usage rules meant LLMs couldn't distinguish correct from incorrect use
  • Design system maintenance patterns not designed with AI contribution or generation in mind
Solutions

Structured for both humans and machines

  • Audited token naming conventions and added semantic clarity — purpose-first names that LLMs can interpret without additional context
  • Introduced structured component metadata: purpose, constraints, required props, forbidden combinations, and accessibility requirements
  • Formalised component documentation into consistent schemas that can be parsed programmatically
  • Created prompt-ready system summaries — condensed, structured descriptions of the design system for use in AI context windows
  • Defined contribution guidelines for AI-generated components, including validation rules and review criteria
  • Established a token-to-code mapping layer so LLMs can correctly reference design decisions when generating UI
Process

Research, prototype, validate

1

Audit & Gap Analysis

Reviewed the existing design system through the lens of AI legibility — identifying where token names, component docs, and structural patterns would cause LLM misinterpretation.

2

Schema Design

Designed structured metadata schemas for components and tokens, balancing human readability with machine parseability.

3

Prompt Engineering

Developed and tested system prompt templates that inject design system context into AI coding assistants, measuring output quality and consistency.

4

Validation with AI Tools

Ran structured tests with LLM-powered tools to measure how accurately they could reference tokens, instantiate components, and follow usage rules.

5

Documentation & Rollout

Updated FreeStyle with AI-specific guidance, including how to prompt effectively using the design system and what AI-generated output requires human review.

Results & Impact

A design system that works with AI, not against it

🤖

More Reliable AI Output

Structured metadata and semantic token naming measurably reduced hallucinated component names and misapplied tokens in AI-generated UI.

⚡

Faster AI-Assisted Development

Engineers using AI coding tools could reference design system tokens and components correctly without manual correction or lookup.

📋

Prompt-Ready Documentation

System prompt templates and condensed system summaries gave teams a consistent, effective way to inject design system context into AI workflows.

🔧

Foundation for AI Contribution

Contribution guidelines for AI-generated components gave teams a clear framework for reviewing and accepting machine-generated design work.

Want to talk through this work?

Get in touch →