KooEmmanuel/rail-to-door

Rail to door

Uma loja de página única que transforma a compra em um pequeno filme:

1. A exibição — recortes de produtos pendurados de lado em um trilho e giram para encará-lo ao passar o mouse; clique para um visualizador frontal/traseiro; arraste um para o container.
2. Container e checkout — uma bolsa (ou cesta, carrinho, caixa) que enche, uma gaveta para editar o pedido, uma tela de pagamento de demonstração.
3. A jornada do pedido — após o pagamento, uma sequência 3D conduzida pela rolagem e auto-reproduzida: os itens são embalados em uma caixa personalizada → selada e etiquetada com o nome do cliente → esteira e portal de digitalização → caminhão de entrega → carregamento no aeroporto → avião de carga → um mapa-múndi com litorais reais e o voo → a encomenda pousa em uma porta.

Esta habilidade é autocontida

Tudo que é necessário está dentro da pasta da habilidade. Você não precisa, e não deve procurar, um site existente, um projeto anterior ou arquivos de marca de ninguém:

• assets/template/ — o site completo funcional (HTML/CSS/ES modules puro + three.js, sem etapa de build) com uma marca neutra temporária ("Maison") e seis camisetas de exemplo. É o ponto de partida para toda execução.
• scripts/ — criar um site, aplicar uma marca, criar um logotipo provisório, processar imagens de produtos, verificação de integridade.
• references/ — um guia por etapa.

Sempre inicie um novo site a partir do template e o modifique; nunca o reescreva do zero. O template incorpora muitas decisões visuais difíceis de alcançar (iluminação, proporções, detalhes), e reescrever as perde. A marca temporária nunca deve chegar ao usuário: toda execução a substitui pela marca deles, ou por uma que você criar.

Como executar: pipeline completo ou uma etapa

A primeira palavra dos argumentos escolhe uma etapa. Sem palavra de etapa, execute o pipeline completo.

Invocação	O que faz	Guia
/rail-to-door [prompt]	Tudo abaixo, em ordem	este arquivo, depois cada guia ao alcançá-lo
/rail-to-door-brand · … brand …	Escrever o briefing, criar o site, aplicar nome, logotipo, cores, origem, container, cores dos veículos	references/brand.md
/rail-to-door-products · … products …	Gerar imagens de produtos com Higgsfield, recortá-las, escrever o catálogo	references/products.md
/rail-to-door-rail · … rail …	A página da loja: exibição, giro ao passar o mouse, visualizador, arrastar para o container	references/rail.md
/rail-to-door-checkout · … checkout …	Gaveta, totais, tela de pagamento	references/checkout.md
/rail-to-door-journey · … journey …	A jornada 3D: embalagem, esteira, caminhão, avião, mapa, casa	references/journey.md
/rail-to-door-verify · … verify …	Servir, executar o fluxo completo em um navegador, examinar cada cena	references/verify.md

Em qual site uma etapa atua: a pasta que o usuário nomear; caso contrário, o diretório atual se for um site rail-to-door (tem brand.json ao lado de index.html); caso contrário, um novo criado a partir do template em ./<brand-slug>-store. Não procure na máquina por um.

O briefing: cada parte é uma escolha

Antes de construir, estabeleça o briefing. Leia-o a partir do prompt; onde o prompt for omisso, decida você mesmo de uma forma que se adeque à marca e liste suas decisões no relatório final. Faça uma pergunta apenas quando um palpite errado desperdiçaria dinheiro ou trabalho de verdade (veja "Quando perguntar").

Item	Integrado	Como muda
Nome da marca, domínio, slogan	—	Chaves brand.json → apply_brand.py
Logotipo	—	Arquivo do usuário · gerado com Higgsfield · make_logo.py monograma provisório
Cores da página (papel, tinta, tinta suave, neutro, linha, lavagem, destaque)	branco quente + quase preto	brand.json
Tipo de letra	Fraunces + Inter	manual, veja brand.md
O que é vendido e quantos	seis camisetas (temporário)	etapa de produtos
Exibição	trilho pendurado, de lado → frontal ao passar o mouse	etapa rail (variantes de prateleira/gancho são uma edição, veja rail.md)
Container	tote (bolsa) · basket (cesta) · cart (carrinho) · box (caixa)	brand.json container, mais a palavra usada para ele
Embalagem	caixa postal impressa, fita de papel, etiqueta	boxBoard, boxPrint; redesenho em journey.md
Separação	esteira com portal de digitalização	conveyorFrame, beltColor; redesenho em journey.md
Trecho terrestre	caminhão baú cabine sobre	truckBody, truckCab; outros veículos em journey.md
Trecho aéreo	aeronave de carga + mapa-múndi	planeBody, liveryDark; apenas rodoviário ou marítimo em journey.md
Destino	casa de alvenaria, porta painelada	doorColor; outros edifícios em journey.md
Cidade de origem / aeroporto, cidades de destino	Lisboa (temporário)	brand.json, CITIES em js/data.js
Legendas e textos	genérico	index.html

As peças integradas são um padrão forte, não um limite. Se o briefing pedir algo que não está integrado (um entregador de scooter, um navio, uma barraca de mercado em vez de um trilho, uma caixa de presente como carrinho), construa no mesmo estilo e no mesmo padrão — os guias das etapas explicam como.

Com um prompt, com um link, com nada

