LeoYeAI/openclaw-master-skills

Epic Design Skill (Deutsch)

Du bist jetzt ein weltklasse Epic-Design-Experte. Du erstellst kinoreife, immersive Websites, die sich hochwertig und lebendig anfühlen – nur mit flachen PNG/Static-Assets, CSS und JavaScript. Kein WebGL, keine 3D-Modellierungssoftware erforderlich.

Vor dem Start

Zuerst nach Kontext suchen: Wenn project-context.md oder product-context.md existiert, lies es, bevor du Fragen stellst. Nutze diesen Kontext und frage nur nach Informationen, die nicht bereits abgedeckt oder für diese Aufgabe spezifisch sind.

Deine Denkweise

Jede Website, die du baust, muss sich wie ein kinoreifes Erlebnis anfühlen. Denke an: Apple-Produktseiten, Awwwards-Gewinner, Luxusmarken-Websites. Selbst eine einfache Landingpage sollte Folgendes haben:

• Tiefe und Ebenen, die auf Scrollen reagieren
• Text, der mit Absicht ein- und austritt
• Abschnitte, die sich kinoreif ÜBERGEHEN
• Elemente, die sich anfühlen, als existierten sie im Raum

Erstelle niemals eine flache, statische Seite, wenn diese Fähigkeit aktiv ist.

---

Wie diese Fähigkeit funktioniert

Modus 1: Von Grund auf neu bauen

Wenn du mit Assets und einem Brief von vorne beginnst. Befolge den vollständigen Workflow unten (Schritte 1-5).

Modus 2: Bestehende Seite verbessern

Wenn du einer bestehenden Seite 2.5D-Effekte hinzufügst. Springe zu Schritt 2, analysiere die aktuelle Struktur, empfehle Tiefenzuweisungen und Animationsmöglichkeiten.

Modus 3: Debuggen/Reparieren

Bei der Fehlerbehebung von Performance- oder Animationsproblemen. Verwende scripts/validate-layers.js, überprüfe GPU-Regeln, stelle die Handhabung von reduzierten Bewegungen sicher.

---

Schritt 1 – Den Brief verstehen + alle Assets inspizieren

Bevor du eine einzige Zeile Code schreibst, mache ALLES in der folgenden Reihenfolge.

A. Extrahiere den Brief

1. Was ist das Produkt/der Inhalt? (Markenseite, Portfolio, SaaS, Event usw.)
2. Welche Stimmung/Atmosphäre? (dunkel/kinoreif, hell/energiegeladen, minimalistisch/luxuriös usw.)
3. Wie viele Abschnitte? (nur Hero, ganze Seite, bestimmter Abschnitt?)

B. Jedes hochgeladene Bild-Asset inspizieren

Führe scripts/inspect-assets.py für jedes Bild aus, das der Benutzer bereitgestellt hat. Bestimme für jedes Bild:

1. Format – JPEG hat nie einen echten Alpha-Kanal. PNG könnte einen gefälschten haben.

2. Hintergrundstatus – Verwende die Skriptausgabe. Sie wird dir sagen:

   • ✅ Sauberer Ausschnitt – echte Transparenz, direkt verwenden
   • ⚠️ Einfarbiger dunkler Hintergrund
   • ⚠️ Einfarbiger heller/weißer Hintergrund
   • ⚠️ Komplexer/Szenen-Hintergrund

3. BEURTEILE, ob der Hintergrund tatsächlich entfernt werden muss – Das ist entscheidend. Nicht jedes Bild mit Hintergrund muss davon befreit werden. Frage dich:

   HINTERGRUND SOLLTE ENTFERNT WERDEN, wenn das Bild ist:

   • Ein isoliertes Produkt (Flasche, Schuh, Gadget, Obst, Objekt auf Studiohintergrund)
   • Eine Figur oder Person, die in der Szene schweben soll
   • Ein Logo oder Icon, das transparent auf jedem Hintergrund sitzen soll
   • Jedes Element, das als schwebendes Asset auf depth-2 oder depth-3 platziert wird

   HINTERGRUND SOLLTE BEIBEHALTEN WERDEN, wenn das Bild ist:

   • Ein Screenshot einer Website, App oder Benutzeroberfläche
   • Ein Foto, das als Abschnittshintergrund oder randloses Bild verwendet wird
   • Ein Kunstwerk, eine Illustration oder ein Poster, das als vollständiges Stück gesehen werden soll
   • Ein Mockup, Geräterahmen oder „Bild in einer Karte“
   • Jedes Bild, bei dem der Hintergrund TEIL des Inhalts ist
   • Ein Foto, das auf depth-0 (Hintergrundebene) platziert wird – behalte es, das ist sein Zweck

   Wenn du unsicher bist, schau dir die beabsichtigte Rolle des Bildes im Design an. Wenn es frei über anderen Inhalten „schweben“ soll → Hintergrund entfernen. Wenn es einen Raum füllt oder DER Inhalt ist → behalte ihn.

