AI Prompt for Design Systems
Document the Multi-Step Wizard Form design pattern for use in a calendar app design system.
More prompts for Design Systems.
Define a complete component library spec with atomic design hierarchy, props, variants, states, and implementation guidelines for a scalable design system.
Create a detailed icon set brief that ensures visual consistency, appropriate metaphors, and production-ready specifications for a custom icon library.
Document the Collapsible Sidebar Navigation design pattern for use in a survey builder design system.
Define a detailed component specification for Pagination in a monochromatic design system.
Document the Split-Button Dropdown design pattern for use in a chat application design system.
Define a detailed component specification for Alert Banner in a skeuomorphic design system.
Acting as a world-class design systems lead consultant, you provide strategic guidance to enterprise CTOs in the design systems space. Document the **Multi-Step Wizard Form** design pattern for a calendar app design system using dark mode principles. **Target users:** HR professionals **Implementation framework:** Svelte **Design tool:** Supernova **Goal:** improve customer satisfaction ## Pattern Overview - Name: Multi-Step Wizard Form - Category: [layout / navigation / data-display / input / feedback / overlay] - Description: clear one-paragraph explanation of what this pattern does - User problem it solves for HR professionals using a calendar app ## When to Use - 3-4 specific scenarios where Multi-Step Wizard Form is the ideal solution - User intent signals that suggest this pattern - Content types that work well with Multi-Step Wizard Form ## When NOT to Use - 3-4 anti-patterns or misuse scenarios - Alternative patterns to consider instead (with brief rationale) ## Anatomy & Layout - Structural breakdown: named regions and their purpose - Spatial relationships between elements - Minimum and maximum dimensions - Responsive layout shifts at breakpoints (mobile, tablet, desktop) ## Behavior Specification - Initial state when the pattern first renders - User-triggered state changes (with trigger description) - System-triggered state changes (data loading, real-time updates) - Transition descriptions between states (duration, easing, property) - Edge cases: empty data, overflow content, error states ## Content Guidelines - Required content elements and character limits - Optional content elements - Placeholder and default content recommendations - Localization considerations (text expansion, RTL support) ## Accessibility Specification - ARIA pattern reference (link to WAI-ARIA pattern if applicable) - Required ARIA roles, states, and properties - Keyboard interaction table: Key -> Action mapping - Focus management: where focus goes on open, close, and navigation - Screen reader announcements at key interaction points - Reduced motion alternative behavior ## Design Variations - dark mode visual treatment specifics - Size variants (compact, default, comfortable) - Density variants (for data-heavy contexts) - Theme adaptation (light, dark, high-contrast) ## Code Integration Notes - Recommended Svelte component structure - Props/API surface for configuring the pattern - Composition approach: how sub-components connect - State management recommendations ## Real-World Examples - 3 examples of this pattern in well-known products - What each example does well - What each could improve ## Quality Checklist - [ ] Works at all supported breakpoints - [ ] Keyboard accessible end-to-end - [ ] Screen reader tested - [ ] Meets color contrast requirements - [ ] Handles empty, loading, and error states - [ ] Performs well with large datasets - [ ] Documented with usage examples Present your output in a clear, organized structure with headers (##), subheaders (###), and bullet points. Use bold for key terms.