Flagship-visual-prompt (Three.js / WebGL)

Was macht WebGL)?

Dieses Skill verwandelt eine lose Vision in einen Prompt auf dem Niveau der Kalibrierungsbeispiele in references/examples.md. Die Stärke eines solchen Prompts kommt von etwas anderem als der Länge: jede Entscheidung, die das Modell sonst standardmäßig treffen und durchschnittlich treffen würde, ist bereits getroffen: Form, Öffnungsbild, zentrale Idee, Held-Mechanik, Palette und Rendering-Gesetz, Tempo, Akzeptanzkriterien, was für die Performance geopfert werden darf und was niemals.

Referenzdateien: Wann sie lesen

• references/forms.md: immer, sobald die Form feststeht. Jede Form hat ihr eigenes Bereichsskelett.
• references/anatomy.md: immer vor dem Schreiben. Die Blöcke, die jeder Prompt gemeinsam hat, und die Schwellenwerte jeder Ebene (Mikro / Mid / Max / Spez).
• references/patterns.md: optionale Module (Beats, Kontinuitätsanker, Systemkopplung, diegetischer Zustand, Experten-Test, Kamera-Linsen, Ton-Kalibrierung, Implementierungshygiene, Schlussformeln). Lies es, wenn du Module in Runde 3–4 auswählst.
• references/realism.md: immer nach Runde 0. Das Realismus-Budget: was funktioniert und was auf jeder Ebene auseinanderfällt, Boilerplate-Varianten, Hebel, die die Obergrenze erhöhen, ehrliche Warnungen für den Benutzer.
• references/archetypes.md: Themen-Archetypen, ein Katalog von Wendungen, Öffnungsstrategien, die Palette der Techniken.
• references/examples.md: Kalibrierungs-Prompts, einer oder zwei pro Form. Lies nur das/die Beispiel(e), die der gewählten Form und Ebene entsprechen. Kopiere keinen Inhalt daraus.

Wie die Konversation geführt wird

Übergeordnete Regel: der Benutzer hat die Vision, du hast das Wissen. Frage nicht nach Dingen, die du bereits weißt (eine Monet-Palette, Instrumentennamen in einer Cessna, Arten von pyrotechnischen Geschossen). Schlagen konkrete Antworten vor und frage, ob sie passen. Jede Runde: Fasse das, was feststeht, in wenigen Worten zusammen, schlage Standardentscheidungen vor und stelle 1–3 Fragen zu dem, was du wirklich nicht weißt. Verwende bei geschlossenen Auswahlmöglichkeiten ein Tool mit klickbaren Optionen, falls verfügbar.

"Mach weiter / entscheide selbst" = akzeptiere deine eigenen Vorschläge. Überspringe Runden, die der Benutzer bereits beantwortet hat. Ziel: 2–5 Austausche vor einem Entwurf, kein Verhör. Wenn die erste Nachricht reichhaltig ist, fasse die Runden 0–2 zusammen.

Runde 0: Form und Ebene

• Form (Details in forms.md): erkundbare Welt / linearer Film / Seiten- oder UI-Übernahme / Spielzeug-Spielplatz / Material-Instrument / Simulator / Prozess über Zeit (Schieberegler) / Loop-Show / Mini-Spiel / technische Spezifikation. Formen können kombiniert werden (z. B. Film + UI-Übernahme); dann ist eine davon die Hauptform.
• Realismus-Budget (Details in realism.md): stilisiert (Treue zu einer visuellen Sprache: Malerei, Druck, Fotografie, Linienkunst), physikalisch (Phänomene, die aus ersten Prinzipien berechnet werden: Optik, Mechanik, Wellen, Umlaufbahnen) oder fotografisch (muss wie gefilmte Realität aussehen). Wenn der Benutzer fotografisch möchte, frage auch nach dem Produktionsvertrag: darf das Modell externe Assets verwenden (HDRI, gescannte PBR-Texturen, glTF-Modelle, generierte Bilder), ist WebGPU erlaubt, und handelt es sich um einen One-Shot in einer einzigen Datei oder ein iteratives Projekt in Claude Code mit Referenzbildern und einem Korrektur-Loop. Wenn die Vision Dinge enthält, die prozedural auseinanderfallen (Menschen, Gesichter, Tiere, Gewebe, Nahaufnahme-Fell), sage das klar und schlage eine der folgenden Optionen vor: Erhöhen des Budgets, Hinwendung zur Stilisierung oder Verstecken der Schwachstelle (Silhouette, Bewegung, Dunkelheit, Körnung, Entfernung).
• Ebene: Mikro (~80–150 Wörter, ein Ziel, sofort spielbar), Mid (~350–550, eine Interaktion, kurze Abschnitte), Max (~1100–1900, vollständige Anatomie), Spez (Engineering-Format mit Anforderungen und Schutzmaßnahmen, wenn das Risiko eher technisch als ästhetisch ist). Standard ist Max, aber schlage eine niedrigere Ebene vor, wenn die Vision einfach ist.

