Image GenerationWeb DesignAdvanced
UI/UX Mockup Generator
Pro Tip
Specify specific UI elements like "sidebar", "dashboard widgets", and "user avatar" for realism.
Prompt Template
Generate a high-fidelity UI mockup for a [App Type — e.g., SaaS dashboard, social media app, e-commerce store]. **Screen:** [Dashboard / Profile / Feed / Settings / Checkout — specify which view] **Theme:** [Dark mode / Light mode / System-adaptive] **Platform:** [Web (1440px) / iOS mobile / Android tablet] **Design System:** - Style reference: Modern, clean interface (Dribbble / Linear / Vercel quality). - Border radius: Rounded corners (12-16px on cards, 8px on buttons). - Effects: Glassmorphism panels, subtle shadows, or clean flat design. - Typography: Clear hierarchy — heading (24px), subhead (18px), body (14px), caption (12px). **Layout Components:** - Navigation: [Sidebar / Top bar / Bottom tab bar] - Content area: [Cards grid / Data table / Feed list / Form] - Widgets: [Charts / Stats cards / Activity feed / Quick actions] - User elements: [Avatar / Notifications bell / Search bar] **Visual Details:** - Spacing: Consistent 8px grid system throughout. - Colors: Specify primary, secondary, accent, and success/error indicators. - Data: Use realistic placeholder content (not lorem ipsum). - States: Show default state with at least one interactive element highlighted. **Output:** A pixel-perfect mockup screenshot ready for design review or developer handoff.
Why This Prompt Works
UI mockup generation requires understanding of interaction design patterns, spacing systems, and visual hierarchy - not just aesthetics. This prompt references specific UI trends (glassmorphism, rounded corners) and design platforms (Dribbble) to ensure the AI generates realistic, modern interfaces with proper component hierarchy, whitespace, and visual flow.
Example Output
## UI/UX Mockup Output Generated Image: Dashboard Interface Design App Type: SaaS Analytics Platform Screen: Main Dashboard View Theme: Dark mode with glassmorphism elements Layout Structure: - Left: Collapsible sidebar (240px) with navigation icons - Top: Header bar with search, notifications, user avatar - Center: Main content grid (2 columns, 3 rows of widgets) - Right: Quick stats panel (320px) with key metrics Widget Cards: - Revenue Chart: Line graph with gradient fill, last 30 days - User Activity: Heat map showing hourly engagement patterns - Top Products: Horizontal bar chart with product thumbnails - Conversion Funnel: Vertical funnel visualization (4 stages) - Recent Orders: Data table with status badges - Quick Actions: Icon grid for common tasks Design Details: - Glassmorphism: Semi-transparent cards with backdrop-blur - Border Radius: 16px on all cards, 12px on buttons - Typography: Inter font, clear hierarchy (24/18/14/12px) - Spacing: 24px grid system, consistent padding - Colors: Deep navy background, purple accent, green for positive KPIs Responsiveness: Desktop-first design, 1440px viewport width
💡 How to Use This Prompt
- Copy the prompt using the button above
- Replace bracketed placeholders [LIKE THIS] with your specific details
- Paste into your preferred AI tool (ChatGPT, Claude, Gemini, etc.)
- Review the AI's response and iterate by adjusting your inputs
- For best results, break complex requests into sequential prompts