Animated flow diagram
Erstellt eine 20–30 s animierte Erklärung eines Prozesses. Zwei Dinge sind in dieser Reihenfolge am wichtigsten:
- Jedes Thema bekommt sein eigenes Design. Layout, Knotenformen, Verbinder, der "Beantworter", Auslesungen, Farbpalette und Bewegungsabläufe werden für das Thema gewählt. Zwei Filme dürfen nie wie dieselbe Vorlage mit neuen Beschriftungen aussehen – der Nutzer hat genau das abgelehnt ("每一份流程看起來都會一模一樣"). Erstelle vor dem Bauen einen einseitigen Designbrief und prüfe ihn gegen die vorherigen Filme in dieser Konversation (und die beiden Beispiele hier); ändere mindestens vier der Variationsachsen in
references/design-directions.md. - Standardmäßig professionell und technisch. Das Grundregister ist eine polierte Tech-/Produkt-Anmutung (Konsolen, Architekturdiagramme, Dashboards, Blaupausen, sauberes Produkt-UI). Warme, illustrierte oder verspielte Looks nur, wenn das Thema klar informell ist (ein Rezept, ein Familienplan) oder der Nutzer danach fragt.
Konstant über alle Filme hinweg bleibt die Animationsgrammatik, nicht das Aussehen: Geschwindigkeitssteuerung (schnelle Sprünge, ein langsamer Engpass, spätere Prüfungen schneller als die erste), Daten, die hin- und hergehen (Frage raus → Beantworter arbeitet → Antwort zurück), eine Rückkopplungsschleife, Dinge, die sichtbar irgendwo geschrieben werden, und ein Endhalte mit einer Zusammenfassungszeile. Keine Papierseite, keine Textabsätze unter dem Diagramm.
Arbeitsablauf
1. Prozess modellieren (still; frage nur, wenn etwas Wesentliches fehlt)
Klassifiziere jeden Schritt: Arbeit (jemand/etwas erledigt eine Aufgabe; Verweildauer ∝ reale Mühe), Engpass (die langsamste Arbeit), Prüfung (kleiner Antwortraum: Punktzahl / Ja-Nein / Auswahl), Beantworter (wer entscheidet Prüfungen: Regel-Engine, Policy-Datei, Prüfer, Modell, Koch), Speicher (wo Ergebnisse geschrieben werden), Akteure (wer führt jeden Schritt aus). Finde eine Rückkopplungsschleife und den Endzustand. Verwende die eigenen Begriffe des Nutzers. Nicht vom Nutzer angegebene Zahlen werden auf dem Bildschirm als 示意 / illustrativ gekennzeichnet; echte Zahlen aus ihrem Material (Schwellenwerte, Zählwerte, Exit-Codes) sind die besten Auslesungen.
2. Designbrief schreiben
Lies references/design-directions.md. Wähle eine Richtung, die zum Thema und Publikum passt, und entscheide dann jede Achse: Layout-Grammatik, Stationenformen, Verbinder-Stil, wie der Beantworter aussieht und leuchtet, Paket/Token-Formen, Auslese-Panels, Farbpalette (4 Farben), Schrift, Hintergrundbehandlung, Bewegungsmarkenzeichen. Sage den Brief in einer Zeile im Chat ("主控台風：深藍格線、直角匯流排、右側規則面板…") und los – warte nicht auf Zustimmung.
3. Layout und Kollisionsprüfung
Verwende references/design-rules.md (Geometrie, Kollisionsprüfungen, Timing, Rundlauf-Phasen, Auslesungen). Standard 16:9 1920×1080 bei 30 fps; 9:16, wenn der Nutzer Reels/Shorts möchte.
4. Bauen
Wenn das Artifact-Tool einen Motion-Typ (Animation/Video) auflistet – bevorzugt (abspielbar, scrubbar, exportierbar als MP4/GIF): folge den eigenen Anweisungen dieses Typs für seine Dateien und die Reihenfolge der Schreiboperationen. Eine durchgehende Szene. Lege das Modell, den Pfad und das Markup in shared.js, die Bewegung in scene-<id>.js und eine Partitur, die den Pfad spiegelt, in score.js. Zwei fertige Filme sind in references/ – entleihe Mechanismen (Route-Timeline, posAt, Polyline-/Bezier-Helfer, Paket-Spuren, Terminal-Scroll, Messgeräte), niemals deren Komposition oder Farbpalette.
Schreibe Text auf dem Bildschirm als wörtliche Zeichen (keine \uXXXX-Escape-Sequenzen), damit der Nutzer Beschriftungen im Player neu tippen kann.
Andernfalls, schreibe die gleichen Dateien in einen Ordner und führe aus:
python scripts/build_player.py <ordner> <aus.html> --title "<titel>"
um eine einzige eigenständige HTML-Seite mit Play/Pause/Scrub zu erhalten; veröffentliche oder präsentiere sie. Mache einen Smoke-Test mit jsdom, wenn Node.js verfügbar ist (siehe references/example-kitchen/README.md).
5. Ausliefern
Link + eine Zeile zu Ton (startet stumm) + Exporte: Motion's Export speichert MP4 oder GIF (GIF ist stumm und bei 1080p groß; biete einen kürzeren Ausschnitt an). Falls du einen Beat zur Mechanik erfunden hast (z.B. eine Wiederholungsschleife, die die Quelle nicht beschreibt), sag das in einem Satz und biete an, es zu entfernen.
Dateien
references/design-directions.md— Richtungen, Variationsachsen, Paletten, die "Nicht wiederholen"-Prüfung. Zuerst lesen.references/design-rules.md— Geometrie, Kollisionsprüfungen, Choreografie/Timing, Rundläufe, Auslesungen.references/example-ops-console/— Tech-Richtung: dunkle Konsole, Service-Karten + Hex-Gates, orthogonale Busse, Speicherzylinder, Policy-Panel mit Regelreihen, Terminal-Log, Schwellenwert-Messgeräte (eine Wissensdatenbank-Pipeline).references/example-kitchen/— Informelle Richtung: warmes Papier, Zickzack-Bahnen, Ring aus Lichtern (ein Rezept). Seine README ordnet jede Datei dem zu, was geändert werden muss, und enthält den Smoke-Test.assets/player.html,scripts/build_player.py— eigenständiger Fallback-Player.