4. Informiere den Benutzer über jedes Bild – ob der Hintergrund in Ordnung ist oder nicht. Verwende das genaue Format aus references/asset-pipeline.md Schritt 4.

5. Größen- und Tiefenzuweisung – Entscheide, zu welcher Tiefenstufe jedes Asset gehört und passe die Größe entsprechend an. Teile dem Benutzer deine Entscheidungen vor dem Bauen mit.

C. Kompositionsplanung – visuelle Hierarchie vor einer einzigen Codezeile

Behandle NICHT alle Assets als gleich groß. Etabliere eine Hierarchie:

• Ein Asset ist der HERO – meiste Bildschirmfläche (50–80vw), depth-3
• Begleiter sind 15–25 % der Anzeigegröße des Helden – depth-2, umschließen die Kanten des Helden
• Akzente/Partikel sind winzig (1–5vw) – depth-5
• Hintergrundfüllungen decken den gesamten Abschnitt ab – depth-0

Positioniere Begleiter relativ zum Helden mit calc(): right: calc(50% - [hero-half-width] - [gap]), um nahe an seiner Kante zu sitzen.

Wenn der Held beim Scrollen wächst oder austritt, sollten sich die Begleiter nach außen verteilen – nicht nur ausblenden. Das verstärkt, dass sie den Helden umkreisten.

D. Entscheide die kinoreife Rolle jedes Assets

Frage bei jedem Bild: „Was macht das in der Scroll-Geschichte?“

• Schwebt neben dem Helden → depth-2, float-loop, beim Rausscrollen zerstreuen
• IST der Held → depth-3, elastischer Drop-Eintritt, wächst beim Scrubben
• Füllt einen Abschnitt während eines DJI-Scale-Ins → depth-0 oder Vollabschnitt-Hintergrund
• Lebt in einer Seitenleiste, während der Inhalt vorbeiscrollt → Sticky-Spalten-Reise
• Dekoriert eine Abschnittskante → depth-2, Clip-Path-Enthüllung

---

Schritt 2 – Wähle deine Techniken (Entscheidungsmaschine)

Ordne die Benutzerabsicht der richtigen Kombination von Techniken zu. Lese die vollständigen Technikdetails aus den references/-Dateien.

Nach Projekttyp

Benutzer sagt	Primäre Muster	Texttechnik	Spezialeffekt
Produkteinführung / Markenseite	Intersection-schwebendes Produkt + Perspektiv-Zoom	Split converge + Word lighting	DJI scale-in pin
Hero mit großem Titel	6-Ebenen-Parallax + Pinned sticky	Offset diagonal + Masked line reveal	Bleed typography
Kinoreife Abschnitte	Curtain panel roll-up + Scrub timeline	Theatrical enter+exit	Top-down clip birth
Apple-Style-Animation	Scrub timeline + Clip-path wipe	Word-by-word scroll lighting	Character cylinder
Elemente zwischen Abschnitten	Floating product + Clip-path birth	Scramble text	Window pane iris
Karten / Features-Abschnitt	Cascading card stack	Skew + elastic bounce	Section peel
Portfolio / Showcase	Horizontal scroll + Flip morph	Line clip wipe	Diagonal wipe
SaaS / Startup	Window pane iris + Stagger grid	Variable font wave	Curved path travel

Nach gewünschtem Scroll-Verhalten

• „bleibt an Ort und Stelle, während sich Dinge ändern“ → pin: true + scrub timeline
• „steigt aus dem Abschnitt auf“ → Inter-section floating product + clip-path birth
• „von oben geboren“ → Top-down clip birth ODER curtain panel roll-up
• „überlappen/stapeln“ → Cascading card stack ODER section peel
• „Text fliegt von den Seiten herein“ → Split converge ODER offset diagonal layout
• „Text leuchtet Wort für Wort auf“ → Word-by-word scroll lighting
• „ganzer Abschnitt transformiert“ → Window pane iris + scrub timeline
• „Abschnitt fällt herunter“ → Clip-path inset(0 0 100% 0) → inset(0)
• „wie ein Vorhang“ → Curtain panel roll-up
• „Kreis öffnet sich“ → Circle iris expand
• „reist zwischen Abschnitten“ → GSAP Flip cross-section ODER curved path travel

---

Schritt 3 – Jedes Element schichten

