social-motion-agent – Bewegungs-Polish für UI-Frames

Motion UI Polish – Bewegungs-Polish für UI-Frames

Problem: Von einem Modell codierte Frames verraten sich sofort als maschinell erstellt – Indigo-Verlauf, vier gleich große Karten, ein Radius und ein flacher Schatten überall, winziger grauer Text, Emojis als Icons, ein farbiger Balken an einer Kartenseite. Dieses Skill entfernt diese Muster vor dem Rendern und misst, was messbar ist.

Das Projektverzeichnis liegt drei Ebenen über diesem Ordner. Quelltext der Doktrin: tools/repos/ux-ui-agent-skills (MIT, Snapshot in sources.lock.json). Lies nur die Teile, die eine Szene braucht.

Schritte

1. Kopiere templates/frame-tokens.css und templates/frame-starter.html in das source/-Verzeichnis des Jobs. Ändere nur den Marken-Block oben in den Tokens (Akzent, Oberflächen – Farben aus dem Produktions-Brand-Brief). Härte niemals Farbe, Größe oder Schatten direkt in einer Szene ein: Verwende die Variablen.
2. Baue die Szene aus Tokens auf. Bewegung ist eine reine Funktion der Zeit (window.seek(t), keine Timer, kein Math.random), wie es der Vertrag vstudio und die HTML-Renderer erwarten. Wähle Effekte mit dem Skill motion-effect-picker, nicht durch Raten.
3. Prüfe jede einzelne Szene in jedem Ausgabeformat zu einem Zeitpunkt, der das fertige Layout zeigt:

python -S studio.py polish output/jobs/ID/source/scene.html --format 9:16 --seek 4.2 --shot output/jobs/ID/previews/scene-916.png

Es schlägt fehl bei: Text außerhalb des Rahmens, überlappenden Texten, Text unterhalb der lesbaren Mindestgröße, Emojis und HIGH-Findings von slop_tells und taste_audit. Warnungen (außerhalb des sicheren Bereichs, schwache Hierarchie, abgeschnittener Text) erfordern eine Entscheidung, kein Ignorieren. 4. Öffne den Screenshot und betrachte ihn. Gates belegen messbare Korrektheit, nicht Geschmack. Führe dann die folgende adversarielle Checkliste aus und behebe, was ein strenger Designer ablehnen würde. 5. Erst dann rendern. Halte in der HANDOFF.md des Jobs fest, welche Szenen polish bestanden haben und zu welchem seek-Zeitpunkt.

Hausregeln für Videoframes

1. Eines führt. Display-Schrift mindestens 2,5× so groß wie die Grundschrift. Vier gleich große Karten lesen sich als generiert; gib einem Element mehr Größe oder eine eigene Zeile.
2. Echte Schriftgrößen-Skala (Tokens): Label 2,1, Grundschrift 2,8, Lead 3,6, Titel 6,4, Display 9, Hero 17 (cqmin, 1 cqmin = 1 % der kurzen Seite). Nichts unter 2 % der kurzen Seite. Zahlen verwenden .num (Tabellenziffern).
3. 4 px-Rhythmus (--sp-*). Zusammengehörige Elemente enger als nicht zusammengehörige.
4. Mehrere Radien und Schatten, jeder mit einer Rolle (Chip, Panel, Karte, Pille; --sh-1..3, zwei Ebenen pro Schatten). Niemals einen einzigen Radius und einen einzigen Schatten überall.
5. Vollständige dünne Ränder oder Oberflächenkontrast. Niemals einen Farbbalken an einer Seite einer Karte, eines Alerts oder eines Callouts. Status = Icon plus Wörter.
6. Farbe nach Bedeutung. Ein Akzent. „Gefahr“ nur für zerstörerische oder negative Inhalte. Kein hartcodierter Indigo-zu-Lila-Verlauf, kein reines #000 für Text oder Hintergrund (Tokens verwenden ein abgetöntes Fast-Schwarz).
7. Keine Emojis und keine dekorativen Piktogramme. Verwende Inline-SVG-Icons (currentColor) oder Wörter. Keine Gedankenstriche in Bildschirmtexten (Arbeitsbereichsregel).
8. Kontrast: Grundschrift 4,5:1, große Schrift 3:1. Eine Bildunterschrift über Videomaterial benötigt eine Scheibe oder eine Pille (.pill-caption), niemals bloßen Text.
9. Sichere Bereiche. 9:16 hält die oberen 17 % und unteren 30 % der Breite frei von Text (Plattform-UI), seitlich 5,6 %. 16:9 rundum 5,6 %. Die Tokens setzen --safe-*; das Gate prüft es.
10. Haltezeiten. Ein Textblock bleibt mindestens 0,5 s plus 0,3 s pro Wort in Ruhe, bevor er verschwindet. Eingänge 0,4 bis 0,7 s, schnell herein und weiche Landung (ease-out). Bewege nur transform und opacity.
11. Extremdaten: Lange Namen, 0, 100 %, viele Elemente. Eine Szene darf daran nicht zerbrechen; teste einen Extremfall.

Adversarielle Checkliste (vor der Freigabe)

• Deckt die Überschrift ab: landet das Auge trotzdem irgendwo oder auf nichts?
• Gibt es ein Element, das nur Dekoration ist? Entferne es.
• Mit zusammengekniffenen Augen: Gibt es zwei konkurrierende Blickfänge?
• Wird irgendeine Zahl ohne Einheit, Quelle oder Vergleich gezeigt?
• Würde die Szene mit einem anderen Markennamen genauso aussehen? Dann hat sie keine Richtung: Nimm eine Ästhetik aus tools/repos/ux-ui-agent-skills/taste/aesthetic-systems.md oder eine Spezifikation in design-systems/library/<name>/DESIGN.md (insgesamt 138) und löse sie im Token-Block auf.

Tiefergehende Referenzen (bei Bedarf laden)

Bedarf	Datei unter tools/repos/ux-ui-agent-skills/
Anti-Slop-Doktrin, verbotene Standardwerte	taste/design-taste.md
Bewegungsgrammatik (Eingänge, Staffelung, Hover)	taste/motion-choreography.md
Diagramme und datendichte Bildschirme	components/data-viz.md, tokens/data-viz.json, examples/terminal/
Paletten, OKLCH-Skalen, Dark Mode	.claude/rules/tokens-and-color.md
UI-Texte, Labels, Leerzustände	content/voice-tone.md
Bewertungsrubrik mit Punktevergabe	workflows/design-review.md, .claude/agents/design-critic.md
Ein benannter Look (Stripe, Linear, Apple…)	design-systems/library/ + taste/aesthetic-systems.md

Führe vorgelagerte Gates nur bei Bedarf direkt aus (aus diesem Ordner, DS_REQUIRE_BROWSER=1, system-Chrome): node scripts/slop_tells.mjs <file>, node scripts/taste_audit.mjs <file>, node scripts/measure_render.mjs <file> (WCAG-Kontrast auf dem echten Render). Ihre Ergebnisse sind Heuristiken: ein starkes Signal, kein endgültiges Urteil. Bearbeite den vorgelagerten Checkout nicht.