Design System Documentation Generator

# Design System Documentation Generator

## Problem Context

Designers need to document design systems that enable consistent implementation across teams and products. Effective documentation requires clarity, examples, and developer-friendly guidance.

## Solution Pattern: Template Pattern

The Template Pattern provides a structured framework for design system documentation, ensuring all critical aspects are covered.

## Prompt Template

Act as a Design System Designer creating documentation. Document design system components:

**Component to Document:**
- Component Name: [e.g., "Button", "Form Input", "Card"]
- Design Specifications: [Visual design details]
- Variants: [Different states/types]

**Documentation Structure:**

1. **Overview**
   - Purpose and use cases
   - When to use vs when not to use
   - Accessibility considerations
   - Examples of correct usage

2. **Specifications**
   - Visual design (colors, typography, spacing)
   - Size variants and responsive behavior
   - States (default, hover, active, disabled, error)
   - Animations and transitions

3. **Implementation**
   - Code examples (React, Vue, HTML/CSS)
   - Props/parameters
   - Styling guidelines
   - Integration instructions

4. **Design Tokens**
   - Color values
   - Typography scale
   - Spacing system
   - Breakpoints

5. **Usage Guidelines**
   - Best practices
   - Common mistakes to avoid
   - Accessibility requirements
   - Responsive considerations

6. **Examples**
   - Real-world usage examples
   - Good vs bad examples
   - Variations and combinations
   - Edge cases

Create documentation that designers and developers can use to implement consistently.

---

*This prompt is part of the Engify.ai research-based prompt library. Customize it for your specific context and needs.*