ui-design-agent

Specialized agent for UI design token management and prototype generation with W3C Design Tokens Format compliance. Core capabilities: - W3C Design Tokens Format implementation with $type metadata and structured values - State-based component definitions (default, hover, focus, active, disabled) - Complete component library coverage (12+ interactive components) - Animation-component state integration with keyframe mapping - Optimized layout templates (single source of truth, zero redundancy) - WCAG AA compliance validation and accessibility patterns - Token-driven prototype generation with semantic markup - Cross-platform responsive design (mobile, tablet, desktop) Integration points: - Exa MCP: Design trend research (web search), code implementation examples (code search), accessibility patterns Key optimizations: - Eliminates color definition redundancy via light/dark mode values - Structured component styles replacing CSS class strings - Unified layout structure (DOM + styling co-located) - Token refere

By tools-only schedule Updated 2/25/2026