Cinematic Motion UI: Landingpages, die nicht nach KI aussehen

Kinematografisches Bewegungs-UI

Eine von einem Modell generierte Seite sieht normalerweise aus wie der Durchschnitt aller Seiten, die es gesehen hat: ein zentrierter Badge, eine fette Inter-Überschrift, ein lila-rosa Leuchten, zwei Buttons, drei Icon-Karten, alles blende mit der gleichen Geschwindigkeit ein. Nichts ist falsch und nichts wurde entschieden. Menschen erkennen diesen Durchschnitt sofort, und diese Erkennung ist das, was „sieht aus wie KI-gemacht“ bedeutet.

Galerie-würdige Seiten (die Art, die als Premium-Prompts auf motionsites.ai verkauft werden) unterscheiden sich in vier Punkten, und dieser Skill baut darauf auf:

1. Eine starke visuelle Idee trägt die Seite. Ein kinematografisches Bild oder Video, ein riesiges Wort, ein Charakter, ein generatives Feld. Das UI dient dieser Idee, anstatt mit ihr zu konkurrieren.
2. Typografie mit Kontrast und Sorgfalt. Eine Typografie-Entscheidung, die zu dieser Marke gehört (ein Mega-Wordmark, eine kondensierte Grotesk in großem Maßstab, eine kontrastreiche Serifenschrift allein, Mono als Stimme), negatives Tracking, das mit der Größe skaliert, Zeilenhöhe unter 1,15 bei Auszeichnungsschriften und gelegentlich Buchstaben-für-Buchstaben angepasstes Kerning.
3. Choreografierte Bewegung. Jedes Element erhält seinen eigenen Eintrittstyp und seine eigene Verzögerung, mit einer einzigen Easing-Familie, sodass die Seite zusammengesetzt wird, anstatt einzublenden. Die Seite ist auch ohne Animation vollständig und lesbar.
4. Überall spezifische Werte. Exaktes Hex, exaktes px, exaktes Easing, exakter Text. Unschärfe ist der Weg, wie Standardwerte (und der KI-Look) einsickern. MotionSites-Prompts sind 15-40 KB exakte Werte für einen Bildschirm. Diese Präzision ist das Produkt.

Der Ablauf

Arbeiten Sie diese Schritte der Reihe nach ab. Die Schritte 1–2 sind Denkarbeit auf Papier und dauern ein paar Minuten; das Überspringen ist der häufigste Grund, warum die Ausgabe zum Durchschnitt zurückkehrt.

1. Richtungskarte

Lesen Sie das Projekt (bestehende Marke, Schriften, Farben, Texte, Assets) und das kurze Benutzer-Briefing. Schreiben Sie dann eine kurze Richtungskarte in Ihre Antwort oder in eine Notizdatei, unter Verwendung von references/spec-template.md § Richtungskarte:

• Thema & Zielgruppe: für wen dies ist, in einem Satz, mit den eigenen Substantiven des Benutzers.
• Archetyp: Wählen Sie einen der sieben aus references/archetypes.md. Lesen Sie diese Datei jetzt; sie gibt die Komposition, Schriftart, Palette, Materialien und die charakteristische Bewegung jedes Archetyps an. Wenn der Benutzer eine Referenz nennt (eine Website, eine MotionSites-Vorlage), ordnen Sie sie dem nächsten Archetyp zu.
• Drei Stimmungswörter, die nicht „modern, sauber, elegant“ sind (diese beschreiben jede Seite).
• Palette: Hintergrund, Textfarbe, dezente Textfarbe, maximal eine Akzentfarbe. Nennen Sie Hex-Werte.
• Schriftpaar: aus references/typography.md. Notieren Sie die Rolle jeder Schriftart.
• Bewegungen, die ich nicht verwende: Nennen Sie mindestens zwei der „geschmackvollen KI“-Standardwerte aus references/anti-ai-tells.md § Übertragene Anzeichen, die diese Seite vermeiden wird, und was sie ersetzt. Galerie-Prompts wurden so weit kopiert, dass ihr eigenes Rezept jetzt ein verräterisches Zeichen ist.
• Charakteristischer Moment: die eine Sache, die jemand einem Freund beschreiben würde („die Titelbuchstaben steigen auf, während sich dünne Ringe um ihr Gesicht ziehen“). Wenn Sie es nicht benennen können, wird die Seite vergessbar sein.
• Medienplan: Was den Hero-Bereich füllt und woher es kommt (Schritt 3).

2. Spezifikation vor Code

Füllen Sie den Rest von references/spec-template.md aus: Tokens, Ebenenstapel, Markup-Reihenfolge, jede Komponente mit ihren Zuständen, die Bewegungstabelle (Element → Eintrittstyp → Verzögerung → Dauer) und die Breakpoint-Tabelle. Halten Sie es knapp. Es ist ein Arbeitsdokument, kein Fließtext. Dies ist der Schritt, der das Ergebnis präzise macht: Sobald Werte aufgeschrieben sind, setzen Sie Entscheidungen um, anstatt zu Standardwerten zu greifen.

