淘宝商品组图生成工具

SKILL前端设计
前端设计 未标注权限 许可证不明确
安装这个技能

根据用户提供的一张商品原图,自动生成淘宝/天猫所需的全套商品组图(主图、白底图、SKU图、详情页切片等)。保持原图画风和核心元素,智能裁切或扩图。输出按规格分文件夹保存。当用户提到"淘宝主图""商品组图""白底图""SKU图""详情页切片""电商图片""天猫主图"等需求时触发。

一句话选型结论

按资料字段整理

淘宝商品组图生成工具是前端设计类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类前端设计 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install user_aad6add3/taobao-image-generator
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_aad6add3仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验未标注上游最后核验时间 · 数据更新 1791671930
正文体量4.5 KBSKILL.md 原文大小,越大说明说明书写得越细

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
出页面与组件

按描述生成页面结构和组件草稿。

调整样式与布局

改间距、配色与响应式布局。

生成设计说明

把设计稿整理成开发能接的说明。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在前端设计场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
淘宝商品组图生成工具当前 未标注权限 未标注 未标注 未标注 有
前端设计 只读 GitHub 仓库 882.3 万 Codex、Claude、Cursor 有
Vercel 组合模式 联网访问 GitHub 仓库 385.9 万 Codex、Claude、Cursor 有
Vercel React native skills 前端 只读 GitHub 仓库 246.9 万 Codex、Claude、Cursor 有
adapt 搜索 浏览器控制 GitHub 仓库 202.7 万 Codex、Claude、Cursor 有
使用我的浏览器 浏览器控制 GitHub 仓库 184.8 万 Codex、Claude、Cursor 有

SKILL.md 全文

4.5 KB
模型实际读到的说明书原文,来自技能仓库

淘宝商品组图生成工具

将一张商品原图智能处理为淘宝/天猫平台所需的全部规格组图,保持原图画风和核心元素。

触发条件

用户提到以下需求时使用:
- "淘宝主图""商品组图""白底图""SKU图"
- "详情页切片""电商图片""天猫主图"
- "把这张图生成淘宝用的各种尺寸"
- 上传商品图片并要求生成电商平台用的多尺寸版本

输出规格(按淘宝平台标准)

一、商品主图 / SKU / 白底图

类型 尺寸 说明
标准主图 800 × 800(1:1) 单张 ≤3MB,建议 ≤500KB;≥800px 开放大镜
竖版/长主图 800 × 1200(3:4)或 750 × 1000 服饰类常用
白底图(第5张) 800 × 800,纯白 RGB(255,255,255) 无文字/水印/logo/阴影
SKU 规格图 800 × 800(1:1) 规格、型号、参数展示
主图视频封面 1:1(800×800)或 3:4(800×1200) 对应视频比例

二、商品详情页

类型 宽度 高度建议 说明
手机端详情页切片 750px 800–1500px/张 文字留 40px 安全区
PC 端详情页切片 790px 800–1500px/张 天猫 790px

工作流程

第一步:分析原图

读取原图信息:
- 原始尺寸(宽 × 高)
- 图片格式和文件大小
- 主色调(用于白底图的背景分析)
- 主体位置(简单方差法检测主体区域,用于智能裁切)
- 判断原图比例属于哪类:方形 / 竖长 / 横宽

第二步:确定处理策略

对每个目标尺寸,判断用哪种策略:

原图比例 vs 目标比例 策略 说明
原图比例 ≥ 目标比例 裁切 按比例裁切,优先保留中心主体区域
原图比例 < 目标比例 扩图 上下/左右补白/补主色调,保持主体完整
白底图 去背景+纯白底 基于主色调分析,主体保留,背景替换为纯白

裁切优先级:
1. 先检测主体区域(边缘方差法),主体在中心则中心裁切
2. 主体偏左/偏右则智能偏移裁切,确保主体不被裁掉
3. 若无法检测主体,默认中心裁切

扩图规则:
1. 补图区域填充主色调(取图片四角的平均色)
2. 白底图则填充纯白 RGB(255,255,255)
3. 扩图后主体居中,不变形

第三步:批量生成

对每个目标尺寸执行:
1. 计算裁切/扩图区域
2. 调用图像处理(PowerShell + System.Drawing)
3. 保存到对应子文件夹

第四步:组织输出

{输出目录}/
├── 主图/
│   ├── 标准主图_800x800.jpg
│   ├── 竖版主图_800x1200.jpg
│   ├── 白底图_800x800.jpg
│   ├── SKU规格图_800x800.jpg
│   └── 视频封面_800x800.jpg
├── 详情页_手机端/
│   ├── 切片_01_750x1200.jpg
│   ├── 切片_02_750x1200.jpg
│   └── ...
└── 详情页_PC端/
    ├── 切片_01_790x1200.jpg
    └── ...

使用脚本

scripts/generate_images.py 为编排脚本,实际图像处理通过 PowerShell + .NET System.Drawing 完成。

python scripts/generate_images.py &lt;原图路径&gt; &lt;输出目录&gt; [--skip-white-bg] [--skip-detail]

参数说明:
- &lt;原图路径&gt;:商品原图路径
- &lt;输出目录&gt;:组图保存目录
- --skip-white-bg:跳过白底图生成(耗时较长)
- --skip-detail:跳过详情页切片生成

注意事项

  • 保持画风:只做几何变换(裁切/缩放/扩图),不做滤镜、调色、风格化处理
  • 白底图质量:白底图需要背景分离,简单方法基于主色调判断,复杂背景建议用户先用专业工具抠图后重新生成
  • 文件大小:输出 JPG 质量设为 90%,确保单张 ≤3MB
  • 文字安全区:详情页切片若含文字,提醒用户在原始设计中确保文字距离边缘 ≥40px
  • 比例优先:裁切或扩图都不改变主体比例,不变形

常见问题

5 问
答案由本站依据条目字段整理
淘宝商品组图生成工具怎么安装?

在支持 Skills 的客户端里执行:skillhub install user_aad6add3/taobao-image-generator。安装方式为未标注。装完刷新技能列表或重开客户端。

淘宝商品组图生成工具支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

淘宝商品组图生成工具权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

淘宝商品组图生成工具收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

淘宝商品组图生成工具用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 未标注。