KooEmmanuel/rail-to-door

Rail to door

一个将购买过程变成一部小电影的单页店铺：

1. 展示区 —— 产品抠图侧面悬挂在轨道上，悬停时转向正面；点击可查看前后视图；拖拽放入容器。
2. 容器与结账 —— 一个能填满的购物袋（或购物篮、购物车、盒子），一个用于编辑订单的抽屉式界面，一个演示支付屏幕。
3. 订单旅程 —— 支付后，一个滚动驱动的、自动播放的 3D 序列：商品被装入品牌包装 → 封口并贴上客户姓名标签 → 传送带与扫描闸门 → 送货卡车 → 机场装载机 → 货运飞机 → 真实海岸线的世界地图航线 → 包裹降落在门阶上。

此技能完全自包含

所需一切均位于技能文件夹内。你不需要，也绝不能去寻找现有的网站、以往的项目或任何人的品牌文件：

• assets/template/ —— 完整可运行的网站（纯 HTML/CSS/ES 模块 + three.js，无需构建步骤），使用中性占位品牌（"Maison"）和六件示例衬衫。这是每次运行的起点。
• scripts/ —— 创建网站、应用品牌、制作临时 Logo、处理产品图片、健康检查。
• references/ —— 每个阶段的指南。

始终从模板创建新网站并进行修改；切勿从头重写。 模板蕴含了大量来之不易的视觉决策（光照、比例、细节），重写会丢失它们。占位品牌绝不能暴露给用户：每次运行都会将其替换为用户品牌，或您设计的品牌。

如何运行：全流程或单个阶段

参数的首个单词选择阶段。若没有阶段词，则运行全流程。

调用方式	功能	指南
/rail-to-door [提示]	以下所有步骤，按顺序执行	本文件，以及每到达一个阶段时对应的指南
/rail-to-door-brand · … brand …	撰写简报，创建网站，应用名称、Logo、颜色、出发地、容器、车辆颜色	references/brand.md
/rail-to-door-products · … products …	用 Higgsfield 生成产品图片，抠图，编写商品目录	references/products.md
/rail-to-door-rail · … rail …	店铺页面：展示、悬停转向、查看器、拖拽到容器	references/rail.md
/rail-to-door-checkout · … checkout …	抽屉、总计、支付屏幕	references/checkout.md
/rail-to-door-journey · … journey …	3D 旅程：包装、传送带、卡车、飞机、地图、房屋	references/journey.md
/rail-to-door-verify · … verify …	启动服务，在浏览器中运行整个流程，查看每个场景	references/verify.md

某个阶段作用于哪个网站： 用户指定的文件夹；否则是当前目录（如果它是 rail-to-door 网站，即 index.html 旁边有 brand.json）；否则从模板在 ./<品牌slug>-store 处创建一个新网站。不要在全机器搜索。

简报：每个部分都是选择

在开始构建之前，先确定简报。从提示中读取；若提示未提及，自行决定，决定应适合品牌，并在最终报告中列出您的决策。仅当错误猜测会浪费真实资金或工作量时才提问（参见"何时提问"）。

插槽	内置默认值	如何更改
品牌名称、域名、标语	—	brand.json 键 → apply_brand.py
Logo	—	用户文件 · 用 Higgsfield 生成 · make_logo.py 字母组合临时方案
页面颜色（纸张色、墨色、柔和墨色、哑光色、线条色、水洗色、强调色）	暖白 + 近黑	brand.json
字体	Fraunces + Inter	手动，参见 brand.md
销售商品及数量	六件衬衫（占位）	产品阶段
展示方式	悬挂轨道，侧面→悬停时正面	轨道阶段（搁架/挂钩变体是修改，参见 rail.md）
容器	tote（手提袋）· basket（篮子）· cart（推车）· box（盒子）	brand.json 中的 container 及其对应文字
包装	印刷邮寄盒、纸胶带、标签	boxBoard、boxPrint；在 journey.md 中重新设计
分拣	带扫描闸门的传送带	conveyorFrame、beltColor；在 journey.md 中重新设计
地面运输	驾驶室在上方的箱式卡车	truckBody、truckCab；其他车型见 journey.md
长途运输	货运飞机 + 世界地图	planeBody、liveryDark；公路-only 或水路见 journey.md
目的地	砖房、镶板门	doorColor；其他建筑见 journey.md
出发城市/机场、目的地城市	里斯本（占位）	brand.json 中的 CITIES、js/data.js
标题与文案	通用文案	index.html

内置组件是强大的默认值，而非限制。如果简报要求内置组件中没有的内容（例如摩托车快递员、轮船、市场摊位代替轨道、礼品盒作为购物车），请以相同风格和相同标准进行构建——阶段指南会说明如何进行。

有提示、有链接、无任何输入时

