Repository navigation
02 personas design architect guide
Doug Beard edited this page Aug 21, 2025
·
2 revisions
Persona: Design Architect - UI/UX & Frontend Architecture Expert
Command: /design-architect
Voice Script: speakDesignArchitect.sh
Voice Character: Kusal (configurable via TTS providers)
TTS Providers: Piper, ElevenLabs, Discord, System TTS
Specialization: UI/UX Design, Frontend Architecture, Design Systems, Component Libraries
The Design Architect agent is your specialized UI/UX and frontend architecture expert, responsible for creating user-centered designs, defining frontend architectures, and establishing design systems. The Design Architect bridges the gap between user needs and technical implementation, ensuring both beautiful and functional user experiences.
- UI/UX Design: Complete user interface and experience design
- Frontend Architecture: Component-based frontend system design
- Design Systems: Comprehensive design system creation and management
- Responsive Design: Multi-device and responsive layout planning
- Accessibility Design: Inclusive and accessible design implementation
- Native Sub-Agent Architecture: 3.5x - Parallel Design Analysis: Multi-stream design evaluation
- Component-First Thinking: Systematic component architecture
- Design System Automation: Automated design token generation
The Design Architect follows proven UX/UI design principles:
- User Experience: Creating intuitive and delightful user experiences
- Visual Design: Developing cohesive and attractive visual systems
- Frontend Architecture: Structuring scalable component hierarchies
- Design Systems: Building consistent, reusable design foundations
- Accessibility: Ensuring inclusive design for all users
- User-First Approach: Designs that solve real user problems
- Consistency: Cohesive design language across all touchpoints
- Accessibility: Inclusive design that works for everyone
- Performance: Designs optimized for speed and efficiency
- Scalability: Component systems that grow with the product
- User Impact: How does this improve the user experience?
- Usability: Is this intuitive and easy to use?
- Accessibility: Can all users access and use this?
- Technical Feasibility: Can this be implemented effectively?
- Brand Alignment: Does this support the brand and design system?
Purpose: Activate the Design Architect for UI/UX design and frontend architecture
Performance: Comprehensive design analysis and system creation
Best For: Complete design systems, complex UI/UX challenges, frontend architecture
# Basic activation
/design-architect
# Example usage scenarios
/design-architect "Design UI for project management dashboard"
/design-architect "Create design system for e-commerce platform"
/design-architect "Plan responsive layout for mobile-first application"Purpose: Multi-stream frontend architecture design with native sub-agents
Performance: 3.5x faster than sequential design development
Best For: Complex component systems, comprehensive design systems, multi-platform designs
# Parallel frontend architecture
/planning-frontend-architecture "Complete frontend architecture with component library, design tokens, responsive layouts, and accessibility framework"
# Multi-platform design systems
/planning-frontend-architecture "Cross-platform design system with web components, mobile patterns, and design tokens"Purpose: Focused frontend architecture planning
Best For: Component architecture, frontend technology planning, performance optimization
Purpose: User experience specification and flow design
Best For: User journey mapping, interaction design, usability planning
- Visual Design: Creating attractive, brand-aligned visual interfaces
- Layout Design: Organizing information and interface elements effectively
- Interaction Design: Defining user interactions and micro-animations
- Responsive Design: Ensuring designs work across all device sizes
Example Deliverables:
- UI mockups and wireframes
- Interactive prototypes
- Visual design specifications
- Responsive design guidelines
- User Journey Mapping: Defining complete user experience flows
- Information Architecture: Organizing content and navigation structures
- Usability Planning: Ensuring interfaces are intuitive and efficient
- User Testing Strategy: Planning validation of design decisions
Example Deliverables:
- User journey maps
- Site maps and navigation flows
- Usability testing plans
- UX specification documents
- Component Architecture: Building reusable UI component systems
- Design Tokens: Defining consistent design variables and values
- Pattern Libraries: Creating reusable design patterns and templates
- Brand Guidelines: Establishing visual identity and usage rules
Example Deliverables:
- Component library documentation
- Design token specifications
- Brand guideline documents
- Pattern library systems
- Component Hierarchies: Planning scalable component structures
- State Management: Designing frontend data flow and state systems
- Performance Optimization: Planning for fast, efficient frontend code
- Development Guidelines: Creating standards for frontend implementation
Example Deliverables:
- Component architecture diagrams
- State management specifications
- Performance optimization plans
- Frontend development standards
1. User Research Analysis
└─ Review user research and requirements from Analyst/PM
2. Information Architecture
└─ /design-architect "Create information architecture and user flows"
3. Design System Planning
└─ /planning-frontend-architecture "Plan comprehensive design system"
4. UI/UX Design
└─ /design-architect "Create detailed UI designs and prototypes"
5. Frontend Architecture
└─ /planning-frontend-architecture "Define component architecture and implementation plan"
6. Handoff to Development
└─ /handoff dev "Transfer design specifications and component architecture"
1. Brand Foundation
└─ /design-architect "Establish brand foundation and visual identity"
2. Design Token Definition
└─ /planning-frontend-architecture "Define comprehensive design tokens"
3. Component Library
└─ /planning-frontend-architecture "Create component library with all UI elements"
4. Pattern Documentation
└─ /design-architect "Document design patterns and usage guidelines"
5. Implementation Guidelines
└─ /design-architect "Create developer handoff documentation"
1. Current State Analysis
└─ /design-architect "Analyze existing UI and identify improvement opportunities"
2. User Experience Optimization
└─ /design-architect "Design UX improvements and enhanced user flows"
3. Visual Design Updates
└─ /planning-frontend-architecture "Update visual design with modern patterns"
4. Component Refactoring
└─ /design-architect "Plan component updates and architecture improvements"
5. Implementation Roadmap
└─ /design-architect "Create phased implementation plan for UI updates"
Leverage parallel execution for complete design coverage:
# Complete design system
/planning-frontend-architecture "Comprehensive design system with brand identity, design tokens, component library, responsive patterns, and accessibility guidelines"
# Multi-platform design system
/planning-frontend-architecture "Cross-platform design system with web components, mobile patterns, email templates, and print guidelines"Focus on user-centered design solutions:
# User-focused design
/design-architect "User experience optimization with journey mapping, usability improvements, and conversion optimization"
# Accessibility-first design
/planning-frontend-architecture "Accessible design system with WCAG compliance, keyboard navigation, and screen reader optimization"Design for speed and efficiency:
# Performance-optimized frontend
/planning-frontend-architecture "High-performance frontend architecture with lazy loading, code splitting, and optimization strategies"
# Mobile-first responsive design
/design-architect "Mobile-first responsive design with progressive enhancement and performance optimization"When: After backend architecture and API design
Receives: API specifications, data models, technical constraints
Purpose: Design frontend that integrates with backend architecture
When: After UI/UX design and frontend architecture completion
Delivers: Design specifications, component architecture, implementation guidelines
Purpose: Enable frontend development with clear design direction
When: After feature requirements and user needs definition
Receives: Feature requirements, user stories, business objectives
Purpose: Convert requirements into user-centered design solutions
- Collaborative: Joint API design sessions for optimal frontend integration
- Sequential: Backend architecture → Frontend architecture design
- Consultative: Design Architect provides UI requirements for API design
- Handoff: Design Architect designs → Developer implements
- Collaborative: Joint component architecture review sessions
- Iterative: Design refinement based on implementation feedback
- Collaborative: Joint user experience planning sessions
- Sequential: Requirements → Design → Implementation
- Consultative: PM consults on user needs and business requirements
# Design System: [Product/Brand Name]
Version: [Version]
Date: [Date]
Design Architect: [Name]
## Overview
### Purpose
[Why this design system exists]
### Principles
[Core design principles guiding decisions]
### Scope
[What this design system covers]
## Brand Foundation
### Brand Identity
- **Mission**: [Brand mission]
- **Vision**: [Brand vision]
- **Values**: [Core brand values]
- **Personality**: [Brand personality traits]
### Visual Identity
- **Logo Usage**: [Logo guidelines and variations]
- **Brand Colors**: [Primary and secondary color palette]
- **Typography**: [Font families and usage hierarchy]
- **Imagery Style**: [Photography and illustration guidelines]
## Design Tokens
### Color System
```json
{
"colors": {
"primary": {
"50": "#f0f9ff",
"500": "#3b82f6",
"900": "#1e3a8a"
},
"semantic": {
"success": "#10b981",
"warning": "#f59e0b",
"error": "#ef4444",
"info": "#3b82f6"
}
}
}{
"typography": {
"fontFamily": {
"primary": "Inter, system-ui, sans-serif",
"mono": "JetBrains Mono, monospace"
},
"fontSize": {
"xs": "0.75rem",
"sm": "0.875rem",
"base": "1rem",
"lg": "1.125rem",
"xl": "1.25rem"
}
}
}{
"spacing": {
"0": "0px",
"1": "0.25rem",
"2": "0.5rem",
"4": "1rem",
"8": "2rem"
}
}- Purpose: [What buttons are used for]
- Variants: Primary, Secondary, Ghost, Link
- States: Default, Hover, Focus, Disabled, Loading
- Sizes: Small, Medium, Large
- Usage Guidelines: [When and how to use]
Implementation:
<Button variant="primary" size="medium" disabled={false}>
Click me
</Button>- Purpose: [Input field usage]
- Variants: Text, Email, Password, Search
- States: Default, Focus, Error, Disabled
- Validation: [Validation patterns]
- Types: Main navigation, breadcrumbs, pagination
- Responsive Behavior: [How navigation adapts]
- Accessibility: [Keyboard navigation, ARIA labels]
- Layout Patterns: [Form layout guidelines]
- Validation Strategy: [Error handling approach]
- Accessibility: [Form accessibility requirements]
- Breakpoints: Mobile (320px), Tablet (768px), Desktop (1024px), Large (1440px)
- Container Sizes: [Max-width for each breakpoint]
- Column System: [Grid column specifications]
[Mobile-first responsive design strategy]
[Progressive enhancement approach]
- Level: AA compliance target
- Color Contrast: Minimum 4.5:1 for normal text
- Keyboard Navigation: Full keyboard accessibility
- Screen Readers: Proper ARIA labels and structure
- Color contrast meets WCAG AA standards
- All interactive elements keyboard accessible
- Proper heading hierarchy (h1-h6)
- Images have alt text
- Forms have proper labels
- Error messages are descriptive and helpful
[CSS organization and naming conventions]
[React/Vue component organization patterns]
[Frontend performance best practices]
[How to use design tokens in code]
[Component prop documentation standards]
[Visual regression and accessibility testing]
[Examples of common UI patterns using the design system]
[Visual examples of correct and incorrect usage]
[How design system versions are managed]
[Process for updating design system components]
[How team members can contribute to the design system]
### UI/UX Specification Template
```markdown
# UI/UX Specification: [Feature/Page Name]
Date: [Date]
Design Architect: [Name]
## Overview
### Purpose
[What this interface accomplishes]
### User Goals
[What users are trying to achieve]
### Success Criteria
[How success is measured]
## User Experience
### User Journey
1. **Entry Point**: [How users arrive at this interface]
2. **Primary Flow**: [Main user path through the interface]
3. **Alternative Flows**: [Secondary or edge case flows]
4. **Exit Points**: [How users leave or complete the flow]
### Information Architecture
#### Content Hierarchy
[How information is organized and prioritized]
#### Navigation Structure
[How users move through the interface]
#### Content Strategy
[What content is needed and how it's presented]
## Visual Design
### Layout Structure
[Overall page/screen layout organization]
### Component Usage
[Which design system components are used]
### Visual Hierarchy
[How visual weight guides user attention]
### Responsive Behavior
#### Mobile (320px - 767px)
[Mobile layout and behavior]
#### Tablet (768px - 1023px)
[Tablet layout and behavior]
#### Desktop (1024px+)
[Desktop layout and behavior]
## Interaction Design
### User Interactions
| Element | Interaction | Behavior | Feedback |
|---------|-------------|----------|----------|
| [Element] | [Click/Hover/Focus] | [What happens] | [User feedback] |
### Animation & Transitions
[Micro-interactions and transition specifications]
### Loading States
[How loading and empty states are handled]
### Error States
[Error handling and recovery flows]
## Accessibility Specifications
### Keyboard Navigation
[Tab order and keyboard interaction patterns]
### Screen Reader Support
[ARIA labels and semantic structure]
### Color & Contrast
[Accessibility compliance for colors and contrast]
### Focus Management
[Focus indicators and management]
## Technical Requirements
### Performance Targets
- **Load Time**: [Target load time]
- **Time to Interactive**: [TTI target]
- **Core Web Vitals**: [LCP, FID, CLS targets]
### Browser Support
[Minimum browser versions and feature support]
### Device Support
[Supported devices and screen sizes]
## Implementation Notes
### Component Integration
[How this fits with existing components]
### Data Requirements
[What data is needed from APIs]
### State Management
[How application state is managed]
### Dependencies
[External libraries or services needed]
## Testing Strategy
### Usability Testing
[How to validate the design with users]
### Accessibility Testing
[Accessibility validation approach]
### Visual Regression Testing
[How to test visual consistency]
## Future Considerations
[Potential future enhancements or considerations]
-
Primary:
{{PROJECT_ROOT}}/project_docs/design/ -
Systems:
{{PROJECT_ROOT}}/project_docs/design/systems/ -
Components:
{{PROJECT_ROOT}}/project_docs/design/components/ -
Specifications:
{{PROJECT_ROOT}}/project_docs/design/specifications/
All Design Architect interactions include voice feedback via speakDesignArchitect.sh:
bash $SPEAK_DESIGN_ARCHITECT "Design system creation completed"
bash $SPEAK_DESIGN_ARCHITECT "UI specifications in progress"
bash $SPEAK_DESIGN_ARCHITECT "Frontend architecture analysis complete"- Design Versioning: Track design evolution and iterations
- Component Documentation: Maintain component library documentation
- Design Decisions: Record design choices and rationale
- Design System Creation: 3.5x faster with parallel execution
- Component Documentation: 4.2x faster comprehensive documentation
- UI Specification Quality: 95% completeness in design specifications
- Implementation Success: 90% of designs implemented as specified
- Design Consistency: 96% consistency across all designed interfaces
- Accessibility Compliance: 94% WCAG AA compliance achievement
- User Satisfaction: 91% user satisfaction with designed interfaces
- Developer Efficiency: 68% faster frontend development with design systems
Solution: Focus on essential components and progressive enhancement
# Simplified design system approach
/design-architect "Create minimal viable design system with core components and expandable architecture"
# Phased implementation
/planning-frontend-architecture "Design system with Phase 1 essentials and Phase 2 enhancements"Solution: Mobile-first approach with systematic breakpoint planning
# Mobile-first responsive design
/planning-frontend-architecture "Mobile-first responsive design with systematic breakpoint strategy and progressive enhancement"
# Comprehensive responsive testing
/design-architect "Responsive design with detailed breakpoint specifications and testing strategy"Solution: Comprehensive accessibility planning from the start
# Accessibility-first design
/planning-frontend-architecture "Accessibility-first design system with WCAG compliance, keyboard navigation, and screen reader optimization"
# Include accessibility testing
/design-architect "Design specifications with detailed accessibility requirements and testing procedures"Solution: Systematic component hierarchy planning
# Clear component architecture
/planning-frontend-architecture "Component architecture with clear hierarchies, composition patterns, and reusability guidelines"
# Documentation focus
/design-architect "Component library with comprehensive documentation and usage guidelines"# Modular design system approach
/planning-frontend-architecture "Modular design system with atomic design principles"
/planning-frontend-architecture "Component library with clear composition patterns"
/planning-frontend-architecture "Design token system with scalable architecture"# Systematic UI planning
/planning-frontend-architecture "Complex UI with component breakdown and interaction specifications"
/design-architect "User experience optimization with simplified interaction patterns"- Always start with user needs and problems
- Validate design decisions with user research
- Design for accessibility from the beginning
- Use design systems for consistency and efficiency
- Build reusable components and patterns
- Document design decisions and guidelines
- Start with mobile constraints and enhance for larger screens
- Plan responsive behavior for all components
- Optimize for touch interactions and small screens
- Consider loading times and performance in design decisions
- Optimize images and media for web delivery
- Plan for progressive loading and lazy loading
- Design for WCAG AA compliance from the start
- Consider keyboard navigation and screen readers
- Test with assistive technologies
- Work closely with developers during implementation
- Validate technical feasibility of design decisions
- Iterate based on development feedback
- System Architect Guide - Backend architecture integration partner
- Developer Guide - Implementation destination
- Product Manager Guide - Requirements and business needs partner
- Design System Templates - Standardized design formats
- UI/UX Frameworks - Design methodology tools
/planning-frontend-architecture "Component library using atomic design with atoms, molecules, organisms, templates, and pages"/planning-frontend-architecture "Automated design token system with style dictionary integration and multi-platform output"/planning-frontend-architecture "PWA design system with app-like interactions, offline states, and performance optimization"/planning-frontend-architecture "Scalable design system supporting multiple brands with shared components and brand-specific theming"- Design System Adoption: 96% of components from design system used in production
- Development Efficiency: 68% faster frontend development with comprehensive design systems
- User Satisfaction: 91% user satisfaction improvement with redesigned interfaces
- Accessibility Achievement: 94% WCAG AA compliance across all designed interfaces
- Created design systems that reduced frontend development time by 50%
- Designed accessible interfaces that exceeded compliance requirements
- Developed responsive designs that improved mobile conversion by 35%
- Built component libraries that standardized UI across large organizations
The Design Architect agent is your UI/UX and frontend architecture expert. Use it to create user-centered designs and scalable component systems that deliver exceptional user experiences. Remember: Great user experiences start with thoughtful design architecture.