Gumroad 产品图片

使用 Edge 无头截图（headless screenshot）技术，基于 HTML 模板生成专业的 Gumroad 产品图片。

图片类型

工作流程

1. 收集产品信息

向用户收集以下信息：

• 产品名称
• 副标题 / 价值主张
• 分类标签（3–5 个简短标签，可带 emoji）
• “包含内容”列表（5–6 项）
• 配色主题偏好（或从 assets/themes.json 中自动选取）

2. 生成 HTML

以 assets/ 目录下的模板为基准。关键规则如下：

• 所有 emoji 必须使用 HTML 实体表示（例如 ⚡，而非 ⚡），以避免在 Windows 系统上出现编码损坏
• 图片中禁止出现价格或 “free” 字样——价格可能随时变动
• 设置 html { background: <最深色>; }，防止截图出现白色边缘
• 页面主体尺寸使用 100vw/100vh，不可使用固定像素值
• 字体： 'Segoe UI', system-ui, sans-serif

Cover（600×600）

布局：居中卡片式设计，含徽章（badge）、图标/编号、标题、副标题、标签。

Preview（1280×720）

布局：左侧（徽章 + 图标 + 标题 + 副标题 + 标签）｜右侧（内容列表卡片 + CTA 按钮）。

CTA 按钮文案：“Get Instant Access →”（严禁提及价格或 “free”）。

3. 启动服务并截图

若本地 HTTP 服务尚未运行，请先启动：

cd ; npx http-server -p 8765 --cors -c-1

使用 Edge 无头模式截图：

# Cover（600×600）
& "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（1280×720）
& "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. 批量处理

针对多个产品，执行循环截图：

$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. 校验

截图完成后，请检查以下各项：

• 无白色边缘（右侧/底部）
• 无 emoji 显示异常（仅允许使用 HTML 实体）
• 图片中无价格或 “free” 文字
• 文件大小 > 50 KB（非空白图）

配色主题

详见 assets/themes.json 中预定义的主题。每个主题包含以下字段：

• bg：body 背景的渐变色停靠点（gradient stops）
• html_bg：html 元素的纯色背景
• accent：徽章（badge）与 CTA 按钮的主强调色
• accent2：渐变色中的次强调色
• dot：列表项目符号（list dots）颜色
• highlight：标题/主标题的高亮色