3D-Website-Factory

Was macht 3D-Website-Factory?

S unten ist der Ordner, in dem sich diese Datei befindet. Voraussetzungen: Chrome, Python 3, Node 22+. Der Film benötigt außerdem ffmpeg.

Die Pipeline

           ┌──> Sculptor (3D-Objekte) ──┐
Scout ─────┤                            ├──> Builder (zusammenfügen) ──> Kritiker ──┐
(Plan)     └──> Animator (Bewegung) ────┘        ^                                  │
   ^ Benutzer genehmigt den Plan                  └──── Korrekturen, max. 3 Runden ──┘

Rolle	Kurzbeschreibung	Erstellt
Scout	roles/scout.md	Den Plan: Fakten, Designsystem anhand einer Goldstandard-Referenz, Bildschirme, 3D-Objektliste
Sculptor	roles/sculptor.md	Ein three.js-Modul pro 3D-Objekt (oder eine Spline-Szene)
Animator	roles/animator.md	Erklärschleifen, Scroll-Choreografien, Einblendungen
Builder	roles/builder.md	Die Website, alles zusammengefügt, die Interaktionen des Benutzers eingebunden
Kritiker	roles/critic.md	Bestanden oder nicht bestanden anhand von zehn festgelegten Fragen, mit Korrekturen

Die Rollen kommunizieren nur über Dateien im Arbeitsbereich: den Plan in _work/<slug>/, den Code in sites/<slug>/. Daher kann jede Rolle einzeln wiederholt werden („Das 3D glänzender machen“ ist eine Sculptor-Aufgabe, dann Builder und Kritiker).

Ausführen der Rollen. Wenn Ihr Tool Unteragenten starten kann (Claude Code, Codex, Cursor und andere), starten Sie einen pro Rolle mit diesem Prompt und führen Sie den Sculptor und den Animator gleichzeitig aus:

Du bist die der 3D-Website-Factory. Lies <S>/roles/<role>.md und <S>/references/taste.md, und führe dann deine Rolle für die Website <slug> im Arbeitsbereich <absoluter Pfad> aus. Der Skill-Ordner ist <S>. Gib an, was du geschrieben hast und was du nicht tun konntest.

Wenn nicht, spiele die Rollen selbst in der Reihenfolge und lese jede Kurzbeschreibung kurz vor Beginn. In beiden Fällen bist du der Dirigent: Du sprichst mit dem Benutzer, überprüfst jede Übergabe und hältst an den Toren an.

Tore, bei denen der Benutzer entscheidet: das Interview des Scouts und seine Zusammenfassung (Referenz, Aussehen, Heldenkonzept, Bildschirme, Objekte mit Kosten), bevor etwas bezahlt wird, und am Ende. Alles andere läuft ohne Nachfrage.

Fortschritt. Ein Build kann eine Stunde dauern. Sage dem Benutzer vor jeder Rolle in einer Zeile, was sie tut („Sculptor: Baue das Ton-Logo, kostenlos“), und danach, was sie erstellt hat.

Aufträge

Sie sagen	Auftrag
„Einrichten“, erste Verwendung oder kein Arbeitsbereich vorhanden	A. Einrichten
„Baue mir dies“, „Baue die Website für X“	B. Bauen
„Mache meine Website 3D“, „Füge 3D zu dieser Website hinzu“	C. Upgrade einer bestehenden Website
„Mache, dass der Roboter dem Cursor folgt“, „Ändere das 3D“, jede Änderung an einer gebauten Website	D. Ändern
„Füge einen Film hinzu“, „Video hinzufügen“	E. Film (references/film.md)

A. Einrichten

sh "$S/scripts/init.sh"        # erstellt ./website-factory, überschreibt nie

Teile dem Benutzer in einfachen Worten mit: Text kommt in content/, das Logo in assets/logo/ (SVG ist am besten, es kann 3D werden), Bilder in assets/images/, 3D-Modelle in assets/models/, Websites, die ihnen gefallen, in assets/style/. Sage dann „Baue mir dies als Website“. Baue erst, wenn es Inhalte gibt oder sie nach einer Demo fragen.

B. Bauen

Eine Website pro Datei in content/ (überspringe Namen, die mit _ beginnen, und Dateien, die bereits einen Ordner in sites/ haben, es sei denn, es wird ein Neubau angefordert). slug = der Dateiname in Kebab-Schreibweise. Führe die vollständige Pipeline aus. Schreibe am Ende sites/<slug>/REPORT.md und teile dem Benutzer mit: was jedes 3D-Objekt und jede Bewegung ist, jede Entscheidung, die du getroffen hast und die er offen gelassen hat, die Textänderungen (copy.md), verbrauchte Credits, das Urteil des Kritikers, was noch offen ist und wie die Vorschau funktioniert: python3 -m http.server 8080 --directory sites/<slug>. Biete dann an, zu veröffentlichen (siehe Veröffentlichung).

C. Upgrade einer bestehenden Website

Führe dies im Ordner der eigenen Website des Benutzers aus. Die Website bleibt seine: gleiches Design, gleiche Wörter.

