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

核心功能是生成适配Gumroad的600x600封面（用于缩略图、发现页）和1280x720预览图（用于产品页），支持自定义色主题、标签、内容列表及CTA按钮。基于HTML模板生成页面，通过Edge无头浏览器截图导出PNG，无需外部API或AI。适用于创建、更新或批量生成Gumroad产品图片场景，输入产品信息即可输出符合规范的图片。

careytian-ai

热度 47.07

最近更新 2026-05-11 17:39:59

分类：创作依赖：代码执行 / 读写文件应用场景：图像生成 / 品牌素材

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add gumroad-product-images

Metadata

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