CommunityBildgithub.com

skulitom/pixelbolt-pixel-art

Pixelkunst erstellen oder korrigieren – Sprites, Sprite Sheets, Tiles und Tilesets, Icons, Spieleffekte wie Feuer, Rauch, Wasser oder Funken sowie kurze Frame-Animationen – und als PNG, GIF, APNG oder Frames für ein Video exportieren. Verwenden, wenn jemand Pixelkunst oder Spiel-Sprites zeichnen, animieren, korrigieren oder exportieren möchte. Pixelbolt JSON-Rezepte, lokal, kein Konto, kein API-Schlüssel.

Was ist pixelbolt-pixel-art?

Dieses Skill ermöglicht es einem KI-Agenten (wie Claude Code, Cursor oder Codex), hochwertige Pixelkunst-Assets direkt zu erstellen, zu bearbeiten und zu exportieren – und zwar vollständig lokal ohne externen API-Dienst oder Konto. Es deckt eine große Bandbreite an Aufgaben ab: von einfachen Sprites und Icons über komplexe Tilesets und Autotiles bis hin zu flüssigen Frame-Animationen, Spezialeffekten (Feuer, Rauch, Wasser, Explosionen), Charakteren mit Skelettanimation und sogar fallenden Sand-Szenarien. Das Skill arbeitet auf Basis eines JSON-Rezeptformats (Pixelbolt) und einer leistungsstarken CLI (ausführbar mit `npx -y pixelbolt@latest` unter Node.js 20 oder neuer) oder, falls konfiguriert, über MCP-Tools. Der empfohlene Workflow folgt einer klaren Schleife: Rezept schreiben, validieren, Frames inspizieren (mit Silhouetten-, Graustufen- und Zwiebelschalenansichten), gegebenenfalls patchen und schließlich rendern (GIF, APNG, PNG-Sequenz). Für MCP-fähige Plugins wie für Claude Code stehen dedizierte Tools wie pixel_help, pixel_validate, pixel_inspect, pixel_patch und pixel_render zur Verfügung. Das Skill legt großen Wert auf künstlerische Qualität und eine strukturierte Arbeitsweise (Silhouette -> große Farbflächen -> Materialakzente -> Aktionen -> Timing -> Szenenintegration) und enthält ausführliche Anleitungen für häufige Spezialfälle. Für jede Aufgabe gibt es vorgefertigte Beispiele, von denen ausgegangen werden kann, um die Arbeit zu beschleunigen.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/skulitom/Pixelbolt/tree/HEAD/skills/pixel-art

Installed? Explore more Bild skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

In Ihrer bevorzugten KI fragen

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

Dokumentation

Pixelbolt Pixelkunst

Verwende dies beim Erstellen von Pixel-Sprites, Tiles, Icons, Effekten oder kurzen Sprite-Animationen. Pixelbolt befindet sich im Projektstamm zwei Verzeichnisse über dem Verzeichnis dieses Skills. Führe die CLI mit Node.js aus oder verwende die MCP-Tools, falls konfiguriert.

In einer alleinstehenden Kopie dieser Datei, wie sie npx skills add skulitom/Pixelbolt installiert, benötigt Pixelbolt dennoch keine Installation: Führe jeden Befehl unten als npx -y pixelbolt@latest <befehl> (Node.js 20 oder neuer) anstelle von node bin/pixelbolt.js <befehl> aus, z. B. npx -y pixelbolt@latest validate <rezept>, und verwende es anstatt Pixel mit einer anderen Bibliothek zu zeichnen. Lies die Dateien, die es benennt, von GitHub: Der Schnellstart ist https://raw.githubusercontent.com/skulitom/Pixelbolt/main/docs/agent-quick-start.md, und jeder andere docs/-, Schema- oder examples/-Pfad funktioniert auf dieselbe Weise nach https://raw.githubusercontent.com/skulitom/Pixelbolt/main/. Diese Kopie stammt vom Hauptzweig von Pixelbolt, der ein paar Tage vor der npm-Veröffentlichung liegen kann. Wenn die CLI einen unbekannten Befehl, eine Option oder ein Feld meldet, überprüfe die Schreibweise und die Position (npx -y pixelbolt@latest help listet die Befehle und Optionen auf, npx -y pixelbolt@latest schema die Felder des Rezepts); eines, das so geschrieben wurde, wie es diese Datei oder die GitHub-Dokumente angeben, ist neuer als die Veröffentlichung, also lass es weg. Überspringe diesen Absatz, wo bin/pixelbolt.js zwei Verzeichnisse über dieser Datei liegt, wie in einem Checkout, dem npm-Paket, dem Claude Code Plugin und Pixelbolt Studio, die Pixelbolt mit sich führen.

