TL;DR: Three comprehensive prompts that can take your existing design from amateur to enterprise-level. Tested with Claude/GPT-4 and works like magic.
Feed any design (screenshot, figma file, description) + one of these prompts to Dyad via Gemini 2.5 Pro, and watch it transform into something you'd pay a senior designer $5k for.
Copy-paste this when your design needs systematic cleanup
Analyze this existing design and perfect its foundational elements by implementing the following enhancements:
VISUAL HIERARCHY & TYPOGRAPHY:
- Establish a proper typographic scale using a 1.25 ratio (12px, 15px, 18px, 24px, 30px, 37px, 46px)
- Ensure consistent font weights (300/light, 400/regular, 600/semibold, 700/bold) with clear purpose
- Perfect line heights (1.2 for headings, 1.5 for body text, 1.4 for UI elements)
- Fix letter spacing (-0.02em for large text, 0 for body, +0.05em for small caps)
- Create clear information hierarchy using size, color, and spacing relationships
COLOR & CONTRAST OPTIMIZATION:
- Audit all color combinations for WCAG AA compliance (4.5:1 contrast minimum)
- Establish a cohesive color palette with primary, secondary, and semantic colors
- Create consistent color variants (50, 100, 200, 300, 400, 500, 600, 700, 800, 900)
- Perfect color usage: primary for actions, secondary for info, semantic for status
- Ensure dark mode compatibility with appropriate color inversions
SPACING & LAYOUT REFINEMENT:
- Implement consistent spacing system using 4px/8px base unit (4, 8, 12, 16, 24, 32, 48, 64px)
- Perfect component padding and margins for visual balance
- Establish consistent border radius values (2px, 4px, 8px, 12px, 16px)
- Optimize white space distribution for breathing room and focus
- Align all elements to an invisible grid system for precision
COMPONENT STANDARDIZATION:
- Unify button styles with consistent heights (32px, 40px, 48px), padding, and states
- Standardize form inputs with consistent sizing, spacing, and interaction states
- Perfect icon sizing and alignment (16px, 20px, 24px, 32px) with optical balance
- Ensure consistent card/container styling with unified shadows and borders
- Create cohesive loading, empty, and error state designs
OUTPUT: Provide the enhanced design with detailed annotations explaining each improvement and a style guide showing the perfected design system.
Use this when your design looks good but feels clunky
Transform this design into a premium user experience by perfecting these interaction and functional elements:
MICRO-INTERACTIONS & ANIMATIONS:
- Add subtle hover states (0.2s ease transitions) to all interactive elements
- Implement focus states with visible indicators for accessibility
- Create smooth loading animations using skeleton screens or branded spinners
- Add gentle page transitions (slide, fade) between major sections
- Include micro-feedback for user actions (button press effects, form submissions)
- Design delightful success confirmations with celebratory animations
- Create contextual tooltips that appear on hover/focus with 0.3s delay
NAVIGATION & USER FLOW OPTIMIZATION:
- Perfect breadcrumb navigation showing clear user location
- Implement smart search with autocomplete and recent searches
- Add contextual help and onboarding hints for complex features
- Create intuitive back/forward navigation patterns
- Design clear call-to-action hierarchies with primary/secondary distinction
- Optimize form flows with smart field progression and validation
- Include progress indicators for multi-step processes
RESPONSIVE & ACCESSIBILITY PERFECTION:
- Ensure touch targets are minimum 44px for mobile usability
- Perfect mobile navigation with thumb-friendly placement
- Add keyboard navigation support with logical tab orders
- Implement screen reader support with proper ARIA labels
- Create responsive layouts that gracefully adapt to all screen sizes
- Optimize for one-handed mobile usage patterns
- Include gesture support where appropriate (swipe, pinch, drag)
ERROR HANDLING & EDGE CASES:
- Design comprehensive error states with clear recovery paths
- Create helpful empty states that guide user actions
- Perfect offline functionality with clear sync indicators
- Add timeout handling for slow connections
- Design graceful degradation for feature failures
- Include confirmation dialogs for destructive actions
- Create smart defaults and auto-save functionality
PERFORMANCE OPTIMIZATION:
- Implement lazy loading for images and heavy content sections
- Add skeleton screens for anticipated loading states
- Perfect image optimization with appropriate sizes and formats
- Create efficient infinite scroll or pagination patterns
- Optimize critical rendering path elements
- Include preloading for likely user actions
- Design progressive enhancement for slower connections
OUTPUT: Deliver an interactive prototype showing all enhanced interactions with detailed UX annotations explaining user flow improvements and accessibility enhancements.
The final boss prompt - turns good designs into $10k+ quality
Elevate this design to premium professional standards by implementing these advanced finishing touches:
ADVANCED VISUAL EFFECTS:
- Add sophisticated shadow systems with multiple elevation levels
- Implement glassmorphism effects on modal overlays and navigation
- Create subtle gradient overlays using brand colors (10-15% opacity)
- Add texture and depth with subtle noise patterns or grain effects
- Perfect backdrop blur effects for layered interfaces
- Include subtle parallax scrolling for hero sections
- Design premium card styling with multiple shadow layers
- Add elegant dividers and separators with gradient fades
BRAND PERSONALITY INJECTION:
- Incorporate brand-specific illustration style and iconography
- Create custom loading animations that reflect brand character
- Design memorable empty states with brand personality
- Add thoughtful copywriting that matches brand voice
- Include branded celebration moments and success states
- Perfect favicon, splash screens, and app icons
- Create cohesive email templates and notification styling
- Design branded error pages that maintain user engagement
DATA VISUALIZATION EXCELLENCE:
- Perfect chart and graph styling with consistent color usage
- Add interactive elements to data displays (hover states, drill-down)
- Create beautiful progress indicators and completion states
- Design elegant data tables with proper hierarchy and scanning
- Implement smart data formatting (numbers, dates, currencies)
- Add contextual data insights and trend indicators
- Perfect dashboard layouts with logical information grouping
- Include export functionality with professional formatting
ENTERPRISE-GRADE POLISH:
- Add comprehensive permissions and role-based UI variations
- Perfect print stylesheets for professional document output
- Create detailed audit trails and activity logging displays
- Design professional onboarding flows with progress tracking
- Add comprehensive help documentation integration
- Include advanced search and filtering capabilities
- Perfect data import/export workflows with validation
- Create admin interfaces with powerful management tools
CUTTING-EDGE FEATURES:
- Implement smart notifications with priority-based presentation
- Add intelligent form auto-completion and suggestions
- Create personalization options with live preview
- Design collaborative features (real-time editing, commenting)
- Add advanced keyboard shortcuts with helpful overlays
- Implement smart defaults based on user behavior patterns
- Create seamless multi-device synchronization indicators
- Design future-ready component architecture for scalability
OUTPUT: Deliver a pixel-perfect, production-ready design with comprehensive documentation, style guide, component library, and detailed implementation notes for developers.
🎯 Usage Strategy:
🔥 Not Necessary But Can Help: