transparent-visual-assets

Name: transparent-visual-assets
Author: DwDestiny

56installs3forks

How to install transparent-visual-assets?

dwdestiny/codex-visual-asset-skills/transparent-visual-assets

$npx -y skills add DwDestiny/codex-visual-asset-skills --skill transparent-visual-assets

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# Transparent Visual Assets
2
3	## 核心判断
4
5	先让 Codex 生图得到“容易抠干净”的图，再用脚本做确定性清理。不要要求模型直接画棋盘格透明背景；棋盘格会变成图像内容。优先让模型使用纯色背景，例如 `#FF00FF` 或 `#00FF00`，并明确主体不能使用接近背景的颜色。
6
7	适合输出：透明 PNG、网页素材、贴纸、图标、单帧 sprite、角色/物体素材。
8
9	不适合输出：多帧动画、spritesheet、视频；这些转给 `$sprite-animation-assets`。
10
11	## 典型使用场景
12
13	- 网站设计素材：Landing page、产品官网、博客插画、功能区装饰、空状态插画。
14	- PPT / 汇报图表：路演页、数据页、业务复盘、图表旁的视觉解释元素。
15	- App / 产品引导：onboarding、权限说明、功能引导、发布说明里的产品插画。
16	- 电商 / 社媒贴纸：商品页角标、促销贴纸、社媒封面、公众号配图元素。
17	- 游戏 / 互动 UI：小角色、道具、背包图标、按钮素材、单帧 sprite。
18	- 视频 / 海报叠加：封面人物、栏目贴片、透明 logo-like 装饰、片头片尾元素。
19
20	## 工作流
21
22	1. 明确素材用途、尺寸、主体边界和禁用元素。
23	2. 调用 Codex 生图能力生成带纯色背景的候选图。
24	3. 目视检查：主体完整、没有阴影地面、没有漂浮杂点、主体颜色不接近背景色。
25	4. 用 `scripts/prepare_transparent_asset.py` 清理纯色背景、裁切透明边缘、输出 PNG。
26	5. 打开结果或检查报告，确认透明角落、主体不被误删。
27
28	## 生图提示词要点
29
30	使用简短、强约束的提示词：
31
32	```text
33	Create a single centered web asset of <subject>.
34	Use a perfectly flat #FF00FF background for later chroma key removal.
35	The subject must not contain magenta, pink, or colors close to #FF00FF.
36	No shadows, floor, scenery, text, labels, checkerboard pattern, glow, blur, or detached decorative particles.
37	Keep the full subject inside the canvas with clear spacing.
38	```
39
40	如果主体天然包含粉色或品红，换成 `#00FF00`、`#00FFFF` 或其他不会出现在主体里的纯色。
41
42	更多提示词和 QA 细节见 `references/prompt-and-cleanup.md`。
43
44	## 清理脚本
45
46	```bash
47	python "${CODEX_HOME:-$HOME/.codex}/skills/transparent-visual-assets/scripts/prepare_transparent_asset.py" \
48	--input /absolute/path/source.png \
49	--output /absolute/path/asset.png \
50	--background "#FF00FF" \
51	--threshold 24 \
52	--feather-threshold 48 \
53	--trim \
54	--padding 8 \
55	--report /absolute/path/report.json
56	```
57
58	参数说明：
59
60	- `--background`：要移除的纯色背景；不传时用四角颜色估算。
61	- `--threshold`：颜色容差。背景边缘残留就调大；主体被吃掉就调小或重生图换背景色。
62	- `--feather-threshold`：可选的边缘柔化容差，用来淡化生图抗锯齿留下的背景色毛边。
63	- `--trim` 和 `--padding`：裁掉透明边缘并保留一点安全留白。
64
65	脚本只做背景清理，不会补画、重绘、扩图或创造新素材。
66
67	## 验收标准
68
69	- 输出必须是 `.png`，并带 alpha 透明通道。
70	- 四角应透明，主体边缘不缺块。
71	- 主体外没有阴影、地面、光晕、漂浮符号、文字或背景色残留。
72	- 素材在深色、浅色、棋盘格背景上都能读清。
73	- 如果清理后主体明显破损，重新生图或换背景色，不要靠脚本硬修。

DwDestinyPublisher · 4 listings

Preview

DwDestiny/codex-visual-asset-skills

# Transparent Visual Assets

## 核心判断

先让 Codex 生图得到“容易抠干净”的图，再用脚本做确定性清理。不要要求模型直接画棋盘格透明背景；棋盘格会变成图像内容。优先让模型使用纯色背景，例如 `#FF00FF` 或 `#00FF00`，并明确主体不能使用接近背景的颜色。