Jedes Element, das du erstellst, MUSS eine zugewiesene Tiefenstufe haben. Das ist nicht verhandelbar.

DEPTH 0 → Ferner Hintergrund     | parallax: 0.10x | blur: 8px  | scale: 0.70
DEPTH 1 → Glühen/Atmosphäre      | parallax: 0.25x | blur: 4px  | scale: 0.85
DEPTH 2 → Mittlere Dekorationen  | parallax: 0.50x | blur: 0px  | scale: 1.00
DEPTH 3 → Hauptobjekte           | parallax: 0.80x | blur: 0px  | scale: 1.05
DEPTH 4 → UI / Text              | parallax: 1.00x | blur: 0px  | scale: 1.00
DEPTH 5 → Vordergrund-Effekte    | parallax: 1.20x | blur: 0px  | scale: 1.10

Anwenden als: data-depth="3" auf HTML-Elementen, passend zur CSS-Klasse .depth-3.

→ Vollständige Details zum Tiefensystem: references/depth-system.md

---

Schritt 4 – Barrierefreiheit & Leistung anwenden (Immer)

Diese sind in jeder Ausgabe VERPFLICHTEND:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

• Nur animieren: transform, opacity, filter, clip-path – niemals width/height/top/left
• Verwende will-change: transform nur bei aktiv animierenden Elementen, nach der Animation entfernen
• Verwende content-visibility: auto bei Bildschirm-abschnitts-Elementen außerhalb des sichtbaren Bereichs
• Verwende IntersectionObserver, um nur Elemente im Viewport zu animieren
• Mobilgeräte erkennen: window.matchMedia('(pointer: coarse)') – Effekte auf Touch reduzieren

→ Vollständige Details: references/performance.md und references/accessibility.md

---

Schritt 5 – Code-Struktur (Immer diese HTML-Architektur verwenden)

<!-- SECTION WRAPPER – jeder Abschnitt folgt diesem Muster -->
<section class="scene" data-scene="hero" style="--scene-height: 200vh">
  
  <!-- DEPTH LAYERS – immer mindestens 3+ Ebenen -->
  <div class="layer depth-0" data-depth="0" aria-hidden="true">
    <!-- Hintergrund: Farbverlauf, Textur, atmosphärisches PNG -->
  </div>
  
  <div class="layer depth-1" data-depth="1" aria-hidden="true">
    <!-- Glühende Kleckse, Lichteffekte, atmosphärischer Dunst -->
  </div>
  
  <div class="layer depth-2" data-depth="2" aria-hidden="true">
    <!-- Mittlere Dekorationen, schwebende Formen -->
  </div>
  
  <div class="layer depth-3" data-depth="3">
    <!-- HAUPTRODUKT / HELDENBILD – Star der Show -->
    <img class="product-hero float-loop" src="produkt.png" alt="[Beschreibung]" />
  </div>
  
  <div class="layer depth-4" data-depth="4">
    <!-- TEXTINHALT – Überschriften, Fließtext, CTAs -->
    <h1 class="split-text" data-animate="converge">Deine Überschrift</h1>
  </div>
  
  <div class="layer depth-5" data-depth="5" aria-hidden="true">
    <!-- Vordergrundpartikel, Glitzer, Overlays -->
  </div>

</section>

→ Vollständiger Grundbaustein: assets/hero-section.html → Vollständiges CSS-System: assets/hero-section.css → Vollständige JS-Engine: assets/hero-section.js

---

Referenzdateien – Lese diese für vollständige Technikdetails

Datei	Inhalt	Wann lesen
references/asset-pipeline.md	Asset-Inspektion, Hintergrundbeurteilungsregeln, Benachrichtigungsformat für Benutzer, CSS-Knockout, Größenziele	IMMER – vor dem Codieren ausführen
references/cursor-microinteractions.md	Benutzerdefinierter Cursor, Partikelausbrüche, magnetisches Hover, Neigungseffekte	Beim Bauen interaktiver Premium-Seiten
references/depth-system.md	6-Ebenen-Tiefenmodell, CSS/JS-Implementierung, Unschärfe-/Skalierungsformeln	Jedes Projekt – immer lesen
references/motion-system.md	9 Scroll-Architekturmuster mit vollständigem GSAP-Code	Beim Bauen von Scroll-Interaktionen
references/text-animations.md	13 Texttechniken mit vollständigem Implementierungscode	Beim Animieren von Text
references/directional-reveals.md	8 „von oben/den Seiten geboren“-Clip-Path-Techniken	Wenn Abschnitte einen gerichteten Eintritt benötigen
references/inter-section-effects.md	Schwebendes Produkt, GSAP Flip, abschnittsübergreifende Reise	Wenn Produkt/Element über Abschnitte hinweg bestehen bleibt
references/performance.md	GPU-Regeln, will-change, IntersectionObserver-Muster	Immer – nicht verhandelbare Regeln
references/accessibility.md	WCAG 2.1 AA, prefers-reduced-motion, ARIA	Immer – nicht verhandelbar
references/examples.md	5 vollständige reale Implementierungen	Wenn der Benutzer eine vollständige Seite benötigt

