Claude UI Design System

Complete UI/UX design system for React Native & Next.js projects - from greenfield to brownfield.

What This Does

🆕 New Projects (Greenfield)

• Establish design system foundation with tokens
• Generate complete documentation
• Scaffold component library with atomic design
• Set up theme system and design presets

♻️ Existing Projects (Brownfield)

• Refactor UI with modern design principles
• Migrate to new design presets
• Modernize component implementations
• Improve accessibility and aesthetics

🎨 Design Presets

Choose from 6 curated design styles:

• Minimalist Modern (timeless, clean)
• Bold Brutalist (bleeding edge, bold)
• Soft Neumorphic (subtle, tactile)
• Glass Aesthetic (transparent, depth)
• Timeless Classic (professional, accessible)
• Bleeding Edge Experimental (innovative, forward-thinking)

Installation

Method 1: Plugin Marketplace (Easiest) ⭐

Install via Claude Code plugin system:

# In Claude Code, run:
/plugin marketplace add apexscaleai/claude-ui-design-system
/plugin install ui-design-system@ui-design-system

Restart Claude Code. Skills are now available!

Method 2: Personal Skills (Manual)

Install globally for use across all projects:

cd ~/.claude/skills
git clone https://github.com/apexscaleai/claude-ui-design-system

Restart Claude Code. Skills are now available!

Method 3: Project Skills (Team)

Install for specific project (team-shared):

cd your-project
mkdir -p .claude/skills
cd .claude/skills
git clone https://github.com/apexscaleai/claude-ui-design-system

Commit to git. Team members get skills automatically.

Available Skills

📦 Foundation (New Projects)

• design-system-foundation - Set up design tokens, structure, theme system
• design-documentation-generator - Auto-generate design specs and style guides
• component-library-scaffolder - Scaffold atomic design component library

🎨 Presets (Style System)

• design-preset-system - Apply and switch between design presets

♻️ Refactoring (Existing Projects)

• ui-refactoring-workflow - Refactor UI with modern design principles
• component-modernization - Modernize React Native/Next.js components
• design-migration - Migrate between design systems

✨ Enhancement (Universal)

• aesthetic-excellence - Improve visual hierarchy, spacing, typography
• animation-enhancement - Add thoughtful animations and transitions
• accessibility-upgrade - Enhance WCAG compliance

Usage Examples

Starting New Project

"Set up design system foundation for my React Native fitness app using glass-aesthetic preset"

Claude will:

1. ✅ Create design tokens
2. ✅ Set up folder structure
3. ✅ Generate documentation
4. ✅ Scaffold base components
5. ✅ Apply glass-aesthetic styling

Refactoring Existing Code

"Refactor this button component to use minimalist-modern preset and improve accessibility"

Claude will:

1. ✅ Analyze current implementation
2. ✅ Apply modern design patterns
3. ✅ Migrate to design tokens
4. ✅ Enhance accessibility
5. ✅ Add micro-interactions

Generating Documentation

"Generate complete design system documentation for my component library"

Claude creates:

• Design System Spec
• Component Docs
• Style Guide
• Accessibility Guide
• Token Reference

Switching Design Presets

"Convert my app from minimalist-modern to bold-brutalist preset"

Claude will:

1. ✅ Analyze current token usage
2. ✅ Map to new preset tokens
3. ✅ Update component styling
4. ✅ Maintain functionality
5. ✅ Update documentation

Skills Structure

claude-ui-design-system/
├── foundation/                  # Greenfield - New Projects
│   ├── design-system-foundation/
│   ├── design-documentation-generator/
│   └── component-library-scaffolder/
│
├── presets/                     # Design Style Presets
│   └── design-preset-system/
│       └── presets/
│           ├── minimalist-modern/
│           ├── bold-brutalist/
│           ├── soft-neumorphic/
│           ├── glass-aesthetic/
│           ├── timeless-classic/
│           └── bleeding-edge-experimental/
│
├── refactoring/                 # Brownfield - Existing
│   ├── ui-refactoring-workflow/
│   ├── component-modernization/
│   └── design-migration/
│
└── enhancement/                 # Universal Improvements
    ├── aesthetic-excellence/
    ├── animation-enhancement/
    └── accessibility-upgrade/

Design Presets Overview

Minimalist Modern (Timeless)

• Clean, spacious layouts
• Monochromatic + single accent
• Subtle shadows (0-10% opacity)
• Generous white space

Bold Brutalist (Bleeding Edge)

• High contrast (black/white/red/yellow)
• Sharp corners (0 border radius)
• Bold typography (700-900 weight)
• Harsh shadows (solid, offset)

Soft Neumorphic (Subtle)

• Soft shadows and highlights
• Low contrast backgrounds
• Rounded corners
• Tactile appearance

Glass Aesthetic (Modern)

• Transparency with backdrop blur
• Layered depth
• Soft glows and halos
• Semi-transparent surfaces

Timeless Classic (Professional)

• Balanced, professional
• High accessibility
• Conservative colors
• Proven patterns

Bleeding Edge Experimental (Innovative)

• Latest 2025 trends
• Experimental interactions
• Cutting-edge animations
• Forward-thinking patterns

Contributing

This is a living design system. Contributions welcome!

1. Fork the repository
2. Create feature branch
3. Add/improve skills following TDD approach
4. Submit pull request

License

MIT License - feel free to use in your projects!

Credits

Built for the Claude Code community by @apexscaleai

Inspired by:

• VoltAgent's awesome-claude-code-subagents
• obra's superpowers
• Anthropic's official skills repository

---

Questions? Open an issue or start a discussion!