scroll-craft

Was macht scroll-craft?

Scrollen ist die einzige Eingabe, die jeder Besucher bereits zu nutzen weiß. Dieser Skill behandelt es als eine Zeitachse: Das Rad ist ein Scrubbing-Werkzeug, die Seite ist ein Film mit echtem Text darüber, und jeder Abschnitt verhält sich anders genug, damit der Besucher weitermacht, um zu sehen, was der nächste Schritt tut.

Was Sie produzieren: ein Interview-Briefing, eine Seiten-Grammatik, eine Kundenreise-Karte, eine Gefühlskurve mit einem konstruierten Höhepunkt, einen Scroll-Score, eine Signaturbewegung, generierte Assets, eine echte HTML-Seite auf einer token-gesteuerten Designfläche und einen Streifen von Screenshots, der belegt, dass die Seite bei jeder Scroll-Position funktioniert.

Was dies nicht ist

Es ist nicht "Erzeuge einen Flug und lege Text darauf." Dieser Ansatz produziert ein einziges Gerät, das auf eine gesamte Seite angewendet wird, und jede so gebaute Seite ist auf einen Blick erkennbar: dieselbe Knet-Dioramen-Ästhetik, derselbe zentrierte Text, derselbe 01 / 06-Zähler, derselbe "Scroll to explore"-Hinweis. Fünf Abschnitte, die sich identisch verhalten, sind ein Abschnitt, der fünfmal gezeigt wird.

Vier Regeln folgen daraus, und sie sind das Rückgrat dieses Skills:

1. Vielfalt ist das Produkt. Eine Seite verwendet mindestens vier Gerätefamilien und niemals dasselbe Gerät zweimal hintereinander. Lesen Sie references/devices.md.
2. Die Welt ist fotografisch, es sei denn, die Marke ist tatsächlich illustriert. Weiches, mattes, Low-Poly-Knet-Diorama ist als Standard verboten. Lesen Sie references/worlds.md.
3. Keine durchgehende Kette. Ein einzelner, ununterbrochener Kameraf lug ist das Teuerste und Zerbrechlichste, das Sie bauen können, und er existiert nur, um Schnitte zwischen Szenen zu verstecken. Variieren Sie stattdessen das Gerät, und der Schnitt verschwindet von selbst, weil der Besucher nicht einen einzigen Film sieht. Eine Kette ist nur dann erlaubt, wenn das Briefing wörtlich "eine einzige durchgehende Reise" lautet.
4. Eine andere Welt ist nicht eine andere Seite. Das Geräte-Set variiert das Aussehen einer Seite. Struktur ist eine separate Achse, und sie muss bewusst entschieden werden, da sonst jeder Build dasselbe Grundgerüst erbt. Die ersten vier Builds haben genau das getan. Lesen Sie references/uniqueness.md.

Präferenz für stehenden Hero

Dimensionale Schichtung ist eine grundlegende Anforderung für einen erstklassigen Marketing-Hero. Planen Sie unabhängig bewegte Hintergrund-, Motiv-, Vordergrund- und Atmosphären-Ebenen, bevor Sie Assets anfordern. Ein schöner einzelner Hintergrund mit Textüberblendungen erfüllt diese Präferenz nicht. Tiefe muss durch sichtbare Trennung, Überlappung und kontrollierte Unterschiede in der Bewegung entstehen, während die Überschrift lesbar bleibt und die Szene eine klare Geschichte erzählt.

Lesen Sie references/hero-depth.md, bevor Sie den Hero planen oder seine Assets generieren. Es behandelt saubere Trennungen (Clean Plates), echte Alpha-Ausschnitte, gemeinsame Kontaktanker, Typografie zwischen den Ebenen, zurückhaltende Scroll-Choreographie, mobile Art Direction und visuelle Akzeptanz, mit dem genehmigten Sonder-Beispiel. Verwenden Sie die Komposition, die zur gewählten Grammatik passt; wiederholen Sie nicht Sonders Szene oder zwingen Sie Pinning auf eine Grammatik, die es verbietet. Respektieren Sie explizite statische oder einfachere Anweisungen und bewahren Sie Tiefe in der statischen Komposition, wenn die Bewegung reduziert ist.

Genehmigter Sammlungsstandard

Lesen Sie references/approved-collection.md, bevor Sie eine Premium-Marketing-Seite planen. Es destilliert den genehmigten Zehn-Seiten-Rebuild: echte Markenforschung, Ebenen-Verträge, sinnvolle Zeiger-/Scroll-Tiefe, geeignete fotografische oder 3D-Darstellung, eindeutige Navigation und Enden, nützliche Interaktionen, mobile Art Direction und Nachweise aus dem endgültigen Paket. Dies sind Ausführungsprinzipien und ausgearbeitete Beispiele, kein wiederverwendbares Seitengerüst.

