Communitygithub.com

codepawl/2d-generalist

Entwerfen, animieren, texturieren und compositen Sie Vox-, Johnny-Harris- und WSJ-inspirierte erklärende Bewegtgrafiken im 2D-, 2,5D- und 3D-Bereich mit installierten kostenlosen Tools (Blender, DaVinci Resolve Fusion, Remotion + Three.js/SVG, FFmpeg) oder optionalen Open-Source-GIS/Vektor-Tools.

Was ist 2d-generalist?

Dieses Skill ermöglicht es KI-Agenten, redaktionelle Bewegtgrafiken im Stil von Vox (Atlas, By Design, Earworm) und Flat Pack FX zu entwerfen, zu animieren und zu compositen – und zwar vollständig mit kostenlosen Tools, die bereits auf dem Rechner des Nutzers installiert sind (oder deren Installation empfohlen wird). Es deckt 2D-, 2,5D- und 3D-Workflows ab und nutzt dabei Blender, DaVinci Resolve Fusion, Remotion (mit Three.js/SVG) und FFmpeg. Das Skill folgt einem klaren, modularen Workflow: Zuerst wird ein Toolchain-Audit durchgeführt, dann die visuelle Hierarchie nach Vox-Designgesetzen aufgebaut, prozedurale SVG-Assets generiert, die Szene in der gewählten Engine erstellt und abschließend ein Finishing-Pass mit Kamera-Unschärfe, chromatischer Aberration und Posterize Time angewendet. Es enthält außerdem sogenannte „Mode Routing“-Befehle für spezifische Aufgaben wie Design, Kartenerstellung, Diagramme und Archivcollagen. Besonders nützlich ist die Integration von „Core Vox Visual Laws“ – nicht verhandelbare Regeln wie warme Hintergründe, zerrissene Papierränder, gedruckte Halbtonraster und eine vorgezeichnete Zeitleiste mit proportionalen Abständen. Das Skill ist ideal für Agenten, die in der redaktionellen Bewegtgrafik arbeiten und einen konsistenten, hochwertigen Look ohne teure Software erzielen wollen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/codepawl/creator-generalist/tree/HEAD/plugins/2d-generalist/skills/2d-generalist

In Ihrer bevorzugten KI fragen

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

Dokumentation

2D Generalist

Verwenden Sie dieses Skill, um redaktionelle Bewegtgrafiken im Stil von Vox (Atlas, By Design, Earworm, Missing Chapter) und Flat Pack FX zu entwerfen, zu animieren, zu texturieren und zu compositen – über 2D, 2,5D und 3D hinweg – mit den bereits auf dem Rechner des Nutzers installierten Tools (oder Empfehlung kostenloser Tools, falls diese fehlen).

Modus-Routing

ModusUmfang (2D / 2,5D / 3D)Primäre Referenz
auditPrüfen installierter kostenloser 2D/3D-Tools vs. optionale Downloadsreferences/2d-3d-toolchain-matrix.md
designVisuelle Hierarchie, asymmetrische Skalierung, Blaupausen-Ästhetik, Palettenreferences/vox-psychology-and-design.md
map2D-Vektor-/Satellitenkarten, 2,5D-geprägte/extrudierte Ebenen, 3D-Gelände & KML-Routenreferences/maps-and-geodata-2d-3d.md
chart-timelineVorgezeichnete Lineal-Zeitleisten, 2D/3D-Balken-/Liniendiagramme, Punktmatrix-Wiederholer, Wellenformenreferences/charts-timelines-and-data.md
archival-collageDoppelte Textmarker, Zeitungs-Zoom/Flackern, zerrissene Ränder, 2,5D-Parallaxe, 3D-Diaprojektorreferences/archival-collage-and-camera.md

Führen Sie vor Schritt 1 die Intent-Zusammenfassung aus (references/intent-brief.md): Füllen Sie Zweck, Format, Thema, Look und Einschränkungen aus der Anfrage, fragen Sie nur nach dem, was fehlt (maximal 4 Fragen, Optionen mit einer empfohlenen Vorgabe), schreiben Sie brief.md, zeigen Sie eine kostengünstige Vorschau vor dem ersten teuren Schritt und überprüfen Sie das Ergebnis gegen die Zusammenfassung vor der Auslieferung. Ein Werkstück, das das Ziel des Nutzers verfehlt, ist ein misslungenes Werkstück.

