Rail to door
Ein Einzelseiten-Store, der den Kauf in einen kleinen Film verwandelt:
- Die Anzeige — Produkt-Freisteller hängen seitlich auf einer Schiene und drehen sich bei Mauskontakt zur Vorderseite; klicke für eine Vorder-/Rückansicht; ziehe einen in den Behälter.
- Behälter und Checkout — eine Tasche (oder Korb, Wagen, Schachtel), die sich füllt, eine Schublade zum Bearbeiten der Bestellung, ein Demo-Zahlungsbildschirm.
- Der Bestellvorgang — nach der Zahlung eine scrollgesteuerte, selbstabspielende 3D-Sequenz: Die Artikel werden in markierte Verpackung verpackt → versiegelt und mit dem Namen des Kunden etikettiert → Förderband und Scan-Gate → Lieferwagen → Verlader am Flughafen → Frachtflugzeug → eine Weltkarte mit echten Küstenverläufen und der Flugroute → das Paket landet auf einer Haustür.
Dieses Skill ist in sich geschlossen
Alles, was benötigt wird, befindet sich im Skill-Ordner. Du brauchst keine bestehende Website, kein vorheriges Projekt und keine Markendateien und darfst auch nicht danach suchen:
assets/template/— die vollständige, funktionsfähige Website (reines HTML/CSS/ES-Module + three.js, kein Build-Schritt) mit einer neutralen Platzhalter-Marke („Maison") und sechs Beispiel-Shirts. Sie ist der Ausgangspunkt für jeden Durchlauf.scripts/— erstelle eine Website, wende eine Marke an, erstelle ein provisorisches Logo, verarbeite Produktbilder, Gesundheitscheck.references/— ein Leitfaden pro Phase.
Beginne immer eine neue Website aus der Vorlage und ändere sie; schreibe sie niemals von Grund auf neu. Die Vorlage enthält viele visuelle Entscheidungen (Beleuchtung, Proportionen, Details), die bei einem Neuschreiben verloren gehen. Die Platzhalter-Marke darf niemals zum Nutzer gelangen: Jeder Durchlauf ersetzt sie durch die Marke des Nutzers oder durch eine von dir entworfene.
So wird es ausgeführt: gesamte Pipeline oder eine Phase
Das erste Wort der Argumente wählt eine Phase. Ohne Phasenwort wird die gesamte Pipeline ausgeführt.
| Aufruf | Was es tut | Leitfaden |
|---|---|---|
/rail-to-door [Aufforderung] | Alles unten, in der Reihenfolge | diese Datei, dann jeder Leitfaden, wenn du ihn erreichst |
/rail-to-door-brand · … brand … | Schreibe das Briefing, erstelle die Website, wende Name, Logo, Farben, Herkunft, Behälter, Fahrzeugfarben an | references/brand.md |
/rail-to-door-products · … products … | Generiere Produktbilder mit Higgsfield, schneide sie aus, schreibe den Katalog | references/products.md |
/rail-to-door-rail · … rail … | Die Shop-Seite: Anzeige, Drehen bei Hover, Betrachter, Ziehen in den Behälter | references/rail.md |
/rail-to-door-checkout · … checkout … | Schublade, Summen, Zahlungsbildschirm | references/checkout.md |
/rail-to-door-journey · … journey … | Die 3D-Reise: Verpackung, Förderband, LKW, Flugzeug, Karte, Haus | references/journey.md |
/rail-to-door-verify · … verify … | Starte es, führe den gesamten Ablauf in einem Browser aus, betrachte jede Szene | references/verify.md |
Auf welcher Website eine Phase arbeitet: dem vom Nutzer genannten Ordner; andernfalls dem aktuellen Verzeichnis, wenn es sich um eine Rail-to-door-Website handelt (es hat brand.json neben index.html); andernfalls einer neuen, die aus der Vorlage unter ./<Marken-Kurzform>-store erstellt wird. Durchsuche den Rechner nicht nach einer.
Das Briefing: Jeder Teil ist eine Entscheidung
Lege das Briefing fest, bevor du baust. Lies es aus der Aufforderung heraus; wenn die Aufforderung schweigt, entscheide selbst auf eine Weise, die zur Marke passt, und liste deine Entscheidungen im Abschlussbericht auf. Stelle nur dann eine Frage, wenn eine falsche Annahme echtes Geld oder Arbeit kosten würde (siehe „Wann fragen").
| Platz | Eingebaut | Wie es sich ändert |
|---|---|---|
| Markenname, Domain, Slogan | — | brand.json-Schlüssel → apply_brand.py |
| Logo | — | Datei des Nutzers · mit Higgsfield generiert · make_logo.py-Monogramm-Ersatz |
| Seitenfarben (Papier, Tinte, weiche Tinte, gedämpft, Linie, Waschung, Akzent) | warmweiß + fast schwarz | brand.json |
| Schriftart | Fraunces + Inter | manuell, siehe brand.md |
| Was verkauft wird und wie viele | sechs Shirts (Platzhalter) | Produktphase |
| Anzeige | Hängeschiene, seitlich → vorne bei Hover | Schienenphase (Regal-/Hakenvarianten sind eine Bearbeitung, siehe rail.md) |
| Behälter | tote (Tasche) · basket (Korb) · cart (Wagen) · box (Schachtel) | brand.json container, plus das verwendete Wort |
| Verpackung | bedruckter Versandkarton, Papierband, Etikett | boxBoard, boxPrint; Neugestaltung in journey.md |
| Sortierung | Förderband mit Scan-Gate | conveyorFrame, beltColor; Neugestaltung in journey.md |
| Boden-Leg | Kastenwagen mit Fahrerhaus | truckBody, truckCab; andere Fahrzeuge in journey.md |
| Luft-Leg | Frachtflugzeug + Weltkarte | planeBody, liveryDark; nur Straße oder See in journey.md |
| Zielort | Backsteinhaus, Holzhaustür | doorColor; andere Gebäude in journey.md |
| Herkunftsstadt / Flughafen, Zielstädte | Lissabon (Platzhalter) | brand.json, CITIES in js/data.js |
| Bildunterschriften und Texte | generisch | index.html |
Die eingebauten Teile sind eine starke Vorgabe, keine Einschränkung. Wenn das Briefing etwas verlangt, das nicht eingebaut ist (einen Roller-Kurier, ein Schiff, einen Marktstand statt einer Schiene, eine Geschenkbox als Wagen), baue es im gleichen Stil und auf dem gleichen Niveau – die Phasenleitfäden erklären, wie.
Mit einer Aufforderung, mit einem Link, mit nichts
- Eine Aufforderung — befolge sie. Entscheide über alles, was sie auslässt.
- Ein Link zu einer Website, die dem Nutzer gefällt (nur wenn er einen angibt – suche niemals danach und gehe niemals von einem aus): studiere ihn auf das Gefühl – Palette, typografische Stimmung, Ton der Stimme, was verkauft wird und wie es fotografiert ist – und gestalte etwas Originelles in diesem Geiste. Kopiere nicht ihren Namen, ihr Logo, ihre Bilder, ihren Text oder ihr Layout. Siehe
brand.md. - Keine Aufforderung — entwirf selbst eine Marke: einen Namen, eine einzeilige Positionierung, eine Palette, eine Herkunftsstadt, eine kleine Kollektion, die dazu passt. Führe dann die Pipeline aus. Präsentiere die von dir erfundene Marke oben im Bericht, damit der Nutzer lenken kann.
Wann fragen
Höchstens eine Frage, bevor die Arbeit beginnt – und nur für diese:
- Ausgabe von Higgsfield-Credits. Überprüfe immer die Kosten vorab und hole ein klares Ja ein (siehe
products.md). Bündele „Hier ist die Kollektion und die Marke, die ich bauen werde, sie kostet N Credits – los?" zu dieser einen Frage. - Die eigene Marke des Nutzers ist eindeutig beabsichtigt, aber ihr Name wurde nicht genannt.
Alles andere: entscheide, baue, berichte.
Gesamte Pipeline
- Briefing + Marke —
references/brand.md. Endet mit einem Site-Ordner, der die Marke überall trägt. - Produkte —
references/products.md. Generiere (nach der Freigabe), schneide aus, katalogisiere. Wenn der Nutzer die Ausgabe ablehnt oder Higgsfield nicht verfügbar ist, verwende seine eigenen Fotos; falls das nicht geht, behalte die Beispiel-Shirts und sage deutlich, dass es Platzhalter sind. - Anzeige —
references/rail.md: Kopie, Größenanpassung, der Behälter. - Checkout —
references/checkout.md. - Reise —
references/journey.md: bestätige, dass jede Szene die Marke trägt; nimm die vom Briefing geforderten Änderungen vor. - Verifizieren —
python3 scripts/check_site.py <site>, dann der Browser-Lauf inreferences/verify.md. Überspringe es nicht: Die meisten Mängel dieser Art von Build sind nur in einem Screenshot sichtbar. - Bericht — wo die Site ist und wie man sie öffnet; das umgesetzte Briefing (einschließlich dessen, was du entschieden hast); was Platzhalter ist (Namen, Preise, ein Ersatzlogo, die Demo-Zahlung); ausgegebene Credits; was du nicht überprüft hast.
Wo die Dinge in einer Site leben
index.html gesamtes Markup: Anzeige, Behälter, Betrachter, Schublade, Zahlung, Reise-Bildunterschriften, HUD
css/style.css jeder Stil; Marken-Token sind die :root-Variablen oben
js/data.js PRODUKTE (generiert), KONFIGURATION (Behälter + Wortlaut), URSPRUNG, STÄDTE
js/shop.js Anzeige, Drehen bei Hover, Ziehen, Betrachter, Warenkorb, Schublade, Demo-Zahlung
js/main.js wechselt zwischen Shop ↔ Reise, Selbstabspiel (SEKUNDEN = Länge des Durchlaufs)
js/journey.js die vier 3D-Welten, Kameras, die Scroll-Zeitleiste
js/models.js der LKW und das Flugzeug
js/parcels.js die Schachtel (Klappen, Klebeband, Etikett) und die geschlossenen Pakete
js/textures.js alles, was auf Leinwände gemalt wird: Schachtelkunst, Etikett, Klebeband, LKW-Seite, Schild, Förderband, Fußmatte
js/world.js echte Küstenverläufe → Punktkarte, Großkreis-Route
assets/logo.png dunkles Zeichen auf transparent; wird im Code überall eingefärbt
assets/rail/ Produkt-Freisteller: <Kurzform>-front.webp, -back.webp, -side.webp
vendor/ three.js, Beleuchtungshelfer, Küstenverlaufsdaten
brand.json was die Site derzeit aussagt; bearbeitet von scripts/apply_brand.py
serve.py winziger statischer Server: python3 serve.py 8792
Qualitätsanspruch (nicht verhandelbar, unabhängig von der Marke)
- Echte Freisteller, seitlich. Produkte hängen dünn im Ruhezustand und drehen sich bei Mauskontakt zur Vorderseite. Flache, frontal gezeigte Bilder in einer Reihe erzielen diesen Effekt nicht.
- Eine Palette. Die Seite, die Verpackung, das Förderband, die Fahrzeuge und die Route verwenden alle die Farben der Marke. Führe keine Farbe ein, die die Marke nicht hat; Fahrzeugleuchten sind die einzige Ausnahme.
- Nichts Spielzeugartiges. Fahrzeuge, Maschinen und Gebäude werden aus ihren realen Teilen modelliert – Glas, das als Glas erkennbar ist, Leuchten, Kühlergrille, Räder mit Felgen, Türbeschläge – nicht aus Schachteln mit Zylindern. Siehe die Ausstattungsregel in
journey.md. - Das eigene Zeichen und die eigene Schriftart der Marke auf allem Bedruckten (Verpackung, Klebeband, Etikett, LKW, Seitenleitwerk, Fußmatte). Lange Namen müssen passen: Die Vorlage verkleinert Text, damit er passt; überprüfe, ob das geschehen ist.
- Der Zahlungsbildschirm ist eine Demo. Er sammelt keine Kreditkartendaten und berechnet nichts. Behalte das so bei, es sei denn, der Nutzer bittet ausdrücklich um die Anbindung eines echten Zahlungsanbieters, und frage niemals nach echten Kreditkartennummern und verarbeite sie auch nicht.
- Prüfe durch Hinsehen. Code, der eine Syntaxprüfung besteht, kann dennoch falsch rendern.
- Sage, was Platzhalter oder unverifiziert ist.
Skripte
| Skript | Verwendung |
|---|---|
scripts/new_site.py <site> [--brand b.json] [--force] | Kopiere die Vorlage in einen neuen Ordner (und wende eine Marke an) |
scripts/apply_brand.py <site> <b.json> | Wende Markenwerte auf der gesamten Site an / ändere sie (wiederholbar) |
scripts/make_logo.py "<Name>" <out.png> | Monogramm-Ersatz, wenn kein Logo vorhanden ist |
scripts/process_cutouts.py --raw <verzeichnis> --site <site> [--synth-side] [--append] | Schneide Produktbilder aus, beschneide sie, ändere die Größe; schreibe den Katalog neu |
scripts/check_site.py <site> | Statischer Gesundheitscheck vor dem Browser-Lauf |
process_cutouts.py und make_logo.py benötigen Pillow; ersteres auch numpy, opencv-python und scipy (pip install pillow numpy opencv-python scipy).