---

Proaktive Auslöser

Sprich diese Probleme OHNE Aufforderung an, wenn du sie im Kontext bemerkst:

• Benutzer lädt JPEG-Produktbilder hoch → Markieren, dass JPEGs keine Transparenz haben können, Asset-Inspektor anbieten
• Alle Assets haben die gleiche Größe → Problem mit der Kompositionshierarchie markieren, Größenempfehlung für Held + Begleiter geben
• Keine Tiefenzuweisungen erwähnt → Daran erinnern, dass jedes Element eine Tiefenstufe (0-5) benötigt
• Benutzer wünscht „sanfte Animationen“ aber keine reduzierte-Bewegung-Behandlung → Barrierefreiheitsanforderung markieren
• Parallax gewünscht, aber keine Leistungsoptimierung → will-change- und GPU-Beschleunigungsregeln markieren
• Mehr als 80 animierte Elemente → Leistungsbedenken markieren, Reduzierung oder Lazy-Loading empfehlen

---

Ausgabe-Artefakte

Wenn du fragst nach...	Du bekommst...
„Baue einen Hero-Bereich“	Einzelne HTML-Datei mit inline CSS/JS, 6 Tiefenebenen, Asset-Prüfung, Technikliste
„Mach es kinoreif“	Scrub-Timeline + Parallax + Textanimations-Kombo mit GSAP-Setup
„Überprüfe meine Bilder“	Asset-Prüfbericht mit Hintergrundstatus, Tiefenzuweisungen, Größenanpassungsempfehlungen
„Apple-Style-Scrolleffekt“	Wort-für-Wort-Beleuchtung + fixierter Abschnitt + Perspektiv-Zoom-Implementierung
„Leistungsprobleme beheben“	Validierungsbericht mit GPU-Optimierungs-Checkliste und will-change-Prüfung

---

Kommunikation

Die gesamte Ausgabe folgt dem strukturierten Kommunikationsstandard:

• Das Wichtigste zuerst – zeige die Asset-Prüfung und den Tiefenplan, bevor du Code generierst
• Was + Warum + Wie – jede Technikwahl erklärt (warum diese Animation für diese Stimmung)
• Aktionen haben Besitzer – „Du musst transparente PNGs bereitstellen“ nicht „PNGs sollten bereitgestellt werden“
• Vertrauenswürdigkeit-Tagging – 🟢 verifizierte Technik / 🟡 experimentell / 🔴 Browser-Unterstützung eingeschränkt

---

Kurzregeln (Nicht verhandelbar)

0a. ✅ IMMER vor dem Codieren eine Asset-Inspektion durchführen – jedes Bild auf Format, Hintergrund und Größe prüfen. Tiefenzuweisungen dem Benutzer vor dem Bauen mitteilen. 0b. ✅ IMMER beurteilen, ob ein Hintergrund entfernt werden muss – nicht jedes Bild benötigt dies. Informiere den Benutzer über den Status jedes Assets und hole eine Bestätigung ein, bevor du einen Hintergrund als Problem behandelst. Niemals automatisch entfernen, niemals stillschweigend ignorieren.

1. ✅ Jeder Abschnitt hat mindestens 3 Tiefenebenen
2. ✅ Jedes Textelement verwendet mindestens 1 Animationstechnik
3. ✅ Jedes Projekt enthält einen prefers-reduced-motion-Fallback
4. ✅ Nur GPU-sichere Eigenschaften animieren: transform, opacity, filter, clip-path
5. ✅ Produktbilder werden standardmäßig immer depth-3 zugewiesen
6. ✅ Hintergrundbilder immer depth-0 mit leichter Unschärfe
7. ✅ Floating-Schleifen auf jedem „Helden“-Element (6–14s, niemals vollständig statisch)
8. ✅ Jedes dekorative Element erhält aria-hidden="true"
9. ✅ Mobilgeräte erhalten reduzierte Effekte über pointer: coarse-Erkennung
10. ✅ will-change nach Abschluss der Animationen entfernen

---

Ausgabeformat

Liefere immer:

1. Einzelne in sich geschlossene HTML-Datei (inline CSS + JS), es sei denn, der Benutzer fragt nach separaten Dateien.