Design System AI Infrastructure
Design System AI Infrastructure
I architected AIMS, a system that transforms raw MDX into machine-grade metadata for AI. It powers AI-assisted prototyping, accessibility enforcement, and DS compliance via MCP. This is not documentation, it’s AI infrastructure.
Role
Lead Designer & AI Systems Architect
Project Type
AI‑native design system infrastructure
Team
Led end-to-end with 2 engineers + 1 DT partner
Contribution
Architecture, metadata pipeline, AI integration
Tools
Cursor, GitLab, Claude AI, OpenAI (GPT‑4), Node.js, Vectra (vector DB), MCP
Duration
4 months
Problem
While the design system was built only for humans, the LLMs require structure, semantics, and deterministic consistency.
The gaps:
- The product team wants to prototype with AI
- AI is a great tool to enforce DS compliance
- Current design system knowledge is for humans
- LLMs require structured data to effectively reason and perform accurate actions
AI Metadata System (AIMS) eliminates those gaps.
Industry Research
Before defining the AIMS architecture, I grounded the work in a broad discovery process across industry research, expert interviews, internal technical constraints, and system audits.
- Attended Romina’s presentation at Into Design Systems on indexing documentation for LLM workflows and the role of MCPs in bridging design systems with AI.
- Interviewed TJ Pitre (Southleft) to learn about his vibe coding experiments and his dedication to creating structured metadata pipelines for AI-assisted design systems.
- Integrated insights from Nathan Curtis (Components as Data) on structured DS formats (JSON / YAML) and how they enable AI-powered component workflows.
- Analyzed Anthropic’s MCP concept introduction to understand early patterns in agent-tooling interaction and structured retrieval.
- Studied Knapsack’s MCP implementation, focusing on how they framed design system data for AI consumption.
- Analyzed Figma’s MCP approach, focusing on how structured tokens and JSON formats streamline interoperability for AI agents.
Solution: AI Metadata Systems (AIMS)
Using Cursor, I built I Metadata System (AIMS), a multi-parser automated pipeline that ingests raw MDX design system documentation, restructures it into semantic metadata, and consolidates it into a clean, machine-readable format optimized for MCP vector embedding and LLM reasoning. From my industry research, I identified the GitLab repository as the most reliable source of truth for AI-ready metadata.
What AIMS delivers
- Unified component spec (development, design, a11y, l10n)
- Semantic property categories (behavior, state, layout, responsive)
- Code prerequisites (containers, utilities, imports)
- Variant and pattern logic
- Quality metrics (extraction %, fabrication %, section coverage)
- Schema‑aligned, machine-readable JSON
How it works
- 4 independent MDX parsers → structured outputs
- Deterministic consolidation pipeline
- Automated GitLab → webhook → parse → consolidate workflow
- Complete JSON metadata for 75+ components, tokens and icons
- Fully measurable and governable
Metadata Quality Metrics
Because the quality of AI output is limited by the quality of its input, I built a live metadata quality governance dashboard to evaluate and improve the documentation that feeds AIMS. The metadata quality dashboard measures:
- Extraction accuracy: how much metadata is successfully captured
- Fabrication risk: where AI would be forced to guess
- Schema completeness: required sections, examples, and props
- Section coverage: what’s missing, under-specified, or ambiguous
✓ Zero‑contamination guarantees (section-by-section extraction)
✓ Deterministic merging (no AI during consolidation)
✓ Semantic intelligence (behavior/state/layout categories)
✓ High token efficiency in pre‑chunked formats
✓ Schema enforcement across 75+ components
✓ AI‑ready examples for accessibility, variants, and states
AIMS → MCP
Design system metadata becomes live AI infrastructure. I partnered with the engineers responsible for the MCP architecture. We integrated the AIMS pipeline directly into the MCP ingestion and indexing system, aligning schemas, chunking strategy, and retrieval domains, enabling AIMS to power real-time search, reasoning, and code generation inside the agent ecosystem.
INDEXING
INGESTION
CHUNKING
DESIGN SYSTEM MCP
Business Impact
A prototype tool powered by the design system MCP and AIMS was used to conduct a one-month pilot with 28 participants (15 PMs, 13 UXers), who collectively generated more than 600 prototypes with AI.
AIMS + MCP provided the metadata foundation behind this pilot, powering brand fidelity and component accuracy, while significantly reducing prompt overhead. This work pioneered a new approach to product creation for the company.
4,169+
Prototypes generated with the design system MCP
75%
of PMs reported faster workflows using the tool
57.1%
of prototypes met baseline usability and flow criteria
21.4%
of AI-generated prototypes were rated “Excellent”
The Evolution Ahead
Despite the broad MCP adoption and integration across Claude, Cursor, Windsurf, and internal prototype tools, we uncovered a gap: LLM outputs were rated “good enough,” but our bar is 90%+ excellence. That difference is what triggers the next evolution. Stay tuned.
I design systems that both humans and AIs can understand, trust, and build on.
Selected Work
