dwdestiny/codex-visual-asset-skills
Developer toolsThis page was translated automatically. Technical details may differ from the original. View the original
Codex skills for transparent image assets and animation sprite sets
Overview
A visual material production line for Codex. From solid color background AI images to transparent PNG, continuous frames, GIF previews, and spritesheet atlas. - transparent-visual-assets: Use Codex to generate a solid background material, then clean it into a transparent PNG. - sprite-animation-assets: Plan continuous frames and combine transparent frames into GIF previews and spritesheet/atlas. In short: use this repository to create transparent and animation materials; to create editable visual PPTX, use the PPT repository. As long as the material needs to be layered onto a webpage, PPT, app, poster, video, or game interface, a transparent background is very useful. The following examples all come from the same process: first use Codex to generate a solid background image, then clear it into a transparent PNG. Transparent material processing: These images are not placeholders drawn by scripts; instead, the Codex image generation model is first used to generate a solid background source image, then cleared into a transparent PNG. Continuous animation materials: First, use the Codex image model to generate action bars for the same character, then split frames, remove backgrounds, remove source frames that disrupt continuity at the end, check the continuity of movements of the same hand, and finally combine them into GIFs and atlases. 1. Create solid background materials with backgrounds that can be removed. 2. Avoid checkerboards, shadows, grounds, text, halos, and floating noise. 3. Use scripts to remove solid backgrounds and output transparent PNGs and reports. 1. First, define the state, frame count, cell size, and loop rhythm. 2. Keep the identity of the same character or object consistent in each frame. 3. Call the script to combine spritesheet/atlas and export the GIF preview.
Overview (machine translated)
Chinese · English
A visual material production line for Codex.
From solid color background AI images to transparent PNG, continuous frames, GIF previews, and spritesheet atlas.
Chinese
This warehouse only keeps two types of visual assets: skill:
transparent-visual-assets: Use Codex to generate a solid background material, then clean it up to a transparent PNG.sprite-animation-assets: Plans continuous frames to combine transparent frames into GIF previews and spritesheet/atlas.
The PPT has been split into a separate repository and will no longer be placed here:
- codex-visual-ppt-deck-builder
In short: use this repository to create transparent and animation materials; to create editable visual PPTX, use the PPT repository.
Installation
Install all materials to the Codex global directory:
Only install one of them:
First, check what skills are available in the warehouse:
Quick to use
Use Cases
As long as the material needs to be layered onto a webpage, PPT, app, poster, video, or game interface, a transparent background is very useful. The following examples all come from the same process: first use Codex to generate a solid background image, then clear it into a transparent PNG.
| Scenario | What is suitable for | Example | | — | — | — | | Website design materials | Landing page, official product website, blog illustrations, functional area decorations, empty state illustrations | | | PPT / Report Chart | Roadshow pages, data pages, business reviews, visual interpretive elements next to charts | | | App / Product Guidance | Onboarding, permission descriptions, feature guidance, product illustrations in release notes | | | E-commerce / Social Media Stickers | Product page corner labels, promotional stickers, social media covers, Xiaohongshu/WeChat public account image elements | | | Game / Interactive UI | Character images, items, backpack icons, button materials, light animation frame materials | |
Demo Effect
Transparent material processing: These images are not placeholders drawn by scripts; instead, the Codex image generation model is first used to generate a solid background source image, then cleared into a transparent PNG.
| Polished Anime | Watercolor | Cyberpunk |
|---|---|---|
Continuous animation materials: First, use the Codex image model to generate action bars for the same character, then split frames, remove backgrounds, remove source frames that disrupt continuity at the end, check the continuity of movements of the same hand, and finally combine them into GIFs and atlases.
| GIF Preview | Transparent Atlas |
|---|---|
Frame-by-frame QA:
What do the two skills address?
transparent-visual-assets will guide Codex:
- Mr. Cheng can use solid background materials to cut out backgrounds.
This page was translated automatically. Technical details may differ from the original.
Recommended Tools
Try a different keyword or remove a filter.
Install
npx skillfish add dwdestiny/codex-visual-asset-skills