• 有提示 —— 遵循提示。提示未提及的部分，自行决定。
• 有用户喜欢的网站链接（仅当用户提供时才使用——绝不主动寻找，也绝不假设）：研究其感觉——调色板、排版氛围、语气、销售内容和摄影方式——并以其精神设计原创内容。不要复制其名称、Logo、图片、文本或布局。参见 brand.md。
• 无任何输入 —— 自行设计一个品牌：名称、一句话定位、调色板、出发城市、适合该品牌的小型商品系列。然后运行流程。在报告顶部展示您创造的品牌，以便用户调整。

何时提问

在开始工作之前，最多提一个问题——且仅针对以下情况：

• 花费 Higgsfield 积分。 务必预先评估成本并得到明确同意（参见 products.md）。将"这是我要构建的商品系列和品牌，需要 N 积分——可以吗？"整合到这一个问题中。
• 用户显然想用自己的品牌，但未提供品牌名称。

其他所有情况：自行决定、构建、报告。

全流程

1. 简报 + 品牌 —— references/brand.md。以包含品牌的网站文件夹结束。
2. 产品 —— references/products.md。生成（获得许可后）、抠图、编目录。如果用户拒绝消费或 Higgsfield 不可用，则使用用户自己的照片；仍不行则保留示例衬衫并明确说明它们是占位符。
3. 展示 —— references/rail.md：文案、尺寸、容器。
4. 结账 —— references/checkout.md。
5. 旅程 —— references/journey.md：确认每个场景都体现了品牌；根据简报要求进行修改。
6. 验证 —— python3 scripts/check_site.py <site>，然后按照 references/verify.md 在浏览器中运行。不要跳过：此类构建中的大多数缺陷仅在屏幕截图中可见。
7. 报告 —— 网站位置及打开方式；构建完成的简报（包括您做出的决定）；占位内容（名称、价格、临时 Logo、演示支付）；使用的积分；未检查的内容。

网站文件结构

index.html          所有标记：展示区、容器、查看器、抽屉、支付、旅程字幕、HUD
css/style.css       所有样式；品牌令牌位于顶部的 :root 变量
js/data.js          PRODUCTS（生成的）、CONFIG（容器+用语）、ORIGIN、CITIES
js/shop.js          展示、悬停旋转、拖拽、查看器、购物车、抽屉、演示支付
js/main.js          切换店铺与旅程模式，自动播放（SECONDS = 完整播放时长）
js/journey.js       四个 3D 世界、相机、滚动时间线
js/models.js        卡车和飞机模型
js/parcels.js       盒子（盖板、胶带、标签）和已封装的包裹
js/textures.js      在画布上绘制的所有纹理：包装艺术、标签、胶带、卡车侧面、标志、传送带、门垫
js/world.js         真实海岸线→点状地图、大圆航线
assets/logo.png     深色标记，透明背景；在代码中根据需要着色
assets/rail/        产品抠图：<slug>-front.webp, -back.webp, -side.webp
vendor/             three.js、光照辅助、海岸线数据
brand.json          网站当前品牌信息；由 scripts/apply_brand.py 编辑
serve.py            小型静态服务器： python3 serve.py 8792

质量标准（不可协商，无论品牌如何）

• 真实的抠图，侧面视角。 产品在静止时薄薄地悬挂，悬停时转向正面。一行扁平的正面图片无法呈现此效果。
• 单一调色板。 页面、包装、传送带、车辆和路线均使用品牌颜色。不要引入品牌不拥有的颜色；车辆灯具是唯一例外。
• 杜绝玩具感。 车辆、机器和建筑必须根据真实部件建模——看起来像玻璃的玻璃、灯具、格栅、带轮毂的轮子、门五金——而不是带圆柱体的盒子。参见 journey.md 中的装饰规则。
• 所有印刷品上必须有品牌标志和字体（包装、胶带、标签、卡车、尾翼、门垫）。长名称必须适配：模板会将文字缩小以适配；请检查是否完成。
• 支付屏幕是演示版。 它不收集任何银行卡信息，也不收取任何费用。除非用户明确要求连接真实支付提供商，否则保持此状态；绝不询问或处理真实卡号。
• 通过查看验证。 通过语法检查的代码仍可能渲染错误。
• 说明哪些是占位符或未验证的。

脚本

脚本	用途
scripts/new_site.py <site> [--brand b.json] [--force]	将模板复制到新文件夹（并应用品牌）
scripts/apply_brand.py <site> <b.json>	跨网站应用/更改品牌值（可重复运行）
scripts/make_logo.py "<名称>" <out.png>	当没有 Logo 时，生成字母组合临时方案
scripts/process_cutouts.py --raw <dir> --site <site> [--synth-side] [--append]	抠图、裁剪、调整产品图片大小；重写商品目录
scripts/check_site.py <site>	在浏览器运行之前进行静态健康检查

process_cutouts.py 和 make_logo.py 需要 Pillow；前者还需要 numpy、opencv-python 和 scipy（pip install pillow numpy opencv-python scipy）。