UI & interface design

UI Interface Mockup & High-Fidelity Design Generator

A comprehensive prompt template for creating polished, production-ready UI mockups and high-fidelity interface designs. Ideal for UI/UX designers, product managers, and design teams who need detailed visual designs for stakeholder presentations, user testing, or developer handoff.

16 blanks to fill in · Added December 2025 · ui-mockup · high-fidelity-design · interface-design · visual-design · prototyping

The prompt

16 blanks

You are an expert UI designer specializing in creating pixel-perfect, high-fidelity interface mockups that balance aesthetic excellence with functional usability.

Create a comprehensive set of high-fidelity UI mockups for [PROJECT/APPLICATION NAME] targeting [PLATFORM: web/iOS/Android/desktop]. The interface should serve [PRIMARY USER PERSONA] and support [KEY USE CASES/USER GOALS].

## Project Context:

**Product Overview:**
- Application type: [e.g., SaaS dashboard, e-commerce site, mobile app, enterprise tool]
- Primary functionality: [CORE FEATURES]
- Brand personality: [e.g., professional, playful, minimalist, bold]
- Competitive positioning: [DIFFERENTIATION POINTS]

**Design Requirements:**
- Visual style: [modern, classic, futuristic, etc.]
- Color scheme: [PRIMARY COLORS or mood/feeling to convey]
- Target devices: [desktop 1920x1080, tablet 768px, mobile 375px, etc.]
- Accessibility standards: [WCAG 2.1 AA/AAA compliance]

## Screens to Design:

Create high-fidelity mockups for the following screens:
1. [SCREEN NAME 1: e.g., Homepage/Dashboard]
2. [SCREEN NAME 2: e.g., Product listing page]
3. [SCREEN NAME 3: e.g., User profile]
4. [SCREEN NAME 4: e.g., Settings/Configuration]
5. [Additional screens as needed]

For each screen, include:
- Multiple states (empty state, loading state, error state, populated state)
- Interactive elements in various states (default, hover, active, disabled, focus)
- Responsive variants for [SPECIFIED BREAKPOINTS]

## Design Specifications:

**Visual Hierarchy:**
- Establish clear focal points using [SIZE/COLOR/POSITION] emphasis
- Create intuitive information architecture with [NUMBER]-level navigation
- Apply gestalt principles for visual grouping and scanability
- Design for F-pattern or Z-pattern reading flow based on content type

**Typography System:**
- Heading hierarchy (H1-H6) with specific font sizes, weights, and line heights
- Body text optimized for readability (16px minimum for body, 1.5-1.6 line height)
- Font pairing: [PRIMARY FONT for headings, SECONDARY FONT for body]
- Typographic scale following [MODULAR SCALE RATIO: e.g., 1.25, 1.333]

**Color Application:**
- Primary colors for CTAs and brand elements
- Secondary colors for supporting actions
- Neutral palette for backgrounds and text (ensure 4.5:1 contrast minimum)
- Semantic colors for success, warning, error, and info states
- Consistent opacity values for disabled states and overlays

**Spacing & Layout:**
- Grid system: [12-column, 8-column, or custom]
- Baseline spacing unit: [4px, 8px]
- Consistent padding and margins using multiples of base unit
- Responsive breakpoints: [mobile, tablet, desktop values]

**UI Components:**
- Buttons (primary, secondary, tertiary, icon buttons)
- Form elements (inputs, dropdowns, checkboxes, radio buttons, date pickers)
- Navigation (header, sidebar, breadcrumbs, tabs)
- Cards and containers
- Modals, tooltips, and notifications
- Data visualization elements (if applicable)

**Micro-interactions & Details:**
- Hover and active states for interactive elements
- Focus indicators for keyboard navigation
- Loading animations and skeleton screens
- Transition specifications (duration, easing)
- Error validation feedback placement

## Deliverables:

1. **High-Fidelity Mockups:**
   - Production-ready designs at [RESOLUTION/SCALE]
   - Organized artboards/frames by user flow
   - Annotated with measurements, spacing, and interaction notes
   - Exported formats: [Figma/Sketch/Adobe XD files, PNG/JPG exports]

2. **Design Specifications:**
   - Style guide documenting colors (hex/RGB), typography, spacing, shadows
   - Component states reference sheet
   - Responsive behavior documentation
   - Asset export requirements (1x, 2x, 3x for mobile)

3. **Developer Handoff Package:**
   - Inspect-ready files with CSS properties
   - Icon and image assets properly named and organized
   - Interaction specifications document
   - Accessibility implementation notes (ARIA labels, focus order)

4. **Interactive Prototype:**
   - Clickable prototype demonstrating key user flows
   - Transitions between screens
   - Interactive component states
   - Shareable link for stakeholder review

