Product Hunt Gallery Assets

This skill helps you create a compelling gallery that tells your product’s story, showcases key features, and convinces visitors to try your product.

When to Use This Skill

• Planning your gallery image sequence
• Creating feature showcase images
• Designing before/after comparisons
• Including video in your gallery
• Optimizing gallery for conversion

Gallery Requirements

Technical Specs

• Minimum images: 2 (required)
• Recommended: 4-6 images
• Formats: PNG, JPG, GIF
• Video: YouTube links only
• Order: Drag-and-drop reorderable

Best Practices

• Tell a story from first to last image
• Show actual product, not just marketing
• Include at least one video/demo if possible
• Make each image standalone yet connected

The Gallery Story Framework

Image Sequence Strategy

IMAGE 1: The Hook
↓ "What is this?"
IMAGE 2: The Problem
↓ "I have this problem!"
IMAGE 3: The Solution
↓ "This solves it!"
IMAGE 4: Key Feature 1
↓ "That's impressive"
IMAGE 5: Key Feature 2
↓ "Even more value"
IMAGE 6: Social Proof / CTA
→ "I should try this"

Image-by-Image Guide

Image 1: The Hook (REQUIRED)

Purpose: Stop the scroll, explain what this is

Options:

• Hero shot with tagline overlay
• Product in action (GIF)
• Bold value proposition statement

Template:

┌────────────────────────────────┐
│                                │
│     [PRODUCT NAME]             │
│                                │
│     [Tagline/Value Prop]       │
│                                │
│     [Product Screenshot]       │
│                                │
└────────────────────────────────┘

Checklist:

• Product name visible
• Core value proposition clear
• Product UI/interface shown
• Visually compelling

Image 2: The Problem/Context

Purpose: Establish the pain point you solve

Options:

• Before state visualization
• Problem statistics
• “The old way” frustration

Templates:

A) The Frustration

┌────────────────────────────────┐
│                                │
│   😫 Sound familiar?           │
│                                │
│   • Pain point 1               │
│   • Pain point 2               │
│   • Pain point 3               │
│                                │
│   There's a better way →       │
│                                │
└────────────────────────────────┘

B) The Statistics

┌────────────────────────────────┐
│                                │
│      [Shocking Stat]           │
│           ↓                    │
│   "[Problem costs X hours/     │
│    dollars per week]"          │
│                                │
└────────────────────────────────┘

Image 3: The Solution

Purpose: Show how your product solves the problem

Options:

• After state visualization
• Product in action (GIF/video)
• Before → After comparison

Template: Before/After

┌────────────────────────────────┐
│   BEFORE     │     AFTER       │
│              │                 │
│   [Chaos]    │   [Order]       │
│   [Complex]  │   [Simple]      │
│   [Slow]     │   [Fast]        │
│              │                 │
│   ────────── → ──────────     │
│         With [Product]         │
└────────────────────────────────┘

Image 4-5: Key Features

Purpose: Highlight 2-3 most impressive features

For Each Feature:

• Feature name (bold)
• What it does (brief)
• Why it matters (benefit)
• Visual demonstration

Template:

┌────────────────────────────────┐
│                                │
│   ⚡ [Feature Name]            │
│                                │
│   [Screenshot/Demo]            │
│                                │
│   [One-line benefit]           │
│                                │
└────────────────────────────────┘

Feature Selection Criteria:

• Most unique/differentiating
• Most requested by users
• Hardest to build (shows effort)
• Most visual/demonstrable

Image 6: Social Proof / CTA

Purpose: Build trust, encourage action

Options:

A) Testimonials

┌────────────────────────────────┐
│                                │
│   ⭐⭐⭐⭐⭐                     │
│                                │
│   "[Quote from user]"          │
│                                │
│   — Name, Title @ Company      │
│     [Logo]                     │
│                                │
└────────────────────────────────┘

B) Metrics

┌────────────────────────────────┐
│                                │
│   Trusted by                   │
│                                │
│   10,000+ │ 4.9/5 │ 50+ Cos   │
│   Users   │ Rating │ trust us  │
│                                │
│   [Company logos row]          │
│                                │
└────────────────────────────────┘

C) CTA

┌────────────────────────────────┐
│                                │
│   Ready to [benefit]?          │
│                                │
│   ┌──────────────────────┐    │
│   │   Get Started Free   │    │
│   └──────────────────────┘    │
│                                │
│   🎁 PH Special: [Offer]       │
│                                │
└────────────────────────────────┘

Gallery Types by Product

SaaS/Web App

1. Hero with dashboard
2. Key workflow demo (GIF)
3. Feature highlight 1
4. Feature highlight 2
5. Integration showcase
6. Pricing/testimonials

Mobile App

1. App on device mockup
2. Key screens (3-up or carousel)
3. Feature 1 demo
4. Feature 2 demo
5. User reviews/ratings
6. Download CTA

Developer Tool

1. Code/terminal example
2. Before/after code comparison
3. Integration simplicity
4. Performance metrics
5. Documentation preview
6. GitHub stars/adoption

AI Product

1. AI in action (GIF)
2. Input → Output example
3. Accuracy/quality metrics
4. Use case 1
5. Use case 2
6. API/integration options

Video Integration

YouTube Video in Gallery

• Creates more engagement
• Shows product in motion
• PH algorithm favors video

Video Requirements:

• YouTube link only
• Not set to private
• Upload before launch day
• Test embed works

Ideal Video Content:

• 30-90 second demo
• Hook in first 5 seconds
• Show the “aha” moment
• End with CTA

Interactive Demos

Use tools like:

• Arcade
• Supademo
• Storylane
• Hexus

Design Best Practices

Do:

• ✓ Maintain consistent style/branding
• ✓ Use high-resolution images
• ✓ Include annotations/callouts
• ✓ Show real product, not mockups
• ✓ Test on mobile viewing
• ✓ Use dark mode screenshots if product has it

Don’t:

• ✗ Use stock photos
• ✗ Include tiny unreadable text
• ✗ Make images too text-heavy
• ✗ Use different visual styles
• ✗ Include outdated UI
• ✗ Skip quality control

Gallery Checklist

Content

• First image explains what product does
• Problem is clearly established
• Solution is demonstrated
• 2-3 key features highlighted
• Social proof included
• CTA or offer visible

Quality

• All images high resolution
• Consistent brand styling
• No typos or errors
• Looks good at all sizes
• Video tested and working

Flow

• Tells coherent story
• Each image has clear purpose
• Logical progression
• Ends with strong impression

Output Format

GALLERY PLAN FOR: [Product Name]

TOTAL IMAGES: [Number]
VIDEO INCLUDED: [Yes/No]

IMAGE SEQUENCE:

1. [Type: Hook/Hero]
   Content: [Description]
   Message: [What viewer should understand]

2. [Type: Problem]
   Content: [Description]
   Message: [What viewer should feel]

3. [Type: Solution]
   Content: [Description]
   Message: [The "aha" moment]

4. [Type: Feature]
   Feature: [Name]
   Content: [Description]

5. [Type: Feature]
   Feature: [Name]
   Content: [Description]

6. [Type: Social Proof/CTA]
   Content: [Description]
   Message: [Final impression]

VISUAL STYLE:
- Primary colors: [Colors]
- Typography: [Fonts]
- Screenshot style: [Dark/Light mode]

TOOLS TO USE:
[Recommended design tools]