Schritt 0: Das Briefing und die kreative Autorisierung

Legen Sie das Briefing fest, bevor Sie etwas generieren. Verwenden Sie bereits bereitgestellte Antworten und Assets wieder. Wenn der Benutzer die kreative Leitung explizit delegiert (z. B. "Vertrauen Sie Ihrem Urteil" oder "Ich möchte Ihnen nicht im Weg stehen"), schreiben Sie ein Briefing mit dem Vermerk Selbst erstellt unter expliziter kreativer Delegation und fahren Sie fort. Behandeln Sie die acht folgenden Themen, unterscheiden Sie zwischen Beweisen und Annahmen und erfinden Sie keine Zitate des Benutzers oder erzwingen Sie einen weiteren Interview-/Genehmigungs-Checkpoint.

Andernfalls führen Sie ein Interview zu den fehlenden Entscheidungen. Stellen Sie echte Fragen, notieren Sie die Antworten und vermeiden Sie es, eine ganze Marke nur aus ihrem Namen abzuleiten.

Der Skill ist ein Bereichsinstrument, kein Hausstil. Der Mensch bringt die Absicht und alle Assets mit, die er besitzt; das Interview ist der Ort, an dem dies in die richtige Art von Seite umgesetzt wird: eine ununterbrochene Welt, unterschiedliche Szenen, gedruckte Kapitel, eine lebendige Oberfläche. Der Skill kann jede davon. Das Interview entscheidet, welche.

Halten Sie es kurz. Acht Fragen, in einem Durchgang gestellt:

1. Stimmung in drei bis fünf Wörtern, plus bis zu drei Referenzen aus jedem Medium. Ein Film, ein Albumcover, ein Geschäft, eine Zeitschrift, ein Spiel. Nicht "Seiten, die Ihnen gefallen": Das Nennen von Seiten führt dazu, dass eine Seite wie eine bestehende Seite aussieht.
2. Die Scroll-Reise, Abschnitt für Abschnitt, in ihren eigenen Worten. Worauf der Besucher zuerst treffen soll, was als Nächstes kommt, was das Letzte ist. Ihre Reihenfolge, kein Menü, das Sie angeboten haben.
3. Die Energiekurve. Wo es sich ruhig anfühlen soll, wo es sich intensiv anfühlen soll. Eine Seite, die die ganze Zeit laut ist, ist genauso flach wie eine, die die ganze Zeit leise ist.
4. Wie sollte sich jemand beim Scrollen fühlen, phase für phase, und was ist der EINE Moment, an den sie sich erinnern sollten? Energie ist Lautstärke. Dies ist Emotion, und die beiden decken sich nicht: Auf einer lauten Seite kann die leise Handlung die intensivste sein. Die phase-für-phase-Antwort wird zur Gefühlskurve, der eine Moment wird zum Höhepunkt. Beide sind in BRIEF.md erforderlich. Siehe references/feel.md.
5. Eine Sache, die diese Seite tun soll, die keine Seite, die sie je gesehen haben, tut. Dies ist der Keim der Signaturbewegung. Bestehen Sie auf einer echten Antwort; "denkwürdig sein" ist keine.
6. Wie weit von Premium-Minimal weg wollen sie gehen? Bieten Sie die Bandbreite in uniqueness.md §5 an: brutalistisch, maximalistisch, verspielt, retro, dicht, redaktionell, premium-minimal. Ihre Antwort bestimmt die ästhetische Familie, nicht Ihren Geschmack.
7. Eine ununterbrochene Welt oder unterschiedliche Szenen? Soll sich die ganze Seite wie ein einziger durchgehender Ort anfühlen, durch den man scrollt (Weltflug, siehe references/worldflight.md), oder wie separate Szenen, Kapitel oder Schnitte? Dies ist die mit Abstand größte strukturelle Gabelung, und es ist ihre Entscheidung, keine Technik, die Sie später wählen. Bieten Sie beide direkt an; keiner ist der Standard.
8. Welche Assets haben sie bereits? Footage, Fotos, Produktaufnahmen, ein Brand-Kit, Clips von sich selbst. Echte Assets verankern die Welt und senken die Generierungskosten; die Antwort entscheidet, was bearbeitet und codiert wird, im Vergleich zu dem, was generiert wird. "Nichts" ist eine gute Antwort und bedeutet eine vollständig generierte Welt.

Schreiben Sie die Antworten in <workspace>/builds/<name>/BRIEF.md, bevor Sie mit der Aktplanung beginnen, in ihren eigenen Worten, nicht in Marketing-Prosa paraphrasiert. Alles Nachgelagerte liest aus dieser Datei.

BRIEF.md muss mindestens enthalten:

