Skillppx logo

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

基于 HTML 模板生成 Gumroad 产品封面与预览图，支持批量处理。

已扫描
适合谁
数字产品创作者、Gumroad 平台卖家
不适合谁
无 Windows 环境用户、不使用 Gumroad 的内容发布者
国内可用性
需网络配置。可能需要网络配置或第三方服务可访问。
安装难度
新手友好（★☆☆）。基于终端操作、依赖、API Key 和本地环境要求的初步判断。

安装与下载

openclaw skills install @careytian-ai/gumroad-product-images
下载官方 ZIP

Skill 说明

命令、参数、文件名以原文为准

Gumroad 产品图片

使用 Edge 浏览器无头模式截图，从 HTML 模板生成专业的 Gumroad 产品图片。

图片类型

类型尺寸用途
封面图600x600Gumroad 缩略图、发现页、个人主页
预览图1280x720产品页面展示图

工作流程

1. 收集产品信息

从用户处获取以下内容：

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

2. 生成 HTML

以 assets/ 目录中的模板为基础。关键规则：

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

封面图（600x600）

布局：居中卡片，包含徽章、图标/编号、标题、副标题、标签

预览图（1280x720）

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

CTA 按钮文字：Get Instant Access &#x2192;（不得提及价格或“免费”）

3. 提供服务并截图

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

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

使用 Edge 无头模式截图：

# 封面图（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"

# 预览图（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. 批量处理

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

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

截图完成后检查：

  • [ ] 无白色边缘（右侧/底部）
  • [ ] 无表情符号乱码（仅使用 HTML 实体）
  • [ ] 图片中无价格或“免费”文字
  • [ ] 文件大小 > 50KB（非空白文件）

颜色主题

参见 assets/themes.json 中的预设主题。每个主题包含：

  • bg：body 背景渐变色停靠点
  • html_bg：html 元素的纯色背景
  • accent：徽章/CTA 的主强调色
  • accent2：渐变用的次级强调色
  • dot：列表项目符号颜色
  • highlight：标题/正文高亮色
CA
@careytian-ai

已收录 1 个 Skill

相关推荐