# codex-visual-asset-skills **Repository Path**: zz618/codex-visual-asset-skills ## Basic Information - **Project Name**: codex-visual-asset-skills - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-06-08 - **Last Updated**: 2026-06-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Codex Visual Asset Skills

中文 · English

给 Codex 用的视觉素材生产线。
从纯色底 AI 生图，到透明 PNG、连续帧、GIF 预览和 spritesheet atlas。

## 中文这个仓库只保留两类视觉素材 skill： - `transparent-visual-assets`：用 Codex 生图生成纯色背景素材，再清理成透明 PNG。 - `sprite-animation-assets`：规划连续帧，把透明帧组合成 GIF 预览和 spritesheet/atlas。 PPT 已拆成独立仓库，不再放在这里： - [codex-visual-ppt-deck-builder](https://github.com/DwDestiny/codex-visual-ppt-deck-builder) 一句话：做透明素材和动画素材，用这个仓库；做可编辑视觉 PPTX，用 PPT 仓库。 ### 安装安装全部素材 skill 到 Codex 全局目录： ```bash npx skills add DwDestiny/codex-visual-asset-skills --skill '*' -g -a codex -y ``` 只安装其中一个： ```bash 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： ```bash npx skills add DwDestiny/codex-visual-asset-skills --list ``` ### 快速使用 ```text Use $transparent-visual-assets to create a transparent PNG cartoon character asset for my website. ``` ```text Use $sprite-animation-assets to turn this character into a waving GIF and transparent spritesheet. ``` ### 使用场景只要素材需要叠到网页、PPT、App、海报、视频或游戏界面上，透明背景就很有用。下面这些案例都来自同一套流程：先用 Codex 生图生成纯色底源图，再清成透明 PNG。 | 场景 | 适合做什么 | 示例 | | --- | --- | --- | | 网站设计素材 | Landing page、产品官网、博客插画、功能区装饰、空状态插画 | ![website design asset](demos/use-cases/website-design.png) | | PPT / 汇报图表 | 路演页、数据页、业务复盘、图表旁的视觉解释元素 | ![presentation chart asset](demos/use-cases/presentation-chart.png) | | App / 产品引导 | Onboarding、权限说明、功能引导、发布说明里的产品插画 | ![product onboarding asset](demos/use-cases/product-onboarding.png) | | 电商 / 社媒贴纸 | 商品页角标、促销贴纸、社媒封面、小红书/公众号配图元素 | ![ecommerce stickers asset](demos/use-cases/ecommerce-stickers.png) | | 游戏 / 互动 UI | 小角色、道具、背包图标、按钮素材、轻动画帧素材 | ![game UI assets](demos/use-cases/game-ui-assets.png) | ### Demo 效果透明素材处理：这几张不是脚本画的占位图，而是先用 Codex 生图模型生成纯色背景源图，再清成透明 PNG。 | Polished Anime | Watercolor | Cyberpunk | | --- | --- | --- | | ![polished anime character](demos/transparent-assets/polished-teal.png) | ![watercolor tablet character](demos/transparent-assets/watercolor-tablet.png) | ![cyberpunk avatar character](demos/transparent-assets/cyberpunk-avatar.png) | 连续动画素材：先用 Codex 生图模型生成同一角色的动作条，再拆帧、去背景、剔除破坏尾段连续性的源帧，检查同一只手的动作连续性，最后组合成 GIF 和 atlas。 | GIF Preview | Transparent Atlas | | --- | --- | | ![greeting wave gif](demos/sprite-animation-assets/qa/greeting_wave.gif) | ![greeting wave atlas](demos/sprite-animation-assets/greeting-wave-atlas.png) | 逐帧 QA： ![greeting wave contact sheet](demos/sprite-animation-assets/qa/greeting-wave-contact-sheet.png) ### 两个 skill 分别解决什么 `transparent-visual-assets` 会指导 Codex： 1. 先生成可抠背景的纯色底素材。 2. 避免棋盘格、阴影、地面、文字、光晕和漂浮杂点。 3. 调用脚本移除纯色背景，输出透明 PNG 和报告。核心脚本： ```bash python ~/.codex/skills/transparent-visual-assets/scripts/prepare_transparent_asset.py --help ``` `sprite-animation-assets` 会指导 Codex： 1. 先定义状态、帧数、cell 尺寸和循环节奏。 2. 保持同一个角色或物体在每一帧里的身份一致。 3. 调用脚本组合 spritesheet/atlas，并导出 GIF 预览。核心脚本： ```bash python ~/.codex/skills/sprite-animation-assets/scripts/compose_sprite_set.py --help ``` ### 仓库结构 ```text skills/ 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`。如果你只需要可复用素材： - 单张透明 PNG：用 `transparent-visual-assets` - 连续帧 / GIF / spritesheet：用 `sprite-animation-assets` - 可编辑视觉 PPTX：用 [codex-visual-ppt-deck-builder](https://github.com/DwDestiny/codex-visual-ppt-deck-builder)

