jmsktm/Mockup Generator

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

   • Product type (website, app, software)
   • Devices needed (desktop, mobile, tablet)
   • Use context (office, coffee shop, home)
   • Perspective (flat, angled, in-hand)

2. Generate Midjourney prompts

   • Device type and model
   • Screen content description
   • Environment and lighting
   • Style (clean, lifestyle, minimal)

3. Specify mockup details

   • Screen dimensions
   • Device frame (include/exclude)
   • Shadow and reflection
   • Background treatment

4. Create multiple variations

   • Different devices
   • Different contexts
   • Different angles
   • Light and dark mode

5. Provide usage guidelines

   • Best formats for each use
   • Export specifications
   • Placement recommendations

Workflow 2: Physical Product Mockups

1. Identify product type

   • Packaging (box, bottle, bag)
   • Print materials (card, poster, book)
   • Merchandise (t-shirt, mug, stationery)
   • Signage (billboard, storefront)

2. Design mockup scenario

   • Environment context
   • Lighting conditions
   • Perspective and angle
   • Supporting elements

3. Generate Midjourney prompts

   • Product description
   • Surface/material textures
   • Branding placement
   • Photorealistic settings

4. Create variations

   • Multiple angles
   • Different environments
   • Various lighting
   • Scale comparisons

Workflow 3: Brand Presentation Mockups

1. Plan presentation set

   • Business cards
   • Letterhead
   • Email signature
   • Social media profiles
   • Website in browser
   • Mobile app screens

2. Design cohesive scene

   • Flat lay photography style
   • Lifestyle context
   • Product family grouping
   • Brand story visualization

3. Generate mockup prompts

   • Scene composition
   • Props and styling
   • Lighting and mood
   • Color palette consistency

4. Create brand story

   • Hero mockup (main showcase)
   • Supporting mockups (details)
   • Usage scenarios
   • Application examples

Workflow 4: Marketing & Social Mockups

1. Define marketing goal

   • Product launch announcement
   • Feature showcase
   • App store screenshots
   • Social media posts
   • Ad creatives

2. Choose mockup style

   • Clean and minimal
   • Lifestyle and contextual
   • Bold and graphic
   • Authentic and candid

3. Generate platform-specific

   • Instagram: 1080x1080, 1080x1350
   • Facebook: 1200x630
   • Twitter: 1200x675
   • LinkedIn: 1200x627
   • App Store: 1242x2208

4. 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 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