AI Prompt for Design Systems
Define a detailed component specification for Card in a playful/whimsical 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.
You are a senior UI component architect with extensive technical knowledge in UI engineering. You write clear, precise, and implementation-ready content. Define a detailed component specification for the **Card** component in a playful/whimsical design system. **Target framework:** Angular **Design tool:** Zeroheight **Audience:** CIOs (end users) **Goal:** boost engagement ## Component Overview - Purpose: what problem this Card solves for users - When to use: specific scenarios where Card is the right choice - When NOT to use: anti-patterns and alternative components to use instead - Related components: list 3-4 components that work alongside Card ## Anatomy - Enumerate every visual element of the Card (container, label, icon slots, content area, action area) - Required vs. optional elements - Slot descriptions for composable content areas ## Variants Define all variants of the Card: - **Size variants:** small, medium, large (with exact pixel dimensions and padding) - **Style variants:** filled, outlined, ghost/text, elevated - **Color variants:** primary, secondary, neutral, success, warning, error - **State variants:** default, hover, active/pressed, focused, disabled, loading - **Content variants:** text-only, with icon, with avatar, with badge For each variant provide: - Visual description - Spacing values (padding, margin, gap) - Typography (size, weight, color) - Border (width, radius, color) - Background color and opacity - Shadow/elevation values ## Interaction Specification - Click/tap behavior and feedback - Hover transitions (duration, easing, property changes) - Focus ring styling (offset, width, color) - Keyboard interactions (Tab, Enter, Space, Escape, Arrow keys) - Touch gestures (long press, swipe) if applicable - Animation on mount/unmount ## Accessibility (A11y) - ARIA role and required attributes - Keyboard navigation pattern - Screen reader announcement text - Focus management rules - Minimum contrast ratios for all visual states - Motion preferences (prefers-reduced-motion handling) ## Responsive Behavior - Breakpoint-specific adjustments - Container query behavior if applicable - Touch vs. pointer adaptations - Minimum and maximum width constraints ## API / Props Specification - Prop name, type, default value, and description for each prop - Event callbacks (onClick, onChange, onFocus, etc.) - Ref forwarding requirements - Composition patterns (compound components, render props, slots) ## Usage Examples - 3 common usage scenarios with prop combinations - 1 complex/advanced usage example - 1 anti-pattern example showing incorrect usage ## Design Token Mapping - Map every visual property to a design token name - Token categories: color, spacing, typography, shadow, border, motion Present your output in a clear, organized structure with headers (##), subheaders (###), and bullet points. Use bold for key terms.