mockup generator skill by jmsktm

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

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

T-Shirt Mockup

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

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