直接生成透明背景图片

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

根据用户的生图需求生成、编辑或整理背景透明的图片素材,主要交付透明 PNG/WebP,按用户要求可额外交付 SVG 包装文件;支持用户指定尺寸、风格、纹样、主体、参考图片、透明区域、文件大小上限或目标 KB。用于需要高质量透明贴图、相框、边框、角花、水印、商品贴纸、UI 装饰、素材抠图和透明背景资产时,必须优先使用 imagegen 生成或编辑视觉素材,再进行去背、透明校验、尺寸/体积处理和交付说明。

一句话选型结论

按资料字段整理

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

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

安装

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

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

  2. 2
    拿到技能文件

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

  3. 3
    刷新技能列表

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

  4. 4
    验证是否生效

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

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_c830ad09仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验未标注上游最后核验时间 · 数据更新 1791716277
正文体量8.4 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 全文

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

透明背景图片生成

功能定位

根据用户的生图需求,生成背景透明的图片素材。默认交付透明 PNG;用户要求 WebP、SVG 或指定 KB 时,再做对应格式处理。这个 skill 的价值不在于手写复杂图案,而在于把“用户指定的视觉需求 + imagegen 生成质量 + 透明背景处理 + 文件规格校验”串成稳定流程。

适用素材包括:透明贴图、相框、边框装饰、角花、纹样贴纸、水印、商品贴纸、UI 装饰、头像挂件、节日装饰、图标式素材、根据参考图生成的透明素材。

真实能力边界

  • 可以用 imagegen 生成或编辑图片,再通过 chroma-key 去背得到透明 PNG/WebP。
  • 可以根据用户指定尺寸裁切、留白、缩放或包装成固定画布。
  • 可以校验透明区域、图片尺寸和文件大小。
  • 可以在用户要求 SVG 时,把透明 PNG 嵌入 SVG,或对简单图案直接生成原生 SVG。
  • 不能保证所有复杂材质都能完美自动去背,例如半透明玻璃、烟雾、毛发、复杂反光金属、极细镂空。遇到这类情况,应先说明风险,再按 imagegen skill 的规则询问是否使用真正透明输出的 CLI fallback。
  • 不能绕过版权限制或复刻受保护作品。用户提供参考图片时,只把它作为用户授权的风格、构图、纹样或材质参考。

用户指定优先

  • 风格、纹样、主体、材质、构图、参考图片必须来自用户需求。
  • 不要把巴洛克、国潮、赛博、极简、手绘、金色等任何风格当默认值。
  • 用户没有指定风格或纹样时,先采用中性、低风格化方案并说明假设;如果风格会决定成败,先问一句。
  • 用户提供参考图片时,明确它用于约束哪一项:风格、纹样、构图、材质、配色或主体形态。

所需权限及用途

  • imagegen:用于按用户需求生成或编辑视觉素材,是本 skill 的核心能力。
  • 本地文件读写:用于保存生成图片、透明 PNG/WebP、可选 SVG 包装文件和校验结果;只写入用户指定位置或当前项目工作区。
  • 本地脚本执行:用于运行透明校验、SVG 尺寸/体积校验、chroma-key 去背辅助脚本;脚本只处理输入/输出文件,不联网、不读取无关目录、不修改系统配置。
  • 可选 CLI fallback:只有当用户明确要求真正透明输出,或 chroma-key 去背无法可靠满足需求,并且用户确认后才使用;该路径可能需要 OPENAI_API_KEY。不要擅自读取、写入或记录密钥。

不得请求与当前素材生成无关的权限,例如数据库、git push、部署、系统配置、全局依赖安装或访问无关目录。

工作流程

  1. 解析需求:输出格式、尺寸、主体、风格、纹样、材质、参考图片、透明区域、文件大小要求、保存路径。
  2. 判断输出:默认透明 PNG;用户指定 WebP/SVG/KB 时增加对应处理。
  3. 组织 imagegen 提示词:严格保留用户指定的风格、纹样和参考图约束;不要添加未指定强风格。
  4. 生成素材:用 imagegen 生成纯色 chroma-key 背景版本,背景推荐 #00ff00;主体中不能出现该 key color。
  5. 去背:按 imagegen skill 的透明图流程运行 chroma-key 去背,得到带 alpha 的 PNG/WebP。
  6. 检查:确认四角透明、主体边缘干净、应透明区域没有残留底色;复杂素材必要时迭代一次。
  7. 规格处理:按用户要求调整尺寸、画布、裁切、压缩、文件大小上限或目标 KB。
  8. 可选 SVG:只有用户要求 SVG 时才生成。复杂图案优先嵌入透明 PNG;简单几何图案可写原生 SVG。
  9. 交付:说明最终路径、格式、尺寸、文件大小、透明处理方式、是否使用 imagegen、是否存在无法完全保证的限制。

