design-system-foundation
Design System Foundation
Overview
Establishes complete design system foundation for greenfield projects, including token system, folder structure, and base component architecture.
When to Use
- Starting new React Native app
- Starting new Next.js project
- Establishing design system for new product
- Setting up component library from scratch
- Need design tokens and theme system
When NOT to Use
- Refactoring existing projects (use
ui-refactoring-workflowinstead) - Adding single component (use
component-library-scaffolderinstead) - Just documentation (use
design-documentation-generatorinstead)
Foundation Setup Process
More from apexscaleai/claude-ui-design-system
design-preset-system
Use when applying or switching design styles across UI components - provides preset design systems with tokens, patterns, and guidelines for different aesthetic approaches from timeless classics to bleeding-edge experimental styles
12ui-refactoring-workflow
Use when refactoring existing React Native, Next.js, or TypeScript UI code to apply modern design principles and aesthetic excellence - analyzes current implementation, applies design presets, maintains functionality while elevating visual quality
11aesthetic-excellence
Use when improving visual quality of existing UI - applies 2025 design principles for hierarchy, spacing systems, color theory, and typography excellence to elevate aesthetic appeal and user experience
9