name: Mockup Generator
slug: mockup-generator
description: Create realistic product mockups and presentations
category: design
complexity: simple
version: "1.0.0"
author: "ID8Labs"
triggers:
- "create mockup"
- "product mockup"
- "design mockup"
- "presentation mockup"
- "device mockup"
tags:
- mockup
- presentation
- visualization
- marketing

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

1. Define context
2. Product type (website, app, software)
3. Devices needed (desktop, mobile, tablet)
4. Use context (office, coffee shop, home)

5. Perspective (flat, angled, in-hand)

6. Generate Midjourney prompts

7. Device type and model
8. Screen content description
9. Environment and lighting

10. Style (clean, lifestyle, minimal)

11. Specify mockup details

12. Screen dimensions
13. Device frame (include/exclude)
14. Shadow and reflection

15. Background treatment

16. Create multiple variations

17. Different devices
18. Different contexts
19. Different angles

20. Light and dark mode

21. Provide usage guidelines

22. Best formats for each use
23. Export specifications
24. Placement recommendations

Workflow 2: Physical Product Mockups

1. Identify product type
2. Packaging (box, bottle, bag)
3. Print materials (card, poster, book)
4. Merchandise (t-shirt, mug, stationery)

5. Signage (billboard, storefront)

6. Design mockup scenario

7. Environment context
8. Lighting conditions
9. Perspective and angle

10. Supporting elements

11. Generate Midjourney prompts

12. Product description
13. Surface/material textures
14. Branding placement

15. Photorealistic settings

16. Create variations

17. Multiple angles
18. Different environments
19. Various lighting
20. Scale comparisons

Workflow 3: Brand Presentation Mockups

1. Plan presentation set
2. Business cards
3. Letterhead
4. Email signature
5. Social media profiles
6. Website in browser

7. Mobile app screens

8. Design cohesive scene

9. Flat lay photography style
10. Lifestyle context
11. Product family grouping

12. Brand story visualization

13. Generate mockup prompts

14. Scene composition
15. Props and styling
16. Lighting and mood

17. Color palette consistency

18. Create brand story

19. Hero mockup (main showcase)
20. Supporting mockups (details)
21. Usage scenarios
22. Application examples

Workflow 4: Marketing & Social Mockups

1. Define marketing goal
2. Product launch announcement
3. Feature showcase
4. App store screenshots
5. Social media posts

6. Ad creatives

7. Choose mockup style

8. Clean and minimal
9. Lifestyle and contextual
10. Bold and graphic

11. Authentic and candid

12. Generate platform-specific

13. Instagram: 1080x1080, 1080x1350
14. Facebook: 1200x630
15. Twitter: 1200x675
16. LinkedIn: 1200x627

17. App Store: 1242x2208

18. Create content series

19. Teaser mockups
20. Feature highlights
21. Before/after
22. Testimonial integration

Quick Reference

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 6

Mobile 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 6

Product 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 6

Brand 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 6

T-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 6

Best 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