• Die acht Themen, mit wörtlichen Benutzerantworten, wo angegeben, und klar gekennzeichneten eigenen Entscheidungen, wo delegiert.
• Die Gefühlskurve. Eine Zeile pro Akt: die Emotion, dann was auf dem Bildschirm sie verursacht. Geschrieben, bevor die Akte existieren, ergänzt, während der Score ausgefüllt wird.
• Der Höhepunkt. Der eine Moment, geschrieben als der Satz, den ein Besucher einem Freund sagen würde, plus in welchem Akt er sich befindet.
• Der vervollständigte Erzähl-einem-Freund-Satz. "Es ist die Seite, auf der ___", gefüllt mit einem Erlebnis, nicht einem Gerätenamen.
• Jegliche selbsterstellte Stille, damit der Verifikationsdurchlauf sie von totem Scrollen unterscheiden kann.

references/feel.md ist die Spezifikation für alle vier.

Wenn der Mensch wirklich nicht erreichbar ist und der Durchlauf vollständig autonom ist, schreiben Sie BRIEF.md selbst: beantworten Sie alle acht Fragen in der Stimme der Marke, markieren Sie die Datei oben mit Selbst erstellt, nicht interviewt und teilen Sie dies im Abschlussbericht mit. Ein selbst erstelltes Briefing ohne Delegation ist ein Fallback. Explizite Delegation oben ist ein normaler, unterstützter Workflow und erfordert nicht, dass der Mensch nicht erreichbar ist.

Bootstrap

Umgebung, keine Phase der Arbeit. Führen Sie es durch, sobald das Interview beantwortet ist und vor Schritt 1.

Führen Sie den Preflight aus, anstatt manuell zu prüfen. Er kennt die Fehlermodi, die später als irreführende Fehler auftauchen, hauptsächlich ein abgespecktes ffmpeg, das einen fehlenden Filter als Syntaxfehler in Ihrem Befehl meldet:

node <skill>/scripts/doctor.mjs

Er meldet node, einen vollständigen ffmpeg-Build, playwright und Chrome, den API-Key und das aufgelöste Workspace. Erforderliche Fehler führen zu einem Exit-Code ungleich Null. Sagen Sie klar, welche Elemente fehlen, anstatt stillschweigend um sie herumzuarbeiten.

Das Workspace

Builds und das Fingerprint-Register leben in einem Verzeichnis, und es wird aufgelöst, niemals angenommen:

node <skill>/scripts/workspace.mjs --ensure     # gibt es aus, erstellt es, befüllt das Register

Auflösungsreihenfolge, erster Treffer gewinnt:

1. SCROLLCRAFT_HOME
2. Die nächste .scrollcraft.json auf dem Weg aufwärts vom cwd mit { "workspace": "..." }
3. <Projektstamm>/scrollcraft, wobei der Projektstamm der nächste Vorfahre mit einem .git ist

Ein Build-Ordner ist also <workspace>/builds/<name>/ und das Register ist <workspace>/FINGERPRINTS.md. Das Register startet leer: Der Gate existiert, um Sie daran zu hindern, sich zu wiederholen, daher hat Ihr erster Build nichts zu löschen.

Wenn Sie Builds bereits woanders aufbewahren, legen Sie eine .scrollcraft.json in Ihrem Projektstamm ab, die darauf verweist, und nichts muss verschoben werden.

Der Rest

1. KIE_AI_API_KEY, nur wenn Sie Assets generieren. Ein Build aus den eigenen Fotos und Videos des Benutzers benötigt keinen Key und keine Ausgaben, und das ist ein erstklassiger Weg, kein Fallback. Bestätigen Sie das Guthaben mit node <skill>/scripts/kie.mjs probe. Ein Standbild kostet Cents, ein 5-Sekunden-Clip kostet mehr; eine Seite mit sechs Akten und zwei Clips ist eine kleine Ausgabe, keine große.
2. Ein Brand-Kit, falls eines existiert (Farben, Logo, Schriftart, vorhandene Produktaufnahmen). Wenn die Marke einen Ordner in diesem Repo hat, lesen Sie ihn, bevor Sie etwas generieren, und befolgen Sie seine harten Regeln. Eine Marke, die erfundene Zahlen verbietet, bedeutet keine Statistikzähler, egal wie gut sie aussehen.

Kopieren Sie engine/scrollcraft.js und engine/scrollcraft.css in den Build-Ordner. Bearbeiten Sie die Engine niemals projektbezogen; sie ist der Mechanismus. Thematisieren Sie sie mit Tokens und schreiben Sie Ihr eigenes Markup.

Schritt 1: Das Briefing, Reise zuerst

Das Thema muss vom Benutzer genannt werden. Fragen Sie es offen, in einfacher Prosa, niemals als erfundene Multiple-Choice-Liste von Branchen: Ein erfundenes Menü beeinflusst sie und wirkt, als ob Sie ihr Geschäft für sie entscheiden.

