Codex skills for transparent image assets and animation sprite sets
SaferSkills independently audited codex-visual-asset-skills (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
<p align="center"> <a href="#中文">中文</a> · <a href="#english">English</a> </p>
<p align="center"> <a href="https://github.com/DwDestiny/codex-visual-asset-skills/blob/main/LICENSE"><img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-green.svg"></a> <img alt="Codex skills" src="https://img.shields.io/badge/Codex-skills-black.svg"> <img alt="Transparent PNG" src="https://img.shields.io/badge/Assets-transparent%20PNG-blue.svg"> <img alt="Sprite atlas" src="https://img.shields.io/badge/Animation-GIF%20%2B%20atlas-purple.svg"> </p>
<p align="center"> <strong>给 Codex 用的视觉素材生产线。</strong><br> 从纯色底 AI 生图，到透明 PNG、连续帧、GIF 预览和 spritesheet atlas。 </p>
<a id="中文"></a>
这个仓库只保留两类视觉素材 skill：
transparent-visual-assets：用 Codex 生图生成纯色背景素材，再清理成透明 PNG。sprite-animation-assets：规划连续帧，把透明帧组合成 GIF 预览和 spritesheet/atlas。PPT 已拆成独立仓库，不再放在这里：
一句话：做透明素材和动画素材，用这个仓库；做可编辑视觉 PPTX，用 PPT 仓库。
安装全部素材 skill 到 Codex 全局目录：
npx skills add DwDestiny/codex-visual-asset-skills --skill '*' -g -a codex -y只安装其中一个：
npx skills add DwDestiny/codex-visual-asset-skills --skill transparent-visual-assets -g -a codex -y
npx skills add DwDestiny/codex-visual-asset-skills --skill sprite-animation-assets -g -a codex -y先查看仓库里有哪些 skill：
npx skills add DwDestiny/codex-visual-asset-skills --listUse $transparent-visual-assets to create a transparent PNG cartoon character asset for my website.Use $sprite-animation-assets to turn this character into a waving GIF and transparent spritesheet.只要素材需要叠到网页、PPT、App、海报、视频或游戏界面上，透明背景就很有用。下面这些案例都来自同一套流程：先用 Codex 生图生成纯色底源图，再清成透明 PNG。
| 场景 | 适合做什么 | 示例 |
|---|---|---|
| 网站设计素材 | Landing page、产品官网、博客插画、功能区装饰、空状态插画 | website design asset |
| PPT / 汇报图表 | 路演页、数据页、业务复盘、图表旁的视觉解释元素 | presentation chart asset |
| App / 产品引导 | Onboarding、权限说明、功能引导、发布说明里的产品插画 | product onboarding asset |
| 电商 / 社媒贴纸 | 商品页角标、促销贴纸、社媒封面、小红书/公众号配图元素 | ecommerce stickers asset |
| 游戏 / 互动 UI | 小角色、道具、背包图标、按钮素材、轻动画帧素材 | game UI assets |
透明素材处理：这几张不是脚本画的占位图，而是先用 Codex 生图模型生成纯色背景源图，再清成透明 PNG。
| Polished Anime | Watercolor | Cyberpunk |
|---|---|---|
| polished anime character | watercolor tablet character | cyberpunk avatar character |
连续动画素材：先用 Codex 生图模型生成同一角色的动作条，再拆帧、去背景、剔除破坏尾段连续性的源帧，检查同一只手的动作连续性，最后组合成 GIF 和 atlas。
| GIF Preview | Transparent Atlas |
|---|---|
| greeting wave gif | greeting wave atlas |
逐帧 QA：
greeting wave contact sheet
transparent-visual-assets 会指导 Codex：
核心脚本：
python ~/.codex/skills/transparent-visual-assets/scripts/prepare_transparent_asset.py --helpsprite-animation-assets 会指导 Codex：
核心脚本：
python ~/.codex/skills/sprite-animation-assets/scripts/compose_sprite_set.py --helpskills/
transparent-visual-assets/
SKILL.md
scripts/prepare_transparent_asset.py
references/prompt-and-cleanup.md
sprite-animation-assets/
SKILL.md
scripts/compose_sprite_set.py
references/sprite-atlas-layouts.md
demos/
source-model/
transparent-assets/
use-cases/
sprite-animation-assets/
preview/
process_model_demo_assets.py
tests/
test_asset_scripts.py
test_effect_artifacts.py这个仓库不替代官方 hatch-pet。如果你要的是完整 Codex 自定义宠物包，包括 pet.json、完整 8x9 atlas、QA contact sheet、预览视频和 app-ready packaging，继续用 hatch-pet。
如果你只需要可复用素材：
transparent-visual-assetssprite-animation-assets<p align="right"><a href="#codex-visual-asset-skills">返回顶部</a> · <a href="#english">English</a></p>
<a id="english"></a>
This repository now contains two focused visual asset skills for Codex:
transparent-visual-assets — generate a flat-background image with Codex, then clean it into a transparent PNG.sprite-animation-assets — plan continuous frames and package transparent frames into GIF previews and spritesheet atlases.The PPT skill has moved to its own repository:
In short: use this repository for transparent assets and animation assets; use the PPT repository for editable visual PPTX decks.
Install both asset skills globally for Codex:
npx skills add DwDestiny/codex-visual-asset-skills --skill '*' -g -a codex -yInstall only one:
npx skills add DwDestiny/codex-visual-asset-skills --skill transparent-visual-assets -g -a codex -y
npx skills add DwDestiny/codex-visual-asset-skills --skill sprite-animation-assets -g -a codex -yList available skills before installing:
npx skills add DwDestiny/codex-visual-asset-skills --listUse $transparent-visual-assets to create a transparent PNG cartoon character asset for my website.Use $sprite-animation-assets to turn this character into a waving GIF and transparent spritesheet.Transparent assets are useful anywhere a visual needs to be layered over a website, slide deck, app screen, poster, video, or game UI. The examples below use the same workflow: generate a flat-background source image with Codex, then clean it into a transparent PNG.
| Use case | What it is good for | Example |
|---|---|---|
| Website design assets | Landing pages, product sites, blog illustrations, empty states | website design asset |
| Slides and report charts | Pitch decks, analytics pages, business reviews, visual chart explainers | presentation chart asset |
| App onboarding | Onboarding, permission prompts, feature walkthroughs, release notes | product onboarding asset |
| Ecommerce and social stickers | Product badges, campaign stickers, covers, post decorations | ecommerce stickers asset |
| Game and interactive UI | Characters, items, inventory icons, buttons, lightweight animation frames | game UI assets |
Transparent asset cleanup: these are not SVG placeholders. They start as Codex-generated flat-background raster images and are cleaned into transparent PNGs.
| Polished Anime | Watercolor | Cyberpunk |
|---|---|---|
| polished anime character | watercolor tablet character | cyberpunk avatar character |
Sprite animation assets: generate a consistent character action strip, remove backgrounds, reject frames that break continuity, then package the result into a GIF preview and atlas.
| GIF Preview | Transparent Atlas |
|---|---|
| greeting wave gif | greeting wave atlas |
Frame QA:
greeting wave contact sheet
transparent-visual-assets helps Codex:
Core script:
python ~/.codex/skills/transparent-visual-assets/scripts/prepare_transparent_asset.py --helpsprite-animation-assets helps Codex:
Core script:
python ~/.codex/skills/sprite-animation-assets/scripts/compose_sprite_set.py --helpskills/
transparent-visual-assets/
SKILL.md
scripts/prepare_transparent_asset.py
references/prompt-and-cleanup.md
sprite-animation-assets/
SKILL.md
scripts/compose_sprite_set.py
references/sprite-atlas-layouts.md
demos/
source-model/
transparent-assets/
use-cases/
sprite-animation-assets/
preview/
process_model_demo_assets.py
tests/
test_asset_scripts.py
test_effect_artifacts.pyThis repository does not replace OpenAI's official hatch-pet skill. If you need a complete Codex custom pet package, keep using hatch-pet.
For focused reusable outputs:
transparent-visual-assetssprite-animation-assets<p align="right"><a href="#codex-visual-asset-skills">Back to top</a> · <a href="#中文">中文</a></p>
MIT
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.