imagegen 提示词模板

按需使用,不要机械填满:

用途:透明背景图片素材
主体:<用户指定主体>
尺寸/构图:适配 <宽>x<高>,主体完整,四周留安全边距
风格:<用户指定风格;未指定则写“中性素材风格”并说明假设>
纹样:<用户指定纹样;未指定则不添加强纹样>
参考图片:<如有,说明用于风格/纹样/构图/材质/配色/主体形态>
材质:<用户指定材质;未指定则按用途选择克制材质>
透明要求:主体以外必须可去背;背景使用纯色 #00ff00 chroma-key
限制:无投影、无背景纹理、无水印、无文字,主体中不要出现 #00ff00

相框或镂空素材补充:

中间窗口必须干净留空,边框连续完整,装饰不要遮挡中心透明区域;透明区域后续必须能变成 alpha。

文件与格式规则

  • 透明图片优先交付 PNG;需要更小体积时可交付 WebP。
  • SVG 不是默认目标,只在用户要求 SVG、或项目确实需要 SVG 包装时生成。
  • SVG 根节点不得设置背景色,不得添加覆盖全画布的实色 rect。
  • 相框、边框、镂空素材的中心或空白区域必须真正透明,不用白色/黑色假装透明。
  • 文件大小要求默认按 KiB 理解:100 KB = 102400 bytes。
  • “不超过 xxx KB”只需要压缩到上限以内;“精确 xxx KB”只能在自然文件小于目标时通过安全 padding 实现。

脚本说明

当前附带脚本 scripts/svg_output_tool.py 只用于 SVG 交付场景:校验 SVG 根尺寸、viewBox、明显破坏透明背景的全画布填充、嵌入位图风险和文件体积,并可对 SVG 做目标 KB padding。它不联网,不读取无关文件,不修改输入文件以外的内容。

用法:

python scripts/svg_output_tool.py validate input.svg --width 1080 --height 1080 --transparent-policy strict --max-kb 100
python scripts/svg_output_tool.py fit-size input.svg output.svg --target-kb 100 --width 1080 --height 1080

透明 PNG/WebP 的去背流程遵循系统 imagegen skill 中的 chroma-key helper,不在本 skill 中复制实现。

透明度检查

交付前至少确认:

  • 文件有 alpha 通道。
  • 四角或应空白区域透明。
  • 主体边缘没有明显绿色/洋红色 key color 残留。
  • 相框、边框、镂空类素材的内部区域透明。
  • 图片尺寸与用户要求一致。
  • 文件大小符合用户的上限或目标。

原创性与版权

  • 按用户的当前需求生成原创素材,不搬运、复制或伪装成他人 skill、素材包或商业模板。
  • 不复刻在世艺术家的特定风格,不仿冒商标、IP 角色、受保护图案或平台水印。
  • 用户提供参考图时,只在用户授权范围内使用;最终交付应是新生成或经过用户允许处理的素材。
  • 不声称生成结果与某受保护作品完全一致。

代码透明与安全

  • 本 skill 的脚本用途单一:SVG 校验和体积 padding。
  • 脚本不包含网络请求、遥测、加密上传、隐藏下载、密钥读取、后门或自动发布行为。
  • 不修改 .env、密钥、CI/CD、数据库、git 历史或系统配置。
  • 需要额外权限时,先说明用途,只请求完成当前素材任务所需的最小权限。

示例需求

  • 生成一张 1024x1024 的透明 PNG 商品贴纸,风格和纹样按我给的参考图来。
  • 生成 1080x1080 的透明相框图片,中间透明,风格为我指定的复古金色巴洛克,不超过 300 KB。
  • 生成一组透明角花素材,国潮云纹风格,WebP 格式,每张不超过 80 KB。
  • 把这张图处理成透明背景 PNG,并按 800x800 居中留白。

交付检查

  • 输出格式、尺寸、文件大小符合需求。
  • 背景和指定空白区域确实透明。
  • 风格、纹样、主体、参考图片使用方式与用户指定一致。
  • 没有擅自套用未指定风格。
  • 说明使用了 imagegen、去背方式、最终文件路径和任何已知限制。

常见问题

5 问
答案由本站依据条目字段整理
直接生成透明背景图片怎么安装?

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

直接生成透明背景图片支持哪些客户端?

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

直接生成透明背景图片权限高吗,安全吗?

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

直接生成透明背景图片收费吗?

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

直接生成透明背景图片用什么许可证?

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

热门专题

按场景挑技能
全部专题 →

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