02 AI interface design infrastructure
Enterprise AI Design System
Designed and implemented an AI-native design system and component library—enabling AI agents and Figma Make to generate 100% brand-compliant, WCAG-accessible interfaces using Model Context Protocol (MCP) schemas and dynamic design tokens.
The Shift
Building design systems for AI co-designers
Traditional design systems are built for human designers inside Figma and human developers writing code. They rely on visual component specs and text-heavy documentation. However, in the era of generative engineering, code is increasingly written by AI agents, and layouts are mocked up by automated tools like Figma Make.
When traditional design systems are fed to standard Large Language Models (LLMs), the result is high styling friction: LLMs routinely write custom CSS, hallucinate Tailwind classes, and violate accessibility rules because the design system's constraints are not machine-enforced.
The Solution
A machine-readable design system
We solved this by rebuilding the enterprise design system from the ground up as an AI-native interface design infrastructure. By defining all design tokens (colors, margins, typography, spacing) and layout compositions as strict, JSON-schema-validated specifications, we created a single source of truth accessible to both humans and machines.
By wrapping these schemas in a Model Context Protocol (MCP) server, we allowed AI agents to query valid component APIs and brand tokens in real-time, eliminating layout hallucinations and enforcing WCAG-accessibility guidelines programmatically during code generation.
The Comparison
Traditional vs. AI-Native Design Systems
Moving from documentation-driven assets to API-first UI generation protocols.
Traditional Design Systems
- Static Assets: Humans manually inspect Figma stickers and copy-paste component snippets.
- Hallucination-Prone: LLMs generate custom, brand-violating layout dimensions and tailwind spacing values.
- Post-Audit Accessibility: Contrast ratios and keyboard navigation must be audited *after* the UI is built.
- Manual Translation: Designers must manually export assets, write specs, and hand them off to engineering.
AI-Native Design Systems
- API & MCP Driven: AI agents call tools to query tokens, spacing guidelines, and component specifications.
- Zero-Hallucination UI: Code generation is bounded by strict, schema-compliant design tokens from Sanity CMS.
- Pre-Flight Accessibility: The system automatically enforces WCAG AAA rules within the token-delivery layer.
- Figma Make Co-Design: Prompt-driven Figma tooling generates layout files instantly mapped to valid react templates.
The Flow
AI Design System Architecture
The system acts as a central router. Designers prompt Figma Make to generate vector layouts, while developers use AI coding agents to write code. Both systems retrieve validated token structures and schema-bound component specifications from a unified Sanity CMS repository using an MCP Server.
Technical Integration
The Figma MCP Bridge: Code to Canvas
An AI developer agent operating in an IDE traditionally has no way to interact with design files, creating a visual disconnect. We bridged this gap by developing a custom Figma MCP Server that exposes Figma's document structures and component actions directly as LLM tools.
When an LLM runs a UI generation prompt, it executes a sequence of model-called tools to check the layout, pull tokens, and modify the canvas in Figma:
figma_get_selected_nodes({ fileKey: "fig_08f92b" })
mcp_design_get_tokens({ category: "color", theme: "dark" })
figma_create_instance({ componentId: "btn_primary", properties: { size: "lg" } })
AI-Centric Principles
Advanced AI-Native System Architecture
Beyond standard components, the system utilizes specific structures optimized for machine consumption and automated rendering:
- ✦ LLM-Optimized Component Context
Rather than loading heavy visual documentation, the system compiles design components into lightweight, semantic markdown schemas. Injected directly into the IDE agent's system prompt, this context ensures zero styling errors. - ✦ Relational Spacing Envelopes
LLMs fail at pixel coordinates. Components use a relational coordinate model based on CSS Flexbox and Auto Layout guidelines, guaranteeing responsive visual coherence during AI compilation. - ✦ Pre-Flight Color Translation
Color tokens are stored as relative luminance vectors. The MCP server automatically parses color requests and adjusts contrast levels in real-time, outputting AAA-compliant CSS directly to the client.
Interactive Sandbox
Figma Make & MCP Playground
Experience how an AI Coding Agent or Figma Make queries components and design tokens. Select a design prompt below to simulate MCP tool execution, JSON payload retrieval, and the final rendered component.
1. Select AI Design Prompt
2. MCP Server Activity Logs
Canvas Render Output
Live UI will render here dynamically conforming to fetched tokens.
The Benefits
Why it outperforms static design libraries
Traditional design systems decay because code drifts away from design stickers. Our AI design system solves this mismatch through code-first compilation and API constraints:
Contract-Bound Compositions
Components are exposed via tight TypeScript interface schemas. The AI agent cannot add custom HTML elements or inline styles; it is forced to use the exposed components.
Single-Source Tokens
Design tokens are pulled from Sanity CMS directly. If brand colors change, updating the CMS immediately updates the React frontend and the MCP server definitions.
Accessibility First
Dynamic WCAG 3.0 Compliance
Traditional systems rely on designer diligence for contrast compliance. Our design system's MCP layer embeds color-science packages to automatically calculate relative luminance of background/foreground pairs dynamically.
Automated Contrast Correction
When the AI agent prompts a design system tool to create a button, the system automatically checks the target theme and returns the color hexes that pass WCAG AAA contrast ratio (7.0+).
Enforced Semantic Markup
Components require mandatory screen-reader metadata attributes (e.g. `aria-label`, role bindings) inside their schema definitions. Code generation will fail validator checks if these inputs are missing.
Operational Metrics
System adoption and velocity
By providing a structured interface for AI coding agents, we drastically reduced code generation errors and accelerated onboarding.
- Core Components
- 42+
- MCP Queries/Day
- 12k+
- Layout Gen Errors
- -94%
- Dev Velocity Boost
- 3.2x
Closing Reflection
The future of design is semantic
Design systems are no longer static libraries; they are compiler schemas. As AI agents handle more interface construction, the role of design system engineering transitions from rendering pixels to authoring constraints.
By treating Figma Make files as layout files, brand rules as tokens, and LLM integrations as compilers through the Model Context Protocol, we established a pipeline where design consistency and absolute accessibility are no longer human checklist items—they are compiler guarantees.