Wenn der Benutzer nach einem Prompt oder einer Spezifikation (zum Einfügen in einen anderen Builder) und nicht nach Code gefragt hat, ist die ausgefüllte Spezifikation das Ergebnis. Folgen Sie der Struktur in references/spec-template.md § Prompt-Formular.

3. Medien

Das Hero-Bild oder -Video erledigt den größten Teil der emotionalen Arbeit. Lesen Sie references/media.md, wählen Sie dann in dieser Reihenfolge:

1. Assets, die der Benutzer bereitgestellt hat oder die im Projekt existieren.
2. Ein generativer Hintergrund aus assets/backgrounds/ (Canvas-Partikelwelle, WebGL-Shader-Feld, gezeichnete SVG-Ringe), abgestimmt auf die Palette. Dies sind echte Bewegungen, keine Platzhalter.
3. Ein gestalteter Medienslot: ein gestylter Fallback (Gradientenfeld oder generative Schicht) plus ein gebrauchsfertiger Generierungs-Prompt für das Bild oder Video in einem Kommentar und in Ihrem Bericht, damit der Benutzer die Datei ablegen kann.

Verlinken Sie niemals zufällige Stock-Bilder (picsum, source.unsplash.com, Platzhalterdienste) und hinterlassen Sie niemals graue Boxen. Beides ist der schnellste Weg, um unfertig auszusehen.

4. Bauen

• Single-Datei HTML (Standard, wenn es kein Projekt gibt): Starten Sie mit assets/starter.src.html. Es ist die Infrastruktur (Ebenenstapel, Bewegungs-Kit, Sicherheitsmaßnahmen, reduzierte-Bewegung-Behandlung, mobiles Menü, Körnung), nicht das Aussehen. Gestalten Sie es für den gewählten Archetyp um und setzen Sie es neu zusammen. Behalten Sie die Platzhalter /*@@MOTION_KIT_CSS@@*/, /*@@MOTION_KIT_JS@@*/ und /*@@BG:name@@*/ in Ihrem Quellcode und erstellen Sie die endgültige Datei mit python3 <skill>/scripts/inline_kit.py page.src.html index.html, die das Kit und die Hintergründe genau einfügt, anstatt dass Sie sie neu eintippen. (assets/starter.html ist der gleiche Starter, bereits eingefügt, zum Lesen.) Die Seiten in examples/ zeigen die Qualitätslatte. In Blindbewertungen wurden sie als weniger KI-aussehend bewertet als die Galerievorlagen, von denen sie gelernt haben: cinematic-bay-hero.html (A: Holzlamellen öffnen sich zu einer nebligen Bucht), dark-code-review-hero.html (B: Der eigene Diff des Produkts ist das Bild, kein Akzentwort-Klischee), light-window-hero.html (Light A/C Hybrid: Morgensonne, die in Echtzeit über eine Wand wandert). Überfliegen Sie diejenige, die Ihrem Briefing am nächsten kommt, um das Detailniveau und die Art und Weise zu sehen, wie ein Konzept Bild, Schrift und Bewegung verbindet. Kopieren Sie nicht deren Komposition, Look oder Palette: Jedes Briefing verdient seine eigene Idee.
• React / Next / Tailwind / Framer Motion: Lesen Sie references/react-port.md. Halten Sie Eintrittsanimationen in CSS-Keyframes, sodass serverseitig gerendertes HTML ohne Hydrierung sichtbar ist, und verwenden Sie Framer Motion für scroll- und interaktionsgebundene Bewegungen.
• Bewegungsdetails: references/motion.md. Oberflächen: references/materials.md. Responsiv: references/responsive.md.
• Inline-SVG für jedes Icon und das Logo-Zeichen, gezeichnet für diese Marke. Icon-Fonts und Stock-Icon-Sets in Feature-Reihen sind ein starkes Vorlagen-Signal.

5. Text

Der Text ist die Hälfte des Grundes, warum Seiten wie KI wirken. Regeln:

