Generate comprehensive, living style guides and design documentation from design systems, prototypes, and components to ensure consistency and enable team-wide design alignment.

Capabilities

🎯 Tier 1: Foundation

Basic Style Guide Creation

Create foundational style guides from design systems and prototypes:

Design Token Documentation: Document all design tokens (colors, typography, spacing, shadows)
Component Library: Create component catalog with usage guidelines
Pattern Documentation: Document design patterns and best practices
Usage Examples: Provide real-world examples for each component and pattern
Voice and Tone Guidelines: Establish brand voice and tone guidelines
Basic Structure: Organize style guide with clear navigation and hierarchy
Design System Reference: Link style guide components to design system specifications

Example:

"Create a comprehensive style guide for our SaaS product that includes:
1. All design tokens (colors, typography, spacing, shadows, borders)
2. Component library with specifications and usage guidelines
3. Brand voice and tone guidelines
4. Design pattern documentation (cards, forms, navigation)
5. Real-world usage examples for each component
6. Clear navigation and organization structure
7. References to our Figma design system"

🚀 Tier 2: Advanced

Comprehensive Documentation System

Build a living documentation system for design and development:

Interactive Documentation: Create interactive component examples and code snippets
Design Principles Documentation: Document design principles, heuristics, and decision frameworks
Cross-Platform Guidelines: Cover web, mobile, email, and other platforms
Accessibility Guidelines: Document accessibility standards and compliance requirements
Do's and Don'ts: Provide clear examples of correct and incorrect usage
Migration Guides: Create guides for migrating to new design patterns
Contribution Guidelines: Establish processes for updating and expanding the style guide
Version History: Track changes and evolution of the style guide

Example:

"Expand our style guide into a comprehensive design documentation system:
1. Create interactive component examples with live code snippets (React/Vue/Svelte)
2. Document our design principles and how they guide design decisions
3. Add cross-platform guidelines (web, iOS, Android, email)
4. Include comprehensive accessibility guidelines and WCAG compliance
5. Create do's and don'ts sections with visual examples
6. Write migration guides for updating to new components
7. Establish contribution guidelines for team members
8. Add version history and changelog for style guide updates"

🌟 Tier 3: Anticipatory

Design Documentation Ecosystem

Build a comprehensive design documentation ecosystem and governance model:

Automated Documentation Generation: Build automated pipelines to generate documentation from design files
Design Metrics Dashboard: Create dashboard tracking design quality metrics and adoption
Design Operations Toolkit: Build tooling for design documentation maintenance and updates
Team Onboarding Materials: Create comprehensive onboarding flows for designers and developers
Design Decision Log: Maintain searchable log of design decisions and rationale
Design System Governance: Establish governance model for style guide updates and evolution
Community Building: Foster community participation in documentation contributions
Analytics Integration: Track documentation usage and identify content gaps

Example:

"We're scaling to 50+ team members and need a robust design documentation ecosystem. Help me:
1. Build automated pipeline to generate documentation from Figma design files
2. Create design metrics dashboard tracking component usage and adoption
3. Develop design ops toolkit for maintaining and updating documentation
4. Create comprehensive onboarding materials that get new designers productive in 1 week
5. Build design decision log system with searchable rationale
6. Establish governance model for style guide updates with clear ownership
7. Build community contribution workflow encouraging team-wide participation
8. Implement analytics to track documentation usage and identify gaps
9. Create design documentation strategy aligned with product roadmap"

Integration

Works Best With:

design-system: Generate style guides from design system specifications
prototype-review: Document design decisions and patterns from reviewed prototypes
asset-optimization: Include asset optimization guidelines in style guide
handoff-manager: Create developer handoff documentation

Designer Pack Skills:

design-system ← Source design system specifications
prototype-review ← Document design decisions from reviews
asset-optimization ← Include asset guidelines
style-guide-generator ← You are here
design-trend-analyzer ← Document design trends and guidelines
user-research ← Include research-backed design decisions
handoff-manager ← Create handoff documentation

Best Practices

✅ DO:

Keep it living: Style guides should evolve with the product, not be static documents
Make it interactive: Interactive examples and code snippets improve engagement
Focus on users: Write documentation for designers, developers, and stakeholders
Provide examples: Real-world examples make guidelines actionable
Track changes: Maintain version history and changelogs
Make it searchable: Use clear organization and tags for easy navigation
Encourage contributions: Build a culture of shared documentation ownership

❌ DON'T:

Let it become stale: Regularly update documentation to reflect current design
Over-document: Focus on what's most important and commonly used
Ignore different audiences: Tailor content for designers vs. developers vs. stakeholders
Skip examples: Examples make abstract concepts concrete
Forget rationale: Explain the "why" behind design decisions
Make it monolithic: Break documentation into focused, consumable sections
Neglect governance: Establish clear ownership and update processes

Common Mistakes

Static documentation: Style guides should be living documents, not PDF artifacts
Ignoring developers: Include code snippets and technical specifications
Lack of examples: Examples make guidelines actionable and understandable
No version history: Track changes and evolution over time
Overwhelming detail: Focus on what's most important and commonly used
Missing rationale: Explain why design decisions were made
No governance: Establish clear ownership and update processes

Quick Commands

Get Started:

"Create a style guide for our product"
"Document our design tokens and components"
"Generate component documentation from our design system"

Advanced:

"Build interactive documentation with code snippets"
"Add accessibility guidelines to our style guide"
"Create migration guide for updating to new components"

Expert:

"Design an automated documentation generation pipeline"
"Create a comprehensive design documentation ecosystem"
"Build a governance model for style guide updates"

Example Workflows

Workflow 1: Creating a Basic Style Guide

Extract design tokens from design system
Document component specifications and usage guidelines
Create brand voice and tone guidelines
Document design patterns and best practices
Provide real-world usage examples
Organize with clear navigation and hierarchy
Link to design system and development resources
Review and iterate based on team feedback

Workflow 2: Building Comprehensive Documentation

Create interactive component examples with code snippets
Document design principles and decision frameworks
Add cross-platform guidelines (web, mobile, email)
Include comprehensive accessibility guidelines
Create do's and don'ts sections with visual examples
Write migration guides for component updates
Establish contribution guidelines for team members
Add version history and changelog

Workflow 3: Design Documentation Ecosystem

Build automated pipeline to generate documentation from design files
Create design metrics dashboard tracking adoption and usage
Develop design ops toolkit for documentation maintenance
Create comprehensive onboarding materials
Build design decision log system with searchable rationale
Establish governance model with clear ownership
Build community contribution workflow
Implement analytics to track usage and identify gaps

Success Criteria

✅ Tier 1 Success: Style guide is comprehensive and adopted by the team ✅ Tier 2 Success: Interactive documentation improves developer experience and reduces questions ✅ Tier 3 Success: Comprehensive documentation ecosystem enables team autonomy and scales with the organization

Session Requirements

Minimum Session: session-16
Recommended Session: session-17 for Tier 2, session-18+ for Tier 3
Prerequisites: Strong understanding of design systems, component libraries, and documentation best practices