transparent-visual-assets

Transparent Visual Assets

Core judgment

First have Codex generate an image that is "easy to cut out cleanly," then use a script for deterministic cleanup. Do not ask the model to directly draw a checkerboard transparent background; the checkerboard will become image content. Prefer having the model use a solid color background, such as #FF00FF or #00FF00, and clearly state that the subject must not use a color close to the background.

Suitable output: transparent PNG, web assets, stickers, icons, single-frame sprite, character/object assets.

Not suitable output: multi-frame animation, spritesheet, video; hand these off to $sprite-animation-assets。

Typical use cases

• Website design assets: Landing page, product official site, blog illustrations, section decorations, empty-state illustrations.
• PPT / presentation graphics: pitch deck pages, data pages, business reviews, visual explanation elements beside charts.
• App / product onboarding: onboarding, permission explanations, feature guides, product illustrations in release notes.
• E-commerce / social media stickers: product page badges, promo stickers, social media covers, WeChat official account image elements.
• Games / interactive UI: small characters, props, inventory icons, button assets, single-frame sprite.
• Video / poster overlays: cover characters, segment overlays, transparent logo-like decorations, opening and ending elements.

Workflow

1. Clarify the asset's purpose, size, subject boundaries, and prohibited elements.
2. Call Codex's image generation capability to generate candidate images with a solid color background.
3. Visual check: subject is complete, no shadow ground, no floating specks, subject color is not close to the background color.
4. Use scripts/prepare_transparent_asset.py to clean the solid color background, crop transparent edges, and output PNG.
5. Open the result or inspection report to confirm transparent corners and that the subject has not been mistakenly removed.

Key points for image generation prompts

Use short, strongly constrained prompts:

Create a single centered web asset of <subject>.
Use a perfectly flat #FF00FF background for later chroma key removal.
The subject must not contain magenta, pink, or colors close to #FF00FF.
No shadows, floor, scenery, text, labels, checkerboard pattern, glow, blur, or detached decorative particles.
Keep the full subject inside the canvas with clear spacing.

If the subject naturally contains pink or magenta, switch to #00FF00、#00FFFF or another solid color that will not appear in the subject.

For more prompts and QA details, see references/prompt-and-cleanup.md。

Cleanup script

python "${CODEX_HOME:-$HOME/.codex}/skills/transparent-visual-assets/scripts/prepare_transparent_asset.py" \
  --input /absolute/path/source.png \
  --output /absolute/path/asset.png \
  --background "#FF00FF" \
  --threshold 24 \
  --feather-threshold 48 \
  --trim \
  --padding 8 \
  --report /absolute/path/report.json

Parameter description:

• --background: the solid color background to remove; if not passed, it is estimated from the four corner colors.
• --threshold: color tolerance. If background edge remnants remain, increase it; if the subject is being eaten away, decrease it or regenerate the image with a different background color.
• --feather-threshold: optional edge softening tolerance, used to fade the background-colored fringing left by image generation anti-aliasing.
• --trim and --padding: crop transparent edges and retain a little safe padding.

The script only performs background cleanup; it will not paint in, redraw, outpainting, or create new assets.

Acceptance criteria

• The output must be .png, with an alpha transparency channel.
• The four corners should be transparent, and the subject edges should not have missing chunks.
• Outside the subject there should be no shadows, ground, glow, floating symbols, text, or background color remnants.
• The asset should be clearly readable on dark, light, and checkerboard backgrounds.
• If the subject is clearly damaged after cleanup, regenerate the image or change the background color; do not rely on the script to force a fix.