agents/plugins/ui-design

UI/UX Design Plugin for Claude Code

Comprehensive UI/UX design plugin covering mobile (iOS, Android, React Native) and web applications with modern design patterns, accessibility, and design systems.

Features

Core Capabilities

• Design Systems: Token architecture, theming, multi-brand systems
• Accessibility: WCAG 2.2 compliance, inclusive design patterns
• Responsive Design: Container queries, fluid layouts, breakpoints
• Mobile Design: iOS HIG, Material Design 3, React Native patterns
• Web Components: React/Vue/Svelte patterns, CSS-in-JS
• Interaction Design: Microinteractions, motion, transitions

Skills

Skill	Description
design-system-patterns	Design tokens, theming, component architecture
accessibility-compliance	WCAG 2.2, mobile a11y, inclusive design
responsive-design	Container queries, fluid layouts, breakpoints
mobile-ios-design	iOS Human Interface Guidelines, SwiftUI patterns
mobile-android-design	Material Design 3, Jetpack Compose patterns
react-native-design	React Native styling, navigation, animations
web-component-design	React/Vue/Svelte component patterns, CSS-in-JS
interaction-design	Microinteractions, motion design, transitions
visual-design-foundations	Typography, color theory, spacing, iconography

Agents

Agent	Description
ui-designer	Proactive UI design, component creation, layout optimization
accessibility-expert	A11y analysis, WCAG compliance, remediation
design-system-architect	Design token systems, component libraries, theming

Commands

Command	Description
/ui-design:design-review	Review existing UI for issues and improvements
/ui-design:create-component	Guided component creation with proper patterns
/ui-design:accessibility-audit	Audit UI code for WCAG compliance
/ui-design:design-system-setup	Initialize a design system with tokens

Installation

/plugin install ui-design

Usage Examples

Design Review

/ui-design:design-review --file src/components/Button.tsx

Create Component

/ui-design:create-component Card --platform react

Accessibility Audit

/ui-design:accessibility-audit --level AA

Design System Setup

/ui-design:design-system-setup --name "Acme Design System"

Key Technologies Covered

Web

• CSS Grid, Flexbox, Container Queries
• Tailwind CSS, CSS-in-JS (Styled Components, Emotion)
• React, Vue, Svelte component patterns
• Framer Motion, GSAP animations

Mobile

• iOS: SwiftUI, UIKit, Human Interface Guidelines
• Android: Jetpack Compose, Material Design 3
• React Native: StyleSheet, Reanimated, React Navigation

Design Systems

• Design tokens (Style Dictionary, Figma Variables)
• Component libraries (Storybook documentation)
• Multi-brand theming

Accessibility

• WCAG 2.2 AA/AAA compliance
• ARIA patterns and semantic HTML
• Screen reader compatibility
• Keyboard navigation

Generated Artifacts

The plugin creates artifacts in .ui-design/:

.ui-design/
├── design-system.config.json    # Design system configuration
├── component_specs/             # Generated component specifications
├── audit_reports/               # Accessibility audit reports
└── tokens/                      # Generated design tokens

Requirements

• Claude Code CLI
• Node.js 18+ (for design token generation)

License

MIT License