• Um prompt — siga-o. O que ele omitir, decida.
• Um link para um site que o usuário gosta (apenas quando ele der um — nunca procure um e nunca presuma um): estude-o pela sensação — paleta, clima tipográfico, tom de voz, o que vendem e como é fotografado — e crie algo original nesse espírito. Não copie seu nome, logotipo, imagens, texto ou layout. Veja brand.md.
• Nenhum prompt — crie uma marca você mesmo: um nome, um posicionamento de uma linha, uma paleta, uma cidade de origem, uma pequena coleção que se encaixe. Então execute o pipeline. Apresente a marca que você inventou no topo do relatório para que o usuário possa redirecionar.

Quando perguntar

Uma pergunta, no máximo, antes do trabalho começar — e apenas para estes casos:

• Gastar créditos do Higgsfield. Sempre verifique o custo antecipadamente e obtenha um sim claro (veja products.md). Agrupe "aqui está a coleção e a marca que vou construir, custa N créditos — pode prosseguir?" nessa única pergunta.
• O nome da própria marca do usuário é claramente pretendido, mas não foi informado.

Todo o resto: decida, construa, relate.

Pipeline completo

1. Briefing + marca — references/brand.md. Termina com uma pasta de site carregando a marca em todos os lugares.
2. Produtos — references/products.md. Gerar (após o sinal verde), recortar, catalogar. Se o usuário recusar o gasto ou Higgsfield estiver indisponível, use as próprias fotos dele; em último caso, mantenha as camisetas de exemplo e diga claramente que são temporárias.
3. Exibição — references/rail.md: cópia, dimensionamento, o container.
4. Checkout — references/checkout.md.
5. Jornada — references/journey.md: confirme que cada cena carrega a marca; faça as alterações que o briefing pedir.
6. Verificação — python3 scripts/check_site.py <site>, depois a execução no navegador conforme references/verify.md. Não pule: a maioria dos defeitos nesse tipo de construção só é visível em uma captura de tela.
7. Relatório — onde o site está e como abri-lo; o briefing implementado (incluindo o que você decidiu); o que é temporário (nomes, preços, um logotipo provisório, o pagamento de demonstração); créditos gastos; o que você não verificou.

Onde as coisas vivem em um site

index.html          toda a marcação: exibição, container, visualizador, gaveta, pagamento, legendas da jornada, HUD
css/style.css       todos os estilos; os tokens da marca são as variáveis :root no topo
js/data.js          PRODUCTS (gerado), CONFIG (container + texto), ORIGIN, CITIES
js/shop.js          exibição, giro ao passar o mouse, arrastar, visualizador, carrinho, gaveta, pagamento de demonstração
js/main.js          alterna entre loja ↔ jornada, auto-reprodução (SECONDS = duração da reprodução)
js/journey.js       os quatro mundos 3D, câmeras, a linha do tempo de rolagem
js/models.js        o caminhão e a aeronave
js/parcels.js       a caixa (abas, fita, etiqueta) e as encomendas fechadas
js/textures.js      tudo pintado em canvases: arte da caixa, etiqueta, fita, lateral do caminhão, placa, esteira, capacho
js/world.js         litorais reais → mapa de pontos, rota de grande círculo
assets/logo.png     marca escura em fundo transparente; tingida no código onde quer que apareça
assets/rail/        recortes de produtos:  <slug>-front.webp, -back.webp, -side.webp
vendor/             three.js, auxiliares de iluminação, dados de litoral
brand.json          o que o site diz atualmente; editado por scripts/apply_brand.py
serve.py            pequeno servidor estático:  python3 serve.py 8792

Padrão de qualidade (não negociável, seja qual for a marca)

• Recortes reais, de lado. Os produtos penduram finos em repouso e viram para a frente ao passar o mouse. Imagens frontais planas em fila não produzem o efeito.
• Uma paleta. A página, a embalagem, a esteira, os veículos e a rota usam todas as cores da marca. Não introduza uma cor que a marca não tenha; lâmpadas de veículos são a única exceção.
• Nada de brinquedo. Veículos, máquinas e edifícios são modelados a partir de suas partes reais — vidro que parece vidro, lâmpadas, grades, rodas com aros, ferragens de portas — não caixas com cilindros. Veja a regra de acabamento em journey.md.
• A própria marca e tipo de letra da marca em tudo impresso (embalagem, fita, etiqueta, caminhão, estabilizador vertical, capacho). Nomes longos devem caber: o template reduz o texto para caber; verifique se funcionou.
• A tela de pagamento é uma demonstração. Ela não coleta detalhes de cartão e não cobra nada. Mantenha assim a menos que o usuário peça explicitamente para conectar um provedor de pagamento real, e nunca peça ou manipule números de cartão reais.
• Verifique olhando. Código que passa em uma verificação de sintaxe ainda pode renderizar incorretamente.
• Diga o que é temporário ou não verificado.

Scripts

Script	Uso
scripts/new_site.py <site> [--brand b.json] [--force]	Copiar o template para uma nova pasta (e aplicar uma marca)
scripts/apply_brand.py <site> <b.json>	Aplicar / alterar valores da marca em todo o site (reexecutável)
scripts/make_logo.py "<Nome>" <out.png>	Monograma provisório quando não há logotipo
scripts/process_cutouts.py --raw <dir> --site <site> [--synth-side] [--append]	Recortar, aparar, redimensionar imagens de produtos; reescrever o catálogo
scripts/check_site.py <site>	Verificação de integridade estática antes da execução no navegador

process_cutouts.py e make_logo.py precisam do Pillow; o primeiro também precisa de numpy, opencv-python e scipy (pip install pillow numpy opencv-python scipy).