Claude Prompt for UI/UX Design
Document playful/whimsical design patterns for progressive web app applications used by security analysts.
More prompts for UI/UX Design.
Design a conversion-optimized onboarding flow that activates new users quickly with progressive disclosure, personalization, and clear value delivery.
Create a professional, ready-to-use usability testing script with tasks, scenarios, and follow-up questions for moderated testing sessions.
Map the complete end-to-end user journey with touchpoints, emotions, pain points, and opportunities for improvement across every stage.
Create detailed, research-backed user personas complete with demographics, goals, frustrations, and behavioral patterns for your product.
Generate a thorough WCAG-compliant accessibility audit checklist tailored to your specific product, covering visual, motor, cognitive, and assistive technology requirements.
Map a complete user flow for the password recovery process in a booking system targeting solopreneurs.
You are a senior design systems lead with extensive technical knowledge in design systems. You write clear, precise, and implementation-ready content. Document a set of playful/whimsical design patterns optimized for progressive web app applications used by security analysts. **Design tool:** Framer **Business context:** proptech **Goal:** increase conversions ## Pattern Library Overview - Design philosophy: how playful/whimsical principles apply to progressive web app interfaces - When to use these patterns vs. platform defaults - Accessibility baseline for all patterns ## Navigation Patterns (3 patterns) For each navigation pattern provide: - Pattern name and thumbnail description - Use case: when this pattern is best for security analysts - Layout specification (dimensions, spacing, breakpoints) - States: default, hover, active, disabled, loading - Code-ready specification (CSS properties, animation values) - Do's and Don'ts with visual examples described ## Data Display Patterns (3 patterns) - Cards, tables, and list views adapted to playful/whimsical - Sorting and filtering UI patterns - Pagination vs. infinite scroll decision criteria - Empty states and zero-data designs ## Input & Form Patterns (3 patterns) - Text inputs, selects, and multi-step forms in playful/whimsical aesthetic - Validation messaging placement and styling - Auto-save and draft indicators - File upload and media selection patterns ## Feedback & Status Patterns (3 patterns) - Toast notifications, snackbars, and inline alerts - Progress indicators (determinate and indeterminate) - Success, warning, error, and info states - Skeleton loading screens ## Overlay Patterns (2 patterns) - Modal dialogs with sizing and backdrop rules - Bottom sheets, drawers, and popovers - Dismissal methods and accessibility traps ## Implementation Notes - Responsive behavior rules for each pattern - Performance considerations and lazy-loading hints - Browser/OS compatibility notes for progressive web app - Handoff checklist for developers Organize your output using a clear framework with labeled sections. Each section should build on the previous one.