KooEmmanuel/rail-to-door

Rail to door

Une boutique d'une seule page qui transforme l'achat en un petit film :

1. L'affichage — des découpes de produits sont suspendues de profil sur un rail et se tournent vers vous au survol ; cliquez pour une vue avant/arrière ; glissez-en une dans le contenant.
2. Contenant et caisse — un sac (ou panier, caddie, boîte) qui se remplit, un tiroir pour modifier la commande, un écran de paiement de démonstration.
3. Le parcours de la commande — après le paiement, une séquence 3D auto-jouée pilotée par le défilement : les articles sont emballés dans un emballage personnalisé → scellés et étiquetés au nom du client → tapis roulant et portique de numérisation → camion de livraison → chargeur d'aéroport → avion cargo → une carte du monde avec les côtes réelles et le vol → le colis atterrit sur un pas de porte.

Ce skill est autonome

Tout le nécessaire se trouve dans le dossier du skill. Vous n'avez pas besoin, et ne devez pas chercher, un site existant, un projet précédent ou les fichiers de la marque de quiconque :

• assets/template/ — le site complet fonctionnel (HTML/CSS/ES modules + three.js, sans étape de build) portant une marque générique neutre ("Maison") et six chemises d'exemple. C'est le point de départ pour chaque exécution.
• scripts/ — créer un site, appliquer une marque, fabriquer un logo provisoire, traiter les images de produits, vérifier l'état.
• references/ — un guide par étape.

Commencez toujours un nouveau site à partir du template et modifiez-le ; ne le réécrivez jamais de zéro. Le template incorpore de nombreuses décisions visuelles durement acquises (éclairage, proportions, détails), et le reconstruire les perd. La marque générique ne doit jamais parvenir à l'utilisateur : chaque exécution la remplace par sa marque, ou par une que vous concevez.

Comment exécuter : pipeline complet ou une étape

Le premier mot des arguments choisit une étape. Sans mot d'étape, exécutez le pipeline complet.

Invocation	Ce qu'elle fait	Guide
/rail-to-door [prompt]	Tout ce qui suit, dans l'ordre	ce fichier, puis chaque guide au fur et à mesure
/rail-to-door-brand · … brand …	Rédiger le brief, créer le site, appliquer nom, logo, couleurs, origine, contenant, couleurs des véhicules	references/brand.md
/rail-to-door-products · … products …	Générer les images de produits avec Higgsfield, les découper, écrire le catalogue	references/products.md
/rail-to-door-rail · … rail …	La page boutique : affichage, rotation au survol, visionneuse, glisser vers le contenant	references/rail.md
/rail-to-door-checkout · … checkout …	Tiroir, totaux, écran de paiement	references/checkout.md
/rail-to-door-journey · … journey …	Le voyage 3D : emballage, tapis roulant, camion, avion, carte, maison	references/journey.md
/rail-to-door-verify · … verify …	Servir, exécuter tout le flux dans un navigateur, regarder chaque scène	references/verify.md

Sur quel site une étape travaille : le dossier nommé par l'utilisateur ; sinon le répertoire courant s'il s'agit d'un site rail-to-door (il a brand.json à côté de index.html) ; sinon un nouveau créé à partir du template dans ./<slug-de-la-marque>-store. Ne cherchez pas sur la machine.

Le brief : chaque partie est un choix

Avant de construire, établissez le brief. Lisez-le dans le prompt ; là où le prompt est muet, décidez-le vous-même d'une manière qui convienne à la marque, et listez vos décisions dans le rapport final. Ne posez une question que lorsqu'une supposition erronée ferait perdre de l'argent ou du travail (voir "Quand demander").

Élément	Intégré	Comment ça change
Nom de la marque, domaine, accroche	—	Clés brand.json → apply_brand.py
Logo	—	Fichier de l'utilisateur · généré avec Higgsfield · monogramme provisoire make_logo.py
Couleurs de la page (papier, encre, encre douce, adoucie, trait, lavis, accent)	blanc chaud + quasi noir	brand.json
Police de caractères	Fraunces + Inter	manuel, voir brand.md
Ce qui est vendu, et combien	six chemises (génériques)	étape produits
Affichage	rail suspendu, de profil → de face au survol	étape rail (variantes étagère / cheville sont une modification, voir rail.md)
Contenant	tote (sac) · basket (panier) · cart (caddie) · box (boîte)	brand.json container, plus le mot utilisé
Emballage	boîte postale imprimée, ruban adhésif en papier, étiquette	boxBoard, boxPrint ; refonte dans journey.md
Tri	tapis roulant avec portique de numérisation	conveyorFrame, beltColor ; refonte dans journey.md
Trajet terrestre	camion cabine sur boîte	truckBody, truckCab ; autres véhicules dans journey.md
Trajet longue distance	avion cargo + carte du monde	planeBody, liveryDark ; route ou mer seulement dans journey.md
Destination	maison en briques, porte à panneaux	doorColor ; autres bâtiments dans journey.md
Ville d'origine / aéroport, villes de destination	Lisbonne (générique)	brand.json, CITIES dans js/data.js
Légendes et contenu	générique	index.html

Les éléments intégrés sont une valeur par défaut solide, pas une limite. Si le brief demande quelque chose qui n'est pas intégré (un livreur en scooter, un bateau, un étal de marché au lieu d'un rail, une boîte-cadeau comme caddie), construisez-le dans le même style et au même niveau — les guides des étapes expliquent comment.

Avec un prompt, avec un lien, avec rien