Schritt 0 hat bereits Stimmung, Abfolge, Energie und Bandbreite abgedeckt. Fragen Sie nichts davon erneut. Fragen Sie nur das, was Sie nicht sinnvoll standardmäßig vorgeben können:

1. Was ist das und für wen ist es? Ein oder zwei Sätze in ihren eigenen Worten.
2. Was muss der Besucher am Ende glauben? Der einzelne Satz, den die Seite zu verankern hat. Keine Feature-Liste. Wenn sie drei nennen, lassen Sie sie einen auswählen.
3. Was macht der Besucher als nächstes? Eine Aktion. Ein Label dafür, das überall auf der Seite verwendet wird.
4. Was haben Sie bereits? Logo, Palette, Fotografie, Produktaufnahmen, Footage, ein Markendokument. Echte Assets schlagen generierte jedes Mal.
5. Art Direction: Bieten Sie die Welten in references/worlds.md als echte Wahl an, und sagen Sie, dass sie ihren eigenen Weg gehen können.

Dann schreiben Sie die Reise vor allem anderen: vier bis sieben Beats, jeder eine Verschiebung dessen, was der Besucher weiß oder fühlt.

1  Erkennung     sie sehen ihren eigenen Morgen
2  Spannung      die Kosten davon, klar benannt
3  Wendung       die Sache, die sich ändert
4  Substanz      warum es hält
5  Bandbreite    was sie wählen können
6  Engagement    die eine Aktion

Beats sind das Rückgrat. Abschnitte dienen den Beats; ein Abschnitt, der keinem Beat dient, wird entfernt, egal wie gut die Aufnahme ist. Lösen Sie die Reise auf, bevor Sie Assets generieren. Zeigen Sie sie dem Benutzer, wenn seine Entscheidungen benötigt werden; unter expliziter kreativer Delegation zeichnen Sie die gewählte Reise auf und fahren innerhalb des autorisierten Umfangs fort.

Schritt 2: Grammatik, Gate, dann Score

Drei Dinge in der Reihenfolge, und die ersten beiden kommen vor jeder Aktplanung. Vollständige Details in references/uniqueness.md.

Wählen Sie eine Grammatik. Beginnen Sie mit den acht definierten Grammatiken und ihren Einschränkungen. Eine neue Grammatik ist erlaubt, wenn ihre Navigation, Abfolge, Ende und expliziten Verbote eine andere Struktur beschreiben; ein neues Label allein bringt keine Anerkennung. Filmic One-Shot ist diejenige, die die ersten vier Builds alle verwendet haben, also bedeutet die erneute Auswahl, im Bericht zu sagen, warum die anderen sieben nicht zum Interview passten. Nav, Hero und Close folgen alle aus der Grammatik; sie werden nicht separat entschieden.

Erfinden Sie die Signaturbewegung. Eine maßgeschneiderte Interaktion, die nur auf dieser Seite lebt, in der Seite codiert, keine Parameteränderung an einem Kit-Gerät. Frage 5 des Interviews ist der Keim. Die Engine bleibt unberührt.

Führen Sie den Fingerabdruck-Gate aus. Lesen Sie Ihr Register in <workspace>/FINGERPRINTS.md (siehe Das Workspace unter Bootstrap; führen Sie node <skill>/scripts/workspace.mjs aus, um den Pfad auszugeben). Der geplante Build muss sich von jeder vorhandenen Zeile in mindestens 4 von 6 Dimensionen unterscheiden: Grammatik, Nav-Behandlung, Hero-Gerät, Akt-Sequenz-Form, Close-Muster, Signaturbewegung. Vier gegen jede Zeile einzeln. Wenn es fehlschlägt, ändern Sie den Plan, nicht das Protokoll.

Schreiben Sie die Gefühlskurve vor der Score-Tabelle. Eine Zeile pro Akt: die Emotion, dann was sie verursacht. Kurve zuerst, Akte zweitens, weil ein Gerät, das vor dem Gefühl gewählt wird, ein Gerät ist, das nach einem Grund sucht. Zwei benachbarte Akte mit demselben Gefühl bedeuten, dass einer Füllmaterial ist, und es ist billiger, ihn hier zu entfernen, als nachdem die Assets existieren. Benennen Sie den Höhepunkt im selben Durchlauf und geben Sie ihm die größte Spanne auf der Seite. Vollständige Methode in references/feel.md.

Dann weisen Sie jedem Beat ein Gerät zu. Tun Sie es bewusst und schreiben Sie es als Tabelle auf:

Beat	Gerät	Warum dieses
Erkennung	scrub	Die Kamera, die sich unter der eigenen Hand des Lesers bewegt, ist die stärkste mögliche Eröffnung
Spannung	pin + kinetisch	Der Text setzt sich Zeile für Zeile zusammen, während der Rahmen stillsteht
Wendung	reveal	…

… [truncated for translation]