/pixel-art-studio

name: pixel-art-studio
description: >
  Create production-quality pixel art and animations programmatically. Use when the user asks to "create
  pixel art", "draw a sprite", "make pixel animation", "generate sprite sheet", "convert image to pixel art",
  "pixelate this image", "make a pixel character", "пиксель арт", "пиксельная графика", "спрайт",
  "像素画", "像素艺术", "도트 그래픽", "픽셀 아트", "8-bit/16-bit/hi-bit style", "retro game art",
  "Aseprite-like output", "indie game sprite". Covers single-frame sprites, frame-by-frame animations,
  walk cycles, idle/attack/death animations, sprite sheets, GIF/APNG export, image-to-pixel-art
  preprocessing (downsample + quantize + dither), 30+ bundled palettes (NES, GameBoy, PICO-8,
  Endesga 32/64, DawnBringer 16/32, Sweetie 16, Resurrect 64, Korean 오방색/단청, Chinese 故宫/青花/五行,
  Russian Stoneshard-inspired), 5 dithering algorithms (Bayer 2/4/8, Floyd-Steinberg, Atkinson, Ordered,
  Blue Noise), automated quality scoring (orphan pixels, doublies, banding, pillow-shading, AI-slop
  detection), and Generator-Evaluator review via the pixel-art-reviewer agent. Do NOT use for
  seamless-loop animated scene/book/album covers as self-contained HTML+canvas; use
  pixel-art-storyboard for that (this skill outputs raster sprites and sprite sheets, not
  narrative loop-cover HTML).
version: 1.0.0

Pixel Art Studio

Programmatic pixel art creation with palette discipline, dithering, animation, and automated quality control. Designed for **production-quality output**, not "look-pixelated filter on a photo."

When to use this skill

| User says | What to do | |---|---| | "make a pixel art X" / "create a sprite" | [Static sprite workflow](#workflow-1-single-frame-sprite) | | "animate this", "walk cycle", "idle animation" | [Animation workflow](#workflow-2-animation) | | "convert this image to pixel art", "pixelate this" | [Preprocessing workflow](#workflow-3-image-to-pixel-art) | | "generate sprite sheet" | [Sprite sheet workflow](#workflow-4-sprite-sheet) | | "review this pixel art / score it" | [Quality review workflow](#workflow-5-quality-review) | | "show palette options" / "use Endesga 64" | [Palette browsing](#palette-management) |

If user provides only a vague description ("a cat sprite"), pick the **standard sprite workflow** with **32×32 + Endesga 32 palette** as the safe default, then offer to iterate.

---

Prerequisites

pip install Pillow numpy
# Optional but recommended for advanced quality checks:
pip install scikit-image scipy

`Pillow` is **mandatory**; `numpy` is mandatory; the rest are optional (the scripts will degrade gracefully).

---

Core principle: design discipline > pixel quantity

A 16×16 sprite with deliberate cluster choices reads better than a 64×64 with random pixel noise. **Always start from the smallest grid that conveys the subject**, expand only when needed for detail.

The four pillars of quality (encoded in `scripts/quality_check.py`):

1. **Per-pixel hygiene** — no orphan single pixels, no parallel doublies, no banded ramps 2. **Cluster coherence** — pixel groups read as recognizable shapes, not noise 3. **Palette discipline** — limited (≤32 typically), with hue rotation across luminance ramp 4. **Silhouette readability** — render-as-solid-shape and verify subject is recognizable

When in doubt, run `quality_check.py` after generation and fix issues until score ≥ 80/100.

---

Workflow 1: Single-frame sprite

Step 1 — Pick canvas size

| Subject complexity | Canvas | Examples | |---|---|---| | Icon / glyph | 8×8 | heart, key, arrow, smiley | | Simple sprite | 16×16 | NES character, item, tile | | **Standard sprite** ⭐ | **32×32** | indie character, animal, prop | | Detailed character | 48×48 - 64×64 | hi-bit hero, boss, building | | Mobile RPG humanoid (CN/KR) | 48×72 | 8-direction walking character | | Hero / portrait | 96×96 - 128×128 | promotional art, big boss |

When user is vague: **32×32**.

Step 2 — Pick palette

Three modes:

• **Bundled palette** (recommended): Use `scripts/palette.py --list` to enumerate. Default for vague subjects: **Endesga 32**.
• **Style-anchored palette**: subject-specific recommendations in `references/02-palette-theory.md`
• **Custom palette**: 4-16 hex colors curated by hand. Validate with palette ramp checker.

Common style → palette mapping: | User intent | Palette | |---|---| | Generic, modern indie | `endesga-32` or `endesga-64` | | 8-bit retro / Famicom feel | `nes` or `pico-8` | | Mono / GameBoy DMG | `gameboy-dmg` | | Soft pastel / cute | `sweetie-16` | | Atmospheric / cinematic | `apollo` or `slso8` | | Industrial / cool | `steam-lords` | | Chinese xianxia / palace | `gugong-red-wall` or `qinghua` | | Korean traditional | `obangsaek` (5-color) | | Dark fantasy (Stoneshard-style) | `stoneshard-inspired` |

Step 3 — Design layer-by-layer

**Always think in this order, not free-form:**

1. **Silhouette** (darkest color, just outline) — does shape read at intended size? 2. **Base fill** — primary 1-2 colors covering largest areas 3. **Cell shading** — pick **3-4 discrete shades**, place them per a single light direction (default: top-left) 4. **Hue shift** — shadows shift **cooler+desaturated** (toward blue-violet); highlights **warmer+saturated** (toward yellow-orange). Hue rotation across ramp ≥ 30° 5. **Selective AA** — only on staircase patterns longer than 1×1, using intermediate-color halftone strip 6. **Details** — eyes, patterns, small features. Each pixel must belong to a cluster ≥ 2-3 pixels (no orphans)

**NEVER do pillow shading**: dark border + light center regardless of light source. Auto-detected as anti-pattern in `quality_check.py`.

Step 4 — Generate JSON

Use the [Sparse Coordinate JSON format](references/08-json-schema.md). Minimal example:

{
  "width": 16,
  "height": 16,
  "background": "transparent",
  "pixel_size": 16,
  "palette_ref": "endesga-32",
  "pixels": [
    {"x": 7, "y": 4, "color": "#a8ca58"},
    ..