/minimal-graphics: Eine Idee erklärt mit Formen und bewegten Punkten
Der Benutzer gibt eine Idee („Wie eine Idee viral geht“, „Wie ein Gesetz entsteht“, „Der Wasserkreislauf“, „Wo Ihre Aufmerksamkeit hinfließt“). Sie wählen das Bewegungsmuster, das dies zeigt, schreiben eine kleine Spezifikation, prüfen einen Frame, rendern das Video und übergeben ein stummes MP4 (5-7 Sekunden).
${CLAUDE_SKILL_DIR} unten ist der Ordner dieses Skills (der Ordner, in dem sich diese SKILL.md befindet). Wenn Ihre Umgebung ihn nicht ausfüllt, verwenden Sie den Pfad dieses Ordners. Speichern Sie alles im aktuellen Ordner des Benutzers oder in dem von ihm benannten Ordner.
0. Setup-Überprüfung
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check
Es dauert ein paar Sekunden; führen Sie es aus, wenn Sie nicht sicher sind, ob dieser Computer eingerichtet ist. "ready": true bedeutet loslegen. Andernfalls führen Sie die unter "fix" aufgeführten Befehle aus und teilen dem Benutzer mit, dass es sich um eine einmalige Installation handelt: python3 -m pip install playwright (der Browser-Treiber), python3 -m playwright install chromium (nur wenn Google Chrome oder Edge nicht installiert ist, ca. 150 MB) und python3 -m pip install imageio-ffmpeg (nur wenn ffmpeg fehlt). Wenn pip sich mit „externally managed environment“ weigert, erstellen Sie einmal eine private Umgebung und verwenden Sie deren Python für jeden Befehl: python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg, dann ~/.animate-skills/bin/python -m playwright install chromium falls nötig. Unter Windows verwenden Sie py statt python3. Kein Browser hier möglich (zum Beispiel die Sandbox der Claude-App)? Siehe das Ende dieser Datei.
1. Das Muster auswählen
| Muster | Zeigt | Gut geeignet für | Felder |
|---|---|---|---|
spread | Ein Punkt erreicht 2-4 andere, jeder davon erreicht mehr, Ring für Ring | Virale Ideen, Mundpropaganda, Kettenreaktionen, Empfehlungen, Dinge, die sich verdoppeln | branches (2-4, Standard 3), depth (2-5, Standard 4), sequence (optionale kurze Labels pro Ring, z. B. ["1","3","9","27","81"] oder ["$1k","$2k","$4k"], werden unter dem Titel in einer Zeile angezeigt, während jeder Ring aufleuchtet; ein paar Zeichen jeweils) |
flow | Nummerierte Formen in Reihenfolge, ein Punkt, der von jeder zur nächsten wandert, dann ein stetiger Strom | Wie etwas funktioniert, ein Prozess, eine Pipeline, ein Rezept | steps: 2-6 kurze Labels; shapes (die Formen sind Dekoration: ["circle"] macht alle zu Kreisen) |
cycle | Schritte in einer Schleife mit einem Punkt, der weiter umkreist | Wasserkreislauf, Gewohnheitsschleife, Feedback-Schleifen, Jahreszeiten, Schlafzyklen | steps: 3-6 kurze Labels; center: ein Wort in der Mitte |
converge | Viele Punkte, die in einen Kreis fließen, der wächst (oder "direction": "out": Ein Kreis sendet Punkte zu mehreren aus) | Wohin Ihre Aufmerksamkeit, Zeit oder Ihr Geld fließt; viele Eingaben in ein Ergebnis | sources: 2-6 Labels (optional); weights: wie viele Punkte jede bekommt; center: das Wort im Kreis; count: Punkte (Standard ~40) |
compare | Zwei oder drei Mengen nebeneinander, als Punkte (einer pro Einheit) oder als Kreise, die nach der Menge skaliert sind | „X vs Y“-Mengen: Zucker, Kosten, Zeit, Kalorien | groups: [{"label": "...", "value": n, "unit": "..."}]; highlight: Index desjenigen, der farbig sein soll |
Wenn keines gut passt, verwenden Sie das nächste und sagen Sie dies in einer Zeile; erzwingen Sie kein irreführendes Bild. Ein Muster zeigt die Form einer Idee; die takeaway-Zeile sagt den Punkt in Worten. Ideen über zwei Kräfte, die sich ausgleichen (Angebot und Nachfrage, Work-Life-Balance), haben kein eigenes Muster: Zeigen Sie die Schleife, die sie ausgleicht, als cycle, oder sagen Sie dies.
2. Die Spezifikation schreiben
Speichern Sie minimal-<thema>.json:
{
"title": "Wie eine Idee viral geht",
"pattern": "spread",
"branches": 3,
"depth": 4,
"takeaway": "Jede Person erzählt es drei weiteren",
"theme": "coral"
}
Häufige Felder: title (die Idee als kurze Überschrift oder Frage, bis zu ~40 Zeichen), subtitle (optionale kleine Zeile unter dem Titel), takeaway (der einzeilige Punkt; erscheint unter dem Titel, wenn die Animation endet, und lange werden verkleinert, um zu passen), theme (coral Standard, ink schwarz, paper cremefarben, blue, mint), size ("1080x1920" Standard, "1080x1080", "1920x1080"), duration (Sekunden; Standard 5-6, mehr mit einem Takeaway; ein längerer hält nur das Ende länger), speed (0.7 = alles 30 % langsamer, 1.3 = schneller), fps (Standard 30).
Schreibregeln:
- Labels sind winzig: bis zu 4 Wörter pro Label (Sequenz-Labels: ein paar Zeichen). Kein Jargon.
- Zahlen müssen stimmen. Wenn die Idee Zahlen erfordert, bei denen Sie sich nicht sicher sind, lassen Sie sie weg oder sagen Sie, dass sie illustrativ sind.
- Eine Idee pro Video. Wenn die Idee des Benutzers zwei Teile hat, machen Sie zwei Videos (zwei Spezifikationen).
Beispiele in examples/: idea-goes-viral.json, bill-becomes-law.json (flow), water-cycle.json (cycle), where-attention-goes.json (converge), soda-vs-apple.json (compare).
3. Zwei Frames prüfen
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<thema>.json --still 2 --out minimal-<thema>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<thema>.json --still end --out minimal-<thema>-check2.png
--still nimmt Sekunden oder end. Betrachten Sie sie: Sind die Labels lesbar und nicht abgeschnitten, sagt das Bild die Idee aus? Wenn nicht, anpassen und erneut prüfen.
4. Das Video rendern
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<thema>.json --out minimal-<thema>.mp4
Dauert etwa 10-25 Sekunden. Löschen Sie die Prüfbilder.
5. Ausliefern
Geben Sie dem Benutzer den Pfad des MP4 (zeigen Sie es an, wenn Ihre Umgebung Dateien anzeigen kann). Es hat keinen Ton, bereit für Musik oder einen Voiceover. Bieten Sie eine Variation an (ein anderes Muster oder Thema).
Kein Browser hier? (z. B. die Sandbox der Claude-App)
Wenn die Setup-Überprüfung keinen Browser zum Laufen bringt, schreiben Sie die Animation stattdessen als Seite: python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<thema>.json --html minimal-<thema>.html. Die Seite wird in jedem Browser abgespielt (zeigen Sie sie als Artefakt an, wenn möglich). Teilen Sie dem Benutzer mit, dass das MP4 Claude Code auf einem Computer oder eine Bildschirmaufnahme der Seite benötigt.