Collect from user:

Product name
Subtitle / value proposition
Category tags (3-5 short labels with emoji)
"What's inside" list (5-6 items)
Color theme preference (or auto-select from assets/themes.json)

2. Generate HTML

Use templates in assets/ as base. Key rules:

All emoji must use HTML entities (e.g. ⚡ not ⚡) to prevent encoding corruption on Windows
Never include prices or "free" on images — prices may change
Set html { background: <darkest-color>; } to prevent white edges on screenshot
Use 100vw/100vh for body dimensions, not fixed pixels
Font: 'Segoe UI', system-ui, sans-serif

Cover (600x600)

Layout: centered card with badge, icon/number, title, subtitle, tags.

Preview (1280x720)

Layout: left side (badge + icon + title + subtitle + tags) | right side (content list card + CTA button).

CTA button text: "Get Instant Access →" (never mention price/free).

3. Serve & Screenshot

Start a local HTTP server if not running:

cd <product-images-dir>; npx http-server -p 8765 --cors -c-1

Screenshot with Edge headless:

# Cover (600x600)
& "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --headless --screenshot="cover.png" --window-size=600,600 --force-device-scale-factor=1 "<url>/cover.html"

# Preview (1280x720)
& "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --headless --screenshot="preview.png" --window-size=1280,720 --force-device-scale-factor=1 "<url>/preview.html"

4. Batch Processing

For multiple products, loop:

$products = @("product-a","product-b","product-c")
foreach($name in $products) {
  $types = @(@{file="cover";w=600;h=600}, @{file="preview";w=1280;h=720})
  foreach($t in $types) {
    $png = "F:\path\$name\$($t.file).png"
    & "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --headless --screenshot="$png" --window-size="$($t.w),$($t.h)" --force-device-scale-factor=1 "http://127.0.0.1:8765/$name/$($t.file).html"
  }
  Write-Host "Done: $name"
}

5. Verify

After screenshot, check:

No white edges (right/bottom)
No emoji garbled text (use HTML entities only)
No prices or "free" text on images
File size > 50KB (not blank)

Color Themes

See assets/themes.json for predefined themes. Each theme has:

bg: gradient stops for body background
html_bg: solid color for html element
accent: primary accent color for badges/CTAs
accent2: secondary accent for gradients
dot: color for list dots
highlight: color for headings/titles

Type	Size	Use
Cover	600x600	Gumroad thumbnail, Discover, profile page
Preview	1280x720	Product page showcase image

gumroad-product-images

Gumroad Product Images

Image Types

Workflow

1. Gather Product Info