Communitygithub.com

hanamorix/image-to-animated-pixel-art

Verwendet, um ein Bild oder eine Illustration in detaillierte Pixelkunst in Aseprite zu verwandeln oder solche Pixelkunst (Leerlaufschleife, Atmen, Blinzeln, Haar- oder Kleiderschwung, weiche Körperwackler, Hand- oder Gliedmaßenbewegungen, Glanz, Wasser) durch das Aseprite MCP zu animieren.

Was ist image-to-animated-pixel-art?

Dieses Skill ermöglicht es einem KI-Agenten (wie Claude), hochwertige animierte Pixelgrafiken aus Bildvorlagen zu erstellen, indem es die Fähigkeiten des Aseprite MCP nutzt. Der Fokus liegt auf originalgetreuer Nachbildung: Beschädigte Pixel durch Verkleinerung werden repariert, und es werden keine Details hinzugefügt, die nicht in der Quelle vorhanden sind. Die Animation wird streng auf Fehler wie flackernde, springende oder reißende Pixel geprüft – der Agent kann kein GIF ansehen, daher basiert jede Freigabe auf messbaren Prüfungen. Der Workflow ist in Schritte unterteilt: Planung, Standbild, Blinzelposen, Animation, Effekte und Abschluss. Jeder Schritt erzeugt einen Check-in mit einem Seitenvergleich (Quelle | vorher | nachher) und einer gezielten Frage an den Benutzer. Das Skill unterstützt Benutzervorgaben (z. B. aus CLAUDE.md) und stellt Lua-Skripte für die Bildverarbeitung bereit, darunter Verkleinerung, Palettenoptimierung, Animationsrahmen und Flicker-Heatmaps.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/hanamorix/hana-pixel/tree/HEAD/skills/image-to-animated-pixel-art

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Bild zu animierter Pixelgrafik

Das Ergebnis muss originalgetreu bleiben: Repariere, was die Pixelschrumpfung beschädigt hat, aber erfinde niemals Details. Der Feind in der Bewegung ist Bruch: Jedes Pixel, das springt, reißt, aufpoppt oder flackert. Claude kann kein GIF betrachten, daher wird jeder gezeigte Schritt von gemessenen Prüfungen begleitet, niemals von „es sieht im Standbild gut aus".

Wenn der Benutzer Pixelkunst-Präferenzen hat (in seiner CLAUDE.md oder einer darin referenzierten Datei), lies sie zuerst; sie überschreiben die hier vorgegebenen Standardeinstellungen. Benötigt das Aseprite MCP: references/aseprite-mcp.md. Lies, wenn du diese Phase erreichst: references/still-recipe.md, references/motion-and-breaks.md.

Arbeitsablauf

Jeder Check-in ist eine Nachricht: ein nebeneinander angeordnetes Bild (Quelle | vorher | nachher, oder ein GIF plus ein beschnittener Daumenkino) und eine Frage. Kopiere die aktuelle Datei vor jeder Änderung in _vN, damit eine abgelehnte Runde daraus zurückgesetzt werden kann. Jede Runde führt genau die angeforderte Änderung aus und nichts anderes.

  1. Briefing. Frage, was gewünscht ist, bevor du planst: welche Teile sich bewegen, wie viel und wie schnell, was still steht, was geschützt ist. Schreibe einen kurzen Plan (eine halbe Seite) und hole ein Ja. Beendet, wenn der Benutzer den Plan genehmigt hat.
  2. Quelle. Beschneide oder skaliere die Quelle so, dass ihre Größe genau das 3-fache des Ziel-Sprites beträgt (ca. 200–260 px breit). Die Skripte gehen von 3x aus.
  3. Standbild (1_still.lua, dann Korrekturen mit 2_local_rerender.lua, 3_join_outline.lua). Miss die Parameter in still-recipe.md für dieses Bild. Check-ins in der Reihenfolge: Hände, dann Gesicht und Augen, dann Konturen, Metall und Hintergrund. Beendet, wenn jeder Teil genehmigt und das Standbild als *_still_FINAL gespeichert ist.
  4. Blinzelposen (4_blink_poses.lua, Augenabstände von Hand bei 14x nachgezeichnet). Zeige alle vier Posen nebeneinander plus ein Blinzel-GIF in einem Check-in, erstellt wie in motion-and-breaks.md. Beendet, wenn genehmigt.
  5. Bewegung (5_animation_frames.lua). Fülle seinen SETTINGS-Block mit Messungen am Standbild, führe es zuerst mit BF_ZERO = true aus (muss 0 px ändern), dann den echten Durchlauf, dann 6_deflicker_metrics.lua. Bestehe die unten stehenden Prüfungen, dann zeige das vollständige GIF plus einen beschnittenen Daumenkino des bewegten Teils.
  6. Effekte (8_effects.lua, nur Farbe, nach dem De-Flickern). Prüfen, dann zeigen.
  7. Extras eine Anfrage nach der anderen (Arme, Wasser, …), jede mit einem eigenen Check-in.
  8. Final. Kopieren nach *_FINAL (.aseprite + 3x GIF), wobei frühere Finals erhalten bleiben.