Runde 1: Anker, Wendung, Kernidee

• Anker: was der Betrachter sofort erkennt und warum (ein Gemälde, das jeder gesehen hat; die Seite, die sie vor einer Sekunde gelesen haben; das Bild eines feuerspeienden Biests, das jeder Leser im Kopf trägt).
• Öffnungsstrategie: Anker → Wendung (einen erkennbaren Rahmen halten, die erste Bewegung enthüllt die Wendung) oder Höhepunkt zuerst (direkt mit dem Höhepunkt-Bild öffnen, "bereits X"). Schlage 2–3 Wendungen vor, wenn der Benutzer keine hat.
• Kernidee: ein Satz, um den sich alles dreht (z. B. "ein Hafen, der vollständig aus Papierlaternen besteht, und eine Tideglocke, die sie in einer Welle beleuchtet"). Ohne sie ufert der Prompt aus.

Runde 2: Stilgesetz und Lesbarkeit

Schlage diese selbst vor und lass den Benutzer sie korrigieren: die genaue Komposition des ersten Bildes (Elemente, Anzahlen, Positionen), eine Palette in benannten Farben, das Rendering-Gesetz, 3–4 Anti-Patterns ("Baue nicht..."), und eine Lesbarkeitsregel (jede Schicht ist auf einen Blick lesbar; bei düsterer Stimmung: dunkel, aber nie verschwommen). Optional ein Kontrastverstärker (z. B. Schönheit, die die Zerstörung schmerzhafter macht).

Runde 3: Held, Mechanik, Zustand

• Held-Material / Objekt und seine Zustände; die Dichteeinheit ("Milliarden [Einheiten]") und die Technik.
• Held-Steuerung / Held-Mechanik: eine Interaktion, die direkt als der Held benannt wird (Zeitschieber, Rücklauf, Auslöser-Knopf, Gehen, Pinsel). Bei linearen Formen: der Zeitstrahl und seine Beats.
• Diegetischer Zustand: welchen Zustand der Betrachter aus der Welt abliest statt aus der UI (z. B. "der Leuchtturmstrahl IST die Anzeige").
• These-Schuss: ein Schuss, der das gesamte Stück zusammenfasst.

Runde 4: Bewegung, Zeit, Module

Tempo und seine Rechtfertigung innerhalb der Welt, die Bewegungsdoktrin (mindestens 5 unabhängige Systeme), ein Zyklus oder eine Sequenz mit einem Höhepunkt. Wähle Module aus patterns.md, die zum Thema passen: schlage sie vor, frage nicht einzeln nach jedem.

Runde 5: Interaktion, Kamera, Performance, Ton

Kamera-Modi (einschließlich Rendering-Linsen), Voreinstellungen oder eine Schussliste, 1 Held-Steuerung + 2–3 Steuerungen + Fotomodus (oder weniger), die Muss-Haben-Liste für den Qualitätsregler, Ton-Kalibrierung für schwierige Themen, Verbote von Scope-Creep. Prompt-Sprache: standardmäßig Englisch.

Den Prompt schreiben

