Claude Prompt for Design Systems
Document the Virtualized List design pattern for use in a job board 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 marketing managers in the component architecture space. Document the **Virtualized List** design pattern for a job board design system using dark mode principles. **Target users:** fitness trainers **Implementation framework:** Vue.js **Design tool:** Zeroheight **Goal:** scale the business ## Pattern Overview - Name: Virtualized List - Category: [layout / navigation / data-display / input / feedback / overlay] - Description: clear one-paragraph explanation of what this pattern does - User problem it solves for fitness trainers using a job board ## When to Use - 3-4 specific scenarios where Virtualized List is the ideal solution - User intent signals that suggest this pattern - Content types that work well with Virtualized List ## 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 Vue.js 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.