AI-Friendly Design System

The Challenge

When I began exploring generative design tools like Claude Design and Figma AI, I ran into an immediate roadblock: the AI models could not reliably produce interfaces grounded in our established design system. Instead, the AI routinely hallucinated arbitrary hex colors, borrowed generic third-party patterns from Bootstrap or Tailwind, or made up layout parameters from scratch. Without an accessible, machine-readable single source of truth, generative outputs were too untrustworthy to use in sprint cycles without extensive manual rework.

The Objective

As Lead Product Designer and Design Technologist, I set out to transform the design system, components, and design tokens into a machine-readable knowledge base that AI agents could query directly via the Model Context Protocol (MCP):

• Ground Generative AI: Establish strict token schemas and machine-readable component documentation so Claude and Figma AI would use my established design library rather than guessing or defaulting to external frameworks.
• Controlled Platform Rollout: Modernize the dense B2B Admin application first, while leaving the customer-facing Member application as an untouched control baseline to measure hallucination rates and accuracy.
• Code-Agnostic Linkage: Link Figma component tokens directly to production CSS variables, ensuring AI-generated screens could be implemented across both legacy PHP views and modern Angular components with zero visual drift.

Strategy & System Execution

The platform was historically partitioned into two distinct user surfaces: the business-facing Admin application (high-density scheduling, data tables, billing, and member rosters) and the customer-facing Member application. To validate my approach with scientific rigor, I kept the Member side as an unanchored control group and systematically modernized the Admin system:

• Claude & Figma MCP Integration: I connected Claude directly to the Figma library through the Figma Model Context Protocol (MCP) server. This granted Claude real-time programmatic access to component node hierarchies, auto-layout parameters, and published variable collections.
• Component-by-Component Modernization: I systematically audited each core Admin UI component (dense data tables, action modals, filter toolbars, status badges, and form controls). I used Claude to document each component with explicit, machine-readable usage rules, token references, allowed variants, and keyboard accessibility requirements.
• Continuous Prompt Validation Loops: After documenting each component, I tested it against demanding, real-world prompts (e.g., "Generate an invoice reconciliation table with multi-select actions, status badges, and an edit modal") to ensure the AI selected internal tokens instead of inventing arbitrary styles.
• Direct Design-to-Code Parity: I mapped all Figma variables directly to semantic CSS custom properties in the repository. Because tokens were delivered as pure CSS and semantic HTML, generated layouts could be ingested into legacy PHP templates and modern Angular apps without rewrites.

Technical Deep Dive: Model Context Protocol (MCP) Grounding & Token Schema Architecture

The MCP Context Pipeline: Traditional LLM prompting fails with design systems because human-facing design documentation is too verbose or ambiguous for AI context windows. By leveraging the Figma Model Context Protocol (MCP) server, Claude dynamically queries node schemas, variant properties, and token variables as structured JSON payloads. This eliminates context bloating and guarantees that only verified design tokens (e.g., var(--color-admin-surface), var(--spacing-md)) are passed to the generation pipeline.

Machine-Readable Component Specs: I rewrote each component to include strict operational constraints: permissible nesting depths, auto-layout alignment rules, and explicit WCAG 2.1 AA contrast pairings. When prompted to generate a new screen, Claude validates its draft against these schemas before presenting the final layout.

Accelerating PHP-to-Angular Migrations: Because I decoupled the tokens from specific JavaScript frameworks, developers modernizing legacy PHP server-rendered views could prompt Claude for an updated screen, receive semantic HTML/CSS that strictly matched the Angular component library, and drop the output directly into active sprint branches with minimal QA overhead.

Impact & Results

• Rapid, High-Fidelity Ideation: I enabled product designers and developers to prompt complex enterprise admin views that immediately adhere to brand tokens, cutting ideation and prototyping time significantly.
• Complete Admin Coverage: I audited, documented, and linked 100% of core Admin components and variables to the codebase, establishing a durable single source of truth for all future AI initiatives.
• Near-Zero Post-Generation Tweaking: By grounding the AI via MCP, I eliminated style drift and token hallucination, reducing the manual clean-up previously required after generating AI concepts.
• Accelerated Legacy Modernization: I provided engineering pods with a reliable accelerator to convert legacy PHP pages into modern Angular components with consistent design fidelity and built-in accessibility.