Gumroad Product Images" --version 1.0.0 --changelog "Initial release: cover + preview image generation for Gumroad products"

---

name: gumroad-product-images description: Generate professional product cover images (600x600) and preview/showcase images (1280x720) for Gumroad digital products. Use when creating, updating, or batch-generating Gumroad product images including covers, previews, and thumbnails. Generates HTML templates with modern dark-theme designs, then screenshots them to PNG using Edge headless. Supports custom color themes, badges, content lists, and CTA buttons. No external API or AI image generation needed.

---

Gumroad Product Images

Generate professional Gumroad product images from HTML templates using Edge headless screenshots.

Image Types

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

Workflow

1. Gather Product Info

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: ; } 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 ; 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 "/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 "/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