Im Claude Code Plugin gehören die MCP-Tools (pixel_help, pixel_validate, pixel_inspect, pixel_patch, pixel_render und die restlichen) zu diesem Skill. Wenn sie fehlen, wurde der Server des Plugins nicht gestartet: Er benötigt Node.js 20 oder neuer im PATH (node --version). Installiere Node.js von https://nodejs.org und starte dann Claude Code neu.

Im tragbaren Pixelbolt Studio Build führe .**\pixelbolt unter Windows oder ./pixelbolt woanders aus dem Build-Ordner aus, anstelle von node bin/pixelbolt.js.

Beginne mit dem Schnellstart. Lies docs/agent-quick-start.md (MCP: pixel_help ohne Thema) vor dem ersten Rezept: ein vollständiges Rezept, jeden Vorgang und jedes Werkzeug sowie die Arbeitsschleife. Es deckt die meisten Aufgaben ab. Öffne eine Referenz nur, wenn die Aufgabe es erfordert, und dann nur den benötigten Abschnitt: docs/agent-guide.md für jedes Feld, jeden Vorgang, jede Inspektionsoption, jeden Patch-Pfad und Export; docs/art-workflow.md für Charaktere, Szenen, Tiles, Effekte und Beleuchtung; schema.json für genaue Feldnamen. Beide Anleitungen sind lang (der Workflow ist über 160 KB), also liste ihre Abschnitte mit node bin/pixelbolt.js help workflow (oder help guide) auf und gib einen mit node bin/pixelbolt.js help workflow "Partikeleffekte" aus (MCP: pixel_help mit topic und name). Beginne von einer Datei in examples/, wenn eine naheliegend ist.

