Codixel
/codixel
A pixel-art skill built on one idea: the agent writes code, it is not a painter. It asks for a reference image, then removes the background, pixelates, rigs with bones and animates it in code with a 2,000-line toolkit (core/pixel.js), showing every step on a sheet before making game files.
- 许可证
- MIT
- 出品
- GameSkill 出品
我们测过
在 Codixel core/pixel.js on Node 22 上通过 31/31 项检查（2026-11-03）：能触发、有可运行示例、有截图和自检清单、单一职责、中英文文档齐全。触发检查是把提示词和 skill 描述做匹配，不是真实 agent 运行。
测试报告这个 skill 做什么
什么时候触发
Changes how pixel art is made with AI. Instead of drawing from imagination, ask the user for a reference image, pixelate it, rig it, animate it, and check every step with the user. …
GameSkill 测过的版本
GameSkill 调优版：skill 文件取自提交 604a9dcbcc4e，按我们的 skill 流程加上可运行示例、测试报告、自检清单和中文指南。
协议：基于 mankidev/codixel（作者 mankidev），协议 MIT。ZIP 保留协议文件（LICENSE），CHANGES.md 列出了 GameSkill 加的所有文件。
自检清单
- 复杂角色先要参考图，不凭空画；参考图要有使用授权 / Ask for a reference for complex subjects, and check you may use it
- 先给预览（GIF 和逐帧图），用户点头后才出 sprite sheet / Preview first (GIF and frame sheet); sprite sheet only after approval
- 关节位置用 P.ruler 读出来，绑骨后先看 ownerMap 再做动画 / Read joints off P.ruler; check ownerMap before animating
- 色数受控，抖动只出现在两种颜色交界处 / Colour count stays small; dither only where two colours meet
- 循环动画首尾帧接得上，所有帧尺寸一致 / Loops wrap cleanly and every frame has the same size
- 多张图拼成的角色，后续帧沿用第一帧的调色板 / Frames built from several images reuse the first frame's palette
中文指南
这个 skill 做什么
Codixel 的核心观点是「agent 不是画师，它只会写代码」。所以遇到角色、生物这类复杂对象，它不凭空画，而是先要一张参考图，再用自带的 core/pixel.js（约 2,000 行、零依赖）一步步做：去背景、像素化（缩放、减色、只在交界处抖动、清理杂点、修轮廓）、加骨骼、用缓动做动画、打包成 sprite sheet。每一步都拼成一张对比图给用户看，用户确认后才进入下一步。它还带了火焰、烟、光束和天空、岩石、树、水等代码绘制工具。
什么时候用
- 有一张角色或生物的参考图，想做成像素 sprite 并让它动起来
- agent 凭空画的像素角色很丑，想换成「从参考图出发」的做法
- 用代码画像素道具和场景，要求光照统一、色阶有色相偏移
怎么装
下载本页的 ZIP，把 codixel/ 整个文件夹放进 agent 的 skills 文件夹：Claude Code 用 .claude/skills/，Codex、Gemini CLI、OpenCode 用 .agents/skills/，Cursor 用 .cursor/skills/，Copilot 用 .github/skills/，Windsurf 用 .windsurf/skills/，然后重启 agent。也可以直接对 agent 说：Install the skill from https://gameskill.dev/skills/codixel/install.md
最小示例
gameskill/examples/ 用一张我们自己画的参考图（一只原创的「灯蛾」小生物，平滑渐变、纯色背景），按 SKILL.md 第 2 节走完：去背景；因为成品不到 64 像素，按 skill 的规定先在 192 像素宽的干净大图上给身体和两片翅膀绑骨，做 8 帧扇翅循环；再把每一帧像素化到 48 像素宽，所有帧共用第一帧的调色板；最后拼出步骤图和逐帧图，导出 GIF 和 sprite sheet。
我们怎么测的
在 Node 22 里直接调用 skill 自带的 core/pixel.js：检查背景去干净、色数不超过设定、轮廓没有单像素凸起和小洞、每个像素都分到了骨骼、8 帧尺寸一致、循环首尾帧相同、sprite sheet 的行列和帧数正确。结果在 gameskill/test-report.json。
关于 8 方向角色
常有人问的「一张角色图出 8 方向」需要图像模型补出没画的方向（AutoSprite 等商业工具）。Codixel 只负责「有参考图之后」的部分：每个方向给一张参考图，后续帧沿用第一帧的调色板，就能做出风格一致的多方向 sprite。
搭配
pixelfx：现成的像素特效godot-animation：把 sprite sheet 放进 Godot 播放sprite-gen：用图像模型批量出 sprite 再整理
安装
告诉你的 AI
Install the skill from https://gameskill.dev/skills/codixel/install.md
GameSkill 测过的版本
mkdir -p .claude/skills
curl -fsSL https://gameskill.dev/dl/skills/codixel.zip -o /tmp/gameskill-codixel.zip
unzip -oq /tmp/gameskill-codixel.zip -d .claude/skills
rm /tmp/gameskill-codixel.zip包含内容
- core/pixel.js: background removal, resize, quantize with edge dither, cleanup, silhouette smoothing, selective outline and rim light
- Bones: P.Rig with owner maps and a ruler to read joints, P.bend for spines and tails
- Showing work: labelled sheets, numbered frame grids, GIFs and P.pack sprite sheets
- Coded effects (flame, smoke, breath, beams) and scene helpers (sky, rock, trees, water) with seamless loops
- A step-by-step method: reference first, preview before game files, one change at a time
适合
- Turning a reference picture into a game sprite and animating it
- Characters and creatures that look bad when an agent draws them from imagination
- Pixel props and scenes drawn in code with consistent light and hue-shifted ramps
不适合
- Ready-made pixel effects libraries: see pixelfx
- Copying someone else's artwork: the skill asks about permission first
关于这个 Skill
Codixel starts from an honest premise: an agent writes code, so pixel art it draws from imagination looks bad, and pixel art it makes from a real reference looks good. For complex subjects the skill asks for a reference image first, then works through background removal, pixelation, bones, animation and a packed sprite sheet with core/pixel.js, a 2,000-line toolkit with no dependencies. Every step is shown on one labelled sheet and confirmed before the next.
It also carries hard-won rules from the author's own corrections: hue-shifted ramps, flat bands with dither only where two colours meet, pixel-perfect lines, one light direction, and coded effects (flame, smoke, breath, beams) built from a shape plus moving noise rather than per-pixel simulation.
Our example takes an original painted reference of a small lantern moth, rigs the body and both wings on the clean full-size image (as the skill says for sprites under 64 px), animates an eight-frame wing beat, then turns every frame into 48-pixel art with the first frame's palette, all checked by script.
Related
- pixelfx for ready-made pixel effects.
- pixelwright to turn AI renders into true pixel art with gates.
环境要求
- Node.js 18 or newer (core/pixel.js has no dependencies)
- A reference image you are allowed to use (your own, CC0, CC BY or licensed)
相关主题
常见问题
基于 mankidev/codixel （作者 mankidev，协议 MIT）。ZIP 里保留原作者的 LICENSE 和 NOTICE，ATTRIBUTION.md 和 CHANGES.md 写明来源提交和 GameSkill 加的内容。
搭配使用
作者标注的相关 Skills，或更适合相邻任务的 Skills。
pixelfx
244 pixel-art effects written as code (fire, explosions, magic, weather, UI, pickups, critters) plus a draft, render, look, refine loop for making new ones; every effect exports a sprite sheet with Aseprite-style JSON for Godot, Unity, Phaser or any engine.
pixelwright
Three agent skills and a numpy + Pillow CLI that turn AI renders into true pixel art (grid snap, palette lock, cleanup, tiles) and animate stills in code inside masks, with gates that prove every result.
pxl: Pixel Art as Code
An Agent Skill and zero-dependency CLI: the agent writes a compact .px.js file and gets PNGs, sprite sheets with JSON, animated GIFs and a live viewer.
sprite-gen
Generate clean 2D game sprites and animation atlases: state rows, alpha cleanup, frame extraction, runtime atlases.
相似 skills
open-game-skills
An MIT pack of about 190 SKILL.md agent skills for game design: combat feel, camera, traversal, world, validation, 2D/Spine and art pipeline, with a dispatcher and adapters for Three.js, PixiJS, Phaser, Cocos, Godot, Unity and Unreal.
Agent Sprite Forge
Five agent skills that turn one approved character still into a game-ready sprite set: one image-to-video clip per action, then deterministic Python tools key, register, loop, retime, palette-lock and export it for Godot, Aseprite and the web. Also maps, tiles and code-drawn art.
Construct
Describe a prop as data (parts in metres, joints, assembly order) and a deterministic engine builds it: an animated hologram page, and a glTF model with named parts, working joints and optional colliders for Godot, Unity, Unreal or Blender. Python standard library only.
Style Cards (one art style as hard limits, switch looks by switching cards)
A GameSkill original that writes a game's art style down as a card of measurable limits (canvas, colours and palette, alpha, triangles, shading, materials, textures, voxel grid), pastes it into every asset request and checks every asset against it. Ships 12 cards from pixel and one-bit to low-poly, voxel and toon, a no-dependency PNG checker, a Blender GLB checker and a palette locker; switch the whole look by switching the card.