Prüfungen vor jedem Animations-Check-in

PrüfungBestehenWo
Null-Offset-Render entspricht der Pose0 px geändert mit BF_ZERO5
Starre Teile (Hände) exaktJeder Frame-Box, zurückversetzt um seinen Ganzpixel-Hub, entspricht dem Standbild: 0 pxeigener Lua-Vergleich
Ein-Frame-Pops (A→B→A)keine außerhalb des Blinzels und der Effekte6 gibt sie aus
SprüngeSchritt-Frames in BA_STEPS aufgelistet sind ausgeschlossen; jeder andere Frame ≤ ~2x Median geänderter px, und jeder Frame darüber hat eine benannte Ursache6
Heatmapkein Rot (≥ 8 Änderungen pro Schleife) auf Konturen, Trägern, Wimpern, Augen7_flicker_heatmap.lua
EffekteJedes Effektpixel hält ≥ 2 Frames; die Anzahl geänderter px liegt über 0 (eine schwache Mischung kann zur gleichen Palettenfarbe zurückspringen)8 gibt Anzahl aus
Geschlossenes Augekeine Irisfarbe mehr auf den geschlossenen Framesview_sprite bei 12x
Daumenkino8–16 Frames von Händen, Gesicht und jeder bewegten Kante bei 6x+ sehen durchgehend ausview_sprite Region + Frames

Skripte (scripts/)

Jedes Skript benötigt PA_DIR (Projektordner, endet mit Pfadtrenner: \ unter Windows, / unter macOS) und PA_SRC (Quellbilddateiname) zuerst gesetzt, plus seine eigenen globalen Variablen, die im Header aufgelistet sind. Führe sie über run_lua_script mit einem kurzen Starter aus; <skill> ist das Basisverzeichnis dieses Skills, das beim Laden des Skills angegeben wird:

PA_DIR, PA_SRC = [[/pfad/zum/projekt/]], "reference.jpg"
BF_POSES, BF_OUT, BF_PUSH = "blink_poses.aseprite", "frames", true
dofile([[<skill>/scripts/5_animation_frames.lua]])
SkriptMacht
1_still.lua3x3 linienbewahrende Verkleinerung, k-Means-Palette + Akzente, Sommersprossen-Durchlauf, Waisen-Verschmelzung
2_local_rerender.luaKästchen mit einem anderen Linienschwellwert oder mit zusätzlichen Farben neu rendern (Hände, Lippen)
3_join_outline.luaGepunktete Konturen verbinden, wo die Quelle eine dünne Linie hat
4_blink_poses.luaOffene, halbe, nahe, geschlossene Posen (Augenabstände in der Datei sind pro Bild)
5_animation_frames.luaAlle Frames; jede Koordinate lebt in seinem SETTINGS-Block (Beispielwerte enthalten)
6_deflicker_metrics.luaDe-Flickern, Pops, Sprung-Prüfung (BA_SKIP starre Kästchen, BA_STEPS Schritt-Frames)
7_flicker_heatmap.luaHeatmap-PNG
8_effects.luaQuetschlicht, Glitzern, Meeresglitzer, Sandfunken (SETTINGS-Block pro Bild)
checkin_sheet.luaQuelle / vorher / nachher-Blatt für einen Bereich
example_metal_rerender.luaNur Arbeitsbeispiel: Metall mit Schattierungsbändern aus der Quelle neu gerendert

5_animation_frames.lua enthält die bisher getroffenen Bewegungstypen (Atemband, weiche Kuppeln, Schwingkästen, starre Ganzpixel-Verschiebung, Gliedmaßenabschnitte, Meer). Ein neues Bild mit anderen bewegten Teilen fügt dort ein Feld hinzu.

Verwandte Skills