Generate animated 2D game sprites from plain English — powered by Claude Code.
Describe a character, get a game-ready sprite sheet.
/sprite-forge dragon flying left, breathing fire
→ animated SVG → baked frames → PNG sprite sheet with mirror + metadata. Ready to drop into Unity, Godot, Phaser, LÖVE, or whatever engine you're using.
Every sprite below was generated from a single text description. No art skills, no asset store, no subscription fees beyond Claude Code itself.
The sprites above are the animated SVGs themselves, rendered inline by your browser — no GIF conversion, no video player. Each source file is 1–3 KB, vector, infinitely scalable, and auto-plays without click-to-start controls. The pipeline also produces 64×64 PNG sprite sheets (plus mirrored version, JSON metadata, optional animated GIFs) for game-engine import. Sources in showcase/ — tweak and re-run the pipeline.
curl -fsSL https://raw.githubusercontent.com/gididaf/sprite-forge/main/install.sh | bashThat's it. The installer sets up the CLI tool, the Claude Code skill, and all dependencies.
Requirements: Claude Code, Python 3.10+, Pillow, librsvg. The install script handles the last three.
Open Claude Code in any directory and type:
/sprite-forge goblin warrior with a club, walking left
Claude generates the SVG, runs the conversion pipeline, and hands you:
goblin_warrior_walk_left.svg ← animated source (editable)
goblin_warrior_walk_left_spritesheet.png ← 8-frame horizontal strip
goblin_warrior_walk_left_spritesheet_mirror.png ← right-facing version
goblin_warrior_walk_left_spritesheet.json ← frame data for your engine
The SVG is the source of truth — tweak it and re-run the pipeline anytime.
No flags to memorize. Just describe what you want.
/sprite-forge make the eyes glow red, modify skeleton_walk_left.svg
/sprite-forge now make it run, based on skeleton_walk_left.svg
/sprite-forge add a shield, based on skeleton_walk_left.svg
Claude reads the existing SVG, applies your change, and regenerates the sprite sheet. No re-prompting from scratch.
Already have an animated SVG? Convert it directly:
# Default: 8 frames, 64×64, with mirror + metadata
sprite-forge hero_walk_left.svg
# Higher resolution, more frames, with HTML preview
sprite-forge hero_walk_left.svg --frames 12 --size 128 --preview| Flag | Default | Description |
|---|---|---|
--frames N |
8 | Number of animation frames |
--size N |
64 | Frame size in pixels (square) |
--output PATH |
auto | Output PNG path |
--mirror / --no-mirror |
on | Generate flipped sprite sheet |
--meta / --no-meta |
on | Emit JSON metadata |
--gif / --no-gif |
on | Animated GIF (great for READMEs / Discord / wikis) |
--preview |
off | Generate animated HTML preview |
--silhouette |
off | Black-on-white silhouette of frame 0 (readability check) |
--keep-frames |
off | Keep individual frame PNGs |
--duration SECS |
auto | Override animation duration |
Sprite Forge leans on Claude Code's native ability to generate SVG — no external APIs, no subscription on top of Claude Code, no training pipeline.
The pipeline:
- Parse — read the SVG and auto-detect animation duration
- Bake — sample
<animate>/<animateTransform>values at N evenly-spaced time points, producing N static SVG snapshots - Render — rasterize each snapshot via
rsvg-convert - Stitch — combine frames into a horizontal sprite sheet
- Mirror — flip each frame individually (preserving per-frame geometry, unlike a blanket
scale(-1,1)transform) - Emit — metadata JSON + optional animated HTML preview
The /sprite-forge skill bundles a visual review loop: Claude reads its own generated sprite sheet, grades it against a correctness spec, and iterates until it looks right (hard cap: 3 iterations). For subjects involving directional physics (archers, casters) it can spawn a fresh-eyes subagent reviewer to catch blind spots.
If you're hand-editing SVGs or extending the skill:
- Facing: side-view characters face LEFT — the pipeline mirrors for the right-facing version.
- ViewBox:
0 0 64 64standard,0 0 80 64for wide characters (spiders, dragons). - Animation: SMIL only (
<animate>,<animateTransform>). CSS animations aren't baked. - Layering: back limbs (darker) → body → front limbs for depth.
- Body width in profile: ≤ 7px — wider torsos read as front-facing regardless of head detail.
- Limb thickness: ≥ 5px — thinner disappears at 64×64.
- Animation pitfalls: keep rotation pivots constant across keyframes; don't nest more than one
additive="sum"rotate per hierarchy branch (the frame baker doesn't resolve them cleanly).
PRs welcome — especially new sprite archetypes for the showcase, or improvements to the baking engine. Keep SVGs small and hand-editable; no binary assets in the repo except the showcase PNGs.
MIT