Rail-to-door

Rail to door

Una tienda de una sola página que convierte la compra en una pequeña película:

1. La exhibición — recortes de productos cuelgan de lado en un riel y giran hacia ti al pasar el ratón; haz clic para ver un visor frontal/trasero; arrastra uno al contenedor.
2. Contenedor y pago — una bolsa (o cesta, carrito, caja) que se llena, un cajón para editar el pedido, una pantalla de pago de demostración.
3. El viaje del pedido — después de pagar, una secuencia 3D autoejecutable impulsada por desplazamiento: los artículos se empaquetan en envases personalizados → se sellan y etiquetan con el nombre del cliente → cinta transportadora y pórtico de escaneo → camión de reparto → cargador de aeropuerto → avión de carga → un mapa mundial con costas reales y el vuelo → el paquete aterriza en la puerta de una casa.

Esta habilidad es autocontenida

Todo lo necesario está dentro de la carpeta de la habilidad. No necesitas, y no debes buscar, un sitio existente, un proyecto anterior o los archivos de marca de nadie:

• assets/template/ — el sitio completo funcional (HTML/CSS/ES modules plano + three.js, sin paso de compilación) que lleva una marca neutral de ejemplo ("Maison") y seis camisetas de muestra. Es el punto de partida para cada ejecución.
• scripts/ — crea un sitio, aplica una marca, crea un logotipo provisional, procesa imágenes de productos, verificación de estado.
• references/ — una guía por etapa.

Siempre comienza un nuevo sitio desde la plantilla y modifícalo; nunca lo reescribas desde cero. La plantilla incorpora muchas decisiones visuales difíciles de conseguir (iluminación, proporciones, detalles), y rehacerlas las pierde. La marca de ejemplo nunca debe llegar al usuario: cada ejecución la reemplaza con su marca, o con una que tú diseñes.

Cómo ejecutar: pipeline completo o una etapa

La primera palabra de los argumentos elige una etapa. Sin palabra de etapa, ejecuta el pipeline completo.

Invocación	Qué hace	Guía
/rail-to-door [prompt]	Todo lo siguiente, en orden	este archivo, luego cada guía a medida que la alcances
/rail-to-door-brand · … brand …	Escribe el brief, crea el sitio, aplica nombre, logotipo, colores, origen, contenedor, colores del vehículo	references/brand.md
/rail-to-door-products · … products …	Genera imágenes de productos con Higgsfield, las recorta, escribe el catálogo	references/products.md
/rail-to-door-rail · … rail …	La página de la tienda: exhibición, giro al pasar, visor, arrastrar al contenedor	references/rail.md
/rail-to-door-checkout · … checkout …	Cajón, totales, pantalla de pago	references/checkout.md
/rail-to-door-journey · … journey …	El viaje 3D: empaquetado, cinta transportadora, camión, avión, mapa, casa	references/journey.md
/rail-to-door-verify · … verify …	Sírvete, ejecuta todo el flujo en un navegador, mira cada escena	references/verify.md

En qué sitio trabaja una etapa: la carpeta que nombre el usuario; de lo contrario, el directorio actual si es un sitio rail-to-door (tiene brand.json junto a index.html); de lo contrario, uno nuevo creado desde la plantilla en ./<brand-slug>-store. No busques en la máquina uno.

El brief: cada parte es una elección

Antes de construir, establece el brief. Léelo del prompt; donde el prompt no diga nada, decídelo tú mismo de una manera que se adapte a la marca, y enumera tus decisiones en el informe final. Haz una pregunta solo cuando una suposición incorrecta desperdiciaría dinero o trabajo real (ver "Cuándo preguntar").

Espacio	Integrado	Cómo cambia
Nombre de la marca, dominio, eslogan	—	Claves de brand.json → apply_brand.py
Logotipo	—	archivo del usuario · generado con Higgsfield · monograma provisional de make_logo.py
Colores de la página (papel, tinta, tinta suave, apagado, línea, lavado, acento)	blanco cálido + casi negro	brand.json
Tipografía	Fraunces + Inter	manual, ver brand.md
Qué se vende y cuántos	seis camisetas (ejemplo)	etapa de productos
Exhibición	riel colgante, de lado → frontal al pasar	etapa de riel (variantes de estante / percha son una edición, ver rail.md)
Contenedor	tote (bolsa) · basket (cesta) · cart (carrito) · box (caja)	brand.json container, más la palabra usada para él
Empaquetado	caja de envío impresa, cinta de papel, etiqueta	boxBoard, boxPrint; rediseñar en journey.md
Clasificación	cinta transportadora con pórtico de escaneo	conveyorFrame, beltColor; rediseñar en journey.md
Tramo terrestre	camión con cabina sobre caja	truckBody, truckCab; otros vehículos en journey.md
Tramo largo	avión de carga + mapa mundial	planeBody, liveryDark; solo carretera o mar en journey.md
Destino	casa de ladrillo, puerta panelada	doorColor; otros edificios en journey.md
Ciudad de origen / aeropuerto, ciudades de destino	Lisboa (ejemplo)	brand.json, CITIES en js/data.js
Leyendas y textos	genéricos	index.html

Las piezas integradas son un valor predeterminado sólido, no un límite. Si el brief pide algo que no está integrado (un repartidor en scooter, un barco, un puesto de mercado en lugar de un riel, una caja de regalo como carrito), constrúyelo con el mismo estilo y al mismo nivel: las guías de etapa dicen cómo.

Con un prompt, con un enlace, con nada

