design-system

name	design-system
description	Create, maintain, and evolve design systems for consistent and scalable product development

Design System Manager

Purpose

Create, maintain, and evolve comprehensive design systems that ensure visual consistency, improve development efficiency, and scale product development across teams.

Capabilities

🎯 Tier 1: Foundation

Design System Setup & Documentation

Create foundational design system documentation and component libraries:

• Design Token System: Define core design tokens (colors, typography, spacing, shadows)
• Component Library: Document reusable UI components with specifications
• Pattern Documentation: Create usage guidelines and best practices
• Version Control: Track design system evolution and changes
• Contribution Guidelines: Establish processes for team contributions

Example:

"I'm building a design system for my startup. Help me create:
1. A color palette with primary, secondary, and neutral colors
2. A typography scale for headings and body text
3. A spacing system (4px base unit)
4. Basic component specifications (buttons, inputs, cards)
5. Documentation structure for the team"

---

🚀 Tier 2: Advanced

Design System Management & Evolution

Expand and manage a mature design system:

• Token Management: Organize and maintain complex design token hierarchies
• Component Variants: Document component states, sizes, and variations
• Accessibility Standards: Ensure WCAG compliance across all components
• Cross-Platform Consistency: Align web, mobile, and other platform designs
• Migration Planning: Plan and execute design system updates and migrations
• Analytics Integration: Track component usage and adoption metrics
• Design Debt Tracking: Identify and prioritize design system improvements

Example:

"Our design system has grown to 50+ components. Help me:
1. Audit component usage across all products
2. Identify components with low adoption or inconsistencies
3. Create a migration plan for updating deprecated components
4. Set up analytics to track which components are used most
5. Establish a quarterly design system review process"

---

🌟 Tier 3: Anticipatory

Strategic Design System Leadership

Lead design system strategy and enable team autonomy:

• Predictive Scaling: Anticipate design system needs for new product areas
• Automated Workflows: Build tools for automated token and component updates
• Team Onboarding: Create comprehensive onboarding for new designers and developers
• Governance Models: Establish design system governance and ownership models
• Performance Optimization: Optimize design system for performance and maintainability
• Ecosystem Integration: Integrate design system with tooling and developer workflows
• Design System Roadmap: Create strategic roadmap for design system evolution

Example:

"We're scaling to 10 products and need a robust design system strategy. Help me:
1. Analyze current design system gaps across all products
2. Create a 6-month roadmap for design system expansion
3. Build automated tools for syncing design tokens to code
4. Establish a design system governance model with clear ownership
5. Create onboarding materials that get designers productive in 1 week
6. Set up performance monitoring for design system components
7. Build a contribution workflow that encourages team-wide participation"

---

Integration

Works Best With:

• prototype-review: Review prototypes against design system components
• asset-optimization: Optimize design assets within design system constraints
• style-guide-generator: Generate style guides from design system documentation
• user-research: Validate design system decisions with user research

Designer Pack Skills:

• design-system ← You are here
• prototype-review ← Review prototypes against design system
• asset-optimization ← Optimize assets within design system
• style-guide-generator ← Generate guides from design system
• design-trend-analyzer ← Inform design system with trends
• user-research ← Validate design system with research
• handoff-manager ← Hand off design system to development

---

Best Practices

✅ DO:

• Start small: Begin with core tokens and components, expand gradually
• Document everything: Create clear documentation for every component and pattern
• Version your design system: Track changes and maintain backwards compatibility
• Involve the team: Gather input from designers and developers early and often
• Test with real use cases: Validate design system decisions against actual product needs
• Plan for scalability: Design tokens and components that can grow with the product
• Establish contribution guidelines: Make it easy for team members to contribute

❌ DON'T:

• Over-engineer: Don't create components or tokens you don't need yet
• Ignore accessibility: Build accessibility into every component from the start
• Design in isolation: Involve developers and stakeholders early
• Skip documentation: Undocumented components won't be used consistently
• Neglect maintenance: Regularly audit and update the design system
• Freeze the system: Allow the design system to evolve with product needs
• Ignore analytics: Track component usage to make data-driven decisions

---

Common Mistakes

1. Creating too many tokens early: Start with a minimal set and expand as needed
2. Inconsistent naming: Use clear, consistent naming conventions across all tokens
3. Lack of examples: Show real-world examples for every component
4. Skipping accessibility: Design accessible components from the start
5. No governance model: Establish clear ownership and contribution processes
6. Ignoring developer needs: Build design systems that developers can actually use
7. Neglecting documentation: Comprehensive documentation is critical for adoption

---

Quick Commands

Get Started:

• "Help me create a design system from scratch"
• "Audit our current design system and identify gaps"
• "Create a component library for [product type]"

Advanced:

• "Plan a design system migration from [old version] to [new version]"
• "Set up analytics to track design system component usage"
• "Create a design system contribution workflow for the team"

Expert:

• "Build a strategic roadmap for scaling our design system across 10 products"
• "Design an automated workflow for syncing design tokens to code"
• "Create a comprehensive design system governance model"

---

Example Workflows

Workflow 1: Creating a Design System from Scratch

1. Define core design tokens (colors, typography, spacing)
2. Create foundational components (buttons, inputs, cards)
3. Document component specifications and usage guidelines
4. Establish version control and contribution guidelines
5. Build Figma/Sketch component library
6. Create developer documentation and code snippets
7. Launch design system to the team
8. Gather feedback and iterate

Workflow 2: Auditing and Evolving an Existing Design System

1. Audit component usage across all products
2. Identify inconsistencies and gaps
3. Gather team feedback on pain points
4. Prioritize improvements based on impact
5. Create migration plan for deprecated components
6. Implement updates with backwards compatibility
7. Document changes and communicate to team
8. Monitor adoption and usage metrics

Workflow 3: Scaling a Design System Across Multiple Products

1. Analyze design system needs across all products
2. Identify shared vs. product-specific components
3. Create a core design system with shared tokens and components
4. Extend with product-specific tokens and variants
5. Establish governance model for cross-product alignment
6. Create onboarding materials for each product team
7. Set up automated tools for syncing and updates
8. Create a roadmap for continuous improvement

---

Success Criteria

✅ Tier 1 Success: Design system documentation is comprehensive and adopted by the team ✅ Tier 2 Success: Design system is actively maintained, versioned, and tracked with analytics ✅ Tier 3 Success: Design system enables team autonomy and scales across multiple products

---

Session Requirements

• Minimum Session: session-16
• Recommended Session: session-17 for Tier 2, session-18+ for Tier 3
• Prerequisites: Basic understanding of design systems and component libraries