End-to-End-Workflow

  1. Toolchain prüfen (audit)
    • Führen Sie uv run --no-project python scripts/check_vox_toolchain.py aus, um installierte 2D/3D-Tools zu erkennen (Blender, DaVinci Resolve / Fusion, Remotion + Three.js/SVG, FFmpeg) und listen Sie einzeilige kostenlose Installationsbefehle (winget) für fehlende optionale Tools auf (QGIS, Inkscape, Krita).
  2. Hierarchie und Oberfläche aufbauen (design)
    • Wenden Sie Asymmetrische Skalenspannung an (einen dominanten Anker, großzügigen cremeweißen #F4F1EA oder blaupausenschieferfarbenen #1B222C Negativraum, einen Verbindungspfad). Führen Sie den Wegschauen-Zurückblicken-Test vor dem Animieren durch.
    • Bauen Sie die 3 Säulen der visuellen Autorität auf: Oberfläche (warme Papierfasern + statische Körnung), Tinte (Multiplizieren / Farbnachbelichten-Auslaufen + Luma-Matte + aufgerauten Kanten + 0,5–1,5px Weichheit) und Leben (Posterize Time bei 8–12 fps für grafische Elemente oder 2–4 fps Hintergrund-Textur-Kochen).
  3. Prozedurale Assets generieren (scripts/generate_vox_assets.py)
    • Führen Sie uv run --no-project python scripts/generate_vox_assets.py aus, um SVG-Filterdefinitionen zu generieren (doppelt durchlaufene zerrissene Papierränder, Tintenauslaufen, gekreuzte 45°-Raster-Luma-Matten, Papierkörnung) und proportionale Lineal-Zeitleistenlayouts.
  4. Szene in der gewählten 2D / 2,5D / 3D-Engine erstellen (map, chart-timeline, archival-collage)
    • Code / Web 2D & 3D: Remotion + SVG-Filter (<feTurbulence> + <feDisplacementMap>) + Three.js / React Three Fiber (35mm-Kamera, Schärfentiefe, Z-Ebenen).
    • Node-Compositor 2D & 2,5D: DaVinci Resolve Fusion (FastNoise + Displace, sRender-Wiederholer, Paint-Trimmstriche, ImagePlane3D + Camera3D).
    • Volles 3D & 2D-in-3D: Blender 5.2 (Grease Pencil-Striche mit Noise/Build-Modifikatoren, Geometry Nodes proportionale Zeitleisten/Balkendiagramme, 3D-verschobene Geländekarten, Cycles/EEVEE 35mm Schärfentiefe + Compositor-Linsen-/Korn-Pass).
  5. Finishing-Pass anwenden und validieren (scripts/validate_vox_recipe.py)
    • Fügen Sie subtile 35mm Schärfentiefe (oder eine weichgezeichnete Einstellungsebenen-Fokusmaske), radiale Chromatische Aberration, Vignette und Posterize Time-Kadenz hinzu.
    • Führen Sie uv run --no-project python scripts/validate_vox_recipe.py --spec <recipe.json> aus, um die Einhaltung aller Vox-Visualgesetze zu überprüfen.

Für jeden Schritt, der in Blender durchgeführt wird (Geometry Nodes, Shader, Rigging, Gewichts-Painting, NLA, bpy), laden Sie das Skill use-3d-software für die exakten Knoten und aktuellen 5.x-Namen. Für Schnitt, Untertitel, Zeitlupen, Übergänge, Grading und Export in einem beliebigen Editor (Resolve, CapCut, Premiere, Kdenlive, FFmpeg) laden Sie edit-video. Erstellen Sie Skills für einzelne Schritte: draw-and-paint-art (Zeichnen, Figuren, Malen in Krita), paint-stylized-backgrounds (Hintergründe, Übermalen, Parallaxe, bewegtes Laub und Wasser), animate-characters (Figurenbewegung, Einzelbild, Cut-Out) und rig-characters (Cut-Out-Puppen).

Kern-Vox-Visualgesetze (Nicht verhandelbar)

  • Kein steriler digitaler Hintergrund: Verwenden Sie niemals reines #FFFFFF oder #000000 als Hintergrund. Verwenden Sie warmes Papier (#F4F1EA), Archivcreme (#EFECE6) oder Blaupausenschiefer (#1B222C) mit statischer Körnung.
  • Doppelt durchlaufene zerrissene Papierränder: Ausschnitte auf belebten Hintergründen benötigen einen cremefarbenen Papierrand (Simple Choker / morphologische Dilatation), der mit zwei Durchläufen aufgeraut wird: Durchlauf 1 (Spiky / große Scherenschnitte) + Durchlauf 2 (Roughen / feine Papierfaserkante) + Hartes Licht Stoff/Papier-Textur auf den Ausschnitt beschnitten.
  • Druck-Zitier-Raster: Wenden Sie gekreuzte +45° / -45° Rasterpunkt-Luma-Matten an (aufgeteilt in Glanzlicht- und Schatten-Matten), die bis zur Wahrnehmungsschwelle heruntergeregelt sind (8%–18% Deckkraft), damit moderne Nachrichtenausschnitte gedruckt und faktengeprüft wirken.
  • Gesetz der vorgezeichneten Lineal-Zeitleiste: Verteilen Sie niemals ungleiche Zeitintervalle gleichmäßig. Zeichnen Sie zuerst eine gleichmäßig beabstandete Lineal-/Teilstrichskala, platzieren Sie dann Ereignisse an ihren wahren proportionalen Koordinaten, sodass Cluster und Lücken die Geschichte erzählen.
  • Gesetz des doppelten Textmarkers:
    • Digitaler/Bildschirm-Text: Sauberer #FFE600-Strich, Multiplizieren-Mischmodus, Strichhöhe kürzer als die Versalhöhe des Buchstabens (~75–85%), nicht hervorgehobener Text auf ~30% Deckkraft abgedunkelt.
    • Archiv-/Buchseite: 3-fach aufgeraute Kanten (horizontale Markierungsstriche + Rand + raue Kante) + Bulge turbulente Verschiebung, platziert im 3D-Raum mit einer 35mm-Kamera und flacher Schärfentiefe, die der Zeile folgt.
  • Kamera-Geschwindigkeitsgraph: Alle 2D/3D-Kamerabewegungen und Zooms müssen eine 35mm-Brennweite verwenden, eine Null-Controller-Elternschaft und einen kontinuierlichen Bézier-Glockenkurven-Geschwindigkeitsgraphen (langsames Einschwingen -> schnelles Einrasten -> langsames Ausschwingen), niemals lineare Keyframes.

Skripte & Referenzen

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

Verwandte Skills