1. Der Scout scannt den Code und schreibt den Plan. Vorschlag: Welche Objekte wohin kommen, was sich bewegt, welche Dateien sich ändern. Warte auf ein Ja.
2. Wenn es ein Git-Repository ist, erstelle einen Branch. Ändere so wenige Dateien wie möglich. Kein Neustyling, keine Neuformulierung, keine Neuanordnung oder Abhängigkeits-Upgrades.
3. Sculptor und Animator erstellen ihre Teile. Builder fügt sie auf die native Weise der Website hinzu:
   • Reines HTML: wie in roles/builder.md.
   • React, Next, Vue, Svelte, Astro: Eine Client-only-Komponente, die die Box rendert und das Objektmodul nach dem Mounten importiert. Lege stage.js und die Module in den statischen oder Quellordner, den das Framework verwendet. Wenn das Projekt bereits three.js oder react-three-fiber verwendet, verwende das stattdessen der Import-Map.
   • WordPress: Ein Child-Theme oder ein benutzerdefinierter HTML-Block. Niemals ein Parent-Theme oder eine Live-Site.
4. Tor: Die eigenen Builds und Tests der Website bestehen noch. Mit dem laufenden Dev-Server: node "$S/scripts/probe.mjs" <url> _work/before vor der Änderung und _work/after danach (halte _work/ außerhalb von Git). Der Kritiker vergleicht. check.py ist nur für Job-B-Seiten.
5. Zeige den Diff und wie die Vorschau funktioniert. Sende oder deploye niemals, es sei denn, der Benutzer fragt danach (siehe Veröffentlichung).

D. Ändern

Finde die Rolle, die die Änderung besitzt, wiederhole nur den Teil dieser Rolle, dann das Tor des Builders und den Kritiker.

Spline-Szenen

Eine Spline-Szene ist eine von mehreren 3D-Quellen (siehe roles/sculptor.md).

• Community-Szene (kostenlos, kein Konto): sh "$S/scripts/browser.sh" embed <community-url> gibt die einbettbare URL aus. Sie lädt den gesamten Spline-Editor, etwa 15 Sekunden und einen dunklen Bildschirm beim ersten Besuch. Gut für eine Demo. Für eine echte Website öffnet der Benutzer sie in einem kostenlosen Spline-Konto, remixt sie, dann Export > Öffentliche URL und gibt dir den my.spline.design/...-Link, der in ein oder zwei Sekunden lädt.
• Auf der Seite: <div class="f-3d" data-spline="URL" data-title="Was es ist" style="height:100vh"></div>. factory.js lädt sie lazy, blendet sie ein und überdimensioniert sie, um die Schaltflächen des Viewers zu verstecken.
• Nenne den Autor der Szene nur dann im Footer, wenn die Lizenz der Szene dies verlangt.
• Die Seite muss immer noch scrollen, wenn der Cursor darüber ist (probe.mjs testet dies). Wenn nicht, füge data-shield hinzu.
• Der Spline-Konnektor (claude mcp add --transport http spline https://mcp.spline.design/mcp) kann neue Szenen erstellen. Er hat ein tägliches Anruflimit: Verwende ihn nur, wenn der Benutzer danach fragt, und gib an, wie viele Aufrufe du verwendet hast.

Assets und Geld

Wo 3D-, Bild- und Film-Assets herkommen, welche Anbieter zu verwenden sind (Higgsfield-Konnektor oder CLI, andere verbundene Generatoren oder der kostenlose manuelle Weg) und die Regeln für kostenpflichtige Generierung: references/assets.md.

Veröffentlichung

Nur wenn der Benutzer danach fragt. Verwende, was verbunden ist: ein Hosting-Konnektor (Hostinger, Netlify, Vercel und andere bieten Deploy-Tools) oder die GitHub-CLI für GitHub Pages, oder sage dem Benutzer, welchen Ordner er hochladen soll. Bestätige das Ziel (Domain oder Repository) vor dem ersten Deploy. Danach deploye Änderungen nur auf Anfrage erneut.

Regeln, die immer gelten

• Geld. Code-basiertes 3D, Spline-Community-Szenen und Motion sind kostenlos. Alles, was bezahlt wird (KI-Bilder, Videos oder 3D, ein Spline-Plan), benötigt das Ja des Benutzers zu einem in diesem Gespräch genannten Preis, jedes Mal. Pilotiere zuerst einen Bildschirm.
• Wahrheit. Nur die Fakten des Benutzers. Niemals erfundene Zahlen, Preise, Kunden, Zitate, Auszeichnungen oder Logos.
• Geschmack. Nichts von der Schlecht-Liste in references/taste.md.
• Barrierefreiheit. Reduzierte Bewegung erhält eine fertige statische Seite. Bilder haben Alternativtext. Text hat lesbaren Kontrast.
• Fremde Arbeit. Kopiere niemals die Wörter, Bilder oder den Code einer Referenz-Website. Gib alle Credits, die die Lizenz eines Assets verlangt; füge keine anderen Credits hinzu.
• Aufräumen. Stoppe jeden Server und Browser, den du gestartet hast.