commands/ideation/design-ideas.md

Brainstorm innovative UI, UX, and CSS design ideas for the project.

Your task:

1. Ask user to describe their desired direction:

   • Design goals (modern, minimal, playful, professional)
   • Target audience
   • Inspiration sources (websites, apps, design systems)
   • Constraints (brand guidelines, accessibility requirements)

2. Generate design suggestions across areas:

   Layout & Structure:

   • Grid systems (CSS Grid, Flexbox patterns)
   • Page layouts (hero sections, card layouts, asymmetric designs)
   • Navigation patterns (sticky nav, mega menu, sidebar)
   • Responsive strategies

   Visual Design:

   • Color schemes (monochromatic, complementary, triadic)
   • Typography combinations
   • Spacing systems
   • Visual hierarchy approaches

   Interactive Elements:

   • Button styles and hover effects
   • Form design patterns
   • Loading states and animations
   • Micro-interactions
   • Transition effects

   Modern CSS Techniques:

   • CSS custom properties for theming
   • Backdrop filters and glassmorphism
   • CSS animations and keyframes
   • Scroll-driven animations
   • Container queries

3. Present ideas with visual descriptions:

   ## Design Concept 1: Glassmorphism Dashboard
   
   **Visual Style:**
   - Frosted glass effect cards
   - Soft shadows and blurs
   - Vibrant gradient backgrounds
   - Rounded corners throughout
   
   **CSS Approach:**
   - backdrop-filter: blur(10px)
   - Semi-transparent backgrounds
   - Box shadows for depth
   
   ## Design Concept 2: Brutalist Minimalism
   
   **Visual Style:**
   - Bold, high-contrast typography
   - Grid-based rigid layouts
   - Monochrome color palette
   - No animations, direct interactions
   

4. Include code snippets for key techniques

5. Suggest design system resources:

   • Tailwind UI
   • Material Design
   • Ant Design
   • Chakra UI
   • Custom design tokens

Allow users to explore creative design directions before implementation.