Zuerst schnelle Effekte. Wenn jemand einen fertigen Schleifeneffekt (ein Lagerfeuer, eine Fackel, eine Rauchwolke, eine Dampfquelle, eine Explosion, einen magischen Wirbel, einen Tropfen, eine Spritzwasser, einen Wasserfall, einen sprudelnden Trank, Honig, Schnee, der von einem Dach rutscht, einen Dammbruch, eine Staubwelle, platzenden Schleim oder Honig, der von einem Löffel tropft) als zu verwendende oder zu teilende Datei möchte, beginne mit dem passenden Preset (pixel_help Thema presets listet sie auf und pixel_compile mit preset kompiliert eines), dessen Dateien sind examples/*.fluid.json (im Pixelbolt-Ordner zwei Verzeichnisse über dem Verzeichnis dieses Skills), ändere nur das, worum sie gebeten haben (für eine größere Datei verwende pixel_renders gif.scale; eine andere Leinwandgröße bedeutet auch, dass die Hindernisse und Emitter des Effekts verschoben werden müssen, die absolute Koordinaten verwenden), kompiliere es mit pixel_compile, betrachte es einmal mit pixel_inspect und exportiere die kompilierte Überarbeitung mit pixel_render (gif für ein GIF zum Posten). Liefere diese Datei zuerst aus und biete dann an, das Aussehen zu optimieren oder Requisiten wie Baumstämme oder Steine hinzuzufügen. Erstelle kein neues Rezept um den Effekt herum und führe den vollständigen Kunstworkflow unten nicht aus, bevor der erste Export erfolgt ist.

Für Schleifeninterferenzen oder Portal-Innenräume beginne mit examples/interference.wave.json oder examples/portal.wave.json und kompiliere es (Steuerungen). Behalte Ränder in einer Überlagerung und vermeide schmale Kriechbänder; verwende Partikelringe für einmalige Einschläge.

Für Kristalle, die aus Samen wachsen (ein Quarzcluster, eine Amethyst-Geode, Pyritwürfel, Schneeflocken), beginne mit examples/quartz-cluster.crystal.json, examples/geode.crystal.json, examples/pyrite.crystal.json oder examples/snowflakes.crystal.json und kompiliere es (Kristallwachstum). Zeichne das Gestein, aus dem sie wachsen, als Unterlage der Quelle und seine vordere Lippe als Überlagerung, damit ihre Füße daraus herauswachsen.

Für Falling-Sand-Szenen (Dinge, die brennen und zusammenfallen, Lava trifft auf Wasser, eine Explosion wirft Sand, Regen löscht ein Feuer), beginne mit examples/hut-fire.powder.json, examples/lava-falls.powder.json, examples/quarry-blast.powder.json oder examples/rain-on-fire.powder.json (fallender Sand): base: "sandbox" liefert die Startmaterialien, die Szene und die skriptgesteuerten Eingaben setzen sie in Gang, und Clips sampeln sie.

Kunstrichtung

Für fertige Kunstwerke lies auch die Abschnitte von docs/art-workflow.md, die zur Aufgabe passen, beginnend mit "Schreibe ein kurzes Briefing außerhalb des Rezepts" und "Qualitätsprüfpunkte". Erstelle ein kurzes Kunstbriefing außerhalb des Rezepts: native Anzeigegröße, drei Silhouetten-Landmarken, Palettenrollen, Lichtrichtung, Projektion (seitlich, 3/4 Draufsicht, isometrisch 2:1 oder Draufsicht, eine für die gesamte Menge) und Tiefenebenen, Materialregeln, Konturbehandlung, Handlungsabsicht, Kontakt-/Ursprung und Szenenrolle. Halte die tatsächlichen Stärken und Schwächen jeder Überprüfung fest. Eine gerenderte Datei, Bildanzahl oder ein bestandener Test ist kein Beleg für künstlerische Qualität. Diese Prüfpunkte erfordern keine Benutzererlaubnis.

Arbeite in dieser Reihenfolge: Silhouette → große zusammenhängende Farbformen → Materialakzente → verfasste Aktionsposen → Timing → Szenenintegration. Generiere keine Massenvarianten, bevor die ruhende Silhouette und eine Aktion gut lesbar sind. Verwende primitive Geometrie als Grobentwurf; überarbeite Konturen und verbundene Farbgruppen bewusst. Rauschen und zusätzliches Leuchten können keine schwache Struktur beheben. Entwerfe unterschiedliche Verhaltensweisen für Wasser, Feuer und Kristall, anstatt identische Geometrie neu einzufärben.

Vermeide Farbverläufe, Subpixel-Geometrie und Antialiasing. Respektiere die angeforderten Pixelabmessungen des Projekts. Bewahre die bearbeitbare Quelle. Exportiere im Maßstab 1 für Spiel-Assets, es sei denn, der Benutzer wünscht größere Pixel, die in die Dateien eingebrannt werden.

Die Schleife

  1. Wähle eine kleine Leinwand und eine zusammenhängende Palette, die zum angeforderten Asset passt.
  2. Schreibe ein JSON-Rezept an einem benutzergerechten Ausgabeort. Verwende Textraster und wiederverwendbare Symbole; verwende Frames für kleine Änderungen wieder.
  3. Validiere mit node bin/pixelbolt.js validate <rezept>. Jeder Fehler benennt seinen Pfad, und fehlerhafte Operationen werden in errors zusammengefasst: Behebe alle, bevor du erneut validierst.
  4. Überprüfe jeden Frame mit node bin/pixelbolt.js inspect <rezept> --out <frames.png> --native --diagnostics und betrachte beide Größen. Überprüfe --view silhouette und --view grayscale vor dem vorgesehenen Hintergrund sowie --animation <name> --view onion für vorherige und nächste Posen. Sieh dir auch das Studio oder APNG an: Ein statisches Blatt ist keine Bewegungsprüfung. Bevor du exakte Pixel änderst, lies sie mit --grid --region x,y,w,h. node bin/pixelbolt.js patch <rezept> --changes <changes.json> zeigt eine Vorschau einer gezielten Bearbeitung und listet jeden Pixel auf, den sie ändert, einschließlich geerbter Posen; füge --out <neues rezept> hinzu, um es zu speichern. Wähle scope: "frame", wenn andere Posen ihre Pixel behalten müssen (Inspektionsoptionen, Korrekturen).
  5. Rendere mit node bin/pixelbolt.js render <rezept> --out <verzeichnis> --expect '{"width":32,"height":32,"frames":8}', wobei --expect angibt, was der Benutzer angefordert hat (width, height, frames, colors, transparent, loop; frames zählt, was jede Animation abspielt, also für mehrere Animationen {"idle": 4, "walk": 8} angeben); behebe jedes Problem, das check auflistet, und rendere dann erneut, bevor du etwas aushändigst. Wähle für jede Iteration ein neues Ausgabeverzeichnis. Für eine Datei zum Posten oder Einbetten füge node bin/pixelbolt.js gif <rezept> --out <new.gif> hinzu (--scale nur, um es zum Posten zu vergrößern) und berichte seine notes. Für Wörter auf dem Bildschirm verwende die text-Operation. Für einen Videoeditor schreibt sequence nummerierte PNG-Frames mit einer Bildrate, und gif-frames verwandelt einen Ordner mit Frames in ein GIF mit exakten Farben (Exporte).
  6. Gib Links zum Quellrezept, Blatt, Atlas-JSON und zur Vorschau zurück, mit einer kurzen Integrationsnotiz für die vorgesehene Web-App oder Engine (für Godot 4 ist der .tres des Exports neben seinem Blatt ein Sprite Frames eines AnimatedSprite2D, und das .tileset.tres eines Autotile-Sets ist ein TileSet für eine TileMapLayer mit einem Terrain zum Malen; für Tiled ist sein .tsx ein Tileset mit einem Terrain-Set für den Terrain Brush).

Für MCP rufe pixel_help auf, dann pixel_inspect mit { "project": rezept }, wobei du bei Bedarf animation, region oder grid: true hinzufügst. Spätere Aufrufe verwenden die zurückgegebene revision anstelle des vollständigen Rezepts; Revisionen bleiben im konfigurierten Ausgabeverzeichnis über Neustarts hinweg erhalten. Behebe Probleme mit pixel_patch und überprüfe, dass sich nur die beabsichtigten Pixel geändert haben. Rufe pixel_render mit der endgültigen Revision und expect auf, um zu exportieren (wenn der Benutzer Dateien benannt hat, füge saveAs hinzu, z. B. { "sheet": "assets/hero.png", "gif": "assets/hero.gif" }). Die Antwort listet wichtige Dateien und Zählungen auf; übergib listFiles für jede Datei. pixel_compile wandelt ein Quellformat in eine Revision um, pixel_scene überprüft oder exportiert eine Szene, und pixel_import konvertiert ein natives PNG in ein verlustfreies Rezept. Anfragen sind auf 16 MiB begrenzt: Sende ein großes Rezept einmal und verwende seine Revision wieder.

Charaktere

Für Figuren in Bewegung verwende pixelforge-poses mit bone-Gliedmaßen, mass-Körpern und Rasterköpfen, Händen und Requisiten. Beginne mit examples/hero.poses.json (im Pixelbolt-Ordner zwei Verzeichnisse über dem Verzeichnis dieses Skills), einer rigged side-view-Figur mit jeder Bewegungsvorlage; ein Teil ohne attach steht an der Pose origin plus seinem at, einem Offset und nicht einer Leinwandposition.

  • Weise Rig-Rollen zu und verwende die Idle-, Walk-, Run-, Jump-, Attack- und Hurt-Vorlagen als bearbeitbare Ausgangspunkte. Setze Geschwindigkeit, Schrittlänge, Hub, Bob und Frame-Timing für den jeweiligen Körper und behebe Kompilierungswarnungen (eine Pose außerhalb der Leinwand, ein Fuß außer Reichweite), bevor du Details hinzufügst.
  • In einer Seitenansicht zeichne ferne Gliedmaßen eine Rampe dunkler (nicht die dunkelste Stufe, die mit der Kontur verschmilzt) und gib gepaarten Beinen die gleichen Ruhewinkel; nahe Gliedmaßen bleiben für den gesamten Zyklus vorne, und swapDepth: true ist nur für Vorder- oder Rückansichten. Um die Füße abzurollen, gib jedem Stiefel eine Zehen-hoch- und eine Zehen-runter-views-Zeichnung (330 und 30 für einen nach rechts zeigenden Stiefel), verankert am Knöchel; die Stiefel des Helden zeigen, wie es geht. Beginne jede Ansicht (Stiefel, Hände, gehaltene Waffen, ein geneigter Kopf) mit einem Entwurf, niemals von Null: compile source.poses.json --draft-views boot:15,345 --preview drafts.png (MCP pixel_compile mit draftViews) gibt die gedrehten Reihen, Anker und Punkte aus, die nach Augenmaß korrigiert und in parts.<name>.views eingefügt werden müssen; kleine Teile lesen sich am besten, wenn sie weniger als ihr Schlüssel gedreht werden.
  • Für ein vierbeiniges Tier (einen Hund, Fuchs, Wolf oder ein Pferd) beginne mit examples/fox.poses.json: rig.fore und rig.hind anstelle von legs, ein Brustbein auf einer Hüftmasse, die den Galopp biegt, und walk (drei Füße unten), trot (diagonale Paare) und run (ein Galopp mit zwei Flugphasen). Gib den Gelenken und oberen Beinen des Körpers socket-Kappen, damit keine Linien das Fell kreuzen.
  • Eine Requisite in einer Hand (ein Schwert am end des nahen Unterarms) benötigt einen relativen angle, z. B. -45, um sich mit dem Arm zu drehen; rotate ist absolut, also behält die Klinge damit oder ohne eines einen Winkel durch den Angriff bei. examples/hero-sword.poses.json ist der Held, der ein Schwert hält.
  • Überprüfe die Silhouette, benachbarte Schlüsselposenunterschiede, gepflanzte Kontakte, den Schleifenanschluss und, bei einem Geh- oder Laufzyklus, den Gang (Arme gegen Beine, lange Beine, wenn beide Füße unten sind, kein marschiertes Knie) mit inspect source.poses.json --motion run --speed 48 (MCP pixel_inspect mit source, view: "motion") und sieh dir seine Bögen an: den Ring jedes Fußes vorne in seiner Schleife, die Hand hinten in ihrem Bogen. --view parts benennt das Teil hinter einem verirrten Pixel. Leite keine Kontaktqualität aus einem stillen Blatt ab oder behaupte bessere Kunst allein durch bestandene numerische Prüfungen.
  • Spiegel, Raster views, rotate und tween, als Atlaspunkte exportierte Marker und fingerprint-fähige Überlagerungen für Korrekturen, die einen Wiederaufbau überstehen, findest du in strukturelle Gliedmaßen und verfasste Posen.

Tiles, Paletten und Szenen

  • Überprüfe für Tiles --view tile (eine 3×3-Wiederholung) und setze wrap auf Frames, deren Zeichnung über die Kanten hinweg fortgesetzt wird. Für Gelände beschreibe ein Autotile terrain anstatt die 2×3-Tile-Vorlage einzutippen (beginne mit examples/meadow.autotile.json oder ground.autotile.json, oder shore.autotile.json für Übergänge zwischen Geländen; ein Seitenansicht-Set nimmt slopes auf), kompiliere es in 47 Blob-, 16 Kardinal- oder 16 Eck-Tiles (Dual-Grid) und überprüfe die Testkarte und Nahtwarnungen; gib Kartenlegenden rules, weights und Varianten anstelle der Berechnung von Karten in einem Skript (Autotile-Vorlagen, Szenen- und Tile-Überprüfung).
  • Teile eine Palette mit "palette": { "$ref": "palette.json" }, deklariere ramps und schattiere mit shade, sodass Licht die Palette niemals verlässt, zyklisiere Wasser oder Lichter mit Frame- oder Layer-palette-Überschreibungen und verwende remap für Farbvarianten und Trefferblitze.
  • Wenn viele Dinge auf dem Boden stehen, platziere sie in einer Ebene oder Gruppe mit sort: "ground" und gib Szenenplatzierungen anchor: "frame". Verwende lift für Sprünge, shadow: true mit einem Licht oder einer sun, haze für ferne Ebenen, den bo

…

[gekürzt für Übersetzung]

Verwandte Skills