• Un prompt — síguelo. Todo lo que omita, decídelo.
• Un enlace a un sitio que le guste al usuario (solo cuando ellos lo proporcionen — nunca vayas a buscar uno y nunca asumas uno): estúdialo por su sensación — paleta, ambiente tipográfico, tono de voz, qué venden y cómo se fotografía — y diseña algo original en ese espíritu. No copies su nombre, logotipo, imágenes, texto ni diseño. Ver brand.md.
• Sin prompt — diseña una marca tú mismo: un nombre, un posicionamiento de una línea, una paleta, una ciudad de origen, una pequeña colección que encaje. Luego ejecuta el pipeline. Presenta la marca que inventaste al principio del informe para que el usuario pueda redirigir.

Cuándo preguntar

Una pregunta, como máximo, antes de que comience el trabajo — y solo por estas:

• Gastar créditos de Higgsfield. Siempre verifica el costo antes y obtén un sí claro (ver products.md). Agrupa "aquí está la colección y la marca que construiré, cuesta N créditos — ¿adelante?" en esa única pregunta.
• El nombre de la propia marca del usuario está claramente implícito pero no se proporcionó.

Todo lo demás: decide, construye, informa.

Pipeline completo

1. Brief + marca — references/brand.md. Termina con una carpeta de sitio que lleva la marca en todas partes.
2. Productos — references/products.md. Genera (después de la autorización), recorta, cataloga. Si el usuario rechaza el gasto o Higgsfield no está disponible, usa sus propias fotos; si no, conserva las camisetas de muestra y di claramente que son marcadores de posición.
3. Exhibición — references/rail.md: copia, tamaño, el contenedor.
4. Pago — references/checkout.md.
5. Viaje — references/journey.md: confirma que cada escena lleva la marca; haz los cambios que pida el brief.
6. Verificación — python3 scripts/check_site.py <site>, luego la ejecución en el navegador descrita en references/verify.md. No te la saltes: la mayoría de los defectos en este tipo de construcción solo son visibles en una captura de pantalla.
7. Informe — dónde está el sitio y cómo abrirlo; el brief tal como se construyó (incluyendo lo que decidiste); qué es marcador de posición (nombres, precios, un logotipo provisional, el pago de demostración); créditos gastados; qué no verificaste.

Dónde viven las cosas en un sitio

index.html          todo el marcado: exhibición, contenedor, visor, cajón, pago, leyendas del viaje, HUD
css/style.css       todos los estilos; los tokens de marca son las variables `:root` al principio
js/data.js          PRODUCTS (generados), CONFIG (contenedor + redacción), ORIGIN, CITIES
js/shop.js          exhibición, giro al pasar, arrastrar, visor, carrito, cajón, pago de demostración
js/main.js          cambia entre tienda ↔ viaje, reproducción automática (SECONDS = duración de la reproducción)
js/journey.js       los cuatro mundos 3D, cámaras, la línea de tiempo de desplazamiento
js/models.js        el camión y la aeronave
js/parcels.js       la caja (solapas, cinta, etiqueta) y los paquetes cerrados
js/textures.js      todo pintado en lienzos: arte de caja, etiqueta, cinta, costado del camión, letrero, banda, felpudo
js/world.js         costas reales → mapa de puntos, ruta de círculo máximo
assets/logo.png     marca oscura sobre fondo transparente; teñida en el código dondequiera que aparezca
assets/rail/        recortes de productos:  <slug>-front.webp, -back.webp, -side.webp
vendor/             three.js, ayudantes de iluminación, datos de costas
brand.json          lo que el sitio dice actualmente; editado por scripts/apply_brand.py
serve.py            pequeño servidor estático:  python3 serve.py 8792

Nivel de calidad (no negociable, sea cual sea la marca)

• Recortes reales, de lado. Los productos cuelgan delgados en reposo y giran al frente al pasar el ratón. Las imágenes frontales planas en fila no logran el efecto.
• Una paleta. La página, el empaquetado, la cinta transportadora, los vehículos y la ruta usan todos los colores de la marca. No introduzcas un color que la marca no tenga; las lámparas de los vehículos son la única excepción.
• Nada de juguete. Los vehículos, máquinas y edificios se modelan a partir de sus partes reales — vidrio que se lee como vidrio, lámparas, rejillas, ruedas con llantas, herrajes de puertas — no cajas con cilindros. Ver la regla de molduras en journey.md.
• La propia marca y tipografía de la marca en todo lo impreso (empaquetado, cinta, etiqueta, camión, estabilizador vertical, felpudo). Los nombres largos deben caber: la plantilla encoge el texto para que quepa; verifica que lo hizo.
• La pantalla de pago es una demostración. No recopila datos de tarjeta y no cobra nada. Mantenlo así a menos que el usuario pida explícitamente conectar un proveedor de pago real, y nunca preguntes ni manejes números de tarjeta reales.
• Verifica mirando. El código que pasa una verificación de sintaxis aún puede renderizarse incorrectamente.
• Di qué es marcador de posición o no verificado.

Scripts

Script	Uso
scripts/new_site.py <site> [--brand b.json] [--force]	Copia la plantilla a una nueva carpeta (y aplica una marca)
scripts/apply_brand.py <site> <b.json>	Aplica / cambia los valores de la marca en todo el sitio (ejecutable de nuevo)
scripts/make_logo.py "<Name>" <out.png>	Monograma provisional cuando no hay logotipo
scripts/process_cutouts.py --raw <dir> --site <site> [--synth-side] [--append]	Recorta, ajusta, redimensiona las imágenes de los productos; reescribe el catálogo
scripts/check_site.py <site>	Verificación de estado estática antes de la ejecución en el navegador

process_cutouts.py y make_logo.py necesitan Pillow; el primero también numpy, opencv-python y scipy (pip install pillow numpy opencv-python scipy).