/breakdown: Ihr Produkt, auseinandergenommen, jedes Teil beschriftet
Der Benutzer fügt ein Produktfoto bei und/oder nennt ein Produkt. Sie arbeiten heraus, woraus es besteht, beschreiben es als einfache 3D-Teile (Maße in Millimetern), überprüfen zwei Einzelbilder, rendern es, wie es sich dreht, auseinanderzieht und selbst beschriftet, und geben ein stummes MP4 zurück (ca. 6 Sekunden).
${CLAUDE_SKILL_DIR} unten ist der Ordner dieser Fertigkeit (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 genannten Ordner. Die 3D-Seite lädt three.js aus dem Internet, daher wird eine Verbindung benötigt.
0. Einrichtungsprüfung
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check
Dies dauert ein paar Sekunden; führen Sie es aus, wenn Sie nicht sicher sind, ob dieser Computer eingerichtet ist. "ready": true bedeutet los. Führen Sie andernfalls die unter "fix" aufgeführten Befehle aus und teilen Sie 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 einmalig 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 ggf. ~/.animate-skills/bin/python -m playwright install chromium. Unter Windows verwenden Sie py anstelle von python3. Kein Browser möglich hier (z. B. die Sandbox der Claude-App)? Siehe Ende dieser Datei.
1. Produkt ermitteln
- Aus dem Foto: Gesamtform, Proportionen, Farben und Oberflächen (glänzendes Glas, gebürstetes Metall, matter Kunststoff, Stoff) und die Anordnung sichtbarer Details (Kamerlinsen, Tasten, Anschlüsse). Keine Markenlogos reproduzieren.
- Seine realen Hauptteile, in Montagereihenfolge von einer Seite zur anderen: 5–9 Teile, die eine Beschriftung wert sind (Abdeckung, Bildschirm, Rahmen, Akku, Platine, Chip, Lautsprecher, Treiber, Polster...). Verwenden Sie, was diese Art von Produkt wirklich enthält; wenn Sie sich bei einem bestimmten Modell unsicher sind, verwenden Sie die Teile, die seine Kategorie immer hat, und erfinden Sie keine exotischen.
- Der Bausatz baut Produkte aus einfachen Formen, daher glänzt er bei Dingen aus Schichten und harten Teilen (Handys, Tastaturen, Kopfhörer, Lautsprecher, Controller, Uhren, Kameras, Geräte). Weiche, organische Produkte (Schuhe, Kleidung, Lebensmittel) wirken spielzeughaft: Sagen Sie dies, wenn der Benutzer danach fragt.
- Realistische ungefähre Maße in mm (ein Handy ist ~72 x 150 mm und 8 mm dick; eine vollständige Tastatur ~440 x 130 mm).
2. Spezifikation schreiben
Speichern Sie breakdown-<produkt>.json. Jedes Teil ist eine einfache Form, die dort platziert wird, wo es im zusammengebauten Produkt sitzt; level gibt an, wie weit es sich bewegt, wenn das Produkt auseinanderkommt (0 bleibt, 1 bewegt sich einen Schritt, 2 zwei Schritte; Teile mit demselben Level bewegen sich zusammen; Hälften wie 3.5 funktionieren, und negative Level bewegen sich in die andere Richtung). Beispiel (examples/smartphone.json, verkürzt):
{
"title": "Innenleben eines Smartphones",
"theme": "dark",
"parts": [
{"name": "Abdeckglas", "shape": "slab", "size": [72, 0.7, 150], "radius": 10.5, "material": "glass", "y": 0, "level": 0},
{"name": "Display", "shape": "slab", "size": [69, 0.7, 147], "radius": 9, "material": "black", "color": "#232428", "y": 0.8, "level": 1},
{"name": "Rahmen", "shape": "frame", "size": [72, 7.4, 150], "radius": 10.5, "wall": 2.5, "material": "aluminum", "y": 0.9, "level": 2},
{"name": "Akku", "shape": "slab", "size": [62, 4, 86], "radius": 5, "material": "battery", "text": "Li-Ion|5.000 mAh", "pos": [0, 2, 24], "level": 3},
{"name": "Hauptplatine", "shape": "slab", "size": [62, 1, 44], "radius": 4, "material": "pcb", "pos": [0, 2, -48], "level": 3},
{"name": "Kameras", "shape": "lens", "radius": 4.6, "size": [9.2, 4.2, 9.2], "copies": [[-23.2, -62.2], [-23.2, -45.5], [-8, -53.8]], "y": 6.6, "level": 4},
{"name": "Rückabdeckung", "shape": "slab", "size": [72, 0.9, 150], "radius": 10.5, "material": "glass-tint", "color": "#3d5571", "y": 8.4, "level": 5}
]
}
Koordinaten: size ist [Breite x, Höhe y, Tiefe z] in mm; y ist oben. pos: [x, y, z] (oder nur "y") gibt an, wo sich die untere Mitte des Teils im zusammengebauten Produkt befindet. Teile können sich leicht überlappen; das ist in Ordnung.
Formen: slab (abgerundete rechteckige Platte; radius = Eckenradius), frame (eine Platte mit einem Loch; wall-Dicke), box (scharfe Ecken), cylinder/disc (radius, Höhe = size[1]), ring (radius, inner), lens (eine Kameralinse mit ihrem Metallring), sphere (skaliert mit size), capsule, cone (radiusTop), torus/cushion (radius, tube; liegt flach mit dem Loch nach oben: Ohrpolster, O-Ringe, Reifen), band (radius, tube, arc: ein aufrechter Bogen über der Oberseite: Kopfbügel, Griffe, Bügel einer Kanne), tube (ein Stab von from: [x, y, z] nach to: [x, y, z], mit radius und optionalem radiusTo: Rahmenrohre, Stuhl- und Tischbeine, Streben, Trinkhalme), lathe (profile: [[radius, y], ...] um die vertikale Achse gedreht: Flaschen, Becher, Knöpfe, Lautsprechermembranen, Kuppeln; beide Seiten werden gezeichnet, daher spielt die Punktreihenfolge keine Rolle). arc (Grad, Standard 360) macht einen teilweisen ring, torus, band oder lathe (es beginnt auf der +x-Seite; drehen Sie es mit rot). spokes: n auf einem ring oder torus fügt n Speichen und eine Nabe hinzu (Räder, Lüfter). stretch: [x, y, z] skaliert ein Teil (ein ovales Kissen: [0.85, 1, 1.15]). rot: [x, y, z] Grad dreht ein Teil um seine untere Mitte ([90, 0, 0] stellt einen Zylinder auf die Seite, [0, 90, 0] dreht eine Platte, sodass ihr gedruckter Text auf der anderen Seite gelesen wird).
Wiederholungen: copies: [[x, z], ...] (oder [x, y, z]) platziert dasselbe Teil mehrmals (Kameras, Schrauben, Tasten); eine Kopie kann auch {"pos": [x, y, z], "rot": [x, y, z]} sein, um jede zu drehen (linke und rechte Ohrmuschel nach außen zeigend). grid: {"nx": 14, "nz": 5, "pitch": 19} legt ein Raster an (Tastenkappen, Zellen, LEDs). Der Beschriftungspunkt erscheint auf der ersten Kopie.
Materialien: glass (klar), glass-tint (farbiges Glas), aluminum, steel, gold, copper, black, white, plastic (beliebige color), ceramic, rubber, foam, fabric (Mesh-Gitter), wood, leather, pcb (grüne Leiterplatte), chip, battery (dunkle Zelle; text wird darauf gedruckt, | für neue Zeilen), coil (kupferne Wireless-Charging-Spule), lens, screen (ein beleuchtetes Display), magnet, emissive (glüht). color (hex) färbt die meisten von ihnen. text druckt eine Beschriftung auf die Oberseite einer Platte. Die Studiobeleuchtung hellt die Farben etwas auf: Vergleichen Sie das erste Prüfbild mit dem Foto und verdunkeln Sie die color, wenn sie ausgewaschen aussieht. Für dunkles Metall verwenden Sie steel oder black (aluminum ist für Silbertöne), und für ein überwiegend schwarzes Produkt verwenden Sie das helle Thema, damit seine Teile nicht im dunklen Hintergrund verschwinden.
Das Foto des Benutzers: Verwenden Sie es, um die Form, Farben und Anordnung richtig hinzubekommen. Wenn es eine flache Seite direkt von vorne zeigt (die Rückseite oder den Bildschirm eines Handys, eine Karte, einen Deckel), können Sie es auch auf dieses Teil abbilden: "photo": "pfad/zu/foto.jpg" auf der obersten Ebene, dann "texture": "photo" auf dem Teil, mit "crop": [x0, y0, x1, y1] (0–1 Bruchteile des Fotos) um diese Fläche. Für ein schräges oder perspektivisches Foto verwenden Sie nur Farben und Anordnung.
Beschriftungen: Jedes Teil wird mit seinem name beschriftet (halten Sie Namen kurz: bis zu ~14 Zeichen bleiben in voller Größe); "label": "Anderer Text" ändert ihn, "label": false verbirgt ihn (verwenden Sie dies für kleine Dekorationsteile, sodass nur 5–9 Beschriftungen sichtbar sind).
Die Ansicht: Das Produkt dreht sich auf einem Drehteller: Sein Winkel im Bogenmaß ist spin - spinSpeed × Sekunden (Standard 0.95 und 0.07, sodass es ungefähr in einer Dreiviertelansicht endet). Winkel 0 blickt direkt auf die +z-Seite des Produkts; positive Winkel drehen es so, dass Sie mehr von seiner −x-Seite sehen (1.57 blickt auf das −x-Ende). Für lange, flache Dinge, bei denen sich Teile gegenseitig verbergen, enden Sie seitlich: z. B. "spin": 1.9, "spinSpeed": 0.06. elevation0/elevation1 ist die Kamerahöhe in Grad (38 → 24 standardmäßig). zoom (Standard 1, z. B. 1.2) vergrößert das Produkt, wenn es klein aussieht. Lange oder breite Produkte (ein Fahrrad, ein Sofa, ein flach liegender Schuh) kommen in einem vertikalen Video klein heraus: Verwenden Sie "size": "1080x1080" oder "1920x1080" oder zoom. Beschriftungen behalten eine Reihenfolge bei (die Reihenfolge der Teile in der endgültigen Explosionszeichnung).
Produkte, die kein Stapel sind (Kopfhörer, eine Kanne, ein Controller): Das Auseinanderziehen nach oben füllt ein vertikales Video am besten, also legen Sie das Produkt so, dass seine Schichten vertikal gestapelt sind. Bei Over-Ear-Kopfhörern legen Sie sie auf die Seite (die Achse der Muscheln aufrecht) und ziehen Sie die Schichten einer Muschel nach oben auseinander (Polster, Mesh, Treiber, Platine, Akku, Gehäuse), während der Bügel und die andere Muschel zusammengebaut bleiben; verwenden Sie explode: [x, y, z] pro Teil für die genaue Bewegung.
Weitere Felder: title (z. B. "Innenleben eines ..."), subtitle, theme (dark Standard, light), axis ("y" zieht nach oben auseinander, Standard; "x" oder "z" zieht seitlich auseinander, für lange dünne Dinge wie Stifte oder eine Flasche auf der Seite; seitlich kommt in einem vertikalen Rahmen kleiner heraus), gap (mm zwischen den Levels; Standard ~19% der Produktgröße), explode: [x, y, z] auf einem Teil (seine eigene Bewegung in mm, anstelle seines Levels), apartAt (Sekunden; Standard 1.5), size, duration (Standard ~6–7 s, ausreichend zum Lesen der Beschriftungen), fps. Ein zweites Beispiel: examples/mechanical-keyboard.json.
3. Zwei Einzelbilder prüfen
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<produkt>.json --still 0.5 --out breakdown-<produkt>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<produkt>.json --still end --out breakdown-<produkt>-check2.png
--still nimmt Sekunden oder end (fügen Sie ein drittes bei etwa 3,5 s hinzu, wenn die Beschriftungen ankommen, falls Teile nahe beieinander sitzen). Das erste ist das zusammengebaute Produkt: Sieht es aus wie das Produkt (Form, Proportionen, Farben)? Das zweite ist die Explosionszeichnung mit Beschriftungen: Teile in einer sinnvollen Reihenfolge, nichts versteckt in etwas anderem, der Punkt jeder Beschriftung auf ihrem Teil, Beschriftungen lesbar. Korrigieren Sie Größen, Positionen, Level oder die Ansicht und prüfen Sie erneut (zwei oder drei Runden sind normal).
4. Video rendern
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<produkt>.json --out breakdown-<produkt>.mp4
Etwa 10–20 Sekunden. Wenn ein 3D-Render schwarz wird, fügen Sie --no-gpu hinzu. 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. Sagen Sie in einem Satz, dass die Teile ein vereinfachtes Modell seines Produkts sind, und bieten Sie eine Variation an (das helle Thema, ein umbenanntes Teil).
Kein Browser hier? (z. B. die Sandbox der Claude-App)
Wenn die Einrichtungsprüfung keinen Browser zum Laufen bringen kann, schreiben Sie die Animation stattdessen als Seite: python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" breakdown-<produkt>.json --html breakdown-<produkt>.html. Die Seite läuft in jedem Browser (zeigen Sie sie als Artefakt an, wenn möglich). Sagen Sie dem Benutzer, dass das MP4 Claude Code auf einem Computer oder eine Bildschirmaufnahme der Seite benötigt.