UI/UX Wireframe Mockup Generator

Description

## UI/UX Wireframe & Mockup Generator

Design a [FIDELITY — wireframe/low-fi mockup/high-fi mockup] for:

**Screen:** [SCREEN_DESCRIPTION — e.g., e-commerce product page, SaaS dashboard, mobile onboarding]
**Platform:** [PLATFORM — iOS/Android/Web Desktop/Web Responsive]
**Design System:** [SYSTEM — Material Design 3/iOS Human Interface/Custom]

**Screen Specifications:**

### Layout Structure
- Navigation: [NAV — top bar/bottom tabs/sidebar/hamburger]
- Content area: [LAYOUT — single column/two column/grid/card-based]
- Key sections (top to bottom):
  1. [SECTION_1 — header/hero/navigation]
  2. [SECTION_2 — primary content area]
  3. [SECTION_3 — secondary content/sidebar]
  4. [SECTION_4 — footer/action bar]

### Component Details
**Header/Navigation:**
- Logo placement: [POSITION]
- Navigation items: [NAV_ITEMS]
- Action buttons: [ACTIONS — search/cart/profile/notifications]

**Primary Content:**
- Content type: [TYPE — form/list/cards/media/data table]
- Interactive elements: [ELEMENTS — buttons/toggles/sliders/dropdowns]
- Data display: [DATA — text/images/charts/stats]

**Secondary Elements:**
- Sidebar content: [SIDEBAR]
- Floating actions: [FAB — if applicable]
- Modals/sheets: [OVERLAYS — if applicable]

### Design Tokens
- Border radius: [RADIUS — 0/4/8/12/16/full]
- Spacing scale: 4px base unit
- Shadow levels: [ELEVATION — flat/subtle/medium/prominent]
- Color mode: [MODE — light/dark/auto]

### States to Show
- Default state
- Loading state (skeleton screens)
- Empty state (no data)
- Error state
- Success state

### Responsive Breakpoints (if web)
- Mobile: 375px
- Tablet: 768px
- Desktop: 1440px

**Annotations:** Include spacing measurements, font sizes, and interaction notes.

**Output:** Clean, annotated mockup at actual device resolution.

Free to copy and use. Compatible with GPT-5, Gemini 2.5 Pro, Llama 4.

Usage Instructions

Tags

Compatible AI Models

Version History

Related Prompts