适合输出：透明 PNG、网页素材、贴纸、图标、单帧 sprite、角色/物体素材。

RepoDwDestiny/codex-visual-asset-skills

LicenseMIT

TypeSkills

CategoryDesign

UpdatedMay 2026

Repo stars52

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type

transparent-visual-assets

56installs3forks

View on GitHub

How to install transparent-visual-assets?

dwdestiny/codex-visual-asset-skills/transparent-visual-assets

$npx -y skills add DwDestiny/codex-visual-asset-skills --skill transparent-visual-assets

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Transparent Visual Assets
2
3	## 核心判断
4
5	先让 Codex 生图得到“容易抠干净”的图，再用脚本做确定性清理。不要要求模型直接画棋盘格透明背景；棋盘格会变成图像内容。优先让模型使用纯色背景，例如 `#FF00FF` 或 `#00FF00`，并明确主体不能使用接近背景的颜色。
6
7	适合输出：透明 PNG、网页素材、贴纸、图标、单帧 sprite、角色/物体素材。
8
9	不适合输出：多帧动画、spritesheet、视频；这些转给 `$sprite-animation-assets`。
10
11	## 典型使用场景
12
13	- 网站设计素材：Landing page、产品官网、博客插画、功能区装饰、空状态插画。
14	- PPT / 汇报图表：路演页、数据页、业务复盘、图表旁的视觉解释元素。
15	- App / 产品引导：onboarding、权限说明、功能引导、发布说明里的产品插画。
16	- 电商 / 社媒贴纸：商品页角标、促销贴纸、社媒封面、公众号配图元素。
17	- 游戏 / 互动 UI：小角色、道具、背包图标、按钮素材、单帧 sprite。
18	- 视频 / 海报叠加：封面人物、栏目贴片、透明 logo-like 装饰、片头片尾元素。
19
20	## 工作流
21
22	1. 明确素材用途、尺寸、主体边界和禁用元素。
23	2. 调用 Codex 生图能力生成带纯色背景的候选图。
24	3. 目视检查：主体完整、没有阴影地面、没有漂浮杂点、主体颜色不接近背景色。
25	4. 用 `scripts/prepare_transparent_asset.py` 清理纯色背景、裁切透明边缘、输出 PNG。
26	5. 打开结果或检查报告，确认透明角落、主体不被误删。
27
28	## 生图提示词要点
29
30	使用简短、强约束的提示词：
31
32	```text
33	Create a single centered web asset of <subject>.
34	Use a perfectly flat #FF00FF background for later chroma key removal.
35	The subject must not contain magenta, pink, or colors close to #FF00FF.
36	No shadows, floor, scenery, text, labels, checkerboard pattern, glow, blur, or detached decorative particles.
37	Keep the full subject inside the canvas with clear spacing.
38	```
39
40	如果主体天然包含粉色或品红，换成 `#00FF00`、`#00FFFF` 或其他不会出现在主体里的纯色。
41
42	更多提示词和 QA 细节见 `references/prompt-and-cleanup.md`。
43
44	## 清理脚本
45
46	```bash
47	python "${CODEX_HOME:-$HOME/.codex}/skills/transparent-visual-assets/scripts/prepare_transparent_asset.py" \
48	--input /absolute/path/source.png \
49	--output /absolute/path/asset.png \
50	--background "#FF00FF" \
51	--threshold 24 \
52	--feather-threshold 48 \
53	--trim \
54	--padding 8 \
55	--report /absolute/path/report.json
56	```
57
58	参数说明：
59
60	- `--background`：要移除的纯色背景；不传时用四角颜色估算。
61	- `--threshold`：颜色容差。背景边缘残留就调大；主体被吃掉就调小或重生图换背景色。
62	- `--feather-threshold`：可选的边缘柔化容差，用来淡化生图抗锯齿留下的背景色毛边。
63	- `--trim` 和 `--padding`：裁掉透明边缘并保留一点安全留白。
64
65	脚本只做背景清理，不会补画、重绘、扩图或创造新素材。
66
67	## 验收标准
68
69	- 输出必须是 `.png`，并带 alpha 透明通道。
70	- 四角应透明，主体边缘不缺块。
71	- 主体外没有阴影、地面、光晕、漂浮符号、文字或背景色残留。
72	- 素材在深色、浅色、棋盘格背景上都能读清。
73	- 如果清理后主体明显破损，重新生图或换背景色，不要靠脚本硬修。