{"id":"9703fe53-de43-4e75-b837-d329b738e434","shortId":"kAPSwX","kind":"skill","title":"transparent-visual-assets","tagline":"Generate transparent-background raster assets with Codex image generation plus deterministic cleanup. Use when the user wants a PNG sticker, icon, mascot, sprite, UI asset, or web-ready visual element with transparent background, or asks to remove/avoid a generated image backgrou","description":"# Transparent Visual Assets\n\n## 核心判断\n\n先让 Codex 生图得到“容易抠干净”的图，再用脚本做确定性清理。不要要求模型直接画棋盘格透明背景；棋盘格会变成图像内容。优先让模型使用纯色背景，例如 `#FF00FF` 或 `#00FF00`，并明确主体不能使用接近背景的颜色。\n\n适合输出：透明 PNG、网页素材、贴纸、图标、单帧 sprite、角色/物体素材。\n\n不适合输出：多帧动画、spritesheet、视频；这些转给 `$sprite-animation-assets`。\n\n## 典型使用场景\n\n- 网站设计素材：Landing page、产品官网、博客插画、功能区装饰、空状态插画。\n- PPT / 汇报图表：路演页、数据页、业务复盘、图表旁的视觉解释元素。\n- App / 产品引导：onboarding、权限说明、功能引导、发布说明里的产品插画。\n- 电商 / 社媒贴纸：商品页角标、促销贴纸、社媒封面、公众号配图元素。\n- 游戏 / 互动 UI：小角色、道具、背包图标、按钮素材、单帧 sprite。\n- 视频 / 海报叠加：封面人物、栏目贴片、透明 logo-like 装饰、片头片尾元素。\n\n## 工作流\n\n1. 明确素材用途、尺寸、主体边界和禁用元素。\n2. 调用 Codex 生图能力生成带纯色背景的候选图。\n3. 目视检查：主体完整、没有阴影地面、没有漂浮杂点、主体颜色不接近背景色。\n4. 用 `scripts/prepare_transparent_asset.py` 清理纯色背景、裁切透明边缘、输出 PNG。\n5. 打开结果或检查报告，确认透明角落、主体不被误删。\n\n## 生图提示词要点\n\n使用简短、强约束的提示词：\n\n```text\nCreate a single centered web asset of <subject>.\nUse a perfectly flat #FF00FF background for later chroma key removal.\nThe subject must not contain magenta, pink, or colors close to #FF00FF.\nNo shadows, floor, scenery, text, labels, checkerboard pattern, glow, blur, or detached decorative particles.\nKeep the full subject inside the canvas with clear spacing.\n```\n\n如果主体天然包含粉色或品红，换成 `#00FF00`、`#00FFFF` 或其他不会出现在主体里的纯色。\n\n更多提示词和 QA 细节见 `references/prompt-and-cleanup.md`。\n\n## 清理脚本\n\n```bash\npython \"${CODEX_HOME:-$HOME/.codex}/skills/transparent-visual-assets/scripts/prepare_transparent_asset.py\" \\\n  --input /absolute/path/source.png \\\n  --output /absolute/path/asset.png \\\n  --background \"#FF00FF\" \\\n  --threshold 24 \\\n  --feather-threshold 48 \\\n  --trim \\\n  --padding 8 \\\n  --report /absolute/path/report.json\n```\n\n参数说明：\n\n- `--background`：要移除的纯色背景；不传时用四角颜色估算。\n- `--threshold`：颜色容差。背景边缘残留就调大；主体被吃掉就调小或重生图换背景色。\n- `--feather-threshold`：可选的边缘柔化容差，用来淡化生图抗锯齿留下的背景色毛边。\n- `--trim` 和 `--padding`：裁掉透明边缘并保留一点安全留白。\n\n脚本只做背景清理，不会补画、重绘、扩图或创造新素材。\n\n## 验收标准\n\n- 输出必须是 `.png`，并带 alpha 透明通道。\n- 四角应透明，主体边缘不缺块。\n- 主体外没有阴影、地面、光晕、漂浮符号、文字或背景色残留。\n- 素材在深色、浅色、棋盘格背景上都能读清。\n- 如果清理后主体明显破损，重新生图或换背景色，不要靠脚本硬修。","tags":["transparent","visual","assets","codex","asset","skills","dwdestiny","agent-skills","gif","hatch-pet","spritesheet","transparent-background"],"capabilities":["skill","source-dwdestiny","skill-transparent-visual-assets","topic-agent-skills","topic-codex","topic-gif","topic-hatch-pet","topic-spritesheet","topic-transparent-background"],"categories":["codex-visual-asset-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/DwDestiny/codex-visual-asset-skills/transparent-visual-assets","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add DwDestiny/codex-visual-asset-skills","source_repo":"https://github.com/DwDestiny/codex-visual-asset-skills","install_from":"skills.sh"}},"qualityScore":"0.453","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 6 github stars · SKILL.md body (1,930 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:14:41.881Z","embedding":null,"createdAt":"2026-05-18T13:22:11.995Z","updatedAt":"2026-05-18T19:14:41.881Z","lastSeenAt":"2026-05-18T19:14:41.881Z","tsv":"'/absolute/path/asset.png':233 '/absolute/path/report.json':246 '/absolute/path/source.png':231 '/skills/transparent-visual-assets/scripts/prepare_transparent_asset.py':229 '00ff00':64,216 '00ffff':217 '1':131 '2':135 '24':237 '3':139 '4':145 '48':241 '5':152 '8':244 'alpha':272 'anim':83 'app':99 'ask':41 'asset':4,10,30,50,84,165 'backgrou':47 'background':8,39,172,234,248 'bash':224 'blur':199 'canva':210 'center':163 'checkerboard':196 'chroma':175 'cleanup':17 'clear':212 'close':187 'codex':12,53,137,226 'color':186 'contain':182 'creat':160 'decor':202 'detach':201 'determinist':16 'element':36 'feather':239,256 'feather-threshold':238,255 'ff00ff':62,171,189,235 'flat':170 'floor':192 'full':206 'generat':5,14,45 'glow':198 'home':227 'home/.codex':228 'icon':26 'imag':13,46 'input':230 'insid':208 'keep':204 'key':176 'label':195 'land':87 'later':174 'like':127 'logo':126 'logo-lik':125 'magenta':183 'mascot':27 'must':180 'onboard':101 'output':232 'pad':243,262 'page':88 'particl':203 'pattern':197 'perfect':169 'pink':184 'plus':15 'png':24,68,151,270 'ppt':93 'python':225 'qa':220 'raster':9 'readi':34 'references/prompt-and-cleanup.md':222 'remov':177 'remove/avoid':43 'report':245 'sceneri':193 'scripts/prepare_transparent_asset.py':147 'shadow':191 'singl':162 'skill' 'skill-transparent-visual-assets' 'source-dwdestiny' 'space':213 'sprite':28,73,82,119 'sprite-animation-asset':81 'spritesheet':78 'sticker':25 'subject':179,207 'text':159,194 'threshold':236,240,251,257 'topic-agent-skills' 'topic-codex' 'topic-gif' 'topic-hatch-pet' 'topic-spritesheet' 'topic-transparent-background' 'transpar':2,7,38,48 'transparent-background':6 'transparent-visual-asset':1 'trim':242,260 'ui':29,113 'use':18,167 'user':21 'visual':3,35,49 'want':22 'web':33,164 'web-readi':32 '不会补画':265 '不传时用四角颜色估算':250 '不要要求模型直接画棋盘格透明背景':58 '不要靠脚本硬修':286 '不适合输出':76 '业务复盘':97 '主体不被误删':155 '主体外没有阴影':276 '主体完整':141 '主体被吃掉就调小或重生图换背景色':254 '主体边界和禁用元素':134 '主体边缘不缺块':275 '主体颜色不接近背景色':144 '互动':112 '产品官网':89 '产品引导':100 '优先让模型使用纯色背景':60 '使用简短':157 '例如':61 '促销贴纸':108 '先让':52 '光晕':278 '公众号配图元素':110 '典型使用场景':85 '再用脚本做确定性清理':57 '功能区装饰':91 '功能引导':103 '单帧':72,118 '博客插画':90 '参数说明':247 '发布说明里的产品插画':104 '可选的边缘柔化容差':258 '和':261 '商品页角标':107 '四角应透明':274 '图标':71 '图表旁的视觉解释元素':98 '地面':277 '多帧动画':77 '如果主体天然包含粉色或品红':214 '如果清理后主体明显破损':284 '容易抠干净':55 '封面人物':122 '小角色':114 '尺寸':133 '工作流':130 '并带':271 '并明确主体不能使用接近背景的颜色':65 '强约束的提示词':158 '或':63 '或其他不会出现在主体里的纯色':218 '打开结果或检查报告':153 '扩图或创造新素材':267 '按钮素材':117 '换成':215 '数据页':96 '文字或背景色残留':280 '明确素材用途':132 '更多提示词和':219 '权限说明':102 '栏目贴片':123 '核心判断':51 '棋盘格会变成图像内容':59 '棋盘格背景上都能读清':283 '汇报图表':94 '没有漂浮杂点':143 '没有阴影地面':142 '浅色':282 '海报叠加':121 '清理纯色背景':148 '清理脚本':223 '游戏':111 '漂浮符号':279 '片头片尾元素':129 '物体素材':75 '生图得到':54 '生图提示词要点':156 '生图能力生成带纯色背景的候选图':138 '用':146 '用来淡化生图抗锯齿留下的背景色毛边':259 '电商':105 '的图':56 '目视检查':140 '确认透明角落':154 '社媒封面':109 '社媒贴纸':106 '空状态插画':92 '素材在深色':281 '细节见':221 '网站设计素材':86 '网页素材':69 '背包图标':116 '背景边缘残留就调大':253 '脚本只做背景清理':264 '裁切透明边缘':149 '裁掉透明边缘并保留一点安全留白':263 '装饰':128 '要移除的纯色背景':249 '视频':79,120 '角色':74 '调用':136 '贴纸':70 '路演页':95 '输出':150 '输出必须是':269 '这些转给':80 '适合输出':66 '透明':67,124 '透明通道':273 '道具':115 '重新生图或换背景色':285 '重绘':266 '颜色容差':252 '验收标准':268","prices":[{"id":"edb69002-255a-4440-9131-f6219ed5d4fd","listingId":"9703fe53-de43-4e75-b837-d329b738e434","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"DwDestiny","category":"codex-visual-asset-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:22:11.995Z"}],"sources":[{"listingId":"9703fe53-de43-4e75-b837-d329b738e434","source":"github","sourceId":"DwDestiny/codex-visual-asset-skills/transparent-visual-assets","sourceUrl":"https://github.com/DwDestiny/codex-visual-asset-skills/tree/main/skills/transparent-visual-assets","isPrimary":false,"firstSeenAt":"2026-05-18T13:22:11.995Z","lastSeenAt":"2026-05-18T19:14:41.881Z"}],"details":{"listingId":"9703fe53-de43-4e75-b837-d329b738e434","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"DwDestiny","slug":"transparent-visual-assets","github":{"repo":"DwDestiny/codex-visual-asset-skills","stars":6,"topics":["agent-skills","codex","gif","hatch-pet","spritesheet","transparent-background"],"license":"mit","html_url":"https://github.com/DwDestiny/codex-visual-asset-skills","pushed_at":"2026-05-07T09:36:20Z","description":"Codex skills for transparent image assets and animation sprite sets","skill_md_sha":"e06aed0d30e786fd7f4e05d4058522f129682a4e","skill_md_path":"skills/transparent-visual-assets/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/DwDestiny/codex-visual-asset-skills/tree/main/skills/transparent-visual-assets"},"layout":"multi","source":"github","category":"codex-visual-asset-skills","frontmatter":{"name":"transparent-visual-assets","description":"Generate transparent-background raster assets with Codex image generation plus deterministic cleanup. Use when the user wants a PNG sticker, icon, mascot, sprite, UI asset, or web-ready visual element with transparent background, or asks to remove/avoid a generated image background while preserving the subject."},"skills_sh_url":"https://skills.sh/DwDestiny/codex-visual-asset-skills/transparent-visual-assets"},"updatedAt":"2026-05-18T19:14:41.881Z"}}