Ensure the mockups demonstrate:
- Visual consistency across all screens
- Intuitive user flows requiring minimal cognitive load
- Mobile-first responsive design approach
- Brand alignment while following current UI trends for 2025
- Accessibility compliance with proper color contrast, touch targets (44x44px minimum), and clear visual affordances

Open in ChatGPT

Blanks: Project/application name · Platform · Primary user persona · Key use cases/user goals · Core features · Differentiation points · Wcag 2.1 aa/aaa compliance · Screen name 1 · Screen name 2 · Screen name 3 · Screen name 4 · Specified breakpoints · Size/color/position · Number · Modular scale ratio · Resolution/scale

How to use it

Use this prompt to generate detailed, production-ready UI mockups and high-fidelity designs for any digital product. Replace bracketed placeholders with your specific project details including platform, target users, visual preferences, and required screens. The output will provide comprehensive mockup designs with specifications ready for stakeholder approval, user testing, or developer handoff. This prompt works best when you provide clear brand guidelines, reference examples, or mood boards to establish the desired aesthetic direction.

Tips

Start with mobile screens first and scale up to desktop. Mobile-first design forces you to prioritize essential content and functionality, preventing cluttered desktop layouts and ensuring responsive designs translate naturally across breakpoints.
Use real content instead of lorem ipsum whenever possible. Realistic text lengths, actual product names, and representative imagery reveal layout problems early and help stakeholders envision the final product more accurately.
Design all interactive states upfront—hover, active, focus, disabled, loading, error, and empty states. Incomplete state coverage is the most common source of design-developer friction and leads to inconsistent user experiences.
Apply an 8px grid system for spacing and component sizing to maintain visual consistency and simplify developer implementation. This creates a mathematical rhythm that feels organized and makes responsive scaling predictable.
Create a component library within your design file to ensure consistency across screens and accelerate iteration. Changes to master components automatically update all instances, reducing errors and maintenance overhead.
Test color contrast using tools like WebAIM or Stark plugin to ensure WCAG compliance. Never rely on color alone to convey information—pair with icons, text labels, or patterns for colorblind accessibility.

Preparation Checklist

Before using this prompt, gather essential project information: brand guidelines including logos, color palettes, and typography preferences; user research findings or personas that inform design decisions; competitive analysis or reference designs showing desired aesthetic direction; content inventory listing actual or realistic placeholder content for each screen; functional requirements detailing interactions, user flows, and business logic. Also clarify the fidelity level needed—whether you need pixel-perfect, production-ready designs or slightly lower-fidelity mockups for early-stage validation. Having wireframes or low-fidelity sketches as a starting point will significantly improve output quality and reduce iteration cycles.

Design Fidelity Considerations

High-fidelity mockups should contain polished visual design, realistic content, final imagery, and accurate branding—essentially appearing identical to the final product. Include detailed specifications for colors using exact hex codes, typography with specific font families and sizes, spacing measurements, and component states. Differentiate your approach based on project stage: early design validation requires fewer screens with key flows, stakeholder presentations need polished hero screens with aspirational content, developer handoff demands complete coverage of all states and edge cases, and user testing benefits from realistic content and functional prototypes. Balance detail with efficiency by focusing high-fidelity efforts on screens that matter most for decision-making or validation.

Visual Design Principles

Effective high-fidelity mockups follow fundamental design principles while addressing specific user needs. Establish clear visual hierarchy using size, color, contrast, and positioning to guide user attention toward primary actions and content. Apply consistent spacing using an 8px or 4px grid system to create rhythm and balance. Ensure accessibility by maintaining 4.5:1 contrast ratio for normal text, 3:1 for large text, and designing touch targets at minimum 44x44px. Use whitespace strategically to reduce cognitive load and improve scanability. Consider cultural context, localization requirements, and platform conventions—iOS designs should follow Human Interface Guidelines while Android designs adhere to Material Design principles. Apply current 2025 trends thoughtfully: glassmorphism, neumorphism, or gradient overlays should enhance usability rather than complicate it.

Handoff Best Practices

Successful design-to-development handoff requires clear communication and comprehensive documentation. Organize mockup files with logical naming conventions, grouped artboards by user flow or feature area, and component libraries for reusable elements. Use design tools' built-in handoff features like Figma's Inspect panel or Sketch's developer handoff to provide automatic measurements and CSS specifications. Create a separate documentation layer with annotations explaining interactions, conditional logic, animation timings, and responsive behaviors. Export all necessary assets at appropriate resolutions—1x, 2x, 3x for mobile; SVG for icons and logos. Include an accessibility checklist specifying ARIA labels, focus order, screen reader text, and keyboard navigation patterns. Schedule a walkthrough session with developers to review the designs, answer questions, and establish realistic implementation timelines.