• Verwenden Sie die konkreten Substantive und Verben des Themas („Trainieren Sie Agenten auf Ihren eigenen Runbooks“, „Resorts, die von der Gezeitenlinie gezeichnet wurden“) anstelle von Kategorieabstraktionen („Entfesseln Sie die Kraft der KI“).
• Überschriften sind 4–9 Wörter, die absichtlich auf zwei Zeilen aufgeteilt sind; der Zeilenumbruch ist Teil des Designs.
• Keine erfundenen Beweise. Kundenlogos, Erfahrungsberichte, Bewertungen und Geschäftsstatistiken müssen vom Benutzer kommen. Wenn die Komposition eine Statistiken-Reihe benötigt und Sie keine echten Zahlen haben, verwenden Sie entweder nicht-behauptende Fakten (Standort, Gründungsjahr, Anzahl der angebotenen Dienstleistungen, Öffnungszeiten) oder markieren Sie sie in Code-Kommentaren und in Ihrem Bericht deutlich als Platzhalter.
• Schreiben Sie in der Sprache des Benutzers, wenn die Seite für seinen Markt bestimmt ist. Vietnamesische Texte benötigen eine Schriftart mit vollständiger vietnamesischer Glyphenabdeckung (überprüfen Sie references/typography.md).
• Vermeiden Sie die Phrasen, die in references/anti-ai-tells.md § Text aufgeführt sind. scripts/audit.py markiert sie.

6. Überprüfen. Schauen Sie es an, dann reparieren Sie es.

Das Bestehen von Prüfungen ist nicht dasselbe wie gut auszusehen, aber das Nichtbestehen garantiert, dass es das nicht tut.

1. Führen Sie die statische Prüfung aus: python3 <skill>/scripts/audit.py <datei-oder-verzeichnis>. Beheben Sie jeden HIGH; beheben Sie jeden MEDIUM oder akzeptieren Sie ihn bewusst.
2. Öffnen Sie die Seite in einem echten Browser (eingebauter Browser-Bereich, Playwright oder Chrome, je nachdem, was verfügbar ist). Warten Sie ~3 s, bis der Eintritt abgeschlossen ist, und führen Sie dann das Snippet in scripts/runtime_check.js über die JS-Auswertung des Browsers aus. Es meldet Text, der verborgen bleibt, horizontalen Überlauf, Text, der durch eine Ein-Bildschirm-Sperre abgeschnitten wird, defekte Medien, Schriften, die nicht geladen wurden, kleine Touch-Ziele und Elemente, die noch Animationen ausführen. Lesen Sie auch die Konsole auf Fehler. Ein verborgener oder im Hintergrund befindlicher Browser-Tab rendert keine Frames, daher bleiben CSS/WAAPI-Zeitpläne und requestAnimationFrame-Schleifen stehen und die Seite kann in Screenshots leer oder halb aufgebaut aussehen. Bevor Sie urteilen, machen Sie ein oder zwei Screenshots (jeder rendert Frames) oder führen Sie document.getAnimations().forEach(a => { try { a.finish() } catch (e) {} }) aus und überprüfen Sie dann erneut. Entfernen Sie außerdem jedes <script> aus einer Kopie der Seite und laden Sie sie einmal: Der gesamte Text muss noch sichtbar sein und das Layout intakt.
3. Screenshot bei 1440×900, 1280×720 (kurzes Laptop: der häufigste Ort, an dem Heroes brechen) und 375×812. Wenn die Seite ein mobiles Menü hat, öffnen Sie es und machen Sie auch einen Screenshot davon.
4. Betrachten Sie jeden Screenshot und stellen Sie die Fragen in references/anti-ai-tells.md § Der Blinzeltest. Beheben Sie, was nicht bestanden wird. Führen Sie mindestens eine Reparatur-und-Prüf-Runde durch, auch wenn der erste Durchlauf gut aussieht.
5. Wenn Sie überhaupt keinen Browser öffnen können, sagen Sie dies im Bericht. Behaupten Sie keine visuelle Überprüfung, die Sie nicht durchgeführt haben.

7. Bericht

Teilen Sie dem Benutzer kurz mit: die Richtung (Archetyp, charakteristischer Moment, Schriftpaar), was Platzhalter ist (Medien, Statistiken, Links) und wie genau es ersetzt werden kann, und was Sie in welchen Größen überprüft haben.

Gesetze, die für alle Archetypen gelten

Komposition

• Der Hero-Bereich ist auf dem Desktop ein Viewport (100dvh, kein Scrollen innerhalb des Heroes), es sei denn, das Briefing ist eine lange Landing Page. Der Inhalt ist am unteren Rand oder an den Ecken verankert, nicht in der exakten Mitte. Der obere Teil gehört zu den Medien.
• Ebenenstapel, von hinten nach vorne: Hintergrundfarbe → Medien → Scrim → Seiteninhalt → Körnung. Der Scrim ist auf die Medien abgestimmt (eine radiale Abdunkelung hinter dem Text, ein oberer Farbverlauf hinter der Navigation), sodass Text lesbar bleibt, ohne in einer Karte eingerahmt zu werden.
• Maximal zwei Call-to-Actions im Hero: einer primär, einer sekundär oder aus Glas. Niemals drei.
• Der „Badge-Pille über der Überschrift“ und die „drei Statistiken in einer Reihe unten“ sind jetzt Vorlagenmöbel. Verwenden Sie sie nur, wenn der Inhalt wirklich ein kurzes Label oder drei echte Zahlen ist, und selbst dann ändern Sie die Form (eine einzelne Tatsache, eine kleine Tabelle, Ecktext, eine Zeitleiste).
• Verwenden Sie ein Radius-System pro Archetyp (scharf 0–7 px für Technik und Redaktion, Pillen für weich und Verbraucher) und bleiben Sie dabei. Einheitliches rounded-2xl für alles ist ein Markenzeichen von Vorlagen.