• Un prompt — suivez-le. Tout ce qu'il omet, décidez-le.
• Un lien vers un site que l'utilisateur aime (uniquement s'il en donne un — ne cherchez jamais, et ne supposez jamais) : étudiez-le pour l'ambiance — palette, ambiance typographique, ton de la voix, ce qu'ils vendent et comment c'est photographié — et concevez quelque chose d'original dans cet esprit. Ne copiez pas son nom, logo, images, texte ou mise en page. Voir brand.md.
• Aucun prompt — créez vous-même une marque : un nom, un positionnement en une ligne, une palette, une ville d'origine, une petite collection qui lui convient. Exécutez ensuite le pipeline. Présentez la marque que vous avez inventée en haut du rapport pour que l'utilisateur puisse réorienter.

Quand demander

Une question, au maximum, avant de commencer à travailler — et uniquement pour celles-ci :

• Dépenser des crédits Higgsfield. Vérifiez toujours le coût à l'avance et obtenez un oui clair (voir products.md). Regroupez dans cette seule question : "voici la collection et la marque que je vais construire, cela coûte N crédits — on y va ?"
• La propre marque de l'utilisateur est clairement visée mais son nom n'a pas été donné.

Tout le reste : décidez, construisez, rapportez.

Pipeline complet

1. Brief + marque — references/brand.md. Se termine par un dossier de site portant la marque partout.
2. Produits — references/products.md. Générer (après le feu vert), découper, cataloguer. Si l'utilisateur refuse la dépense ou si Higgsfield est indisponible, utilisez ses propres photos ; en dernier recours, gardez les chemises d'exemple et dites clairement qu'elles sont des substituts.
3. Affichage — references/rail.md : copie, dimensionnement, le contenant.
4. Caisse — references/checkout.md.
5. Voyage — references/journey.md : confirmez que chaque scène porte la marque ; apportez les modifications demandées par le brief.
6. Vérification — python3 scripts/check_site.py <site>, puis l'exécution dans le navigateur selon references/verify.md. Ne sautez pas cette étape : la plupart des défauts de ce genre de construction ne sont visibles que dans une capture d'écran.
7. Rapport — où se trouve le site et comment l'ouvrir ; le brief tel que construit (y compris ce que vous avez décidé) ; ce qui est générique (noms, prix, logo provisoire, paiement de démonstration) ; les crédits dépensés ; ce que vous n'avez pas vérifié.

Où se trouvent les choses dans un site

index.html          tout le balisage : affichage, contenant, visionneuse, tiroir, paiement, légendes du voyage, HUD
css/style.css       tous les styles ; les jetons de la marque sont les variables :root en haut
js/data.js          PRODUCTS (généré), CONFIG (contenant + formulation), ORIGIN, CITIES
js/shop.js          affichage, rotation au survol, glisser, visionneuse, panier, tiroir, paiement de démonstration
js/main.js          bascule boutique ↔ voyage, auto-jeu (SECONDS = durée de la lecture)
js/journey.js       les quatre mondes 3D, caméras, la timeline de défilement
js/models.js        le camion et l'avion
js/parcels.js       la boîte (rabats, ruban adhésif, étiquette) et les colis fermés
js/textures.js      tout ce qui est peint sur les toiles : motif de la boîte, étiquette, ruban adhésif, côté du camion, panneau, tapis roulant, paillasson
js/world.js         côtes réelles → carte de points, route orthodromique
assets/logo.png     marque sombre sur fond transparent ; teintée dans le code partout où elle apparaît
assets/rail/        découpes de produits : <slug>-front.webp, -back.webp, -side.webp
vendor/             three.js, aides à l'éclairage, données côtières
brand.json          ce que le site dit actuellement ; édité par scripts/apply_brand.py
serve.py            petit serveur statique : python3 serve.py 8792

Barre de qualité (non négociable, quelle que soit la marque)

• Vraies découpes, de profil. Les produits pendent fins au repos et se tournent vers le devant au survol. Des images plates de face en rangée ne produisent pas l'effet.
• Une seule palette. La page, l'emballage, le tapis roulant, les véhicules et le trajet utilisent tous les couleurs de la marque. N'introduisez pas une couleur que la marque n'a pas ; les feux des véhicules sont la seule exception.
• Rien de jouet. Les véhicules, machines et bâtiments sont modélisés à partir de leurs parties réelles — verre qui ressemble à du verre, feux, grilles, roues avec jantes, quincaillerie de porte — pas des boîtes avec des cylindres. Voir la règle de garniture dans journey.md.
• La propre marque et police de la marque sur tout ce qui est imprimé (emballage, ruban adhésif, étiquette, camion, dérive, paillasson). Les noms longs doivent tenir : le template réduit le texte pour l'adapter ; vérifiez qu'il l'a fait.
• L'écran de paiement est une démo. Il ne collecte aucun détail de carte et ne facture rien. Gardez-le ainsi sauf si l'utilisateur demande explicitement de connecter un fournisseur de paiement réel, et ne demandez ni ne manipulez jamais de vrais numéros de carte.
• Vérifiez en regardant. Un code qui passe une vérification syntaxique peut encore s'afficher de manière incorrecte.
• Dites ce qui est générique ou non vérifié.

Scripts

Script	Utilisation
scripts/new_site.py <site> [--brand b.json] [--force]	Copier le template dans un nouveau dossier (et appliquer une marque)
scripts/apply_brand.py <site> <b.json>	Appliquer / modifier les valeurs de la marque sur tout le site (réexécutable)
scripts/make_logo.py "<Nom>" <out.png>	Monogramme provisoire quand il n'y a pas de logo
scripts/process_cutouts.py --raw <dir> --site <site> [--synth-side] [--append]	Découper, rogner, redimensionner les images de produits ; réécrire le catalogue
scripts/check_site.py <site>	Vérification statique de l'état avant l'exécution dans le navigateur

process_cutouts.py et make_logo.py nécessitent Pillow ; le premier aussi numpy, opencv-python et scipy (pip install pillow numpy opencv-python scipy).