返回顶部 · English

--- ## English 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: - [codex-visual-ppt-deck-builder](https://github.com/DwDestiny/codex-visual-ppt-deck-builder) In short: use this repository for transparent assets and animation assets; use the PPT repository for editable visual PPTX decks. ### Install Install both asset skills globally for Codex: ```bash npx skills add DwDestiny/codex-visual-asset-skills --skill '*' -g -a codex -y ``` Install only one: ```bash 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 ``` List available skills before installing: ```bash npx skills add DwDestiny/codex-visual-asset-skills --list ``` ### Quick Start ```text Use $transparent-visual-assets to create a transparent PNG cartoon character asset for my website. ``` ```text Use $sprite-animation-assets to turn this character into a waving GIF and transparent spritesheet. ``` ### Use Cases 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](demos/use-cases/website-design.png) | | Slides and report charts | Pitch decks, analytics pages, business reviews, visual chart explainers | ![presentation chart asset](demos/use-cases/presentation-chart.png) | | App onboarding | Onboarding, permission prompts, feature walkthroughs, release notes | ![product onboarding asset](demos/use-cases/product-onboarding.png) | | Ecommerce and social stickers | Product badges, campaign stickers, covers, post decorations | ![ecommerce stickers asset](demos/use-cases/ecommerce-stickers.png) | | Game and interactive UI | Characters, items, inventory icons, buttons, lightweight animation frames | ![game UI assets](demos/use-cases/game-ui-assets.png) | ### Demo 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](demos/transparent-assets/polished-teal.png) | ![watercolor tablet character](demos/transparent-assets/watercolor-tablet.png) | ![cyberpunk avatar character](demos/transparent-assets/cyberpunk-avatar.png) | 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](demos/sprite-animation-assets/qa/greeting_wave.gif) | ![greeting wave atlas](demos/sprite-animation-assets/greeting-wave-atlas.png) | Frame QA: ![greeting wave contact sheet](demos/sprite-animation-assets/qa/greeting-wave-contact-sheet.png) ### What Each Skill Does `transparent-visual-assets` helps Codex: 1. Generate an image against a removable flat-color background. 2. Avoid checkerboards, shadows, floors, text, glow, and floating artifacts. 3. Run a cleanup script that outputs a transparent PNG and report. Core script: ```bash python ~/.codex/skills/transparent-visual-assets/scripts/prepare_transparent_asset.py --help ``` `sprite-animation-assets` helps Codex: 1. Define states, frame count, cell size, and loop timing. 2. Keep the same character or object identity across every frame. 3. Package frames into a spritesheet/atlas and GIF preview. Core script: ```bash python ~/.codex/skills/sprite-animation-assets/scripts/compose_sprite_set.py --help ``` ### Repository Layout ```text skills/ 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 ``` ### Scope This 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: - Single transparent PNG: use `transparent-visual-assets` - Animation frames / GIF / spritesheet: use `sprite-animation-assets` - Editable visual PPTX decks: use [codex-visual-ppt-deck-builder](https://github.com/DwDestiny/codex-visual-ppt-deck-builder)

## License MIT