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

Polar Sponsor

爱发电赞助

.NET 9.0

立即下载

为 Gumroad 数字产品生成 600×600 封面和 1280×720 预览图，适用于创建、更新或批量处理。

Gumroad 产品图像

功能概述

Gumroad 产品图像是一项面向实际任务的技能，主要用于Generated 专业 Gumroad 产品图像, 使用 HTML 模板使用 Edge 无头截图.；Image Type.；

核心要点

Type.；
Size.；
Cover. 600x600.；

使用与执行

Gumroad 缩略图, 发现, 剖析。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；

结果检查与注意事项

若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。该技能适合用于一次性任务，也可以接入自动化工作流，与其他技能或上层代理配合完成更完整的业务链路；在组合使用时，应明确每一步的输入输出关系，并避免不同步骤之间出现参数冲突。

Gumroad 产品图片

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

图片类型

类型	尺寸	用途
Cover（封面图）	600×600	Gumroad 缩略图、Discover 页面、个人资料页
Preview（预览图）	1280×720	产品页面展示图

工作流程

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"
}