Typografie

• Auszeichnungsgrößen: Tracking von −0.03em bis −0.05em, Zeilenhöhe 0.9–1.12. Kapitälchen und Mono-Mikrotexte: Tracking von +0.04em bis +0.12em, Großbuchstaben, 11–14 px.
• Maximal ein Hervorhebungsmittel pro Überschrift, ausgewählt aus dem Briefing. Das Serifen-Kursiv-Wort in einer serifenlosen Überschrift („Trainieren Sie KI-Agenten auf…“) ist das am meisten erkennbare „geschmackvolle KI“-Tick von 2025–26: Blindprüfer erkennen es auf den ersten Blick. Verwenden Sie es nicht standardmäßig. Bevorzugen Sie Größen- oder Gewichtskontrast, einen bewussten Zeilenumbruch, Farbe, eine gezeichnete Markierung, die mit dem Konzept verbunden ist (die Welle von einem diakritischen Zeichen, ein Rotstift-Kringel unter einem Bug), oder gar keine Hervorhebung. Wenn eine kursive Serife wirklich die Stimme der Marke ist, setzen Sie die gesamte Zeile darin, nicht nur ein Wort.

Bewegung

• Eine Easing-Familie (cubic-bezier(.16,1,.3,1) expo-out standardmäßig). Eintritte dauern 0.6–1.35 s und sind von etwa 0.1 s bis etwa 1.5 s insgesamt gestaffelt, in Lesereihenfolge. Jeder Elementtyp erhält einen eigenen Eintritt (Maskenaufstieg für Überschriften, Skalierung für Nav-Pillen, Wischen für Buttons, Aufstieg für Statistiken).
• Der Inhalt ist im Ruhezustand sichtbar. Der verborgene Zustand existiert nur im 0%-Keyframe mit animation-fill-mode: both, plus einem JS-Sicherheitsmechanismus. Eine Seite, die leer bleibt, wenn JS oder Animationen fehlschlagen, ist defekt, egal wie gut sie auf dem Happy Path aussieht.
• Umgebungsbewegungen (Video, Partikel, Shader) leben in der Medieneebene. Das Vordergrund-UI ist nach seinem Eintritt ruhig, abgesehen von Hover-Feedback (0.2–0.35 s) und optionalen scrollgebundenen Effekten.
• Beachten Sie prefers-reduced-motion: kein Eintritt, keine Umgebungsschleife (stattdessen ein einzelnes Standbild rendern).

Materialien

• Glas und Metall sind für ein oder zwei Bedienelemente gedacht, die über Medien schweben, nicht für jede Karte. Rezepte befinden sich in references/materials.md.
• Fügen Sie Körnung (6–10 % Deckkraft) auf medienlastigen Seiten hinzu. Sie vereinheitlicht generierte Bilder mit dem UI.

Dateien in diesem Skill

Datei	Lesen wenn
references/archetypes.md	Schritt 1, immer
references/typography.md	Schritt 1, Auswahl des Schriftpaars
references/spec-template.md	Schritt 2, immer, plus das Prompt-Formular, wenn der Benutzer einen Prompt möchte
references/media.md	Schritt 3
references/motion.md	Schritt 4, Bewegungsdetails, Scrolleffekte, WAAPI-Zeitpläne
references/materials.md	Schritt 4, Buttons, Pillen, Glas, Metall, Verlaufstext
references/responsive.md	Schritt 4, Tokens, Breakpoints inklusive Höhe, Zeichenflächenskalierung, mobiles Menü
references/react-port.md	Projekt ist React, Next, Tailwind oder Framer Motion
references/anti-ai-tells.md	Schritte 5–6
assets/starter.html	Single-Datei-Builds
assets/motion-kit.css, assets/motion-kit.js	Jeder Build (einbetten oder importieren)
assets/backgrounds/*.js	Generative Medienebene
examples/*.html	Zur Kalibrierung der Qualitätslatte (drei Hero-Seiten)
scripts/audit.py	Statische KI-Erkennungs- und Robustheitsprüfung
scripts/runtime_check.js	Browser-interne Prüfungen nach dem Laden
scripts/inline_kit.py	Erstellen der endgültigen Einzeldatei aus einer Quelle mit Kit-/Hintergrund-Platzhaltern