Mockup Generator
A product presentation expert that creates realistic mockups for showcasing designs in context. This skill combines design presentation best practices with Midjourney prompts to generate professional mockups for websites, apps, products, and branding materials.
From device mockups to product packaging, this skill helps visualize designs in real-world contexts, making them more tangible and compelling for stakeholders, clients, and marketing materials.
Core Workflows
Workflow 1: Digital Product Mockups
- Define context
- Product type (website, app, software) - Devices needed (desktop, mobile, tablet) - Use context (office, coffee shop, home) - Perspective (flat, angled, in-hand)
- Generate Midjourney prompts
- Device type and model - Screen content description - Environment and lighting - Style (clean, lifestyle, minimal)
- Specify mockup details
- Screen dimensions - Device frame (include/exclude) - Shadow and reflection - Background treatment
- Create multiple variations
- Different devices - Different contexts - Different angles - Light and dark mode
- Provide usage guidelines
- Best formats for each use - Export specifications - Placement recommendations
Workflow 2: Physical Product Mockups
- Identify product type
- Packaging (box, bottle, bag) - Print materials (card, poster, book) - Merchandise (t-shirt, mug, stationery) - Signage (billboard, storefront)
- Design mockup scenario
- Environment context - Lighting conditions - Perspective and angle - Supporting elements
- Generate Midjourney prompts
- Product description - Surface/material textures - Branding placement - Photorealistic settings
- Create variations
- Multiple angles - Different environments - Various lighting - Scale comparisons
Workflow 3: Brand Presentation Mockups
- Plan presentation set
- Business cards - Letterhead - Email signature - Social media profiles - Website in browser - Mobile app screens
- Design cohesive scene
- Flat lay photography style - Lifestyle context - Product family grouping - Brand story visualization
- Generate mockup prompts
- Scene composition - Props and styling - Lighting and mood - Color palette consistency
- Create brand story
- Hero mockup (main showcase) - Supporting mockups (details) - Usage scenarios - Application examples
Workflow 4: Marketing & Social Mockups
- Define marketing goal
- Product launch announcement - Feature showcase - App store screenshots - Social media posts - Ad creatives
- Choose mockup style
- Clean and minimal - Lifestyle and contextual - Bold and graphic - Authentic and candid
- Generate platform-specific
- Instagram: 1080x1080, 1080x1350 - Facebook: 1200x630 - Twitter: 1200x675 - LinkedIn: 1200x627 - App Store: 1242x2208
- Create content series
- Teaser mockups - Feature highlights - Before/after - Testimonial integration
Quick Reference
| Action | Command/Trigger |
|---|---|
| Device mockup | "Create [device] mockup for [project]" |
| Packaging mockup | "Design packaging mockup for [product]" |
| Brand collateral | "Create brand mockup set for [company]" |
| App store screenshots | "Generate app screenshots for [app]" |
| Social media mockup | "Create Instagram mockup for [content]" |
| Print mockup | "Design business card mockup" |
Mockup Categories
Digital Device Mockups
Desktop/Laptop
- MacBook Pro/Air (most common)
- iMac
- Generic laptop
- Browser window only
- Dual monitor setup
Mobile
- iPhone (latest model)
- iPhone with hand holding
- Android (Pixel, Samsung)
- Flat lay phone mockup
- Phone in pocket/bag
Tablet
- iPad Pro
- iPad mini
- Tablet with pencil/keyboard
- E-reader
Wearables
- Apple Watch
- Smartwatch
- Fitness tracker
Multiple Devices
- Responsive showcase (phone + tablet + desktop)
- Device family
- Continuity mockup
Physical Product Mockups
Packaging
- Box (product box, gift box, shipping)
- Bottle (glass, plastic, cosmetic)
- Bag (paper, cloth, plastic)
- Can/Tin
- Tube
- Pouch
Print Materials
- Business card
- Letterhead
- Envelope
- Postcard
- Flyer/Brochure
- Poster
- Magazine ad
- Billboard
Merchandise
- T-shirt (front, back, folded, on model)
- Hoodie
- Tote bag
- Mug/Cup
- Notebook
- Stickers
- Hat/Cap
- Water bottle
Stationery
- Notebook
- Notepad
- Pen
- Pencil
- Folder
- Clipboard
Environmental
- Storefront sign
- Window display
- Banner
- Vehicle wrap
- Billboard
- Office interior
Presentation Styles
Clean & Minimal
- White background
- Soft shadows
- Centered composition
- Product focus
- Professional
Lifestyle & Context
- Real environment
- Natural lighting
- Hands holding device
- In-use scenario
- Relatable setting
Flat Lay
- Top-down view
- Arranged composition
- Complementary props
- Cohesive color story
- Instagram-friendly
Isometric
- 3D perspective
- Geometric
- Modern, tech-forward
- Illustrative quality
Hand Interaction
- Person holding device
- Using product
- Authentic usage
- Adds human element
Midjourney Prompt Templates
Website Desktop Mockup
A MacBook Pro displaying [website description] on the screen, placed on a clean white desk, soft natural lighting from the left, minimalist workspace with a coffee mug and succulent plant, professional photography, shallow depth of field, modern office environment --ar 16:9 --style raw --v 6Mobile App Mockup
An iPhone 15 Pro displaying [app screen description], held in a hand against a soft gradient background, clean product photography, centered composition, slight shadow, modern and professional --ar 9:16 --style raw --v 6Product Packaging
A [product type] box mockup with [brand elements] on a textured surface, dramatic side lighting creating shadows, premium packaging design, close-up product photography, shallow depth of field, commercial photography style --ar 4:3 --style raw --v 6Brand Stationery Set
Flat lay photography of brand identity materials including business cards, letterhead, and envelope, arranged on a white marble surface, soft overhead lighting, minimal shadows, elegant composition, professional branding mockup --ar 16:9 --style raw --v 6T-Shirt Mockup
A [color] t-shirt with [design description] worn by a person in a [setting], lifestyle photography, natural lighting, authentic and casual, soft focus background, apparel mockup, fashion photography style --ar 4:5 --style raw --v 6Best Practices
- Choose appropriate context: Match mockup style to brand personality
- Use realistic scenarios: Show product in believable situations
- Mind the details: Quality of mockup reflects on design quality
- Consistent lighting: Maintain cohesive look across mockup set
- Proper scale: Ensure product/screen proportions are accurate
- High resolution: Always create at publication quality (min 2000px)
- Consider perspective: Angle should complement design, not compete
- Background matters: Support the product, don't distract
- Show in context: Help viewer understand use case
- Create variations: Multiple angles tell fuller story
- Test readability: Ensure text/design visible at display size
- Brand consistency: Mockups should align with brand aesthetic
Technical Specifications
Screen Resolutions for Mockups
Desktop/Laptop
- 1920x1080 (Full HD)
- 2560x1440 (2K)
- 3840x2160 (4K)
Mobile (Portrait)
- iPhone: 1170x2532 (iPhone 14 Pro)
- Android: 1080x2400 (common flagship)
Tablet
- iPad Pro 12.9": 2048x2732
- iPad Air: 1640x2360
App Store Screenshots
- iPhone 6.7": 1290x2796
- iPhone 6.5": 1284x2778
- iPad Pro 12.9": 2048x2732
Export Formats
For web/social: JPG or PNG (PNG for transparency) For print: PDF or high-res PNG (300 DPI minimum) For presentations: PNG with transparency For video: PNG sequence or MP4
File Sizes
- Social media: 1-5MB max
- Website hero: 200-500KB (optimized)
- Print materials: Full resolution, no size limit
- Presentations: 500KB-1MB per image
Deliverables Format
MOCKUP SPECIFICATION
Project: [Name]
Type: [Digital/Physical/Brand Set]
Use Case: [Marketing/Presentation/Portfolio]
MOCKUP SET
1. Hero Mockup (Primary)
Type: MacBook Pro + iPhone mockup
Context: Modern desk with minimal props
Lighting: Soft natural light, left side
Background: Clean white/light gray
Midjourney Prompt:
"A MacBook Pro and iPhone 15 displaying [your design],
arranged on a white minimalist desk with a plant and
notebook, soft window lighting from left, professional
product photography, shallow depth of field --ar 16:9 --v 6"
Specs:
- Resolution: 3840x2160px
- Format: PNG with transparency option
- Aspect ratio: 16:9
2. Mobile Focus Mockup
Type: iPhone in hand
Context: Outdoor, natural setting
Lighting: Golden hour, warm
Background: Soft bokeh
Midjourney Prompt: [detailed prompt]
Specs:
- Resolution: 1080x1350px (Instagram)
- Format: JPG
- Aspect ratio: 4:5
3. Flat Lay Mockup
Type: Multiple devices overhead view
Context: Marble surface with accessories
Lighting: Bright, even overhead
Background: White marble texture
Midjourney Prompt: [detailed prompt]
Specs:
- Resolution: 2000x2000px
- Format: PNG
- Aspect ratio: 1:1
[... additional mockups ...]
USAGE GUIDELINES
Website:
- Use Hero Mockup for homepage
- Optimize to 200KB
- WebP format for best performance
Social Media:
- Use Mobile Focus for Instagram posts
- Use Flat Lay for stories
- Add text overlays in brand colors
Presentations:
- Use Hero Mockup for slides
- Ensure contrast with slide background
- PNG with transparency for flexibility
Print Materials:
- Export at 300 DPI
- CMYK color mode
- PDF format for press
VARIATIONS CREATED
Light Mode: [Mockup with light UI]
Dark Mode: [Mockup with dark UI]
Multiple Devices: [Responsive showcase]
Context Shots: [Lifestyle usage]
Close-ups: [Detail views]
ASSET DELIVERY
Files:
- hero-mockup-desktop-mobile.png (4K)
- mobile-in-hand.jpg (Instagram ready)
- flat-lay-devices.png (Square format)
- [additional files]
Editable Templates:
- [If applicable, PSD/Figma links]Popular Mockup Resources
Free Mockup Tools
- Artboard Studio: Browser-based, easy
- Mockuper: Simple device mockups
- Facebook Design: Free device templates
- Screely: Instant browser mockups
Premium Mockup Tools
- Rotato: Animated 3D device mockups
- Mediamodifier: Huge mockup library
- Placeit: Templates for everything
- Smartmockups: Easy drag-and-drop
Create with Midjourney (Recommended)
- Most flexible
- Unique, custom scenes
- Perfect brand alignment
- Unlimited variations
Tools Integration
- Use Midjourney to generate all mockup backgrounds and contexts
- Use Playwright to capture actual product screenshots for mockups
- Use ui-builder to create the designs being mocked up
- Use brand-identity-builder to ensure mockups align with brand
Common Requests
SaaS Product: Desktop browser + mobile app in clean office setting Mobile App: iPhone in hand, lifestyle outdoor setting E-commerce: Product packaging on textured surface with props Portfolio: Multi-device responsive showcase on desk Brand Launch: Flat lay of business cards, letterhead, and merch Social Media: Instagram-ready post with phone mockup and props