/ui-design-system - Design System Management

Load, enforce, and manage customer design systems including design tokens, brand guidelines, and component specifications.

Usage

# Load design system from configuration
/ui-design-system load

# Load specific customer's design system
/ui-design-system load --customer acme-corp

# Generate design system from brand assets
/ui-design-system generate --logo ./logo.svg --color "#0ea5e9"

# Validate current UI against design system
/ui-design-system validate src/components/

# Export design system to various formats
/ui-design-system export --format css
/ui-design-system export --format tailwind
/ui-design-system export --format figma

# List available design systems
/ui-design-system list

Output Format

DESIGN SYSTEM: Acme Corporation
═══════════════════════════════════════════════════════════════

Status: ✅ LOADED
Version: 2.1.0
Last Updated: 2026-01-15

Design Tokens
───────────────────────────────────────────────────────────────
Colors:
├─ Primary:    #0ea5e9 (sky-500)
├─ Secondary:  #64748b (slate-500)
├─ Success:    #22c55e (green-500)
├─ Warning:    #f59e0b (amber-500)
├─ Error:      #ef4444 (red-500)
└─ Background: #ffffff (white)

Typography:
├─ Family:     Inter, system-ui, sans-serif
├─ Scale:      12, 14, 16, 18, 24, 30, 36, 48
├─ Weights:    400, 500, 600, 700
└─ Line Height: 1.25, 1.5, 1.75

Spacing (8px grid):
└─ 4, 8, 12, 16, 20, 24, 32, 40, 48, 64

Borders:
├─ Radius:     4, 8, 12, 16, 9999 (pill)
└─ Width:      1px

Shadows:
├─ sm:         0 1px 2px rgba(0,0,0,0.05)
├─ md:         0 4px 6px rgba(0,0,0,0.1)
└─ lg:         0 10px 15px rgba(0,0,0,0.1)

Component Specifications
───────────────────────────────────────────────────────────────
Loaded: 39 components
├─ Atoms:      13 (Button, Input, Label, Badge, ...)
├─ Molecules:  11 (FormField, SearchInput, StatusIndicator, ...)
├─ Organisms:  9  (Header, Card, Modal, DataTable, ...)
└─ Templates:  6  (DashboardGrid, DetailView, FormPage, ...)

Theme Support
───────────────────────────────────────────────────────────────
├─ Light: ✅ Configured
├─ Dark:  ✅ Configured
└─ Auto:  ✅ System preference detection

RESULT: ✅ DESIGN SYSTEM READY

Commands

Load Design System

/ui-design-system load [options]

Options:
  --customer <name>    Customer name or ID
  --version <ver>      Specific version to load
  --path <path>        Load from local path
  --force              Force reload even if cached

Generate Design System

/ui-design-system generate [options]

Options:
  --logo <path>        Logo file (SVG, PNG)
  --color <hex>        Primary brand color
  --industry <type>    Industry (tech, healthcare, finance, ...)
  --output <path>      Output directory

Validate UI

/ui-design-system validate <path> [options]

Options:
  --strict             Fail on any violation
  --fix                Auto-fix violations
  --report             Generate detailed report

Export Design System

/ui-design-system export [options]

Options:
  --format <fmt>       Output format (css, scss, tailwind, figma, json)
  --output <path>      Output file/directory
  --include <items>    Include specific tokens (colors, typography, ...)

Validation Report

DESIGN SYSTEM VALIDATION: src/components/
═══════════════════════════════════════════════════════════════

Scanning 24 files...

Results
───────────────────────────────────────────────────────────────
✅ Colors:      100% compliant (0 violations)
⚠️ Typography: 95% compliant (2 violations)
   └─ Button.tsx:42 - Font size 15px not on scale
   └─ Card.tsx:28 - Font weight 450 not defined

✅ Spacing:     98% compliant (1 violation)
   └─ Modal.tsx:67 - Padding 18px not on 8px grid

✅ Borders:     100% compliant (0 violations)
✅ Shadows:     100% compliant (0 violations)

Summary
───────────────────────────────────────────────────────────────
Total Checks:     156
Passed:           153
Violations:       3
Auto-fixable:     3

Compliance Score: 98%

RESULT: ⚠️ VALIDATION PASSED WITH WARNINGS

Design Token Formats

CSS Custom Properties

:root {
  --coditect-color-primary-500: #0ea5e9;
  --coditect-font-size-base: 1rem;
  --coditect-space-4: 1rem;
  --coditect-radius-md: 0.5rem;
}

Tailwind Config

module.exports = {
  theme: {
    colors: {
      primary: { 500: '#0ea5e9' }
    },
    fontSize: {
      base: '1rem'
    }
  }
}

JSON Export

{
  "colors": {
    "primary": { "500": "#0ea5e9" }
  },
  "typography": {
    "fontSize": { "base": "1rem" }
  }
}

Agent Invoked

Action	Agent	Purpose
Load	moe-ui-design-system-enforcer	Load and parse design system
Generate	moe-ui-design-system-enforcer	Create from brand assets
Validate	moe-ui-design-system-enforcer	Check compliance
Export	moe-ui-component-library-curator	Format conversion

Exit Codes

Code	Meaning
0	Operation successful
1	Validation passed with warnings
2	Validation failed
3	Design system not found
4	Invalid configuration

Related Commands

• /ui-optimize - Full optimization pipeline
• /ui-quality - Run quality gates
• /ui-a2ui-render - Generate A2UI tree

Completion Checklist

Before marking complete:

• Design system loaded
• Tokens validated
• Components mapped
• Theme support verified
• Export format selected (if exporting)

When NOT to Use

Do NOT use when:

• ❌ Generating UI without design system (use default)
• ❌ Quick component creation
• ❌ Design system already loaded in session

---

Command Version: 1.0.0 Created: 2026-01-19 Part of: CODITECT MoE UI/UX Agent System