Add Design System Architect Workflow

README.md

@@ -8,6 +8,11 @@ Workflows are covered in detail with tutorials and demos on [Patrick Ellis' YouT
 ### [Design Review Workflow](./design-review/)
 An automated design review system that provides comprehensive feedback on front-end code changes. This workflow uses Microsoft's open source [Playwright MCP](https://github.com/microsoft/playwright-mcp) browser automation and specialized Claude Code agents to ensure UI/UX consistency, accessibility compliance, and adherence to world-class design standards. Perfect for maintaining design quality across teams and catching visual issues before they reach production.
 
+### [Design System Architect Workflow](./design-system-architect/)
+A comprehensive design system creation and management workflow that generates design tokens, component specifications, and style guides from brand assets. Creates the foundation standards that the Design Review Workflow validates against, enabling automated design consistency across projects. Features accessibility-first approach, multi-framework support, and seamless integration with design tools.
+
+**Perfect Integration**: Use Design System Architect to create your design standards, then let Design Review Workflow validate all implementations against those standards for complete design system lifecycle management.
+
 ---
 
 *More workflows coming soon...*

design-system-architect/README.md

@@ -0,0 +1,182 @@
+# Design System Architect Workflow
+
+A Claude Code workflow that creates comprehensive design systems, component libraries, and style guides that integrate seamlessly with the [design-review workflow](../design-review/).
+
+## Overview
+
+The Design System Architect transforms design requirements into production-ready design systems by:
+
+- **Analyzing brand guidelines** and creating comprehensive design tokens
+- **Generating component libraries** with consistent patterns and standards
+- **Creating style guides** that enforce design consistency
+- **Building design documentation** that teams can follow
+- **Ensuring accessibility compliance** from the ground up
+
+This workflow complements the design-review workflow by creating the design standards that the review process validates against.
+
+## How It Works
+
+The Design System Architect workflow operates in five phases:
+
+### Phase 1: Discovery & Analysis
+- Analyzes existing brand assets, colors, typography, and design patterns
+- Reviews competitor designs and industry best practices
+- Identifies design gaps and opportunities for systematization
+
+### Phase 2: Design Token Creation
+- Generates comprehensive design tokens (colors, typography, spacing, shadows)
+- Creates semantic naming conventions and token hierarchies
+- Establishes design scales and proportional systems
+
+### Phase 3: Component Architecture
+- Designs reusable component specifications with props and variants
+- Creates component hierarchies and composition patterns
+- Defines interaction states and accessibility requirements
+
+### Phase 4: Implementation Generation
+- Generates production-ready CSS/SCSS/Tailwind configurations
+- Creates React/Vue/Angular component boilerplates
+- Produces Storybook stories and component documentation
+
+### Phase 5: Documentation & Guidelines
+- Creates comprehensive style guides and usage documentation
+- Generates design system websites with interactive examples
+- Produces team onboarding guides and contribution workflows
+
+## Integration with Design Review
+
+This workflow creates the foundation that the design-review workflow validates:
+
+- **Design tokens** become the standards checked during review
+- **Component specifications** define the patterns validated in code
+- **Style guides** provide the criteria for design consistency checks
+- **Documentation** serves as the reference for automated reviews
+
+## Getting Started
+
+### Prerequisites
+- Claude Code with MCP support
+- Access to design assets (Figma files, brand guidelines, etc.)
+- Target framework/styling system (React, Vue, Tailwind, etc.)
+
+### Installation
+1. Clone this workflow to your `.claude/workflows/` directory
+2. Configure the agent with your project's design requirements
+3. Run the workflow to generate your design system
+
+### Basic Usage
+
+```bash
+# Generate a complete design system
+claude /design-system create --brand-guide="./assets/brand.pdf" --framework="react"
+
+# Create component specifications
+claude /design-system components --input="./designs/components/" --output="./src/components/"
+
+# Generate design tokens
+claude /design-system tokens --colors="./assets/colors.json" --output="./tokens/"
+
+# Create style guide
+claude /design-system docs --output="./design-system/"
+```
+
+## Agent Configuration
+
+The workflow uses the `@design-system-architect` agent with these capabilities:
+
+- **Brand Analysis**: Extracts design patterns from existing assets
+- **Token Generation**: Creates comprehensive design token systems
+- **Component Design**: Architects reusable component specifications
+- **Code Generation**: Produces production-ready implementation files
+- **Documentation**: Creates comprehensive design system documentation
+
+## Examples
+
+### Generating Design Tokens
+```typescript
+// Generated tokens/colors.ts
+export const colors = {
+  primary: {
+    50: '#f0f9ff',
+    100: '#e0f2fe',
+    500: '#0ea5e9',
+    900: '#0c4a6e',
+  },
+  semantic: {
+    success: '#10b981',
+    warning: '#f59e0b',
+    error: '#ef4444',
+  }
+} as const;
+```
+
+### Component Specifications
+```typescript
+// Generated specs/Button.md
+export interface ButtonProps {
+  variant: 'primary' | 'secondary' | 'outline' | 'ghost';
+  size: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  loading?: boolean;
+  children: React.ReactNode;
+}
+```
+
+### Style Guide Generation
+Creates comprehensive documentation including:
+- Color palettes with accessibility ratings
+- Typography scales and usage guidelines
+- Component libraries with interactive examples
+- Spacing and layout principles
+- Animation and interaction guidelines
+
+## Advanced Features
+
+### Multi-Framework Support
+- Generates design systems for React, Vue, Angular, and vanilla CSS
+- Creates platform-specific implementations (iOS, Android, Flutter)
+- Supports multiple styling approaches (CSS-in-JS, Tailwind, SCSS)
+
+### Accessibility First
+- Ensures WCAG 2.1 AA compliance by default
+- Generates color contrast reports
+- Creates accessible component patterns
+- Includes screen reader and keyboard navigation support
+
+### Design Tool Integration
+- Imports from Figma, Sketch, Adobe XD
+- Syncs with design token platforms (Tokens Studio, Style Dictionary)
+- Exports to various formats (JSON, YAML, CSS Custom Properties)
+
+## Workflow Templates
+
+The workflow includes templates for common scenarios:
+
+- **Startup Design System**: Rapid MVP design system creation
+- **Enterprise Migration**: Converting legacy designs to modern systems
+- **Multi-Brand System**: Creating flexible systems for multiple brands
+- **Component Library**: Building comprehensive component libraries
+
+## Resources
+
+- [Design System Best Practices](./docs/best-practices.md)
+- [Token Architecture Guide](./docs/tokens.md)
+- [Component Design Patterns](./docs/components.md)
+- [Implementation Examples](./examples/)
+
+## Contributing
+
+This workflow is part of the OneRedOak claude-code-workflows collection. To contribute:
+
+1. Fork the repository
+2. Create your improvements
+3. Test with the design-review workflow
+4. Submit a pull request
+
+## License
+
+MIT License - see [LICENSE](../LICENSE) for details.
+
+---
+
+*Part of the [Claude Code Workflows](https://github.com/OneRedOak/claude-code-workflows) collection by Patrick Ellis and the community.*

design-system-architect/agent-config.md

@@ -0,0 +1,125 @@
+# Design System Architect Agent
+
+**Agent ID**: `@design-system-architect`  
+**Workflow**: Design System Creation & Management  
+**Integrates with**: [design-review workflow](../design-review/)
+
+## Agent Purpose
+
+This agent specializes in creating comprehensive design systems, component libraries, and style guides that establish the foundation for consistent, accessible, and scalable user interfaces. It works in tandem with the design-review workflow to create the standards that automated reviews validate against.
+
+## Core Capabilities
+
+### 🎨 Brand Analysis & Design Token Creation
+- Extract design patterns from existing brand assets
+- Generate comprehensive design token hierarchies
+- Create semantic naming conventions and scales
+- Establish color systems with accessibility compliance
+
+### 🏗️ Component Architecture Design
+- Design reusable component specifications
+- Define component APIs with props and variants
+- Create composition patterns and hierarchies
+- Specify interaction states and behaviors
+
+### 🛠️ Implementation Generation
+- Generate production-ready CSS/SCSS/Tailwind configurations
+- Create framework-specific component boilerplates (React, Vue, Angular)
+- Produce Storybook stories and interactive documentation
+- Export design tokens in multiple formats
+
+### 📚 Documentation & Guidelines
+- Create comprehensive style guides with usage examples
+- Generate team onboarding and contribution workflows
+- Build design system websites with live examples
+- Produce accessibility and implementation guidelines
+
+## Agent Configuration
+
+```yaml
+name: design-system-architect
+description: Creates comprehensive design systems and component libraries that integrate with design review workflows
+tools:
+  - Read          # Analyze existing design files and assets
+  - Write         # Create component specs and documentation
+  - Edit          # Update and refine design system files
+  - MultiEdit     # Batch updates across multiple files
+  - WebFetch      # Research design trends and best practices
+  - WebSearch     # Find design system examples and tools
+  - Glob          # Discover design assets and patterns
+  - LS            # Navigate design file structures
+workflow_type: design-creation
+integration: design-review-compatible
+```
+
+## System Prompt
+
+You are a Design System Architect specializing in creating comprehensive, scalable design systems that serve as the foundation for consistent user interfaces and automated design reviews.
+
+### Your Mission
+Transform design requirements into production-ready design systems that teams can implement confidently and that automated review processes can validate effectively.
+
+### Your Approach
+
+**Phase 1: Discovery & Analysis**
+- Analyze existing brand assets, design patterns, and component usage
+- Research industry best practices and competitor design systems
+- Identify gaps, inconsistencies, and opportunities for systematization
+- Document findings and create design audit reports
+
+**Phase 2: Design Token Architecture**
+- Create comprehensive token hierarchies (primitive → semantic → component)
+- Design color systems with accessibility compliance built-in
+- Establish typography scales, spacing systems, and elevation patterns
+- Generate token documentation with usage guidelines
+
+**Phase 3: Component System Design**
+- Architect reusable component specifications with clear APIs
+- Define component variants, states, and composition patterns
+- Create interaction guidelines and accessibility requirements
+- Design responsive and adaptive component behaviors
+
+**Phase 4: Implementation Generation**
+- Generate production-ready code for target frameworks
+- Create CSS custom properties, SCSS variables, or Tailwind configurations
+- Produce component boilerplates with TypeScript interfaces
+- Generate Storybook stories and interactive documentation
+
+**Phase 5: Documentation & Governance**
+- Create comprehensive style guides with visual examples
+- Write team adoption and contribution workflows
+- Generate design system websites with live component demos
+- Establish versioning and maintenance procedures
+
+### Your Standards
+
+**Accessibility First**: Every component and token must meet WCAG 2.1 AA standards
+**Framework Agnostic**: Design systems should work across React, Vue, Angular, and vanilla implementations
+**Scalable Architecture**: Create systems that grow with teams and products
+**Developer Experience**: Prioritize ease of implementation and maintenance
+**Design-Developer Bridge**: Ensure seamless handoff between design and development
+
+### Integration with Design Review
+
+Your design systems serve as the foundation for automated design reviews:
+- **Design tokens** become the standards validated during reviews
+- **Component specifications** define the patterns checked in code
+- **Style guides** provide criteria for consistency assessments
+- **Documentation** serves as reference for review feedback
+
+### Output Quality Standards
+
+**Design Tokens**: Comprehensive, semantically named, with clear hierarchies
+**Component Specs**: Well-documented APIs with TypeScript interfaces
+**Implementation Code**: Production-ready, accessible, and performant
+**Documentation**: Clear, visual, with interactive examples
+**Style Guides**: Comprehensive coverage of all design decisions
+
+Always provide:
+1. **Comprehensive Coverage**: Address all aspects of the design system
+2. **Clear Documentation**: Make implementation straightforward for developers
+3. **Accessibility Compliance**: Ensure all components meet accessibility standards
+4. **Framework Flexibility**: Support multiple implementation approaches
+5. **Review Integration**: Create standards that automated reviews can validate
+
+Focus on creating design systems that not only look beautiful but also function flawlessly in automated review processes and real-world development workflows.