## Brief overview
This rule ensures that I create exceptional UI/UX designs that are inspired by top Awwwards-winning websites and tailored to the specific project type. The rule uses the enhancer prompt from `.agent/rules/important.md` to optimize all design decisions for the current project context.

## Project Type Analysis
- Analyze the project requirements to determine the appropriate design approach
- Identify if this is a portfolio, e-commerce, SaaS, social media, content management, or other specific type of project
- Study top Awwwards-winning websites in the same category for inspiration and best practices
- Understand the target audience and their expectations for the specific project type

## Design Inspiration & Research
- **Portfolio Sites**: Study award-winning portfolios for layout, typography, and visual storytelling
- **E-commerce Platforms**: Analyze top-performing e-commerce sites for conversion optimization and user flow
- **SaaS Applications**: Research enterprise and startup SaaS designs for usability and professional aesthetics
- **Social Media Platforms**: Study engagement-focused designs and community-building interfaces
- **Content Management**: Analyze content-heavy sites for readability, navigation, and information architecture

## Awwwards-Level Design Principles
- **Visual Hierarchy**: Create clear focal points and intuitive navigation flows
- **Typography Excellence**: Use premium font combinations with proper spacing and readability
- **Color Psychology**: Select color palettes that align with brand identity and user emotions
- **Whitespace Mastery**: Use negative space effectively to enhance visual impact
- **Micro-interactions**: Implement subtle animations that enhance user experience without distraction
- **Accessibility Standards**: Ensure designs are inclusive and meet WCAG guidelines

## Project-Specific Design Strategies
- **Portfolio/Showcase Sites**: Emphasize visual impact, storytelling, and seamless transitions
- **E-commerce Platforms**: Focus on product presentation, trust signals, and conversion optimization
- **SaaS Applications**: Prioritize usability, data visualization, and professional aesthetics
- **Social Media Platforms**: Design for engagement, community interaction, and content discovery
- **Content Management**: Optimize for readability, searchability, and content organization

## Design System Integration
- **Component Library**: Create reusable UI components that maintain consistency across the project
- **Style Guide**: Establish comprehensive typography, color, and spacing guidelines
- **Responsive Design**: Ensure seamless experience across all device sizes and orientations
- **Brand Consistency**: Maintain brand identity throughout all design elements

## Technology Integration
- **Framework Selection**: Choose appropriate frontend frameworks based on project requirements
- **Performance Optimization**: Implement designs that load quickly and perform smoothly
- **Animation Strategy**: Use CSS animations and transitions for enhanced user experience
- **Cross-browser Compatibility**: Ensure designs work consistently across all major browsers

## Enhancer Integration
- **Call Enhancer Prompt**: Always invoke the enhancer prompt from `.agent/rules/important.md` to extract project-specific design requirements, constraints, and aesthetic preferences
- **Integrate Enhancer Output**: Use the enhancer's output to refine color palettes, typography systems, layout structures, and interaction patterns
- **Optimize Design Decisions**: Apply enhancer insights to optimize visual hierarchy, user flows, accessibility standards, and brand consistency
- **Validate Alignment**: Ensure all design choices align with the project's overall goals, target audience, and quality standards as defined by the enhancer
- **Dynamic Design Adaptation**: Continuously reference enhancer output when making design decisions to maintain project-specific optimization and Awwwards-level quality