1. Skelett: die gemeinsamen Blöcke aus anatomy.md + die Bereiche der Form aus forms.md + die gewählten Module aus patterns.md. #### Überschriften benennen die Idee, nicht nur das Thema ("RÜCKSPULEN - DIE HELDENFUNKTION", "DER LEUCHTTURM - DER STURM, DEN DU HERBEIGERUFEN HAST").
2. Imperativ, dicht, konkret. Jeder Punkt ist eine Entscheidung. Zahlen, Namen und die Taxonomie der Domäne statt Adjektiven.
3. Technischer Boilerplate immer, in der für das Realismus-Budget und den Produktionsvertrag gewählten Variante (realism.md): One-Shot ohne Assets, One-Shot mit Assets oder ein iteratives Projekt. Immer DPR ≤ 2 und ein angegebenes Bildwiederholfrequenz-Ziel auf einem normalen aktuellen Laptop, in eigenen Worten.
4. Ebenen Max und Spez enden mit einem Akzeptanzbalken-Absatz (Akzeptanzkriterien) vor der Zeile "In einem Satz". Mid bekommt eine Ein-Satz-Version.
5. Führe die Checkliste aus, korrigiere und übergib erst dann. Übergib den Prompt in einem Code-Block oder als .md-Datei, wenn er lang ist oder der Benutzer eine Datei bevorzugt. Darunter 2–3 Sätze über die Entscheidungen, die du für den Benutzer getroffen hast; Varianten in einem Satz.

Checkliste vor der Übergabe

Allgemein:

• Erster Satz: Form + Ambitionsebene + ein Heldenbild mit 4–6 Spezifika.
• "Baue nicht ..." (3–4 Anti-Patterns) und eine "Baue ..."-Umformulierung; eine "Kernidee:"-Zeile (Pflicht in Mikro/Mid, kann in Max in die Umformulierung integriert werden).
• Dichte-Absatz: "Milliarden [Einheiten] ... Erreiche dies mit [Technik], nicht mit [billiger Alternative]".
• Erstes Bild entspricht der Öffnungsstrategie; "Kein Titelbildschirm, Menü, Ladebildschirm oder How-to-Text"; Affordanz ohne Tutorial, wenn es Interaktion gibt.
• Lesbarkeitsregel klar ausgesprochen (auf einen Blick + bei genauer Betrachtung; dunkel ≠ verschwommen).
• Held-Steuerung / Mechanik als der Held benannt, mit harten Anforderungen (Glätte, Bidirektionalität, Vorberechnung).
• Mindestens 5 unabhängige Bewegungssysteme; Standbild-Test.
• "Aus der Nähe hält es noch" + lesbare Silhouetten aus der Ferne.
• Jedes genannte Feature ist sichtbar, bewegt sich oder ist betrachtbar; entferne die, die nicht gezeigt werden können.
• Verbote von Scope-Creep (was nicht hinzugefügt werden soll).
• Ton-Kalibrierung, wenn das Thema düster, gewalttätig oder historisch schmerzhaft ist.
• Performance: Technik pro Elementtyp, LOD, Muss-Haben-Liste ("... wird niemals weggehandelt"), Hygiene (Bildschirm aus Pause, Dispose, kein Speicher-Blow-up).
• Akzeptanzbalken (Max/Spez) und eine "In einem Satz: ..."-Zeile.
• Das Realismus-Budget ist im Prompt in einem Satz genannt ("Realismus bedeutet hier..."), der Boilerplate entspricht dem Produktionsvertrag, und der Akzeptanzbalken enthält ein Realismus-Kriterium aus realism.md.
• Kein Schlüsselbild verlässt sich auf etwas, das beim gegebenen Budget auseinanderfällt; entweder die Schwachstelle ist versteckt (Silhouette, Entfernung, Bewegung, Licht) oder das Budget wird erhöht.
• Die von der Form geforderten Bereiche (forms.md) sind vorhanden.
• Länge innerhalb des Bereichs der Ebene; wenn zu lang, Wiederholungen streichen, nicht Entscheidungen.

Grenzen

• Formulierungen aus den Beispielsätzen in den Referenzdateien und in examples.md gelangen nie unverändert in den Prompt. Nimm die Struktur und die Entscheidungen und schreibe jeden Satz in eigenen Worten, technische Formeln und den Akzeptanzabschnitt eingeschlossen.

• Werke in der Public Domain sind in Ordnung. Für geschützte Werke, bekannte Charaktere, Monster oder Marken (einschließlich solcher aus Spielen und Filmen) schlage ein originelles Design "im Geiste von" vor und beschreibe es mit eigenen Merkmalen, ohne erkennbare Elemente des Originals.

• Der Prompt muss in einem Browser umsetzbar sein. Dinge, die in WebGL unrealistisch sind (vollständige Fluidsimulation, globale Physik von Millionen von Körpern) werden in einen Trick übersetzt, der den gleichen Eindruck erweckt (eine lokale Simulationsblase, ein Shader, Instancing, ausgelöste Morphing-Meshes), und der Prompt nennt diesen Trick.