claude-pxl Skill: Pixel Art Animation as Code for Claude (and What the Parallax Specimen Shows)

The claude-pxl skill turns pixel art and animation into code. Claude writes a short .px.js script, and a small Node tool builds it into PNGs, sprite sheets, GIFs and a live preview. A recent r/aigamedev post from u/ascvlh brought it some attention by showing parallax pixel art made with the skill. This piece explains what the tool does according to its own documentation, why writing art as code suits a language model, and what the docs leave out.

What is this specimen?

The post is titled "Opus 5.5 pixel art with claude pxl" and was shared by u/ascvlh on r/aigamedev. The research for this article couldn't open the post itself. So beyond the title and topic, nothing here describes its prompts, its layers or how the parallax effect was put together. To see the demo, follow the link and give the poster credit for it.

One note on the model name. "Opus 5.5" is the poster's label. This article doesn't confirm or dispute which Claude version made the art.

The tool behind the demo is claude-pxl by GitHub user crsolver. When the repo page was fetched, it showed an MIT license, about 402 stars, 46 forks and two commits.

What is claude-pxl? Pixel art as code

The README calls the project "pixel art as code". You write a compact .px.js file and get back:

• PNG images
• Sprite sheets with TexturePacker-style JSON
• Animated GIFs
• A live browser viewer that replays the painting step by step each time you save

The README and SKILL.md say it needs Node 22.18 or newer. It has no runtime dependencies and no build step.

The repo is also an agent skill. SKILL.md names it pxl-pixel-art, and its description tells the agent to use it when someone asks it to draw, design or revise pixel art or game assets.

The README lists four main commands:

Why a DSL instead of raw pixels?

SKILL.md presents the domain-specific language as a way to avoid drawing the same pixels twice. It offers:

• Mirroring with mx
• Automatic outlines
• Palette-swap variants built from a base plus a swap
• Reusable _parts placed with stamp
• Drawing primitives, scatter brushes and tilemaps

This matters for a language model. Asking an LLM to output a raw bitmap means it has to get thousands of separate pixel values right, with no structure to lean on. A script that says "mirror this half, outline it, swap these palette entries" stays short. You can read it and diff it, and a small edit makes a small change. The art lives as text in version control, so a fix is one changed line, not a repainted image.

How does the agent loop work?

SKILL.md lays out a tight write-and-check cycle for the agent:

1. Write the art in art.px.js.
2. Build only the asset you're working on with the --only flag.
3. Look at out/_preview/<name>.png, an upscaled preview with a checkerboard behind transparent areas and a pixel grid on top.
4. Fix problems with small edits instead of rewriting the file.
5. Rebuild and check again.

You can also run pxl serve so you watch the drawing appear in a browser while the agent works.

For exact pixel fixes, SKILL.md suggests pxl ascii, because reading a text grid costs less than reading an image. Errors give the file:line:col and the asset/layer/op path, along with "did you mean" hints. One broken asset doesn't stop the others from building.

The skill's art direction rules

SKILL.md also has a "habits" section that shapes how Claude's output looks:

• Use 2 to 4 shades per material.
• Don't fill walls with random noise.
• Every mark on a surface should have a cause you could name, such as siding lines, rain stains or rust runs.
• Use mirroring and auto-outline instead of drawing those by hand.

These rules guard against common problems in machine-made pixel art: muddy gradients, noise used as texture, and outlines drawn inconsistently.

Why the skill design fits Claude

Anthropic's Agent Skills overview describes skills as folders of instructions, code and reference material that load in stages, which it calls progressive disclosure. Only the name and description stay in context all the time. The SKILL.md body loads when the skill triggers, and other files load only when needed.

claude-pxl follows that pattern. According to the README, the full API sits in reference.md. A separate lighting.md is read only when a scene needs lights. A simple sprite request shouldn't pull the whole lighting system into context.

Animation and layers: what parallax would be built from

The README describes scenes built from scene() and layer(), with cast-shadow layers, light layers and PNG export per layer.

reference.md covers animation through anim(). It takes an fps setting, and frames can be written as patches over a base image. Loops can also be procedural, using c.phase with sin so they wrap without a visible seam. If you stamp an animation into a scene, the whole scene animates. The scene loop runs for the least common multiple of the durations it contains, capped at 60 seconds. So keep durations on a shared grid, for example multiples of 100 ms, or the combined loop gets long.

SKILL.md also documents glow(), ramps, and shade and light helpers. The README gallery includes animated scenes such as a cave and a witch's cottage at night. See them in the repo and not copied here.

The parallax gap

reference.md, as fetched, never mentions "parallax". It's not a documented feature.

A plausible route from the documented pieces looks like this:

1. Build a scene with separate background, midground and foreground layers.
2. Export each layer as its own PNG.
3. Set the scroll speeds in your engine: Godot's parallax nodes, a short Unity script, or a browser canvas loop that offsets each layer by a different amount.

Nobody knows whether u/ascvlh worked this way. It is a reading of the docs, not a description of the post.

There's a second thing to check. Horizontal scrolling needs layers that tile cleanly from one edge to the other. The docs talk about wrapping in terms of animation phase, not horizontal tiling. If you need an endless strip, ask the agent for edges that match and test the seam in your engine. If AI-made pixel art comes out off-grid, see Fix AI-Generated Pixel Art Grids with Pixel Snapper. That guide covers image-model output, though. claude-pxl output should already sit on an exact grid.

How do you set up claude-pxl in Claude Code and other agents?

The README gives two install locations for Claude Code:

• ~/.claude/skills/pxl-pixel-art to use it in every project
• .claude/skills/pxl-pixel-art to use it in one project

After that, you ask Claude to draw something.

# All projects
git clone https://github.com/crsolver/claude-pxl ~/.claude/skills/pxl-pixel-art

# Run without cloning (per the README)
npx github:crsolver/claude-pxl build art.px.js

# README quick start, from inside the repo
node bin/pxl.js serve examples/shop.px.js

The README says other agents, such as Codex or Cursor, can use the skill if you point them at SKILL.md and give them the path to the CLI. It also suggests asking the agent to start pxl serve so you can watch it paint.

A request might look like this:

Using the pxl-pixel-art skill, draw a 3-layer night forest scene
(sky, distant trees, near foliage) as separate layers with per-layer
PNG export. Keep loop durations at multiples of 100 ms. Start pxl serve
so I can watch.

For more on making a project easy for an agent to read, see How to set up Claude Code for game development. For a broader set of skills, see the Awesome Gamedev Agent Skills pack.

Plain verdict: who does it suit, and what are the limits?

It suits solo developers who already use Claude Code or another coding agent and want consistent, palette-limited sprites, scenes and simple animation loops. Because everything is editable text in version control, you can review, diff and revert art the same way you handle code.

The limits, from the sources:

• It needs Node 22.18 or newer.
• Results depend on how well the model draws through code and how well it uses the preview loop. A good DSL doesn't make the model a good artist.
• The repo had two commits and one open issue when fetched. It's young.
• The README doesn't claim parallax support.
• There are no published benchmarks or cost figures. SKILL.md says it's built to save tokens but gives no numbers, so real token use is unknown.

Compared with image-generation sprite tools: a code-based approach gives exact pixel grids, fixed palettes and sprite sheet JSON with no cleanup pass. It isn't built for painterly or photo-referenced art, and detail depends on what the model can describe in code. For a different workflow that leans on image models, see AI Pixel Art Side-Scroller Game Workflows. More tools are on the sprites tag page.